Skip to content

Commit

Permalink
Add providers search to marketplace
Browse files Browse the repository at this point in the history
  • Loading branch information
@remidej
remidej committed Jun 8, 2022
1 parent 9d40d0c commit 68b0c27
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 76 deletions.
2 changes: 1 addition & 1 deletion ...ents/EmptyPluginSearch/EmptyPluginGrid.js → ...tyNpmPackageSearch/EmptyNpmPackageGrid.js
View file
Expand Up @@ -9,7 +9,7 @@ const EmptyPluginCard = styled(Box)`
opacity: 0.33;
`;

export const EmptyPluginGrid = () => {
export const EmptyNpmPackageGrid = () => {
return (
<GridLayout>
{Array(12)
Expand Down
10 changes: 6 additions & 4 deletions ...age/components/EmptyPluginSearch/index.js → ...components/EmptyNpmPackageSearch/index.js
View file
Expand Up @@ -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" />
Expand All @@ -25,6 +25,8 @@ export const EmptyPluginSearch = ({ content }) => {
);
};

EmptyPluginSearch.propTypes = {
EmptyNpmPackageSearch.propTypes = {
content: PropTypes.string.isRequired,
};

export default EmptyNpmPackageSearch;
133 changes: 74 additions & 59 deletions packages/core/admin/admin/src/pages/MarketplacePage/index.js
View file
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
Expand All @@ -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',
Expand All @@ -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>
Expand Down
47 changes: 35 additions & 12 deletions yarn.lock
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 68b0c27

Please sign in to comment.