@strapi/admin 4.11.0-beta.0 → 4.11.0-exp.0

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

@@ -1,76 +1,113 @@
-import React, { memo, useMemo, useState } from 'react';
-import get from 'lodash/get';
-import isEqual from 'lodash/isEqual';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Flex, VisuallyHidden } from '@strapi/design-system';
-import { NotAllowedInput, useNotification } from '@strapi/helper-plugin';
+import { NotAllowedInput, useNotification, useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../utils';
 
-import connect from './utils/connect';
-import select from './utils/select';
-
-import DynamicZoneComponent from './components/DynamicComponent';
-import AddComponentButton from './components/AddComponentButton';
-import DynamicZoneLabel from './components/DynamicZoneLabel';
-import ComponentPicker from './components/ComponentPicker';
+import { DynamicComponent } from './components/DynamicComponent';
+import { AddComponentButton } from './components/AddComponentButton';
+import { DynamicZoneLabel } from './components/DynamicZoneLabel';
+import { ComponentPicker } from './components/ComponentPicker';
 
 import { useContentTypeLayout } from '../../hooks';
 
-const DynamicZone = ({
-  name,
-  // Passed with the select function
-  addComponentToDynamicZone,
-  formErrors,
-  isCreatingEntry,
-  isFieldAllowed,
-  isFieldReadable,
-  labelAction,
-  moveComponentField,
-  removeComponentFromDynamicZone,
-  dynamicDisplayedComponents,
-  fieldSchema,
-  metadatas,
-}) => {
+const DynamicZone = ({ name, labelAction, fieldSchema, metadatas }) => {
+  // We cannot use the default props here
+  const { max = Infinity, min = -Infinity, components = [], required = false } = fieldSchema;
+
   const [addComponentIsOpen, setAddComponentIsOpen] = useState(false);
   const [liveText, setLiveText] = useState('');
 
+  const {
+    addComponentToDynamicZone,
+    createActionAllowedFields,
+    isCreatingEntry,
+    formErrors,
+    modifiedData,
+    moveComponentField,
+    removeComponentFromDynamicZone,
+    readActionAllowedFields,
+    updateActionAllowedFields,
+  } = useCMEditViewDataManager();
+
+  const dynamicDisplayedComponents = useMemo(
+    () =>
+      (modifiedData?.[name] ?? []).map((data) => {
+        return {
+          componentUid: data.__component,
+          id: data.id ?? data.__temp_key__,
+        };
+      }),
+    [modifiedData, name]
+  );
+
+  const { getComponentLayout } = useContentTypeLayout();
+
+  /**
+   * @type {Record<string, Array<{category: string; info: unknown, attributes: Record<string, unknown>}>>}
+   */
+  const dynamicComponentsByCategory = useMemo(() => {
+    return components.reduce((acc, componentUid) => {
+      const { category, info, attributes } = getComponentLayout(componentUid);
+      const component = { componentUid, info, attributes };
+
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+
+      acc[category] = [...acc[category], component];
+
+      return acc;
+    }, {});
+  }, [components, getComponentLayout]);
+
   const { formatMessage } = useIntl();
 
   const toggleNotification = useNotification();
-  const { getComponentLayout, components } = useContentTypeLayout();
+
+  const isFieldAllowed = useMemo(() => {
+    const allowedFields = isCreatingEntry ? createActionAllowedFields : updateActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [name, isCreatingEntry, createActionAllowedFields, updateActionAllowedFields]);
+
+  const isFieldReadable = useMemo(() => {
+    const allowedFields = isCreatingEntry ? [] : readActionAllowedFields;
+
+    return allowedFields.includes(name);
+  }, [name, isCreatingEntry, readActionAllowedFields]);
 
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
   const intlDescription = metadatas.description
     ? { id: metadatas.description, defaultMessage: metadatas.description }
     : null;
 
-  // We cannot use the default props here
-  const { max = Infinity, min = -Infinity } = fieldSchema;
-  const dynamicZoneErrors = useMemo(() => {
-    return Object.keys(formErrors)
-      .filter((key) => {
-        return key === name;
-      })
-      .map((key) => formErrors[key]);
-  }, [formErrors, name]);
+  const dynamicZoneError = formErrors[name];
 
   const missingComponentNumber = min - dynamicDisplayedComponentsLength;
-  const hasError = dynamicZoneErrors.length > 0;
-
-  const hasMinError =
-    dynamicZoneErrors.length > 0 && get(dynamicZoneErrors, [0, 'id'], '').includes('min');
+  const hasError = !!dynamicZoneError;
 
-  const hasMaxError =
-    hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
-
-  const handleAddComponent = (componentUid) => {
+  const handleAddComponent = (componentUid, position) => {
     setAddComponentIsOpen(false);
 
     const componentLayoutData = getComponentLayout(componentUid);
 
-    addComponentToDynamicZone(name, componentLayoutData, components, hasError);
+    const allComponents = Object.values(dynamicComponentsByCategory).reduce((acc, components) => {
+      const componentObjects = components.reduce((acc, { componentUid, attributes }) => {
+        acc[componentUid] = {
+          attributes,
+          uid: componentUid,
+        };
+
+        return acc;
+      }, {});
+
+      return { ...acc, ...componentObjects };
+    }, {});
+
+    addComponentToDynamicZone(name, componentLayoutData, allComponents, hasError, position);
   };
 
   const handleClickOpenPicker = () => {
@@ -160,6 +197,38 @@ const DynamicZone = ({
     removeComponentFromDynamicZone(name, currentIndex);
   };
 
+  const renderButtonLabel = () => {
+    if (addComponentIsOpen) {
+      return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });
+    }
+
+    if (hasError && dynamicZoneError.id.includes('max')) {
+      return formatMessage({
+        id: 'components.Input.error.validation.max',
+        defaultMessage: 'The value is too high.',
+      });
+    }
+
+    if (hasError && dynamicZoneError.id.includes('min')) {
+      return formatMessage(
+        {
+          id: getTrad(`components.DynamicZone.missing-components`),
+          defaultMessage:
+            'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',
+        },
+        { number: missingComponentNumber }
+      );
+    }
+
+    return formatMessage(
+      {
+        id: getTrad('components.DynamicZone.add-component'),
+        defaultMessage: 'Add a component to {componentName}',
+      },
+      { componentName: metadatas.label || name }
+    );
+  };
+
   if (!isFieldAllowed && (isCreatingEntry || (!isFieldReadable && !isCreatingEntry))) {
     return (
       <NotAllowedInput
@@ -183,7 +252,7 @@ const DynamicZone = ({
             labelAction={labelAction}
             name={name}
             numberOfComponents={dynamicDisplayedComponentsLength}
-            required={fieldSchema.required || false}
+            required={required}
           />
           <VisuallyHidden id={ariaDescriptionId}>
             {formatMessage({
@@ -194,7 +263,7 @@ const DynamicZone = ({
           <VisuallyHidden aria-live="assertive">{liveText}</VisuallyHidden>
           <ol aria-describedby={ariaDescriptionId}>
             {dynamicDisplayedComponents.map(({ componentUid, id }, index) => (
-              <DynamicZoneComponent
+              <DynamicComponent
                 componentUid={componentUid}
                 formErrors={formErrors}
                 key={`${componentUid}-${id}`}
@@ -206,26 +275,26 @@ const DynamicZone = ({
                 onCancel={handleCancel}
                 onDropItem={handleDropItem}
                 onGrabItem={handleGrabItem}
+                onAddComponent={handleAddComponent}
+                dynamicComponentsByCategory={dynamicComponentsByCategory}
               />
             ))}
           </ol>
         </Box>
       )}
-
-      <AddComponentButton
-        hasError={hasError}
-        hasMaxError={hasMaxError}
-        hasMinError={hasMinError}
-        isDisabled={!isFieldAllowed}
-        label={metadatas.label}
-        missingComponentNumber={missingComponentNumber}
-        isOpen={addComponentIsOpen}
-        name={name}
-        onClick={handleClickOpenPicker}
-      />
+      <Flex justifyContent="center">
+        <AddComponentButton
+          hasError={hasError}
+          isDisabled={!isFieldAllowed}
+          isOpen={addComponentIsOpen}
+          onClick={handleClickOpenPicker}
+        >
+          {renderButtonLabel()}
+        </AddComponentButton>
+      </Flex>
       <ComponentPicker
+        dynamicComponentsByCategory={dynamicComponentsByCategory}
         isOpen={addComponentIsOpen}
-        components={fieldSchema.components ?? []}
         onClickAddComponent={handleAddComponent}
       />
     </Flex>
@@ -233,44 +302,23 @@ const DynamicZone = ({
 };
 
 DynamicZone.defaultProps = {
-  dynamicDisplayedComponents: [],
-  fieldSchema: {
-    max: Infinity,
-    min: -Infinity,
-  },
+  fieldSchema: {},
   labelAction: null,
 };
 
 DynamicZone.propTypes = {
-  addComponentToDynamicZone: PropTypes.func.isRequired,
-  dynamicDisplayedComponents: PropTypes.arrayOf(
-    PropTypes.shape({
-      componentUid: PropTypes.string.isRequired,
-      id: PropTypes.number.isRequired,
-    })
-  ),
   fieldSchema: PropTypes.shape({
-    components: PropTypes.array.isRequired,
+    components: PropTypes.array,
     max: PropTypes.number,
     min: PropTypes.number,
     required: PropTypes.bool,
   }),
-  formErrors: PropTypes.object.isRequired,
-  isCreatingEntry: PropTypes.bool.isRequired,
-  isFieldAllowed: PropTypes.bool.isRequired,
-  isFieldReadable: PropTypes.bool.isRequired,
   labelAction: PropTypes.element,
   metadatas: PropTypes.shape({
     description: PropTypes.string,
     label: PropTypes.string,
   }).isRequired,
-  moveComponentField: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
-  removeComponentFromDynamicZone: PropTypes.func.isRequired,
 };
 
-const Memoized = memo(DynamicZone, isEqual);
-
-export default connect(Memoized, select);
-
 export { DynamicZone };

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

@@ -8,6 +8,7 @@ import set from 'lodash/set';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Prompt, Redirect } from 'react-router-dom';
+import { flushSync } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Main } from '@strapi/design-system';
@@ -55,6 +56,7 @@ const EditViewDataManagerProvider = ({
   status,
   updateActionAllowedFields,
 }) => {
+  const [isSaving, setIsSaving] = React.useState(false);
   /**
    * TODO: this should be moved into the global reducer
    * to match ever other reducer in the CM.
@@ -194,14 +196,21 @@ const EditViewDataManagerProvider = ({
 
   const dispatchAddComponent = useCallback(
     (type) =>
-      (keys, componentLayoutData, components, shouldCheckErrors = false) => {
+      (
+        keys,
+        componentLayoutData,
+        allComponents,
+        shouldCheckErrors = false,
+        position = undefined
+      ) => {
         trackUsageRef.current('didAddComponentToDynamicZone');
 
         dispatch({
           type,
           keys: keys.split('.'),
+          position,
           componentLayoutData,
-          allComponents: components,
+          allComponents,
           shouldCheckErrors,
         });
       },
@@ -376,14 +385,20 @@ const EditViewDataManagerProvider = ({
       try {
         if (isEmpty(errors)) {
           const formData = createFormData(modifiedData, initialData);
+          flushSync(() => {
+            setIsSaving(true);
+          });
 
           if (isCreatingEntry) {
             await onPost(formData, trackerProperty);
           } else {
             await onPut(formData, trackerProperty);
           }
+
+          setIsSaving(false);
         }
       } catch (err) {
+        setIsSaving(false);
         errors = {
           ...errors,
           ...getAPIInnerErrors(err, { getTrad }),
@@ -445,9 +460,14 @@ const EditViewDataManagerProvider = ({
 
     try {
       if (isEmpty(errors)) {
+        flushSync(() => {
+          setIsSaving(true);
+        });
         await onPublish();
+        setIsSaving(false);
       }
     } catch (err) {
+      setIsSaving(false);
       errors = {
         ...errors,
         ...getAPIInnerErrors(err, { getTrad }),
@@ -639,10 +659,12 @@ const EditViewDataManagerProvider = ({
         </Main>
       ) : (
         <>
-          <Prompt
-            when={!isEqual(modifiedData, initialData)}
-            message={formatMessage({ id: 'global.prompt.unsaved' })}
-          />
+          {!isSaving ? (
+            <Prompt
+              when={!isEqual(modifiedData, initialData)}
+              message={formatMessage({ id: 'global.prompt.unsaved' })}
+            />
+          ) : null}
           <form noValidate onSubmit={handleSubmit}>
             {children}
           </form>

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -52,7 +52,13 @@ const reducer = (state, action) =>
       }
       case 'ADD_COMPONENT_TO_DYNAMIC_ZONE':
       case 'ADD_REPEATABLE_COMPONENT_TO_FIELD': {
-        const { keys, allComponents, componentLayoutData, shouldCheckErrors } = action;
+        const {
+          keys,
+          allComponents,
+          componentLayoutData,
+          shouldCheckErrors,
+          position = undefined,
+        } = action;
 
         if (shouldCheckErrors) {
           draftState.shouldCheckErrors = !state.shouldCheckErrors;
@@ -62,7 +68,15 @@ const reducer = (state, action) =>
           draftState.modifiedDZName = keys[0];
         }
 
-        const currentValue = get(state, ['modifiedData', ...keys], []);
+        const currentValue = [...get(state, ['modifiedData', ...keys], [])];
+
+        let actualPosition = position;
+
+        if (actualPosition === undefined) {
+          actualPosition = currentValue.length;
+        } else if (actualPosition < 0) {
+          actualPosition = 0;
+        }
 
         const defaultDataStructure =
           action.type === 'ADD_COMPONENT_TO_DYNAMIC_ZONE'
@@ -87,11 +101,9 @@ const reducer = (state, action) =>
           componentLayoutData.attributes
         );
 
-        const newValue = Array.isArray(currentValue)
-          ? [...currentValue, componentDataStructure]
-          : [componentDataStructure];
+        currentValue.splice(actualPosition, 0, componentDataStructure);
 
-        set(draftState, ['modifiedData', ...keys], newValue);
+        set(draftState, ['modifiedData', ...keys], currentValue);
 
         break;
       }

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

@@ -12,14 +12,7 @@ import Wysiwyg from '../Wysiwyg';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
-import {
-  connect,
-  generateOptions,
-  getInputType,
-  getStep,
-  select,
-  VALIDATIONS_TO_OMIT,
-} from './utils';
+import { connect, generateOptions, getInputType, select, VALIDATIONS_TO_OMIT } from './utils';
 
 function Inputs({
   allowedFields,
@@ -93,9 +86,7 @@ function Inputs({
     return value;
   }, [type, value]);
 
-  const step = useMemo(() => {
-    return getStep(type);
-  }, [type]);
+  const step = getStep(type);
 
   const isUserAllowedToEditField = useMemo(() => {
     const joinedName = fieldName.join('.');
@@ -184,6 +175,9 @@ function Inputs({
 
     let minutes;
 
+    /**
+     * Wtf is this?
+     */
     if (inputType === 'datetime') {
       minutes = parseInt(inputValue.substr(14, 2), 10);
     } else if (inputType === 'time') {
@@ -316,6 +310,19 @@ Inputs.propTypes = {
   customFieldInputs: PropTypes.object,
 };
 
+const getStep = (type) => {
+  switch (type) {
+    case 'float':
+    case 'decimal':
+      return 0.01;
+    case 'time':
+    case 'datetime':
+      return 15;
+    default:
+      return 1;
+  }
+};
+
 const Memoized = memo(Inputs, isEqual);
 
 export default connect(Memoized, select);

package/admin/src/content-manager/components/Inputs/utils/index.js

@@ -1,6 +1,5 @@
 export { default as connect } from './connect';
 export { default as generateOptions } from './generateOptions';
 export { default as getInputType } from './getInputType';
-export { default as getStep } from './getStep';
 export { default as select } from './select';
 export { default as VALIDATIONS_TO_OMIT } from './VALIDATIONS_TO_OMIT';

package/admin/src/content-manager/pages/EditSettingsView/components/DynamicZoneList.js

@@ -25,6 +25,12 @@ const CustomLink = styled(Flex)`
     > div:first-child {
       background: ${({ theme }) => theme.colors.primary200};
       color: ${({ theme }) => theme.colors.primary600};
+
+      svg {
+        path {
+          fill: ${({ theme }) => theme.colors.primary600};
+        }
+      }
     }
   }
 `;
@@ -49,7 +55,7 @@ const DynamicZoneList = ({ components }) => {
           as={Link}
           to={`/content-manager/components/${componentUid}/configurations/edit`}
         >
-          <ComponentIcon />
+          <ComponentIcon icon={componentLayouts?.[componentUid]?.info?.icon} />
 
           <Box paddingTop={1}>
             <Typography fontSize={1} textColor="neutral600" fontWeight="bold">

package/admin/src/content-manager/pages/EditView/index.js

@@ -13,7 +13,7 @@ import { Pencil, Layer } from '@strapi/icons';
 import InformationBox from 'ee_else_ce/content-manager/pages/EditView/InformationBox';
 import { InjectionZone } from '../../../shared/components';
 import permissions from '../../../permissions';
-import DynamicZone from '../../components/DynamicZone';
+import { DynamicZone } from '../../components/DynamicZone';
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
 import EditViewDataManagerProvider from '../../components/EditViewDataManagerProvider';
 import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';

package/admin/src/hooks/useContentTypes/useContentTypes.js

@@ -2,8 +2,6 @@ import { useAPIErrorHandler, useFetchClient, useNotification } from '@strapi/hel
 import { useQueries } from 'react-query';
 
 export function useContentTypes() {
-  console.log('----> read');
-
   const { get } = useFetchClient();
   const { formatAPIError } = useAPIErrorHandler();
   const toggleNotification = useNotification();

package/admin/src/index.js

@@ -1,7 +1,7 @@
-import ReactDOM from 'react-dom';
 import { getFetchClient } from '@strapi/helper-plugin';
-import { Components, Fields, Middlewares, Reducers } from './core/apis';
+import { createRoot } from 'react-dom/client';
 import appCustomisations from './app';
+import { Components, Fields, Middlewares, Reducers } from './core/apis';
 // eslint-disable-next-line import/extensions
 import plugins from './plugins';
 import appReducers from './reducers';
@@ -68,7 +68,8 @@ const run = async () => {
 
   await app.loadTrads();
 
-  ReactDOM.render(app.render(), MOUNT_NODE);
+  const root = createRoot(MOUNT_NODE);
+  root.render(app.render());
 };
 
 run();

package/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -47,7 +47,7 @@ const ListPage = () => {
     pagination,
     isError,
     isLoading,
-    refetchQueries: refetchAdminUsers,
+    refetch: refetchAdminUsers,
   } = useAdminUsers(qs.parse(search, { ignoreQueryPrefix: true }), {
     enabled: canRead,
   });

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventTable/EventTableCE.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import EventTable from '../Events';
+
+// This component is overwritten by the EE counterpart
+export function EventTableCE() {
+  return (
+    <EventTable.Root>
+      <EventTable.Headers />
+      <EventTable.Body />
+    </EventTable.Root>
+  );
+}

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventTable/index.js

@@ -0,0 +1,3 @@
+import { EventTableCE } from './EventTableCE';
+
+export default EventTableCE;