From 29558b960f9e557ce53cb066a8cda7aff6c8bdd2 Mon Sep 17 00:00:00 2001
From: Mark Kaylor <mark.kaylor@strapi.io>
Date: Tue, 7 Jun 2022 09:45:54 +0200
Subject: [PATCH] point providers to npm

---
 .../components/NpmPackageCard/index.js           | 16 ++++++++++++++--
 .../components/NpmPackagesGrid/index.js          | 10 +++++++++-
 .../admin/src/pages/MarketplacePage/index.js     |  4 +++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js
index 57e8ef767c..7a335f4b62 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js
@@ -25,7 +25,13 @@ const EllipsisText = styled(Typography)`
   overflow: hidden;
 `;
 
-const NpmPackageCard = ({ npmPackage, installedPackageNames, useYarn, isInDevelopmentMode }) => {
+const NpmPackageCard = ({
+  npmPackage,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
   const { attributes } = npmPackage;
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
@@ -41,6 +47,11 @@ const NpmPackageCard = ({ npmPackage, installedPackageNames, useYarn, isInDevelo
     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 NpmPackageCard = ({ npmPackage, installedPackageNames, useYarn, isInDevelo
       <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(
@@ -159,6 +170,7 @@ NpmPackageCard.propTypes = {
   installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired,
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool,
+  npmPackageType: PropTypes.string.isRequired,
 };
 
 export default NpmPackageCard;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js
index 8a3f4dc9fc..9b16bc4bc3 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js
@@ -3,7 +3,13 @@ import PropTypes from 'prop-types';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import NpmPackageCard from '../NpmPackageCard';
 
-const NpmPackagesGrid = ({ npmPackages, installedPackageNames, useYarn, isInDevelopmentMode }) => {
+const NpmPackagesGrid = ({
+  npmPackages,
+  installedPackageNames,
+  useYarn,
+  isInDevelopmentMode,
+  npmPackageType,
+}) => {
   return (
     <Grid gap={4}>
       {npmPackages.map((npmPackage) => (
@@ -13,6 +19,7 @@ const NpmPackagesGrid = ({ npmPackages, installedPackageNames, useYarn, isInDeve
             installedPackageNames={installedPackageNames}
             useYarn={useYarn}
             isInDevelopmentMode={isInDevelopmentMode}
+            npmPackageType={npmPackageType}
           />
         </GridItem>
       ))}
@@ -29,6 +36,7 @@ NpmPackagesGrid.propTypes = {
   installedPackageNames: PropTypes.arrayOf(PropTypes.string),
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string.isRequired,
 };
 
 export default NpmPackagesGrid;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index a59c36b966..93a3b464b3 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -231,7 +231,7 @@ const MarketPlacePage = () => {
               )}
             />
           ) : (
-            <TabGroup label="Some stuff for the label" id="tabs" variant="simple">
+            <TabGroup label="Plugins and Providers for Strapi" id="tabs" variant="simple">
               <Box paddingBottom={4}>
                 <Tabs>
                   <Tab>Plugins ({searchResults.length})</Tab>
@@ -245,6 +245,7 @@ const MarketPlacePage = () => {
                     installedPackageNames={installedPluginNames}
                     useYarn={appInfoResponse.data.useYarn}
                     isInDevelopmentMode={isInDevelopmentMode}
+                    npmPackageType="plugin"
                   />
                 </TabPanel>
                 <TabPanel>
@@ -252,6 +253,7 @@ const MarketPlacePage = () => {
                     npmPackages={marketplaceProvidersResponse.data}
                     useYarn={appInfoResponse.data.useYarn}
                     isInDevelopmentMode={isInDevelopmentMode}
+                    npmPackageType="provider"
                   />
                 </TabPanel>
               </TabPanels>