@strapi/admin 4.5.1 → 4.6.0-alpha.0

package/admin/src/components/LeftMenu/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { NavLink as RouterNavLink } from 'react-router-dom';
+import { NavLink as RouterNavLink, useLocation } from 'react-router-dom';
 import { Divider } from '@strapi/design-system/Divider';
 import {
   MainNav,
@@ -19,7 +19,7 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import Write from '@strapi/icons/Write';
 import Exit from '@strapi/icons/Exit';
-import { auth, usePersistentState, useAppInfos } from '@strapi/helper-plugin';
+import { auth, usePersistentState, useAppInfos, useTracking } from '@strapi/helper-plugin';
 import useConfigurations from '../../hooks/useConfigurations';
 
 const LinkUserWrapper = styled(Box)`
@@ -59,6 +59,8 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfos();
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
 
   const initials = userDisplayName
     .split(' ')
@@ -82,6 +84,10 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     }
   };
 
+  const handleClickOnLink = (destination = null) => {
+    trackUsage('willNavigate', { from: pathname, to: destination });
+  };
+
   const menuTitle = formatMessage({
     id: 'app.components.LeftMenu.navbrand.title',
     defaultMessage: 'Strapi Dashboard',
@@ -110,7 +116,12 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
       <Divider />
 
       <NavSections>
-        <NavLink as={RouterNavLink} to="/content-manager" icon={<Write />}>
+        <NavLink
+          as={RouterNavLink}
+          to="/content-manager"
+          icon={<Write />}
+          onClick={() => handleClickOnLink('/content-manager')}
+        >
           {formatMessage({ id: 'global.content-manager', defaultMessage: 'Content manager' })}
         </NavLink>
 
@@ -125,7 +136,13 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
               const Icon = link.icon;
 
               return (
-                <NavLink as={RouterNavLink} to={link.to} key={link.to} icon={<Icon />}>
+                <NavLink
+                  as={RouterNavLink}
+                  to={link.to}
+                  key={link.to}
+                  icon={<Icon />}
+                  onClick={() => handleClickOnLink(link.to)}
+                >
                   {formatMessage(link.intlLabel)}
                 </NavLink>
               );
@@ -152,6 +169,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   to={link.to}
                   key={link.to}
                   icon={<LinkIcon />}
+                  onClick={() => handleClickOnLink(link.to)}
                 >
                   {formatMessage(link.intlLabel)}
                 </NavLink>

package/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js

@@ -5,6 +5,7 @@ import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Badge } from '@strapi/design-system/Badge';
+import { Flex } from '@strapi/design-system/Flex';
 import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
 import { Loader } from '@strapi/design-system/Loader';
 import styled from 'styled-components';
@@ -38,8 +39,8 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
   const [isOpen, setIsOpen] = useState(false);
 
   const Label = (
-    <>
-      <Badge>{value.count}</Badge>{' '}
+    <Flex gap={1} wrap="nowrap">
+      <Badge>{value.count}</Badge>
       {formatMessage(
         {
           id: 'content-manager.containers.ListPage.items',
@@ -47,7 +48,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
         },
         { number: value.count }
       )}
-    </>
+    </Flex>
   );
 
   const notify = () => {

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -1,92 +1,95 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Select, Option } from '@strapi/design-system/Select';
 import { ToggleInput } from '@strapi/design-system/ToggleInput';
-import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 import { getTrad } from '../../../utils';
 
-const FlexGap = styled(Flex)`
-  gap: ${({ theme }) => theme.spaces[4]};
-`;
-
 const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { formatMessage } = useIntl();
   const { settings, metadatas } = modifiedData;
 
   return (
-    <>
-      <Box paddingBottom={4}>
-        <Typography variant="delta" as="h2">
-          {formatMessage({
-            id: getTrad('containers.SettingPage.settings'),
-            defaultMessage: 'Settings',
-          })}
-        </Typography>
-      </Box>
-      <FlexGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
-        <ToggleInput
-          label={formatMessage({
-            id: getTrad('form.Input.search'),
-            defaultMessage: 'Enable search',
-          })}
-          onChange={(e) => {
-            onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
-          }}
-          onLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.on-label',
-            defaultMessage: 'on',
-          })}
-          offLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.off-label',
-            defaultMessage: 'off',
-          })}
-          name="settings.searchable"
-          checked={settings.searchable}
-        />
-        <ToggleInput
-          label={formatMessage({
-            id: getTrad('form.Input.filters'),
-            defaultMessage: 'Enable filters',
-          })}
-          onChange={(e) => {
-            onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
-          }}
-          onLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.on-label',
-            defaultMessage: 'on',
-          })}
-          offLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.off-label',
-            defaultMessage: 'off',
-          })}
-          name="settings.filterable"
-          checked={settings.filterable}
-        />
-        <ToggleInput
-          label={formatMessage({
-            id: getTrad('form.Input.bulkActions'),
-            defaultMessage: 'Enable bulk actions',
-          })}
-          onChange={(e) => {
-            onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
-          }}
-          onLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.on-label',
-            defaultMessage: 'on',
-          })}
-          offLabel={formatMessage({
-            id: 'app.components.ToggleCheckbox.off-label',
-            defaultMessage: 'off',
-          })}
-          name="settings.bulkable"
-          checked={settings.bulkable}
-        />
-      </FlexGap>
+    <Stack spacing={4}>
+      <Typography variant="delta" as="h2">
+        {formatMessage({
+          id: getTrad('containers.SettingPage.settings'),
+          defaultMessage: 'Settings',
+        })}
+      </Typography>
+
+      <Stack horizontal justifyContent="space-between" spacing={4}>
+        <Box width="100%">
+          <ToggleInput
+            label={formatMessage({
+              id: getTrad('form.Input.search'),
+              defaultMessage: 'Enable search',
+            })}
+            onChange={(e) => {
+              onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
+            }}
+            onLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.on-label',
+              defaultMessage: 'on',
+            })}
+            offLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.off-label',
+              defaultMessage: 'off',
+            })}
+            name="settings.searchable"
+            checked={settings.searchable}
+          />
+        </Box>
+
+        <Box width="100%">
+          <ToggleInput
+            label={formatMessage({
+              id: getTrad('form.Input.filters'),
+              defaultMessage: 'Enable filters',
+            })}
+            onChange={(e) => {
+              onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
+            }}
+            onLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.on-label',
+              defaultMessage: 'on',
+            })}
+            offLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.off-label',
+              defaultMessage: 'off',
+            })}
+            name="settings.filterable"
+            checked={settings.filterable}
+          />
+        </Box>
+
+        <Box width="100%">
+          <ToggleInput
+            label={formatMessage({
+              id: getTrad('form.Input.bulkActions'),
+              defaultMessage: 'Enable bulk actions',
+            })}
+            onChange={(e) => {
+              onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
+            }}
+            onLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.on-label',
+              defaultMessage: 'on',
+            })}
+            offLabel={formatMessage({
+              id: 'app.components.ToggleCheckbox.off-label',
+              defaultMessage: 'off',
+            })}
+            name="settings.bulkable"
+            checked={settings.bulkable}
+          />
+        </Box>
+      </Stack>
+
       <Grid gap={4}>
         <GridItem s={12} col={6}>
           <Select
@@ -145,7 +148,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           </Select>
         </GridItem>
       </Grid>
-    </>
+    </Stack>
   );
 };
 

package/admin/src/core/apis/CustomFields.js

@@ -19,6 +19,40 @@ const ALLOWED_TYPES = [
   'uid',
 ];
 
+const ALLOWED_ROOT_LEVEL_OPTIONS = [
+  'min',
+  'minLength',
+  'max',
+  'maxLength',
+  'required',
+  'regex',
+  'enum',
+  'unique',
+  'private',
+  'default',
+];
+
+const optionValidationsReducer = (acc, option) => {
+  if (option.items) {
+    return option.items.reduce(optionValidationsReducer, acc);
+  }
+
+  if (!option.name) {
+    acc.push({
+      isValidOptionPath: false,
+      errorMessage: "The 'name' property is required on an options object",
+    });
+  } else {
+    acc.push({
+      isValidOptionPath:
+        ALLOWED_ROOT_LEVEL_OPTIONS.includes(option.name) || option.name.startsWith('options'),
+      errorMessage: `'${option.name}' must be prefixed with 'options.'`,
+    });
+  }
+
+  return acc;
+};
+
 class CustomFields {
   constructor() {
     this.customFields = {};
@@ -32,7 +66,8 @@ class CustomFields {
       });
     } else {
       // Handle individual custom field
-      const { name, pluginId, type, intlLabel, intlDescription, components } = customFields;
+      const { name, pluginId, type, intlLabel, intlDescription, components, options } =
+        customFields;
 
       // Ensure required attributes are provided
       invariant(name, 'A name must be provided');
@@ -55,6 +90,16 @@ class CustomFields {
         `Custom field name: '${name}' is not a valid object key`
       );
 
+      // Ensure options have valid name paths
+      const allFormOptions = [...(options?.base || []), ...(options?.advanced || [])];
+
+      if (allFormOptions.length) {
+        const optionPathValidations = allFormOptions.reduce(optionValidationsReducer, []);
+        optionPathValidations.forEach(({ isValidOptionPath, errorMessage }) => {
+          invariant(isValidOptionPath, errorMessage);
+        });
+      }
+
       // When no plugin is specified, default to the global namespace
       const uid = pluginId ? `plugin::${pluginId}.${name}` : `global::${name}`;
 

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

@@ -37,6 +37,26 @@ const SortSelect = ({ sortQuery, handleSelectChange }) => {
         defaultMessage: 'Newest',
       },
     },
+    'githubStars:desc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.githubStars.selected',
+        defaultMessage: 'Sort by GitHub stars',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.githubStars',
+        defaultMessage: 'Number of GitHub stars',
+      },
+    },
+    'npmDownloads:desc': {
+      selected: {
+        id: 'admin.pages.MarketPlacePage.sort.npmDownloads.selected',
+        defaultMessage: 'Sort by npm downloads',
+      },
+      option: {
+        id: 'admin.pages.MarketPlacePage.sort.npmDownloads',
+        defaultMessage: 'Number of downloads',
+      },
+    },
   };
 
   return (

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormApiTokenContainer/index.js

@@ -229,14 +229,14 @@ FormApiTokenContainer.propTypes = {
   values: PropTypes.shape({
     name: PropTypes.string,
     description: PropTypes.string,
-    lifespan: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
   }).isRequired,
   isCreating: PropTypes.bool.isRequired,
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.string,
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormBody/index.js

@@ -50,7 +50,7 @@ FormBody.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/FormHead/index.js

@@ -69,7 +69,7 @@ FormHead.propTypes = {
   apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
-    lifespan: PropTypes.number,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     name: PropTypes.string,
     accessKey: PropTypes.string,
     permissions: PropTypes.array,

package/admin/src/translations/en.json

@@ -290,6 +290,10 @@
   "admin.pages.MarketPlacePage.sort.newest": "Newest",
   "admin.pages.MarketPlacePage.sort.alphabetical.selected": "Sort by alphabetical order",
   "admin.pages.MarketPlacePage.sort.newest.selected": "Sort by newest",
+  "admin.pages.MarketPlacePage.sort.githubStars": "Number of GitHub stars",
+  "admin.pages.MarketPlacePage.sort.githubStars.selected": "Sort by GitHub stars",
+  "admin.pages.MarketPlacePage.sort.npmDownloads": "Number of downloads",
+  "admin.pages.MarketPlacePage.sort.npmDownloads.selected": "Sort by npm downloads",
   "admin.pages.MarketPlacePage.filters.collections": "Collections",
   "admin.pages.MarketPlacePage.filters.collectionsSelected": "{count, plural, =0 {No collections} one {# collection} other {# collections}} selected",
   "admin.pages.MarketPlacePage.filters.categories": "Categories",