@strapi/admin 4.5.0 → 4.5.2

package/admin/src/content-manager/components/DynamicZone/index.js

@@ -1,24 +1,22 @@
-import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
 import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+
 import { getTrad } from '../../utils';
+
 import connect from './utils/connect';
 import select from './utils/select';
-import AddComponentButton from './components/AddComponentButton';
-import DzLabel from './components/DzLabel';
-import Component from './components/Component';
 
+import DynamicZoneComponent from './components/DynamicComponent';
+import AddComponentButton from './components/AddComponentButton';
+import DynamicZoneLabel from './components/DynamicZoneLabel';
 import ComponentPicker from './components/ComponentPicker';
-import { useContentTypeLayout } from '../../hooks';
 
-/* eslint-disable react/no-array-index-key */
-
-const createCollapses = (arrayLength) =>
-  Array.from({ length: arrayLength }).map(() => ({ isOpen: false }));
+import { useContentTypeLayout } from '../../hooks';
 
 const DynamicZone = ({
   name,
@@ -36,39 +34,16 @@ const DynamicZone = ({
   fieldSchema,
   metadatas,
 }) => {
+  const [addComponentIsOpen, setAddComponentIsOpen] = useState(false);
+
   const toggleNotification = useNotification();
-  const [isOpen, setIsOpen] = useState(false);
-  const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false);
   const { getComponentLayout, components } = useContentTypeLayout();
+
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
   const intlDescription = metadatas.description
     ? { id: metadatas.description, defaultMessage: metadatas.description }
     : null;
 
-  const [componentCollapses, setComponentsCollapses] = useState(
-    createCollapses(dynamicDisplayedComponentsLength)
-  );
-
-  useEffect(() => {
-    setComponentsCollapses(createCollapses(dynamicDisplayedComponentsLength));
-  }, [dynamicDisplayedComponentsLength]);
-
-  useEffect(() => {
-    if (shouldOpenAddedComponent) {
-      setComponentsCollapses((prev) =>
-        prev.map((collapse, index) => {
-          if (index === prev.length - 1) {
-            return { ...collapse, isOpen: true };
-          }
-
-          return collapse;
-        })
-      );
-
-      setShouldOpenAddedComponent(false);
-    }
-  }, [shouldOpenAddedComponent]);
-
   // We cannot use the default props here
   const { max = Infinity, min = -Infinity } = fieldSchema;
   const dynamicZoneErrors = useMemo(() => {
@@ -79,8 +54,6 @@ const DynamicZone = ({
       .map((key) => formErrors[key]);
   }, [formErrors, name]);
 
-  const dynamicZoneAvailableComponents = useMemo(() => fieldSchema.components || [], [fieldSchema]);
-
   const missingComponentNumber = min - dynamicDisplayedComponentsLength;
   const hasError = dynamicZoneErrors.length > 0;
 
@@ -90,21 +63,17 @@ const DynamicZone = ({
   const hasMaxError =
     hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
 
-  const handleAddComponent = useCallback(
-    (componentUid) => {
-      setIsOpen(false);
+  const handleAddComponent = (componentUid) => {
+    setAddComponentIsOpen(false);
 
-      const componentLayoutData = getComponentLayout(componentUid);
+    const componentLayoutData = getComponentLayout(componentUid);
 
-      addComponentToDynamicZone(name, componentLayoutData, components, hasError);
-      setShouldOpenAddedComponent(true);
-    },
-    [addComponentToDynamicZone, hasError, name, components, getComponentLayout]
-  );
+    addComponentToDynamicZone(name, componentLayoutData, components, hasError);
+  };
 
   const handleClickOpenPicker = () => {
     if (dynamicDisplayedComponentsLength < max) {
-      setIsOpen((prev) => !prev);
+      setAddComponentIsOpen((prev) => !prev);
     } else {
       toggleNotification({
         type: 'info',
@@ -113,68 +82,19 @@ const DynamicZone = ({
     }
   };
 
-  const handleToggleComponent = (indexToToggle) => {
-    setComponentsCollapses((prev) =>
-      prev.map(({ isOpen }, index) => {
-        if (index === indexToToggle) {
-          return { isOpen: !isOpen };
-        }
-
-        return { isOpen };
-      })
-    );
-  };
-
-  const handleMoveComponentDown = (name, currentIndex) => {
-    moveComponentDown(name, currentIndex);
-    setComponentsCollapses((prev) => {
-      return prev.map(({ isOpen }, index, refArray) => {
-        if (index === currentIndex + 1) {
-          return { isOpen: refArray[currentIndex].isOpen };
-        }
-
-        if (index === currentIndex) {
-          return { isOpen: refArray[index + 1].isOpen };
-        }
-
-        return { isOpen };
-      });
-    });
+  const handleMoveComponentDown = (name, componentIndex) => () => {
+    moveComponentDown(name, componentIndex);
   };
 
-  const handleMoveComponentUp = (name, currentIndex) => {
-    moveComponentUp(name, currentIndex);
-    setComponentsCollapses((prev) => {
-      return prev.map(({ isOpen }, index, refArray) => {
-        if (index === currentIndex - 1) {
-          return { isOpen: refArray[currentIndex].isOpen };
-        }
-
-        if (index === currentIndex) {
-          return { isOpen: refArray[index - 1].isOpen };
-        }
-
-        return { isOpen };
-      });
-    });
+  const handleMoveComponentUp = (name, componentIndex) => () => {
+    moveComponentUp(name, componentIndex);
   };
 
-  const handleRemoveComponent = (name, currentIndex) => {
+  const handleRemoveComponent = (name, currentIndex) => () => {
     removeComponentFromDynamicZone(name, currentIndex);
   };
 
-  if (!isFieldAllowed && isCreatingEntry) {
-    return (
-      <NotAllowedInput
-        description={intlDescription}
-        intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
-        labelAction={labelAction}
-        name={name}
-      />
-    );
-  }
-
-  if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
+  if (!isFieldAllowed && (isCreatingEntry || (!isFieldReadable && !isCreatingEntry))) {
     return (
       <NotAllowedInput
         description={intlDescription}
@@ -189,7 +109,7 @@ const DynamicZone = ({
     <Stack spacing={6}>
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
-          <DzLabel
+          <DynamicZoneLabel
             intlDescription={intlDescription}
             label={metadatas.label}
             labelAction={labelAction}
@@ -198,26 +118,21 @@ const DynamicZone = ({
             required={fieldSchema.required || false}
           />
           {dynamicDisplayedComponents.map((componentUid, index) => {
-            const showDownIcon =
-              isFieldAllowed &&
-              dynamicDisplayedComponentsLength > 0 &&
-              index < dynamicDisplayedComponentsLength - 1;
-            const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
-            const isOpen = componentCollapses[index]?.isOpen || false;
+            const showDownIcon = isFieldAllowed && index < dynamicDisplayedComponentsLength - 1;
+            const showUpIcon = isFieldAllowed && index > 0;
 
             return (
-              <Component
+              <DynamicZoneComponent
                 componentUid={componentUid}
                 formErrors={formErrors}
+                // eslint-disable-next-line react/no-array-index-key
                 key={index}
                 index={index}
-                isOpen={isOpen}
                 isFieldAllowed={isFieldAllowed}
-                moveComponentDown={handleMoveComponentDown}
-                moveComponentUp={handleMoveComponentUp}
-                onToggle={handleToggleComponent}
+                onMoveComponentDownClick={handleMoveComponentDown(name, index)}
+                onMoveComponentUpClick={handleMoveComponentUp(name, index)}
                 name={name}
-                removeComponentFromDynamicZone={handleRemoveComponent}
+                onRemoveComponentClick={handleRemoveComponent(name, index)}
                 showDownIcon={showDownIcon}
                 showUpIcon={showUpIcon}
               />
@@ -233,13 +148,13 @@ const DynamicZone = ({
         isDisabled={!isFieldAllowed}
         label={metadatas.label}
         missingComponentNumber={missingComponentNumber}
-        isOpen={isOpen}
+        isOpen={addComponentIsOpen}
         name={name}
         onClick={handleClickOpenPicker}
       />
       <ComponentPicker
-        isOpen={isOpen}
-        components={dynamicZoneAvailableComponents}
+        isOpen={addComponentIsOpen}
+        components={fieldSchema.components ?? []}
         onClickAddComponent={handleAddComponent}
       />
     </Stack>

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/HomePage/index.js

@@ -32,7 +32,7 @@ const LogoContainer = styled(Box)`
 `;
 
 const HomePage = () => {
-  // // Temporary until we develop the menu API
+  // Temporary until we develop the menu API
   const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
   const { guidedTourState, isGuidedTourVisible, isSkipped } = useGuidedTour();
 

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

@@ -9,6 +9,7 @@ const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, cust
 
   return (
     <Select
+      data-testid={`${message}-button`}
       aria-label={message}
       placeholder={message}
       size="M"
@@ -20,7 +21,7 @@ const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, cust
     >
       {Object.entries(possibleFilters).map(([filterName, count]) => {
         return (
-          <Option key={filterName} value={filterName}>
+          <Option data-testid={`${filterName}-${count}`} key={filterName} value={filterName}>
             {computeFilterMessage(filterName, count)}
           </Option>
         );

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

@@ -51,6 +51,7 @@ const NpmPackagesFilters = ({
         <ButtonToggle
           variant="tertiary"
           ref={buttonRef}
+          data-testid="filters-button"
           startIcon={<Filter />}
           onClick={handleToggle}
           size="S"

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,