@strapi/admin 4.5.0-alpha.0 → 4.5.0

package/admin/src/hooks/useRegenerate/index.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { get } from 'lodash';
+import { useNotification } from '@strapi/helper-plugin';
+import { axiosInstance } from '../../core/utils';
+
+const useRegenerate = (id, onRegenerate) => {
+  const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
+  const toggleNotification = useNotification();
+
+  const regenerateData = async () => {
+    try {
+      const {
+        data: {
+          data: { accessKey },
+        },
+      } = await axiosInstance.post(`/admin/api-tokens/${id}/regenerate`);
+      setIsLoadingConfirmation(false);
+      onRegenerate(accessKey);
+    } catch (error) {
+      setIsLoadingConfirmation(false);
+      toggleNotification({
+        type: 'warning',
+        message: get(error, 'response.data.message', 'notification.error'),
+      });
+    }
+  };
+
+  return {
+    regenerateData,
+    isLoadingConfirmation,
+  };
+};
+
+export default useRegenerate;

package/admin/src/index.js

@@ -9,6 +9,7 @@ import appReducers from './reducers';
 window.strapi = {
   backendURL: process.env.STRAPI_ADMIN_BACKEND_URL,
   isEE: false,
+  telemetryDisabled: process.env.STRAPI_TELEMETRY_DISABLED ?? false,
   features: {
     SSO: 'sso',
   },

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

@@ -91,7 +91,7 @@ function App() {
           try {
             const deviceId = await getUID();
 
-            fetch('https://analytics.strapi.io/track', {
+            await fetch('https://analytics.strapi.io/track', {
               method: 'POST',
               body: JSON.stringify({
                 event: 'didInitializeAdministration',

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

@@ -79,7 +79,7 @@ const socialLinks = [
   },
   {
     name: 'Discord',
-    link: 'https://slack.strapi.io/',
+    link: 'https://discord.strapi.io/',
     icon: <StyledDiscord />,
     alt: 'discord',
   },

package/admin/src/pages/HomePage/assets/corner-ornament.svg

@@ -0,0 +1,48 @@
+<svg width="148" height="148" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity=".8" fill-rule="evenodd" clip-rule="evenodd">
+        <path opacity=".15" d="M110.81 37H73.97V74.1h36.84V37Z" fill="url(#a)"/>
+        <path opacity=".07" d="M36.84 0H0v37.08h36.84V0Z" fill="url(#b)"/>
+        <path opacity=".07" d="M73.92 73.95H37.08v37.08h36.84V73.95Z" fill="url(#c)"/>
+        <path opacity=".07" d="M147.99 110.92h-37.3V148H148v-37.08Z" fill="url(#d)"/>
+        <path opacity=".15" d="M73.83 37H36.84L73.83 0v37Z" fill="url(#e)"/>
+        <path opacity=".15" d="M110.6 111.02v-37h36.98l-36.99 37Z" fill="url(#f)"/>
+        <path opacity=".4" d="M73.83 0v37h36.98v37.01h37V3a3 3 0 0 0-3-3H73.82Z" fill="url(#g)"/>
+    </g>
+    
+    <defs>
+        <linearGradient id="a" x1="91.31" y1="83.31" x2="118.24" y2="56.59" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="b" x1="40.99" y1="13.88" x2=".01" y2="11.64" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8B8FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="c" x1="54.41" y1="120.25" x2="81.35" y2="93.52" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8B8FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="d" x1="128.24" y1="157.22" x2="155.17" y2="130.17" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8B8FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="e" x1="54.24" y1="46.21" x2="81.12" y2="19.38" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="f" x1="126.28" y1="74.05" x2="124.94" y2="111.07" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="g" x1="73.37" y1="36.87" x2="132.87" y2="66.74" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3858EA"/>
+        </linearGradient>
+    </defs>
+</svg>

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;