point providers to npm

This commit is contained in:
Mark Kaylor 2022-06-07 09:45:54 +02:00
parent d9f20fa209
commit 29558b960f
3 changed files with 26 additions and 4 deletions

View File

@ -25,7 +25,13 @@ const EllipsisText = styled(Typography)`
overflow: hidden; overflow: hidden;
`; `;
const NpmPackageCard = ({ npmPackage, installedPackageNames, useYarn, isInDevelopmentMode }) => { const NpmPackageCard = ({
npmPackage,
installedPackageNames,
useYarn,
isInDevelopmentMode,
npmPackageType,
}) => {
const { attributes } = npmPackage; const { attributes } = npmPackage;
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { trackUsage } = useTracking(); const { trackUsage } = useTracking();
@ -41,6 +47,11 @@ const NpmPackageCard = ({ npmPackage, installedPackageNames, useYarn, isInDevelo
defaultMessage: 'Made by Strapi', defaultMessage: 'Made by Strapi',
}); });
const npmPackageHref =
npmPackageType === 'provider'
? attributes.npmPackageUrl
: `https://market.strapi.io/plugins/${attributes.slug}`;
return ( return (
<Flex <Flex
direction="column" direction="column"
@ -107,7 +118,7 @@ const NpmPackageCard = ({ npmPackage, installedPackageNames, useYarn, isInDevelo
<Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}> <Stack horizontal spacing={2} style={{ alignSelf: 'flex-end' }} paddingTop={6}>
<LinkButton <LinkButton
size="S" size="S"
href={`https://market.strapi.io/plugins/${attributes.slug}`} href={npmPackageHref}
isExternal isExternal
endIcon={<ExternalLink />} endIcon={<ExternalLink />}
aria-label={formatMessage( aria-label={formatMessage(
@ -159,6 +170,7 @@ NpmPackageCard.propTypes = {
installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired, installedPackageNames: PropTypes.arrayOf(PropTypes.string).isRequired,
useYarn: PropTypes.bool.isRequired, useYarn: PropTypes.bool.isRequired,
isInDevelopmentMode: PropTypes.bool, isInDevelopmentMode: PropTypes.bool,
npmPackageType: PropTypes.string.isRequired,
}; };
export default NpmPackageCard; export default NpmPackageCard;

View File

@ -3,7 +3,13 @@ import PropTypes from 'prop-types';
import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Grid, GridItem } from '@strapi/design-system/Grid';
import NpmPackageCard from '../NpmPackageCard'; import NpmPackageCard from '../NpmPackageCard';
const NpmPackagesGrid = ({ npmPackages, installedPackageNames, useYarn, isInDevelopmentMode }) => { const NpmPackagesGrid = ({
npmPackages,
installedPackageNames,
useYarn,
isInDevelopmentMode,
npmPackageType,
}) => {
return ( return (
<Grid gap={4}> <Grid gap={4}>
{npmPackages.map((npmPackage) => ( {npmPackages.map((npmPackage) => (
@ -13,6 +19,7 @@ const NpmPackagesGrid = ({ npmPackages, installedPackageNames, useYarn, isInDeve
installedPackageNames={installedPackageNames} installedPackageNames={installedPackageNames}
useYarn={useYarn} useYarn={useYarn}
isInDevelopmentMode={isInDevelopmentMode} isInDevelopmentMode={isInDevelopmentMode}
npmPackageType={npmPackageType}
/> />
</GridItem> </GridItem>
))} ))}
@ -29,6 +36,7 @@ NpmPackagesGrid.propTypes = {
installedPackageNames: PropTypes.arrayOf(PropTypes.string), installedPackageNames: PropTypes.arrayOf(PropTypes.string),
useYarn: PropTypes.bool.isRequired, useYarn: PropTypes.bool.isRequired,
isInDevelopmentMode: PropTypes.bool.isRequired, isInDevelopmentMode: PropTypes.bool.isRequired,
npmPackageType: PropTypes.string.isRequired,
}; };
export default NpmPackagesGrid; export default NpmPackagesGrid;

View File

@ -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}> <Box paddingBottom={4}>
<Tabs> <Tabs>
<Tab>Plugins ({searchResults.length})</Tab> <Tab>Plugins ({searchResults.length})</Tab>
@ -245,6 +245,7 @@ const MarketPlacePage = () => {
installedPackageNames={installedPluginNames} installedPackageNames={installedPluginNames}
useYarn={appInfoResponse.data.useYarn} useYarn={appInfoResponse.data.useYarn}
isInDevelopmentMode={isInDevelopmentMode} isInDevelopmentMode={isInDevelopmentMode}
npmPackageType="plugin"
/> />
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
@ -252,6 +253,7 @@ const MarketPlacePage = () => {
npmPackages={marketplaceProvidersResponse.data} npmPackages={marketplaceProvidersResponse.data}
useYarn={appInfoResponse.data.useYarn} useYarn={appInfoResponse.data.useYarn}
isInDevelopmentMode={isInDevelopmentMode} isInDevelopmentMode={isInDevelopmentMode}
npmPackageType="provider"
/> />
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>