@strapi/admin 4.5.0-beta.0 → 4.5.0

package/admin/src/pages/HomePage/index.js

@@ -13,7 +13,7 @@ import { Layout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import Logo from '../../assets/images/homepage-logo.png';
+import cornerOrnamentPath from './assets/corner-ornament.svg';
 import { useModels } from '../../hooks';
 import isGuidedTourCompleted from '../../components/GuidedTour/utils/isGuidedTourCompleted';
 import GuidedTourHomepage from '../../components/GuidedTour/Homepage';
@@ -25,6 +25,7 @@ const LogoContainer = styled(Box)`
   position: absolute;
   top: 0;
   right: 0;
+
   img {
     width: ${150 / 16}rem;
   }
@@ -64,7 +65,7 @@ const HomePage = () => {
       </FormattedMessage>
       <Main>
         <LogoContainer>
-          <img alt="" aria-hidden src={Logo} />
+          <img alt="" aria-hidden src={cornerOrnamentPath} />
         </LogoContainer>
         <Box padding={10}>
           <Grid>

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/CardButton.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import semver from 'semver';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Tooltip } from '@strapi/design-system/Tooltip';
+import { Button } from '@strapi/design-system/Button';
+import { Box } from '@strapi/design-system/Box';
+import Duplicate from '@strapi/icons/Duplicate';
+
+const TooltipButton = ({ description, installMessage, disabled, handleCopy, pluginName }) => (
+  <Tooltip data-testid={`tooltip-${pluginName}`} description={description}>
+    <Box>
+      <Button
+        size="S"
+        startIcon={<Duplicate />}
+        variant="secondary"
+        disabled={disabled}
+        onClick={handleCopy}
+      >
+        {installMessage}
+      </Button>
+    </Box>
+  </Tooltip>
+);
+
+const CardButton = ({ strapiPeerDepVersion, strapiAppVersion, handleCopy, pluginName }) => {
+  const { formatMessage } = useIntl();
+  const versionRange = semver.validRange(strapiPeerDepVersion);
+  const isCompatible = semver.satisfies(strapiAppVersion, versionRange);
+
+  const installMessage = formatMessage({
+    id: 'admin.pages.MarketPlacePage.plugin.copy',
+    defaultMessage: 'Copy install command',
+  });
+
+  // Only plugins receive a strapiAppVersion
+  if (strapiAppVersion) {
+    if (!versionRange) {
+      return (
+        <TooltipButton
+          installMessage={installMessage}
+          pluginName={pluginName}
+          description={formatMessage(
+            {
+              id: 'admin.pages.MarketPlacePage.plugin.version.null',
+              defaultMessage:
+                'Unable to verify compatibility with your Strapi version: "{strapiAppVersion}"',
+            },
+            { strapiAppVersion }
+          )}
+          handleCopy={handleCopy}
+        />
+      );
+    }
+
+    if (!isCompatible) {
+      return (
+        <TooltipButton
+          installMessage={installMessage}
+          pluginName={pluginName}
+          description={formatMessage(
+            {
+              id: 'admin.pages.MarketPlacePage.plugin.version',
+              defaultMessage:
+                'Update your Strapi version: "{strapiAppVersion}" to: "{versionRange}"',
+            },
+            {
+              strapiAppVersion,
+              versionRange,
+            }
+          )}
+          disabled
+        />
+      );
+    }
+  }
+
+  return (
+    <Button size="S" startIcon={<Duplicate />} variant="secondary" onClick={handleCopy}>
+      {installMessage}
+    </Button>
+  );
+};
+
+TooltipButton.defaultProps = {
+  disabled: false,
+  handleCopy: null,
+};
+
+TooltipButton.propTypes = {
+  description: PropTypes.string.isRequired,
+  installMessage: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  handleCopy: PropTypes.func,
+  pluginName: PropTypes.string.isRequired,
+};
+
+CardButton.defaultProps = {
+  strapiAppVersion: null,
+  strapiPeerDepVersion: null,
+};
+
+CardButton.propTypes = {
+  strapiAppVersion: PropTypes.string,
+  strapiPeerDepVersion: PropTypes.string,
+  handleCopy: PropTypes.func.isRequired,
+  pluginName: PropTypes.string.isRequired,
+};
+
+export default CardButton;

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/InstallPluginButton.js

@@ -1,20 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useNotification, useTracking } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Icon } from '@strapi/design-system/Icon';
 import { Typography } from '@strapi/design-system/Typography';
 import Check from '@strapi/icons/Check';
-import Duplicate from '@strapi/icons/Duplicate';
-import { Button } from '@strapi/design-system/Button';
+import CardButton from './CardButton';
 
-const InstallPluginButton = ({ isInstalled, isInDevelopmentMode, commandToCopy }) => {
+const InstallPluginButton = ({
+  isInstalled,
+  isInDevelopmentMode,
+  commandToCopy,
+  strapiAppVersion,
+  strapiPeerDepVersion,
+  pluginName,
+}) => {
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
+  const handleCopy = () => {
+    navigator.clipboard.writeText(commandToCopy);
+    trackUsage('willInstallPlugin');
+    toggleNotification({
+      type: 'success',
+      message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
+    });
+  };
+
   // Already installed
   if (isInstalled) {
     return (
@@ -33,23 +47,12 @@ const InstallPluginButton = ({ isInstalled, isInDevelopmentMode, commandToCopy }
   // In development, show install button
   if (isInDevelopmentMode) {
     return (
-      <CopyToClipboard
-        onCopy={() => {
-          trackUsage('willInstallPlugin');
-          toggleNotification({
-            type: 'success',
-            message: { id: 'admin.pages.MarketPlacePage.plugin.copy.success' },
-          });
-        }}
-        text={commandToCopy}
-      >
-        <Button size="S" startIcon={<Duplicate />} variant="secondary">
-          {formatMessage({
-            id: 'admin.pages.MarketPlacePage.plugin.copy',
-            defaultMessage: 'Copy install command',
-          })}
-        </Button>
-      </CopyToClipboard>
+      <CardButton
+        strapiAppVersion={strapiAppVersion}
+        strapiPeerDepVersion={strapiPeerDepVersion}
+        handleCopy={handleCopy}
+        pluginName={pluginName}
+      />
     );
   }
 
@@ -57,10 +60,18 @@ const InstallPluginButton = ({ isInstalled, isInDevelopmentMode, commandToCopy }
   return null;
 };
 
+InstallPluginButton.defaultProps = {
+  strapiAppVersion: null,
+  strapiPeerDepVersion: null,
+};
+
 InstallPluginButton.propTypes = {
   isInstalled: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool.isRequired,
   commandToCopy: PropTypes.string.isRequired,
+  strapiAppVersion: PropTypes.string,
+  strapiPeerDepVersion: PropTypes.string,
+  pluginName: PropTypes.string.isRequired,
 };
 
 export default InstallPluginButton;

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/PackageStats.js

@@ -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;

package/admin/src/pages/MarketplacePage/components/NpmPackageCard/index.js

@@ -13,8 +13,9 @@ import { Tooltip } from '@strapi/design-system/Tooltip';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import CheckCircle from '@strapi/icons/CheckCircle';
 import { useTracking } from '@strapi/helper-plugin';
-import madeByStrapiIcon from '../../../../assets/images/icon_made-by-strapi.svg';
+import StrapiLogo from '../../../../assets/images/logo-strapi-2022.svg';
 import InstallPluginButton from './InstallPluginButton';
+import PackageStats from './PackageStats';
 
 // Custom component to have an ellipsis after the 2nd line
 const EllipsisText = styled(Typography)`
@@ -32,6 +33,7 @@ const NpmPackageCard = ({
   useYarn,
   isInDevelopmentMode,
   npmPackageType,
+  strapiAppVersion,
 }) => {
   const { attributes } = npmPackage;
   const { formatMessage } = useIntl();
@@ -66,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">
@@ -95,7 +104,7 @@ const NpmPackageCard = ({
                   <Flex>
                     <Box
                       as="img"
-                      src={madeByStrapiIcon}
+                      src={StrapiLogo}
                       alt={madeByStrapiMessage}
                       marginLeft={1}
                       width={6}
@@ -132,13 +141,16 @@ const NpmPackageCard = ({
         >
           {formatMessage({
             id: 'admin.pages.MarketPlacePage.plugin.info.text',
-            defaultMessage: 'Learn more',
+            defaultMessage: 'More',
           })}
         </LinkButton>
         <InstallPluginButton
           isInstalled={isInstalled}
           isInDevelopmentMode={isInDevelopmentMode}
           commandToCopy={commandToCopy}
+          strapiAppVersion={strapiAppVersion}
+          strapiPeerDepVersion={attributes.strapiVersion}
+          pluginName={attributes.name}
         />
       </Stack>
     </Flex>
@@ -147,6 +159,7 @@ const NpmPackageCard = ({
 
 NpmPackageCard.defaultProps = {
   isInDevelopmentMode: false,
+  strapiAppVersion: null,
 };
 
 NpmPackageCard.propTypes = {
@@ -164,12 +177,16 @@ NpmPackageCard.propTypes = {
       validated: PropTypes.bool.isRequired,
       madeByStrapi: PropTypes.bool.isRequired,
       strapiCompatibility: PropTypes.oneOf(['v3', 'v4']),
+      strapiVersion: PropTypes.string,
+      githubStars: PropTypes.number,
+      npmDownloads: PropTypes.number,
     }).isRequired,
   }).isRequired,
   isInstalled: PropTypes.bool.isRequired,
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool,
   npmPackageType: PropTypes.string.isRequired,
+  strapiAppVersion: PropTypes.string,
 };
 
 export default NpmPackageCard;

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select, Option } from '@strapi/design-system/Select';
+
+const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, customizeContent }) => {
+  const computeFilterMessage = (filterName, count) => {
+    return `${filterName} (${count})`;
+  };
+
+  return (
+    <Select
+      aria-label={message}
+      placeholder={message}
+      size="M"
+      onChange={onChange}
+      onClear={onClear}
+      value={value}
+      customizeContent={customizeContent}
+      multi
+    >
+      {Object.entries(possibleFilters).map(([filterName, count]) => {
+        return (
+          <Option key={filterName} value={filterName}>
+            {computeFilterMessage(filterName, count)}
+          </Option>
+        );
+      })}
+    </Select>
+  );
+};
+
+FilterSelect.propTypes = {
+  message: PropTypes.string.isRequired,
+  value: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  possibleFilters: PropTypes.object.isRequired,
+  onClear: PropTypes.func.isRequired,
+  customizeContent: PropTypes.func.isRequired,
+};
+
+export default FilterSelect;

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { Popover } from '@strapi/design-system/Popover';
+import { Stack } from '@strapi/design-system/Stack';
+import { FocusTrap } from '@strapi/design-system/FocusTrap';
+import { useIntl } from 'react-intl';
+import FilterSelect from './FilterSelect';
+
+const FiltersPopover = ({
+  source,
+  onToggle,
+  query,
+  npmPackageType,
+  possibleCategories,
+  possibleCollections,
+  handleSelectChange,
+  handleSelectClear,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
+      <FocusTrap onEscape={onToggle}>
+        <Stack spacing={1}>
+          <Box>
+            <FilterSelect
+              message={formatMessage({
+                id: 'admin.pages.MarketPlacePage.filters.collections',
+                defaultMessage: 'Collections',
+              })}
+              value={query?.collections || []}
+              onChange={(newCollections) => {
+                const update = { collections: newCollections };
+                handleSelectChange(update);
+              }}
+              onClear={() => handleSelectClear('collections')}
+              possibleFilters={possibleCollections}
+              customizeContent={(values) =>
+                formatMessage(
+                  {
+                    id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                    defaultMessage:
+                      '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected',
+                  },
+                  { count: values.length }
+                )
+              }
+            />
+          </Box>
+          {npmPackageType === 'plugin' && (
+            <Box>
+              <FilterSelect
+                message={formatMessage({
+                  id: 'admin.pages.MarketPlacePage.filters.categories',
+                  defaultMessage: 'Categories',
+                })}
+                value={query?.categories || []}
+                onChange={(newCategories) => {
+                  const update = { categories: newCategories };
+                  handleSelectChange(update);
+                }}
+                onClear={() => handleSelectClear('categories')}
+                possibleFilters={possibleCategories}
+                customizeContent={(values) =>
+                  formatMessage(
+                    {
+                      id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
+                      defaultMessage:
+                        '{count, plural, =0 {No categories} one {# category} other {# categories}} selected',
+                    },
+                    { count: values.length }
+                  )
+                }
+                name="categories"
+              />
+            </Box>
+          )}
+        </Stack>
+      </FocusTrap>
+    </Popover>
+  );
+};
+
+FiltersPopover.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
+  query: PropTypes.object.isRequired,
+  npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
+  possibleCollections: PropTypes.object.isRequired,
+  possibleCategories: PropTypes.object.isRequired,
+  handleSelectChange: PropTypes.func.isRequired,
+  handleSelectClear: PropTypes.func.isRequired,
+};
+
+export default FiltersPopover;

package/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js

@@ -0,0 +1,106 @@
+import React, { useState, useRef } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { Tag } from '@strapi/design-system/Tag';
+import Cross from '@strapi/icons/Cross';
+import Filter from '@strapi/icons/Filter';
+import FiltersPopover from './FiltersPopover';
+
+const FilterTag = ({ name, handleRemove }) => {
+  return (
+    <Box padding={1}>
+      <Tag icon={<Cross />} onClick={handleRemove}>
+        {name}
+      </Tag>
+    </Box>
+  );
+};
+
+const ButtonToggle = styled(Button)`
+  height: ${({ theme }) => theme.sizes.input.S};
+`;
+
+const NpmPackagesFilters = ({
+  possibleCollections,
+  possibleCategories,
+  npmPackageType,
+  query,
+  handleSelectClear,
+  handleSelectChange,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const buttonRef = useRef();
+  const { formatMessage } = useIntl();
+
+  const handleToggle = () => setIsVisible((prev) => !prev);
+
+  const handleTagRemove = (tagToRemove, filterType) => {
+    const update = {
+      [filterType]: query[filterType].filter((previousTag) => previousTag !== tagToRemove),
+    };
+
+    handleSelectChange(update);
+  };
+
+  return (
+    <>
+      <Box paddingTop={1} paddingBottom={1}>
+        <ButtonToggle
+          variant="tertiary"
+          ref={buttonRef}
+          startIcon={<Filter />}
+          onClick={handleToggle}
+          size="S"
+        >
+          {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
+        </ButtonToggle>
+        {isVisible && (
+          <FiltersPopover
+            onToggle={handleToggle}
+            source={buttonRef}
+            query={query}
+            handleSelectClear={handleSelectClear}
+            handleSelectChange={handleSelectChange}
+            possibleCollections={possibleCollections}
+            possibleCategories={possibleCategories}
+            npmPackageType={npmPackageType}
+          />
+        )}
+      </Box>
+      {query.collections?.map((collection) => (
+        <FilterTag
+          name={collection}
+          key={collection}
+          handleRemove={() => handleTagRemove(collection, 'collections')}
+        />
+      ))}
+      {npmPackageType === 'plugin' &&
+        query.categories?.map((category) => (
+          <FilterTag
+            name={category}
+            key={category}
+            handleRemove={() => handleTagRemove(category, 'categories')}
+          />
+        ))}
+    </>
+  );
+};
+
+FilterTag.propTypes = {
+  name: PropTypes.string.isRequired,
+  handleRemove: PropTypes.func.isRequired,
+};
+
+NpmPackagesFilters.propTypes = {
+  npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
+  possibleCollections: PropTypes.object.isRequired,
+  possibleCategories: PropTypes.object.isRequired,
+  query: PropTypes.object.isRequired,
+  handleSelectChange: PropTypes.func.isRequired,
+  handleSelectClear: PropTypes.func.isRequired,
+};
+
+export default NpmPackagesFilters;

package/admin/src/pages/MarketplacePage/components/NpmPackagesGrid/index.js

@@ -9,6 +9,7 @@ const NpmPackagesGrid = ({
   useYarn,
   isInDevelopmentMode,
   npmPackageType,
+  strapiAppVersion,
 }) => {
   // Check if an individual package is in the dependencies
   const isAlreadyInstalled = useCallback(
@@ -26,6 +27,7 @@ const NpmPackagesGrid = ({
             useYarn={useYarn}
             isInDevelopmentMode={isInDevelopmentMode}
             npmPackageType={npmPackageType}
+            strapiAppVersion={strapiAppVersion}
           />
         </GridItem>
       ))}
@@ -35,6 +37,7 @@ const NpmPackagesGrid = ({
 
 NpmPackagesGrid.defaultProps = {
   installedPackageNames: [],
+  strapiAppVersion: null,
 };
 
 NpmPackagesGrid.propTypes = {
@@ -43,6 +46,7 @@ NpmPackagesGrid.propTypes = {
   useYarn: PropTypes.bool.isRequired,
   isInDevelopmentMode: PropTypes.bool.isRequired,
   npmPackageType: PropTypes.string.isRequired,
+  strapiAppVersion: PropTypes.string,
 };
 
 export default NpmPackagesGrid;