From a5a206f3d6883bf16a8a621ec5446e3462db77a9 Mon Sep 17 00:00:00 2001 From: Max Stoiber Date: Tue, 21 Jul 2020 07:46:54 -0700 Subject: [PATCH] feat(gatsby-admin): plugin search (#25903) * Copy plugin search from www into admin * Move to Combobox search * Cleanup * TypeScript cleanup * add algolia types * Fix syntax --- packages/gatsby-admin/package.json | 4 + .../src/components/plugin-search.tsx | 106 ++++++++++++++++++ .../gatsby-admin/src/components/providers.tsx | 1 + packages/gatsby-admin/src/pages/index.tsx | 87 ++------------ yarn.lock | 85 +++++++++++++- 5 files changed, 199 insertions(+), 84 deletions(-) create mode 100644 packages/gatsby-admin/src/components/plugin-search.tsx diff --git a/packages/gatsby-admin/package.json b/packages/gatsby-admin/package.json index d51d66ec01ab3..ed2fe5c7450c8 100644 --- a/packages/gatsby-admin/package.json +++ b/packages/gatsby-admin/package.json @@ -15,18 +15,22 @@ "@emotion/styled": "^10.0.27", "@typescript-eslint/eslint-plugin": "^2.28.0", "@typescript-eslint/parser": "^2.28.0", + "@types/react-instantsearch-dom": "^5.2.6", "csstype": "^2.6.10", "formik": "^2.1.4", "gatsby": "^2.24.7", "gatsby-interface": "0.0.173", "gatsby-plugin-typescript": "^2.4.16", "gatsby-source-graphql": "^2.6.2", + "lodash-es": "^4.17.15", "ncp": "^2.0.0", "nodemon": "^2.0.4", "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", + "remove-markdown": "^0.3.0", "strict-ui": "^0.1.3", "subscriptions-transport-ws": "^0.9.16", "theme-ui": "^0.4.0-alpha.3", diff --git a/packages/gatsby-admin/src/components/plugin-search.tsx b/packages/gatsby-admin/src/components/plugin-search.tsx new file mode 100644 index 0000000000000..269d9c59ee98e --- /dev/null +++ b/packages/gatsby-admin/src/components/plugin-search.tsx @@ -0,0 +1,106 @@ +/* @jsx jsx */ +import { jsx } from "strict-ui" +import { Spinner } from "theme-ui" +import { + InstantSearch, + Configure, + RefinementList, + ToggleRefinement, + connectAutoComplete, +} from "react-instantsearch-dom" +import { + Combobox, + ComboboxInput, + ComboboxPopover, + ComboboxList, + ComboboxOption, +} from "gatsby-interface" +import { useMutation } from "urql" + +const SearchCombobox: React.FC<{ + onSelect: (value: string) => void +}> = connectAutoComplete(({ hits, currentRefinement, refine, onSelect }) => ( + + refine(e.target.value)} + value={currentRefinement} + /> + + + {hits.map(hit => ( + + ))} + + + +)) + +// 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 ( +
+ +
+ + ): Array => + items.map(({ count, ...item }) => { + return { + ...item, + count: count || 0, + } + }) + } + defaultRefinement={[`gatsby-component`, `gatsby-plugin`]} + /> + +
+ {fetching ? ( + + ) : ( + { + installGatbyPlugin({ name: value }) + }} + /> + )} + +
+ ) +} + +export default PluginSearchInput diff --git a/packages/gatsby-admin/src/components/providers.tsx b/packages/gatsby-admin/src/components/providers.tsx index 4fe079d4269b7..2a312ee65182e 100644 --- a/packages/gatsby-admin/src/components/providers.tsx +++ b/packages/gatsby-admin/src/components/providers.tsx @@ -28,6 +28,7 @@ const theme = { "100%": `100%`, "16px": `16px`, "15em": `15em`, + "20em": `20em`, initial: `initial`, }, } diff --git a/packages/gatsby-admin/src/pages/index.tsx b/packages/gatsby-admin/src/pages/index.tsx index 2013915cfca9a..bd349610565e4 100644 --- a/packages/gatsby-admin/src/pages/index.tsx +++ b/packages/gatsby-admin/src/pages/index.tsx @@ -1,93 +1,18 @@ /** @jsx jsx */ import React from "react" import { jsx, Flex, Grid } from "strict-ui" +import { Spinner } from "theme-ui" import { useQuery, useMutation } from "urql" import { Heading, HeadingProps, Text, - Button, - InputField, - InputFieldControl, - ButtonProps, - InputFieldLabel, DropdownMenu, DropdownMenuButton, DropdownMenuItem, DropdownMenuItems, } from "gatsby-interface" - -const SecondaryButton: React.FC = props => ( - -) - -const InstallInput: React.FC<{ for: string }> = props => { - const inputId = `install-${props.for}` - const [value, setValue] = React.useState(``) - - const [{ fetching }, installGatbyPlugin] = useMutation(` - mutation installGatsbyPlugin($name: String!) { - createNpmPackage(npmPackage: { - name: $name, - dependencyType: "production" - }) { - id - name - } - createGatsbyPlugin(gatsbyPlugin: { - name: $name - }) { - id - name - } - } - `) - - return ( -
{ - evt.preventDefault() - if (value.indexOf(`gatsby-`) !== 0) return - - installGatbyPlugin({ - name: value, - }) - }} - > - - - Install {props.for}: - - setValue(e.target.value)} - sx={{ - width: `initial`, - }} - /> - - Install - - - - -
- ) -} +import PluginSearchBar from "../components/plugin-search" const SectionHeading: React.FC = props => ( @@ -181,7 +106,7 @@ const Index: React.FC<{}> = () => { `, }) - if (fetching) return

Loading...

+ if (fetching) return if (error) return

Oops something went wrong.

@@ -204,13 +129,15 @@ const Index: React.FC<{}> = () => { ))} - Installed Plugins + + Installed Plugins + {data.allGatsbyPlugin.nodes.map(plugin => ( ))} - + ) } diff --git a/yarn.lock b/yarn.lock index 55abcf7e936fe..e75a9221022aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3375,6 +3375,18 @@ "@theme-ui/core" "^0.4.0-rc.1" "@theme-ui/mdx" "^0.4.0-rc.1" +"@types/algoliasearch-helper@*": + version "2.26.1" + resolved "https://registry.yarnpkg.com/@types/algoliasearch-helper/-/algoliasearch-helper-2.26.1.tgz#60cf377e7cb4bd9a55f7eba35182792763230a24" + integrity sha512-JN1wq/yLxxBcc6MeSe57F9Aqv8wL964L0nBOUTSQ5OECzWxaECuGYV06VnGKn/c+9AGB97RAgqx2PUbYflZNqA== + dependencies: + "@types/algoliasearch" "*" + +"@types/algoliasearch@*": + version "3.34.10" + resolved "https://registry.yarnpkg.com/@types/algoliasearch/-/algoliasearch-3.34.10.tgz#08cd8f7018451197d7a51c21e1305794aca187b9" + integrity sha512-P6OKrRClvlVIF645zmRdGt3pK/IlBeFMAqB/OqM5Z/iYVFp8mSYMFR+uAdADsv0X/8AC6bIPAfj2x+mjslBuFg== + "@types/anymatch@*": version "1.3.1" resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" @@ -3801,10 +3813,33 @@ dependencies: "@types/react" "*" +<<<<<<< HEAD "@types/react@*", "@types/react@^16.9.31", "@types/react@^16.9.38": version "16.9.43" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.43.tgz#c287f23f6189666ee3bebc2eb8d0f84bcb6cdb6b" integrity sha512-PxshAFcnJqIWYpJbLPriClH53Z2WlJcVZE+NP2etUtWQs2s7yIMj3/LDKZT/5CHJ/F62iyjVCDu2H3jHEXIxSg== +======= +"@types/react-instantsearch-core@*": + version "6.3.0" + resolved "https://registry.yarnpkg.com/@types/react-instantsearch-core/-/react-instantsearch-core-6.3.0.tgz#74acc99250ce416a96a0b1896e127a283a9f6b76" + integrity sha512-EZVOXs9CBxTwGbIdYX/JUk2hB9/lkaGK0rSnbnJ9C1MXe73xEpV7THrlgaFg6BO+5yrEPAf2NazCALR1WpaVwA== + dependencies: + "@types/algoliasearch-helper" "*" + "@types/react" "*" + +"@types/react-instantsearch-dom@^5.2.6": + version "5.2.6" + resolved "https://registry.yarnpkg.com/@types/react-instantsearch-dom/-/react-instantsearch-dom-5.2.6.tgz#b47fc2c19b1aa8df06a95f67d01f5485abace8f0" + integrity sha512-gx7QBnL+rG50IUaIoj2SVwXT4O5HVOayQoEqiWF1RU1py43E+Wtlyi6WCdTEfEOz0sj6kWNEXAPMhfz+vjl9mQ== + dependencies: + "@types/react" "*" + "@types/react-instantsearch-core" "*" + +"@types/react@*", "@types/react@^16.9.31": + version "16.9.31" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.31.tgz#6a543529766c8934ec8a89667376c2e73e9e2636" + integrity sha512-NpYJpNMWScFXtx3A2BJMeew2G3+9SEslVWMdxNJ6DLvxIuxWjY1bizK9q5Y1ujhln31vtjmhjOAYDr9Xx3k9FQ== +>>>>>>> feat(gatsby-admin): plugin search (#25903) dependencies: "@types/prop-types" "*" csstype "^2.2.0" @@ -4567,7 +4602,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.5.0, ajv@^6.5.5, ajv@^ json-schema-traverse "^0.4.1" uri-js "^4.2.2" -algoliasearch@^3.35.1: +algoliasearch-helper@^2.26.0: + version "2.28.1" + resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-2.28.1.tgz#90c574ab7b80b8e85bcf9542688f19d547321102" + integrity sha512-4yg3anWdILD6ZJ/GxWmtu4HgxauSemhSqbe9Cx6SFdPzaMHrccew4IDomMeQlz9RHJwRgi5sEeX//jx2H/PaWg== + dependencies: + events "^1.1.1" + lodash "^4.17.5" + qs "^6.5.1" + +algoliasearch@^3.27.1, algoliasearch@^3.35.1: version "3.35.1" resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.35.1.tgz#297d15f534a3507cab2f5dfb996019cac7568f0c" integrity sha512-K4yKVhaHkXfJ/xcUnil04xiSrB8B8yHZoFEhWNpXg23eiCnqvTZw1tn/SqvdsANlYHLJlKl0qi3I/Q2Sqo7LwQ== @@ -6831,6 +6875,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.5: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== + clean-css@4.2.x, clean-css@^4.2.1: version "4.2.3" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78" @@ -10121,7 +10170,7 @@ eventemitter3@^4.0.0, eventemitter3@^4.0.4: resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384" integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ== -events@^1.1.0: +events@^1.1.0, events@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924" integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ= @@ -15839,7 +15888,7 @@ lockfile@1.0.4, lockfile@^1.0.4: dependencies: signal-exit "^3.0.2" -lodash-es@^4.17.11, lodash-es@^4.17.14: +lodash-es@^4.17.11, lodash-es@^4.17.14, lodash-es@^4.17.15: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78" integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ== @@ -20127,7 +20176,7 @@ qs@6.7.0: resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc" integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ== -qs@^6.1.0, qs@^6.4.0, qs@^6.5.2, qs@^6.7.0, qs@^6.9.4: +qs@^6.1.0, qs@^6.4.0, qs@^6.5.1, qs@^6.5.2, qs@^6.7.0, qs@^6.9.4: version "6.9.4" resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687" integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ== @@ -20407,6 +20456,29 @@ react-icons@^3.0.1, react-icons@^3.10.0: dependencies: camelcase "^5.0.0" +react-instantsearch-core@^5.7.0: + version "5.7.0" + resolved "https://registry.yarnpkg.com/react-instantsearch-core/-/react-instantsearch-core-5.7.0.tgz#6979ec419d2711033f6c83181de6cae9e1f064c2" + integrity sha512-fjexlv+hR8OyZraAmjwM+GmiVcJFzLUnufIKPMLO7/L4Mg5h0pETSXNBT22cCXTnda6XML//+GqQmWJFf+PBrA== + dependencies: + "@babel/runtime" "^7.1.2" + algoliasearch-helper "^2.26.0" + lodash "^4.17.4" + prop-types "^15.5.10" + +react-instantsearch-dom@^5.7.0: + version "5.7.0" + resolved "https://registry.yarnpkg.com/react-instantsearch-dom/-/react-instantsearch-dom-5.7.0.tgz#5a9b0cfb461c08a349a5fdc5d1cff50b8f5fcf56" + integrity sha512-FwFZZXwgaYtLrXD9KJNlrPVkfw8JOqVgpDBvra547udF4zbacZUuX7/qTyMHjVW/Lz59t5T25vCGLzmQiO89YA== + dependencies: + "@babel/runtime" "^7.1.2" + algoliasearch "^3.27.1" + algoliasearch-helper "^2.26.0" + classnames "^2.2.5" + lodash "^4.17.4" + prop-types "^15.5.10" + react-instantsearch-core "^5.7.0" + react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -21924,6 +21996,11 @@ remove-bom-stream@^1.2.0: safe-buffer "^5.1.0" through2 "^2.0.3" +remove-markdown@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/remove-markdown/-/remove-markdown-0.3.0.tgz#5e4b667493a93579728f3d52ecc1db9ca505dc98" + integrity sha1-XktmdJOpNXlyjz1S7MHbnKUF3Jg= + remove-trailing-separator@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"