mirror of
https://github.com/strapi/strapi.git
synced 2025-12-25 14:14:10 +00:00
Merge branch 'main' into enhancement/axios-refactoring
This commit is contained in:
Simone
GitHub
commit
5e59a0c3dc
@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { Typography } from '@strapi/design-system/Typography';
|
||||
import { Icon } from '@strapi/design-system/Icon';
|
||||
import { Divider } from '@strapi/design-system/Divider';
|
||||
import { Stack } from '@strapi/design-system/Stack';
|
||||
import Github from '@strapi/icons/Github';
|
||||
import Download from '@strapi/icons/Download';
|
||||
import Star from '@strapi/icons/Star';
|
||||
import { pxToRem } from '@strapi/helper-plugin';
|
||||
|
||||
const VerticalDivider = styled(Divider)`
|
||||
width: ${pxToRem(12)};
|
||||
transform: rotate(90deg);
|
||||
`;
|
||||
|
||||
const PackageStats = ({ githubStars, npmDownloads, npmPackageType }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<Stack horizontal spacing={1}>
|
||||
{!!githubStars && (
|
||||
<>
|
||||
<Icon as={Github} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
|
||||
<Icon as={Star} height={pxToRem(12)} width={pxToRem(12)} color="warning500" aria-hidden />
|
||||
<p
|
||||
aria-label={formatMessage(
|
||||
{
|
||||
id: `admin.pages.MarketPlacePage.${npmPackageType}.githubStars`,
|
||||
defaultMessage: `This {package} was starred {starsCount} on GitHub`,
|
||||
},
|
||||
{
|
||||
starsCount: githubStars,
|
||||
package: npmPackageType,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Typography variant="pi" textColor="neutral800" lineHeight={16}>
|
||||
{githubStars}
|
||||
</Typography>
|
||||
</p>
|
||||
<VerticalDivider unsetMargin={false} background="neutral200" />
|
||||
</>
|
||||
)}
|
||||
<Icon as={Download} height={pxToRem(12)} width={pxToRem(12)} aria-hidden />
|
||||
<p
|
||||
aria-label={formatMessage(
|
||||
{
|
||||
id: `admin.pages.MarketPlacePage.${npmPackageType}.downloads`,
|
||||
defaultMessage: `This {package} has {downloadsCount} weekly downloads`,
|
||||
},
|
||||
{
|
||||
downloadsCount: npmDownloads,
|
||||
package: npmPackageType,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Typography variant="pi" textColor="neutral800" lineHeight={16}>
|
||||
{npmDownloads}
|
||||
</Typography>
|
||||
</p>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
PackageStats.defaultProps = {
|
||||
githubStars: 0,
|
||||
npmDownloads: 0,
|
||||
};
|
||||
|
||||
PackageStats.propTypes = {
|
||||
githubStars: PropTypes.number,
|
||||
npmDownloads: PropTypes.number,
|
||||
npmPackageType: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default PackageStats;
|
||||
@ -15,6 +15,7 @@ import CheckCircle from '@strapi/icons/CheckCircle';
|
||||
import { useTracking } from '@strapi/helper-plugin';
|
||||
import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
|
||||
import InstallPluginButton from './InstallPluginButton';
|
||||
import PackageStats from './PackageStats';
|
||||
|
||||
// Custom component to have an ellipsis after the 2nd line
|
||||
const EllipsisText = styled(Typography)`
|
||||
@ -67,14 +68,21 @@ const NpmPackageCard = ({
|
||||
data-testid="npm-package-card"
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
as="img"
|
||||
src={attributes.logo.url}
|
||||
alt={`${attributes.name} logo`}
|
||||
hasRadius
|
||||
width={11}
|
||||
height={11}
|
||||
/>
|
||||
<Flex direction="row" justifyContent="space-between" alignItems="flex-start">
|
||||
<Box
|
||||
as="img"
|
||||
src={attributes.logo.url}
|
||||
alt={`${attributes.name} logo`}
|
||||
hasRadius
|
||||
width={11}
|
||||
height={11}
|
||||
/>
|
||||
<PackageStats
|
||||
githubStars={attributes.githubStars}
|
||||
npmDownloads={attributes.npmDownloads}
|
||||
npmPackageType={npmPackageType}
|
||||
/>
|
||||
</Flex>
|
||||
<Box paddingTop={4}>
|
||||
<Typography as="h3" variant="delta">
|
||||
<Flex alignItems="center">
|
||||
@ -170,6 +178,8 @@ NpmPackageCard.propTypes = {
|
||||
madeByStrapi: PropTypes.bool.isRequired,
|
||||
strapiCompatibility: PropTypes.oneOf(['v3', 'v4']),
|
||||
strapiVersion: PropTypes.string,
|
||||
githubStars: PropTypes.number,
|
||||
npmDownloads: PropTypes.number,
|
||||
}).isRequired,
|
||||
}).isRequired,
|
||||
isInstalled: PropTypes.bool.isRequired,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -9,6 +9,8 @@ import {
|
||||
getByText,
|
||||
queryByText,
|
||||
getByRole,
|
||||
getByLabelText,
|
||||
queryByLabelText,
|
||||
} from '@testing-library/react';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||
@ -291,4 +293,70 @@ describe('Marketplace page', () => {
|
||||
'Unable to verify compatibility with your Strapi version: "4.1.0"'
|
||||
);
|
||||
});
|
||||
|
||||
it('shows github stars and weekly downloads count for each plugin', () => {
|
||||
render(App);
|
||||
const pluginsTab = screen.getByRole('tab', { name: /plugins/i });
|
||||
fireEvent.click(pluginsTab);
|
||||
|
||||
const documentationCard = screen
|
||||
.getAllByTestId('npm-package-card')
|
||||
.find((div) => div.innerHTML.includes('Documentation'));
|
||||
|
||||
const githubStarsLabel = getByLabelText(
|
||||
documentationCard,
|
||||
/this plugin was starred \d+ on GitHub/i
|
||||
);
|
||||
expect(githubStarsLabel).toBeVisible();
|
||||
|
||||
const downloadsLabel = getByLabelText(
|
||||
documentationCard,
|
||||
/this plugin has \d+ weekly downloads/i
|
||||
);
|
||||
expect(downloadsLabel).toBeVisible();
|
||||
});
|
||||
|
||||
it('shows github stars and weekly downloads count for each provider', () => {
|
||||
render(App);
|
||||
const providersTab = screen.getByRole('tab', { name: /providers/i });
|
||||
fireEvent.click(providersTab);
|
||||
|
||||
const cloudinaryCard = screen
|
||||
.getAllByTestId('npm-package-card')
|
||||
.find((div) => div.innerHTML.includes('Cloudinary'));
|
||||
|
||||
const githubStarsLabel = getByLabelText(
|
||||
cloudinaryCard,
|
||||
/this provider was starred \d+ on GitHub/i
|
||||
);
|
||||
expect(githubStarsLabel).toBeVisible();
|
||||
|
||||
const downloadsLabel = getByLabelText(
|
||||
cloudinaryCard,
|
||||
/this provider has \d+ weekly downloads/i
|
||||
);
|
||||
expect(downloadsLabel).toBeVisible();
|
||||
});
|
||||
|
||||
it('show only downloads count and not github stars if there are no or 0 stars and no downloads available for any package', () => {
|
||||
render(App);
|
||||
const providersTab = screen.getByRole('tab', { name: /providers/i });
|
||||
fireEvent.click(providersTab);
|
||||
|
||||
const nodeMailerCard = screen
|
||||
.getAllByTestId('npm-package-card')
|
||||
.find((div) => div.innerHTML.includes('Nodemailer'));
|
||||
|
||||
const githubStarsLabel = queryByLabelText(
|
||||
nodeMailerCard,
|
||||
/this provider was starred \d+ on GitHub/i
|
||||
);
|
||||
expect(githubStarsLabel).toBe(null);
|
||||
|
||||
const downloadsLabel = getByLabelText(
|
||||
nodeMailerCard,
|
||||
/this provider has \d+ weekly downloads/i
|
||||
);
|
||||
expect(downloadsLabel).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@ -49,6 +49,8 @@ const handlers = [
|
||||
madeByStrapi: false,
|
||||
strapiCompatibility: 'v3',
|
||||
strapiVersion: '^4.0.0',
|
||||
githubStars: 23,
|
||||
npmDownloads: 5623,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -223,6 +225,8 @@ const handlers = [
|
||||
madeByStrapi: false,
|
||||
strapiCompatibility: 'v4',
|
||||
strapiVersion: '4.x.x',
|
||||
githubStars: 323,
|
||||
npmDownloads: 1123,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -409,6 +413,8 @@ const handlers = [
|
||||
madeByStrapi: true,
|
||||
strapiCompatibility: 'v4',
|
||||
strapiVersion: '^4.0.7',
|
||||
githubStars: 49130,
|
||||
npmDownloads: 7492,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -654,6 +660,8 @@ const handlers = [
|
||||
validated: true,
|
||||
madeByStrapi: true,
|
||||
strapiCompatibility: 'v4',
|
||||
githubStars: 49130,
|
||||
npmDownloads: 7492,
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -696,6 +704,8 @@ const handlers = [
|
||||
developerName: 'Strapi team',
|
||||
validated: true,
|
||||
madeByStrapi: true,
|
||||
githubStars: 30,
|
||||
npmDownloads: 2492,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@ -272,7 +272,11 @@
|
||||
"admin.pages.MarketPlacePage.plugin.tooltip.verified": "Plugin verified by Strapi",
|
||||
"admin.pages.MarketPlacePage.plugin.version": "Update your Strapi version: \"{strapiAppVersion}\" to: \"{versionRange}\"",
|
||||
"admin.pages.MarketPlacePage.plugin.version.null": "Unable to verify compatibility with your Strapi version: \"{strapiAppVersion}\"",
|
||||
"admin.pages.MarketPlacePage.plugin.githubStars": "This plugin was starred {starsCount} on GitHub",
|
||||
"admin.pages.MarketPlacePage.plugin.downloads": "This plugin has {downloadsCount} weekly downloads",
|
||||
"admin.pages.MarketPlacePage.providers": "Providers",
|
||||
"admin.pages.MarketPlacePage.provider.githubStars": "This provider was starred {starsCount} on GitHub",
|
||||
"admin.pages.MarketPlacePage.provider.downloads": "This provider has {downloadsCount} weekly downloads",
|
||||
"admin.pages.MarketPlacePage.search.clear": "Clear the search",
|
||||
"admin.pages.MarketPlacePage.search.empty": "No result for \"{target}\"",
|
||||
"admin.pages.MarketPlacePage.search.placeholder": "Search",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user