@strapi/admin 4.5.1 → 4.5.2

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/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,