Merge pull request #13543 from strapi/features/providers

[Marketplace] Add providers to marketplace

packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js

@@ -0,0 +1,23 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchMarketplacePlugins } from './utils/api';
+
+const useFetchMarketplaceProviders = (notifyLoad) => {
+  const toggleNotification = useNotification();
+
+  return useQuery('list-marketplace-providers', () => fetchMarketplacePlugins(), {
+    onSuccess: () => {
+      if (notifyLoad) {
+        notifyLoad();
+      }
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+    },
+  });
+};
+
+export default useFetchMarketplaceProviders;

packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
+
+const fetchMarketplacePlugins = async () => {
+  const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`);
+
+  return data;
+};
+
+export { fetchMarketplacePlugins };

packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/EmptyPluginGrid.js → 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)

packages/core/admin/admin/src/pages/MarketplacePage/components/EmptyPluginSearch/index.js → 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;

packages/core/admin/admin/src/pages/MarketplacePage/components/PluginCard/index.js → packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js

@@ -25,12 +25,18 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode }) => {
-  const { attributes } = plugin;
+const NpmPackageCard = ({
+  npmPackage,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
+  const { attributes } = npmPackage;
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
-  const isInstalled = installedPluginNames.includes(attributes.npmPackageName);
+  const isInstalled = installedPackageNames.includes(attributes.npmPackageName);
 
   const commandToCopy = useYarn
     ? `yarn add ${attributes.npmPackageName}`
@@ -41,6 +47,11 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
     defaultMessage: 'Made by Strapi',
   });
 
+  const npmPackageHref =
+    npmPackageType === 'provider'
+      ? attributes.npmPackageUrl
+      : `https://market.strapi.io/plugins/${attributes.slug}`;
+
   return (
     <Flex
       direction="column"
@@ -107,7 +118,7 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
       <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
         <LinkButton
           size="S"
-          href={`https://market.strapi.io/plugins/${attributes.slug}`}
+          href={npmPackageHref}
           isExternal
           endIcon={<ExternalLink />}
           aria-label={formatMessage(
@@ -135,12 +146,12 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
   );
 };
 
-PluginCard.defaultProps = {
+NpmPackageCard.defaultProps = {
   isInDevelopmentMode: false,
 };
 
-PluginCard.propTypes = {
-  plugin: PropTypes.shape({
+NpmPackageCard.propTypes = {
+  npmPackage: PropTypes.shape({
     id: PropTypes.string.isRequired,
     attributes: PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -153,12 +164,13 @@ PluginCard.propTypes = {
       developerName: PropTypes.string.isRequired,
       validated: PropTypes.bool.isRequired,
       madeByStrapi: PropTypes.bool.isRequired,
-      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']).isRequired,
+      strapiCompatibility: PropTypes.oneOf(['v3', 'v4']),
     }).isRequired,
   }).isRequired,
-  installedPluginNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+  installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool,
+  npmPackageType: PropTypes.string.isRequired,
 };
 
-export default PluginCard;
+export default NpmPackageCard;

packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import NpmPackageCard from '../NpmPackageCard';
+
+const NpmPackagesGrid = ({
+  npmPackages,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
+  return (
+    <Grid gap={4}>
+      {npmPackages.map((npmPackage) => (
+        <GridItem col={4} s={6} xs={12} style={{ height: '100%' }} key={npmPackage.id}>
+          <NpmPackageCard
+            npmPackage={npmPackage}
+            installedPackageNames={installedPackageNames}
+            useYarn={useYarn}
+            isInDevelopmentMode={isInDevelopmentMode}
+            npmPackageType={npmPackageType}
+          />
+        </GridItem>
+      ))}
+    </Grid>
+  );
+};
+
+NpmPackagesGrid.defaultProps = {
+  installedPackageNames: [],
+};
+
+NpmPackagesGrid.propTypes = {
+  npmPackages: PropTypes.array.isRequired,
+  installedPackageNames: PropTypes.arrayOf(PropTypes.string),
+  useYarn: PropTypes.bool.isRequired,
+  isInDevelopmentMode: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string.isRequired,
+};
+
+export default NpmPackagesGrid;

packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js

@@ -6,10 +6,12 @@ import { LinkButton } from '@strapi/design-system/v2/LinkButton';
 import Upload from '@strapi/icons/Upload';
 import { useTracking } from '@strapi/helper-plugin';
 
-const PageHeader = ({ isOnline }) => {
+const PageHeader = ({ isOnline, npmPackageType }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
+  const tracking = npmPackageType === 'provider' ? 'didSubmitProvider' : 'didSubmitPlugin';
+
   return (
     <HeaderLayout
       title={formatMessage({
@@ -25,13 +27,13 @@ const PageHeader = ({ isOnline }) => {
           <LinkButton
             startIcon={<Upload />}
             variant="tertiary"
-            href="https://market.strapi.io/submit-plugin"
-            onClick={() => trackUsage('didSubmitPlugin')}
+            href={`https://market.strapi.io/submit-${npmPackageType}`}
+            onClick={() => trackUsage(tracking)}
             isExternal
           >
             {formatMessage({
-              id: 'admin.pages.MarketPlacePage.submit.plugin.link',
-              defaultMessage: 'Submit your plugin',
+              id: `admin.pages.MarketPlacePage.submit.${npmPackageType}.link`,
+              defaultMessage: `Submit ${npmPackageType}`,
             })}
           </LinkButton>
         )
@@ -42,6 +44,11 @@ const PageHeader = ({ isOnline }) => {
 
 export default PageHeader;
 
+PageHeader.defaultProps = {
+  npmPackageType: 'plugin',
+};
+
 PageHeader.propTypes = {
   isOnline: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string,
 };