fix(www): hide feedback and edit on github for remote packages (#9678)

For plugins not hosted in gatsby/package, the 2 features (feedback and edit in github) in the footer does not work as intended. 

This PR removes edit in github from the footer for remote packages.

<img width="1217" alt="screen shot 2018-11-03 at 8 24 14 pm" src="https://user-images.githubusercontent.com/1014413/47950452-b344dd00-dfa6-11e8-88be-99e07a18cb8f.png">

Author: hbish

www/src/components/markdown-page-footer.js

@@ -1,106 +1,48 @@
 import React from "react"
 import { graphql } from "gatsby"
 import EditIcon from "react-icons/lib/md/create"
-import CheckIcon from "react-icons/lib/md/thumb-up"
-import CrossIcon from "react-icons/lib/md/thumb-down"
-import { GraphQLClient } from "graphql-request"
 
 import { rhythm, scale } from "../utils/typography"
 import { colors } from "../utils/presets"
 
-const client = new GraphQLClient(
-  `https://api.graph.cool/relay/v1/cj8xuo77f0a3a0164y7jketkr`
-)
-
-function sendReview(thumbsUp, relativePath) {
-  return client.request(`
-    mutation {
-      createReview(input: {thumbsUp: ${thumbsUp}, relativePath: "${relativePath}", clientMutationId: "1"}) {
-        review {
-          id
-        }
-      }
-    }
-  `)
-}
-
 export default class MarkdownPageFooter extends React.Component {
   constructor() {
     super()
     this.state = { feedbackSubmitted: false }
   }
   render() {
-    return [
-      <hr css={{ marginTop: rhythm(2) }} key="hr" />,
-      <div
-        css={{
-          marginBottom: rhythm(1),
-        }}
-        key="div"
-      >
-        {this.state.feedbackSubmitted ? (
-          <span css={{ lineHeight: rhythm(2) }}>Thank you!</span>
-        ) : (
-          <span css={{ lineHeight: rhythm(2) }}>
-            Was this helpful?
-            {` `}
-            <CheckIcon
-              onClick={() => {
-                sendReview(true, this.props.page.parent.relativePath)
-                this.setState({ feedbackSubmitted: true })
-              }}
-              css={{
-                color: colors.success,
-                fontSize: rhythm(1.3),
-                padding: rhythm(0.2),
-                position: `relative`,
-                top: -3,
-                marginLeft: rhythm(1 / 4),
-                cursor: `pointer`,
-              }}
-            />
+    return (
+      <>
+        <hr css={{ marginTop: rhythm(2) }} />
+
+        {this.props.page && (
+          <a
+            css={{
+              "&&": {
+                display: `block`,
+                color: colors.gray.calm,
+                fontSize: scale(-1 / 5).fontSize,
+                fontWeight: `normal`,
+                border: `none`,
+                boxShadow: `none`,
+                padding: rhythm(1 / 2),
+                "&:hover": {
+                  background: `transparent`,
+                  color: colors.gatsby,
+                },
+              },
+            }}
+            href={`https://github.com/gatsbyjs/gatsby/blob/master/${
+              this.props.packagePage ? `packages` : `docs`
+            }/${this.props.page ? this.props.page.parent.relativePath : ``}`}
+          >
+            <EditIcon css={{ fontSize: 20, position: `relative`, top: -2 }} />
             {` `}
-            <CrossIcon
-              onClick={() => {
-                sendReview(false, this.props.page.parent.relativePath)
-                this.setState({ feedbackSubmitted: true })
-              }}
-              css={{
-                color: colors.warning,
-                fontSize: rhythm(1.3),
-                padding: rhythm(0.2),
-                cursor: `pointer`,
-              }}
-            />
-          </span>
+            edit this page on GitHub
+          </a>
         )}
-        <a
-          css={{
-            "&&": {
-              float: `right`,
-              display: `block`,
-              color: colors.gray.calm,
-              fontSize: scale(-1 / 5).fontSize,
-              fontWeight: `normal`,
-              border: `none`,
-              boxShadow: `none`,
-              padding: rhythm(1 / 2),
-              "&:hover": {
-                background: `transparent`,
-                color: colors.gatsby,
-              },
-            },
-          }}
-          href={`https://github.com/gatsbyjs/gatsby/blob/master/${
-            this.props.packagePage ? `packages` : `docs`
-          }/${this.props.page ? this.props.page.parent.relativePath : ``}`}
-        >
-          <EditIcon css={{ fontSize: 20, position: `relative`, top: -2 }} />
-          {` `}
-          edit this page on GitHub
-        </a>
-      </div>,
-    ]
+      </>
+    )
   }
 }
 

www/src/templates/template-docs-remote-packages.js

@@ -2,28 +2,36 @@ import React from "react"
 import { graphql } from "gatsby"
 
 import PackageReadme from "../components/package-readme"
+import Unbird from "../components/unbird"
 
 class DocsRemotePackagesTemplate extends React.Component {
   render() {
     const {
       data: { npmPackage, markdownRemark },
     } = this.props
     return (
-      <PackageReadme
-        page={markdownRemark}
-        packageName={npmPackage.name}
-        excerpt={npmPackage.readme.childMarkdownRemark.excerpt}
-        html={npmPackage.readme.childMarkdownRemark.html}
-        githubUrl={
-          npmPackage.repository !== null
-            ? npmPackage.repository.url
-            : `https://github.com/search?q=${npmPackage.name}`
-        }
-        modified={npmPackage.modified}
-        timeToRead={npmPackage.readme.childMarkdownRemark.timeToRead}
-        keywords={npmPackage.keywords}
-        lastPublisher={npmPackage.lastPublisher}
-      />
+      <>
+        <PackageReadme
+          page={markdownRemark}
+          packageName={npmPackage.name}
+          excerpt={npmPackage.readme.childMarkdownRemark.excerpt}
+          html={npmPackage.readme.childMarkdownRemark.html}
+          githubUrl={
+            npmPackage.repository !== null
+              ? npmPackage.repository.url
+              : `https://github.com/search?q=${npmPackage.name}`
+          }
+          modified={npmPackage.modified}
+          timeToRead={npmPackage.readme.childMarkdownRemark.timeToRead}
+          keywords={npmPackage.keywords}
+          lastPublisher={npmPackage.lastPublisher}
+        />
+        <Unbird
+          dataSetId="5c1ac24b4a828a169b6c235c"
+          publicKey={process.env.UNBIRD_FEEDBACK_KEY_PLUGINLIB}
+          feedbackPrompt="Have feedback on the Plugin Library?"
+        />
+      </>
     )
   }
 }