feat(gatsby-admin): plugin view (#26195)

* feat(gatsby-admin): plugin view

* Add readme field to plugin provider

* Fetch npm data for plugin on plugin details page

* Render view on GitHub and readme

* Handle new plugins and install flow from plugin screen

* Redirect to /plugins/{name} on plugin search and fix homepage loading state

* Rework loading states on plugin pages

* Cleanup, add GitHub icon

* Render metadata

* Render markdown but ugly

* Delete duplicate headers

* Make markdown readable

* Use interface components to render text and headings in markdown

* Render code snippets kinda nicely

* Clean up inline code

* Add first syntax highlighting to readme code blocks

* Remove unused imports

* Add readmes to pluign provider test snapshots

* Share Algolia API keys

* Extract homepagePath into own variable

Author: mxstbr

packages/gatsby-admin/gatsby-config.js

@@ -1,16 +1,28 @@
 module.exports = {
-  plugins: [{
-    resolve: "gatsby-plugin-react-helmet"
-  }, {
-    resolve: "gatsby-plugin-webfonts",
-    options: {
-      fonts: {
-        google: [{
-          family: `Inter`,
-          variants: [`400`, `600`, `800`]
-        }]
-      }
-    }
-  }],
-  pathPrefix: `/___admin`
-};
+  plugins: [
+    {
+      resolve: "gatsby-plugin-react-helmet",
+      options: {},
+    },
+    {
+      resolve: "gatsby-plugin-webfonts",
+      options: {
+        fonts: {
+          google: [
+            {
+              family: `Inter`,
+              variants: [`400`, `600`, `800`],
+            },
+          ],
+        },
+      },
+    },
+    {
+      resolve: "gatsby-plugin-create-client-paths",
+      options: {
+        prefixes: ["/plugins/*"],
+      },
+    },
+  ],
+  pathPrefix: `/___admin`,
+}

packages/gatsby-admin/package.json

@@ -27,11 +27,13 @@
     "lodash-es": "^4.17.15",
     "ncp": "^2.0.0",
     "nodemon": "^2.0.4",
+    "prism-react-renderer": "^1.1.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^3.10.0",
     "react-instantsearch-dom": "^5.7.0",
+    "react-markdown": "^4.3.1",
     "remove-markdown": "^0.3.0",
     "rimraf": "^3.0.2",
     "strict-ui": "^0.2.0-0",

packages/gatsby-admin/src/components/instantsearch-provider.tsx

@@ -0,0 +1,49 @@
+/* @jsx jsx */
+import { jsx } from "strict-ui"
+import {
+  InstantSearch,
+  Configure,
+  RefinementList,
+  ToggleRefinement,
+} from "react-instantsearch-dom"
+import algoliaConfig from "../utils/algolia-config"
+
+export default function InstantSearchProvider({
+  children,
+  searchState,
+}: {
+  children: React.ReactNode
+  searchState?: string
+}): JSX.Element {
+  return (
+    <InstantSearch
+      apiKey={algoliaConfig.API_KEY}
+      appId={algoliaConfig.APPLICATION_ID}
+      indexName="npm-search"
+      searchState={searchState}
+    >
+      <div style={{ display: `none` }}>
+        <Configure analyticsTags={[`gatsby-plugins`]} />
+        <RefinementList
+          attribute="keywords"
+          transformItems={(items: Array<any>): Array<any> =>
+            items.map(({ count, ...item }) => {
+              return {
+                ...item,
+                count: count || 0,
+              }
+            })
+          }
+          defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
+        />
+        <ToggleRefinement
+          attribute="deprecated"
+          value={false}
+          label="No deprecated plugins"
+          defaultRefinement={true}
+        />
+      </div>
+      {children}
+    </InstantSearch>
+  )
+}

packages/gatsby-admin/src/components/manage-plugin-modal.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "urql"
 import { FeedbackForm } from "feedback-fish"
 import externalLinkIcon from "../external-link.svg"
 import graphqlIcon from "../graphql.svg"
+import { Link } from "gatsby"
 
 function SendFeedbackButton(props): JSX.Element {
   return (
@@ -14,6 +15,8 @@ function SendFeedbackButton(props): JSX.Element {
   )
 }
 
+const homepagePath = process.env.NODE_ENV === `development` ? `/` : `/___admin`
+
 function Navbar(): JSX.Element {
   const [{ data }] = useQuery({
     query: `
@@ -35,7 +38,14 @@ function Navbar(): JSX.Element {
         paddingY: 5,
       }}
     >
-      <Flex gap={5} alignItems="baseline">
+      <Flex
+        as={Link}
+        // @ts-ignore
+        to={homepagePath}
+        gap={5}
+        alignItems="baseline"
+        sx={{ textDecoration: `none` }}
+      >
         <Text sx={{ textTransform: `uppercase`, fontSize: 0 }}>
           Gatsby Admin
         </Text>

packages/gatsby-admin/src/components/navbar.tsx

@@ -1,21 +1,15 @@
 /* @jsx jsx */
 import { jsx } from "strict-ui"
-import { Spinner } from "theme-ui"
-import {
-  InstantSearch,
-  Configure,
-  RefinementList,
-  ToggleRefinement,
-  connectAutoComplete,
-} from "react-instantsearch-dom"
+import { connectAutoComplete } from "react-instantsearch-dom"
 import {
   Combobox,
   ComboboxInput,
   ComboboxPopover,
   ComboboxList,
   ComboboxOption,
 } from "gatsby-interface"
-import { useMutation } from "urql"
+import InstantSearchProvider from "./instantsearch-provider"
+import { navigate } from "gatsby-link"
 
 const SearchCombobox: React.FC<{
   onSelect: (value: string) => void
@@ -42,65 +36,16 @@ const SearchCombobox: React.FC<{
 ))
 
 // the search bar holds the Search component in the InstantSearch widget
-const PluginSearchInput: React.FC<{}> = () => {
-  const [{ fetching }, installGatbyPlugin] = useMutation(`
-    mutation installGatsbyPlugin($name: String!) {
-      createNpmPackage(npmPackage: {
-        name: $name,
-        dependencyType: "production"
-      }) {
-        id
-        name
-      }
-      createGatsbyPlugin(gatsbyPlugin: {
-        name: $name
-      }) {
-        id
-        name
-      }
-    }
-  `)
-
-  return (
-    <div>
-      <InstantSearch
-        apiKey="ae43b69014c017e05950a1cd4273f404"
-        appId="OFCNCOG2CU"
-        indexName="npm-search"
-      >
-        <div style={{ display: `none` }}>
-          <Configure analyticsTags={[`gatsby-plugins`]} />
-          <RefinementList
-            attribute="keywords"
-            transformItems={(items: Array<any>): Array<any> =>
-              items.map(({ count, ...item }) => {
-                return {
-                  ...item,
-                  count: count || 0,
-                }
-              })
-            }
-            defaultRefinement={[`gatsby-component`, `gatsby-plugin`]}
-          />
-          <ToggleRefinement
-            attribute="deprecated"
-            value={false}
-            label="No deprecated plugins"
-            defaultRefinement={true}
-          />
-        </div>
-        {fetching ? (
-          <Spinner />
-        ) : (
-          <SearchCombobox
-            onSelect={(value): void => {
-              installGatbyPlugin({ name: value })
-            }}
-          />
-        )}
-      </InstantSearch>
-    </div>
-  )
-}
+const PluginSearchInput: React.FC<{}> = () => (
+  <div>
+    <InstantSearchProvider>
+      <SearchCombobox
+        onSelect={(name): void => {
+          navigate(`/plugins/${name}`)
+        }}
+      />
+    </InstantSearchProvider>
+  </div>
+)
 
 export default PluginSearchInput