Add providers search to marketplace

2025-09-25 08:19:07 +00:00 · 2022-06-08 11:09:00 +02:00 · 2022-06-08 11:09:00 +02:00 · 68b0c271df
commit 68b0c271df
parent 9d40d0caa7
4 changed files with 116 additions and 76 deletions
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/EmptyNpmPackageGrid.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/EmptyNpmPackageGrid.js
@ -9,7 +9,7 @@ const EmptyPluginCard = styled(Box)`
  opacity: 0.33;
 `;

-export const EmptyPluginGrid = () => {
+export const EmptyNpmPackageGrid = () => {
  return (
    <GridLayout>
      {Array(12)
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js
@ -5,12 +5,12 @@ import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Icon } from '@strapi/design-system/Icon';
 import EmptyStateDocument from '@strapi/icons/EmptyDocuments';
-import { EmptyPluginGrid } from './EmptyPluginGrid';
+import { EmptyNpmPackageGrid } from './EmptyNpmPackageGrid';

-export const EmptyPluginSearch = ({ content }) => {
+const EmptyNpmPackageSearch = ({ content }) => {
  return (
    <Box position="relative">
-      <EmptyPluginGrid />
+      <EmptyNpmPackageGrid />
      <Box position="absolute" top={11} width="100%">
        <Flex alignItems="center" justifyContent="center" direction="column">
          <Icon as={EmptyStateDocument} color="" width="160px" height="88px" />
@ -25,6 +25,8 @@ export const EmptyPluginSearch = ({ content }) => {
  );
 };

-EmptyPluginSearch.propTypes = {
+EmptyNpmPackageSearch.propTypes = {
  content: PropTypes.string.isRequired,
 };
+
+export default EmptyNpmPackageSearch;
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@ -21,7 +21,7 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Flex } from '@strapi/design-system/Flex';
 import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';

-import { EmptyPluginSearch } from './components/EmptyPluginSearch';
+import EmptyNpmPackageSearch from './components/EmptyNpmPackageSearch';
 import PageHeader from './components/PageHeader';
 import { fetchAppInformation } from './utils/api';
 import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
@ -33,8 +33,8 @@ import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
 import MissingPluginBanner from './components/MissingPluginBanner';
 import NpmPackagesGrid from './components/NpmPackagesGrid';

-const matchSearch = (plugins, search) => {
-  return matchSorter(plugins, search, {
+const matchSearch = (npmPackages, search) => {
+  return matchSorter(npmPackages, search, {
    keys: [
      {
        threshold: matchSorter.rankings.WORD_STARTS_WITH,
@ -74,14 +74,20 @@ const MarketPlacePage = () => {
    );
  };

-  const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } =
-    useFetchMarketplacePlugins(notifyMarketplaceLoad);
+  const {
+    status: marketplacePluginsStatus,
+    data: marketplacePluginsResponse,
+  } = useFetchMarketplacePlugins(notifyMarketplaceLoad);

-  const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } =
-    useFetchMarketplaceProviders(notifyMarketplaceLoad);
+  const {
+    status: marketplaceProvidersStatus,
+    data: marketplaceProvidersResponse,
+  } = useFetchMarketplaceProviders(notifyMarketplaceLoad);

-  const { status: installedPluginsStatus, data: installedPluginsResponse } =
-    useFetchInstalledPlugins();
+  const {
+    status: installedPluginsStatus,
+    data: installedPluginsResponse,
+  } = useFetchInstalledPlugins();

  const { data: appInfoResponse, status: appInfoStatus } = useQuery(
    'app-information',
@ -185,8 +191,19 @@ const MarketPlacePage = () => {
    );
  }

-  const searchResults = matchSearch(marketplacePluginsResponse.data, searchQuery);
-  const installedPluginNames = installedPluginsResponse.plugins.map((plugin) => plugin.packageName);
+  // Search for plugins and providers that match the search query
+  const pluginSearchResults = matchSearch(marketplacePluginsResponse.data, searchQuery);
+  const providerSearchResults = matchSearch(marketplaceProvidersResponse.data, searchQuery);
+  const emptySearchMessage = formatMessage(
+    {
+      id: 'admin.pages.MarketPlacePage.search.empty',
+      defaultMessage: 'No result for "{target}"',
+    },
+    { target: searchQuery }
+  );
+
+  // Check if plugins are installed already
+  const installedPluginNames = installedPluginsResponse.plugins.map(plugin => plugin.packageName);

  return (
    <Layout>
@ -204,7 +221,7 @@ const MarketPlacePage = () => {
              name="searchbar"
              onClear={() => setSearchQuery('')}
              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+              onChange={e => setSearchQuery(e.target.value)}
              clearLabel={formatMessage({
                id: 'admin.pages.MarketPlacePage.search.clear',
                defaultMessage: 'Clear the plugin search',
@ -220,64 +237,62 @@ const MarketPlacePage = () => {
              })}
            </Searchbar>
          </Box>
-          {searchQuery.length > 0 && !searchResults.length ? (
-            <EmptyPluginSearch
-              content={formatMessage(
-                {
-                  id: 'admin.pages.MarketPlacePage.search.empty',
-                  defaultMessage: 'No result for "{target}"',
-                },
-                { target: searchQuery }
-              )}
-            />
-          ) : (
-            <TabGroup
-              label={formatMessage({
-                id: 'admin.pages.MarketPlacePage.tab-group.label',
-                defaultMessage: 'Plugins and Providers for Strapi',
-              })}
-              id="tabs"
-              variant="simple"
-            >
-              <Box paddingBottom={4}>
-                <Tabs>
-                  <Tab>
-                    {formatMessage({
-                      id: 'admin.pages.MarketPlacePage.plugins',
-                      defaultMessage: 'Plugins',
-                    })}{' '}
-                    ({searchResults.length})
-                  </Tab>
-                  <Tab>
-                    {formatMessage({
-                      id: 'admin.pages.MarketPlacePage.providers',
-                      defaultMessage: 'Providers',
-                    })}{' '}
-                    ({marketplaceProvidersResponse.data.length})
-                  </Tab>
-                </Tabs>
-              </Box>
-              <TabPanels>
-                <TabPanel>
+          <TabGroup
+            label={formatMessage({
+              id: 'admin.pages.MarketPlacePage.tab-group.label',
+              defaultMessage: 'Plugins and Providers for Strapi',
+            })}
+            id="tabs"
+            variant="simple"
+          >
+            <Box paddingBottom={4}>
+              <Tabs>
+                <Tab>
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.plugins',
+                    defaultMessage: 'Plugins',
+                  })}{' '}
+                  ({pluginSearchResults.length})
+                </Tab>
+                <Tab>
+                  {formatMessage({
+                    id: 'admin.pages.MarketPlacePage.providers',
+                    defaultMessage: 'Providers',
+                  })}{' '}
+                  ({providerSearchResults.length})
+                </Tab>
+              </Tabs>
+            </Box>
+            <TabPanels>
+              {/* Plugins panel */}
+              <TabPanel>
+                {searchQuery.length > 0 && !pluginSearchResults.length ? (
+                  <EmptyNpmPackageSearch content={emptySearchMessage} />
+                ) : (
                  <NpmPackagesGrid
-                    npmPackages={searchResults}
+                    npmPackages={pluginSearchResults}
                    installedPackageNames={installedPluginNames}
                    useYarn={appInfoResponse.data.useYarn}
                    isInDevelopmentMode={isInDevelopmentMode}
                    npmPackageType="plugin"
                  />
-                </TabPanel>
-                <TabPanel>
+                )}
+              </TabPanel>
+              {/* Providers panel */}
+              <TabPanel>
+                {searchQuery.length > 0 && !providerSearchResults.length ? (
+                  <EmptyNpmPackageSearch content={emptySearchMessage} />
+                ) : (
                  <NpmPackagesGrid
-                    npmPackages={marketplaceProvidersResponse.data}
+                    npmPackages={providerSearchResults}
                    useYarn={appInfoResponse.data.useYarn}
                    isInDevelopmentMode={isInDevelopmentMode}
                    npmPackageType="provider"
                  />
-                </TabPanel>
-              </TabPanels>
-            </TabGroup>
-          )}
+                )}
+              </TabPanel>
+            </TabPanels>
+          </TabGroup>
          <Box paddingTop={7}>
            <MissingPluginBanner />
          </Box>
--- a/yarn.lock
+++ b/yarn.lock
@ -17054,11 +17054,16 @@ node-addon-api@^3.0.0:
  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161"
  integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==

-node-addon-api@^4.2.0, node-addon-api@^4.3.0:
+node-addon-api@^4.2.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-4.3.0.tgz#52a1a0b475193e0928e98e0426a0d1254782b77f"
  integrity sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==

+node-addon-api@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-5.0.0.tgz#7d7e6f9ef89043befdb20c1989c905ebde18c501"
+  integrity sha512-CvkDw2OEnme7ybCykJpVcKH+uAOLV2qLqiyla128dN9TkEWfrYmxG6C2boDe5KcNQqZF3orkqzGgOMvZ/JNekA==
+
 node-dir@^0.1.10:
  version "0.1.17"
  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
@ -18862,7 +18867,7 @@ postgres-interval@^1.1.0:
  dependencies:
    xtend "^4.0.0"

-prebuild-install@^7.0.0, prebuild-install@^7.0.1:
+prebuild-install@^7.0.0:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.1.tgz#c10075727c318efe72412f333e0ef625beaf3870"
  integrity sha512-QBSab31WqkyxpnMWQxubYAHR5S9B2+r81ucocew34Fkl98FhvKIF50jIJnNOBmAZfyNV7vE5T6gd3hTVWgY6tg==
@ -18881,6 +18886,24 @@ prebuild-install@^7.0.0, prebuild-install@^7.0.1:
    tar-fs "^2.0.0"
    tunnel-agent "^0.6.0"

+prebuild-install@^7.1.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
+  integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==
+  dependencies:
+    detect-libc "^2.0.0"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.3"
+    mkdirp-classic "^0.5.3"
+    napi-build-utils "^1.0.1"
+    node-abi "^3.3.0"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^4.0.0"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@ -20911,15 +20934,15 @@ shallowequal@^1.1.0:
  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==

-sharp@0.30.4:
-  version "0.30.4"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.4.tgz#73d9daa63bbc20da189c9328d75d5d395fc8fb73"
-  integrity sha512-3Onig53Y6lji4NIZo69s14mERXXY/GV++6CzOYx/Rd8bnTwbhFbL09WZd7Ag/CCnA0WxFID8tkY0QReyfL6v0Q==
+sharp@0.30.6:
+  version "0.30.6"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.6.tgz#02264e9826b5f1577509f70bb627716099778873"
+  integrity sha512-lSdVxFxcndzcXggDrak6ozdGJgmIgES9YVZWtAFrwi+a/H5vModaf51TghBtMPw+71sLxUsTy2j+aB7qLIODQg==
  dependencies:
    color "^4.2.3"
    detect-libc "^2.0.1"
-    node-addon-api "^4.3.0"
-    prebuild-install "^7.0.1"
+    node-addon-api "^5.0.0"
+    prebuild-install "^7.1.0"
    semver "^7.3.7"
    simple-get "^4.0.1"
    tar-fs "^2.1.1"
@ -22021,10 +22044,10 @@ svg-tags@^1.0.0:
  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=

-swagger-ui-dist@3.47.1:
-  version "3.47.1"
-  resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-3.47.1.tgz#03b214a40d61e417051879cdb4a96f9c6b518a38"
-  integrity sha512-7b9iHDC/GGC9SJLd3HiV/3EnsJ3wu7xN8Q4MpOPfQO8UG7TQFG2TMTDkvvy0SNeqxQY0tGQY0ppZC9a95tW3kg==
+swagger-ui-dist@4.11.1:
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-4.11.1.tgz#1e9c0e62bdac632f7b206c95ef9cbe986097606a"
+  integrity sha512-pf3kfSTYdF9mYFY2VnfJ51wnXlSVhEGdtymhpHzfbFw2jTbiEWgBoVz5EB9aW2EaJvUGTM1YHAXYZX7Jk4RdAQ==

 swap-case@^1.1.0:
  version "1.1.2"