diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/EmptyPluginGrid.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/EmptyNpmPackageGrid.js similarity index 94% rename from packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/EmptyPluginGrid.js rename to packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/EmptyNpmPackageGrid.js index 185aa66e1f..61b1501424 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/EmptyPluginGrid.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 ( {Array(12) diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js similarity index 79% rename from packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/index.js rename to packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyNpmPackageSearch/index.js index f7c7fa90e2..ed4d3390af 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/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 ( - + @@ -25,6 +25,8 @@ export const EmptyPluginSearch = ({ content }) => { ); }; -EmptyPluginSearch.propTypes = { +EmptyNpmPackageSearch.propTypes = { content: PropTypes.string.isRequired, }; + +export default EmptyNpmPackageSearch; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index 8ded439074..90b58df992 100644 --- 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 ( @@ -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 = () => { })} - {searchQuery.length > 0 && !searchResults.length ? ( - - ) : ( - - - - - {formatMessage({ - id: 'admin.pages.MarketPlacePage.plugins', - defaultMessage: 'Plugins', - })}{' '} - ({searchResults.length}) - - - {formatMessage({ - id: 'admin.pages.MarketPlacePage.providers', - defaultMessage: 'Providers', - })}{' '} - ({marketplaceProvidersResponse.data.length}) - - - - - + + + + + {formatMessage({ + id: 'admin.pages.MarketPlacePage.plugins', + defaultMessage: 'Plugins', + })}{' '} + ({pluginSearchResults.length}) + + + {formatMessage({ + id: 'admin.pages.MarketPlacePage.providers', + defaultMessage: 'Providers', + })}{' '} + ({providerSearchResults.length}) + + + + + {/* Plugins panel */} + + {searchQuery.length > 0 && !pluginSearchResults.length ? ( + + ) : ( - - + )} + + {/* Providers panel */} + + {searchQuery.length > 0 && !providerSearchResults.length ? ( + + ) : ( - - - - )} + )} + + + diff --git a/yarn.lock b/yarn.lock index 06e3e52f76..95f8cf095d 100644 --- 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"