@strapi/admin 4.11.4 → 4.12.0-beta.1

package/admin/src/constants.js

@@ -1,90 +1,90 @@
 export const ADMIN_PERMISSIONS_CE = {
-    contentManager: {
-      main: [],
-      collectionTypesConfigurations: [
-        {
-          action: 'plugin::content-manager.collection-types.configure-view',
-          subject: null,
-        },
+  contentManager: {
+    main: [],
+    collectionTypesConfigurations: [
+      {
+        action: 'plugin::content-manager.collection-types.configure-view',
+        subject: null,
+      },
+    ],
+    componentsConfigurations: [
+      {
+        action: 'plugin::content-manager.components.configure-layout',
+        subject: null,
+      },
+    ],
+    singleTypesConfigurations: [
+      {
+        action: 'plugin::content-manager.single-types.configure-view',
+        subject: null,
+      },
+    ],
+  },
+  marketplace: {
+    main: [{ action: 'admin::marketplace.read', subject: null }],
+    read: [{ action: 'admin::marketplace.read', subject: null }],
+  },
+  settings: {
+    roles: {
+      main: [
+        { action: 'admin::roles.create', subject: null },
+        { action: 'admin::roles.update', subject: null },
+        { action: 'admin::roles.read', subject: null },
+        { action: 'admin::roles.delete', subject: null },
       ],
-      componentsConfigurations: [
-        {
-          action: 'plugin::content-manager.components.configure-layout',
-          subject: null,
-        },
+      create: [{ action: 'admin::roles.create', subject: null }],
+      delete: [{ action: 'admin::roles.delete', subject: null }],
+      read: [{ action: 'admin::roles.read', subject: null }],
+      update: [{ action: 'admin::roles.update', subject: null }],
+    },
+    users: {
+      main: [
+        { action: 'admin::users.create', subject: null },
+        { action: 'admin::users.read', subject: null },
+        { action: 'admin::users.update', subject: null },
+        { action: 'admin::users.delete', subject: null },
       ],
-      singleTypesConfigurations: [
-        {
-          action: 'plugin::content-manager.single-types.configure-view',
-          subject: null,
-        },
+      create: [{ action: 'admin::users.create', subject: null }],
+      delete: [{ action: 'admin::users.delete', subject: null }],
+      read: [{ action: 'admin::users.read', subject: null }],
+      update: [{ action: 'admin::users.update', subject: null }],
+    },
+    webhooks: {
+      main: [
+        { action: 'admin::webhooks.create', subject: null },
+        { action: 'admin::webhooks.read', subject: null },
+        { action: 'admin::webhooks.update', subject: null },
+        { action: 'admin::webhooks.delete', subject: null },
+      ],
+      create: [{ action: 'admin::webhooks.create', subject: null }],
+      delete: [{ action: 'admin::webhooks.delete', subject: null }],
+      read: [
+        { action: 'admin::webhooks.read', subject: null },
+        // NOTE: We need to check with the API
+        { action: 'admin::webhooks.update', subject: null },
+        { action: 'admin::webhooks.delete', subject: null },
       ],
+      update: [{ action: 'admin::webhooks.update', subject: null }],
     },
-    marketplace: {
-      main: [{ action: 'admin::marketplace.read', subject: null }],
-      read: [{ action: 'admin::marketplace.read', subject: null }],
+    'api-tokens': {
+      main: [{ action: 'admin::api-tokens.access', subject: null }],
+      create: [{ action: 'admin::api-tokens.create', subject: null }],
+      delete: [{ action: 'admin::api-tokens.delete', subject: null }],
+      read: [{ action: 'admin::api-tokens.read', subject: null }],
+      update: [{ action: 'admin::api-tokens.update', subject: null }],
+      regenerate: [{ action: 'admin::api-tokens.regenerate', subject: null }],
     },
-    settings: {
-      roles: {
-        main: [
-          { action: 'admin::roles.create', subject: null },
-          { action: 'admin::roles.update', subject: null },
-          { action: 'admin::roles.read', subject: null },
-          { action: 'admin::roles.delete', subject: null },
-        ],
-        create: [{ action: 'admin::roles.create', subject: null }],
-        delete: [{ action: 'admin::roles.delete', subject: null }],
-        read: [{ action: 'admin::roles.read', subject: null }],
-        update: [{ action: 'admin::roles.update', subject: null }],
-      },
-      users: {
-        main: [
-          { action: 'admin::users.create', subject: null },
-          { action: 'admin::users.read', subject: null },
-          { action: 'admin::users.update', subject: null },
-          { action: 'admin::users.delete', subject: null },
-        ],
-        create: [{ action: 'admin::users.create', subject: null }],
-        delete: [{ action: 'admin::users.delete', subject: null }],
-        read: [{ action: 'admin::users.read', subject: null }],
-        update: [{ action: 'admin::users.update', subject: null }],
-      },
-      webhooks: {
-        main: [
-          { action: 'admin::webhooks.create', subject: null },
-          { action: 'admin::webhooks.read', subject: null },
-          { action: 'admin::webhooks.update', subject: null },
-          { action: 'admin::webhooks.delete', subject: null },
-        ],
-        create: [{ action: 'admin::webhooks.create', subject: null }],
-        delete: [{ action: 'admin::webhooks.delete', subject: null }],
-        read: [
-          { action: 'admin::webhooks.read', subject: null },
-          // NOTE: We need to check with the API
-          { action: 'admin::webhooks.update', subject: null },
-          { action: 'admin::webhooks.delete', subject: null },
-        ],
-        update: [{ action: 'admin::webhooks.update', subject: null }],
-      },
-      'api-tokens': {
-        main: [{ action: 'admin::api-tokens.access', subject: null }],
-        create: [{ action: 'admin::api-tokens.create', subject: null }],
-        delete: [{ action: 'admin::api-tokens.delete', subject: null }],
-        read: [{ action: 'admin::api-tokens.read', subject: null }],
-        update: [{ action: 'admin::api-tokens.update', subject: null }],
-        regenerate: [{ action: 'admin::api-tokens.regenerate', subject: null }],
-      },
-      'transfer-tokens': {
-        main: [{ action: 'admin::transfer.tokens.access', subject: null }],
-        create: [{ action: 'admin::transfer.tokens.create', subject: null }],
-        delete: [{ action: 'admin::transfer.tokens.delete', subject: null }],
-        read: [{ action: 'admin::transfer.tokens.read', subject: null }],
-        update: [{ action: 'admin::transfer.tokens.update', subject: null }],
-        regenerate: [{ action: 'admin::transfer.tokens.regenerate', subject: null }],
-      },
-      'project-settings': {
-        read: [{ action: 'admin::project-settings.read', subject: null }],
-        update: [{ action: 'admin::project-settings.update', subject: null }],
-      },
+    'transfer-tokens': {
+      main: [{ action: 'admin::transfer.tokens.access', subject: null }],
+      create: [{ action: 'admin::transfer.tokens.create', subject: null }],
+      delete: [{ action: 'admin::transfer.tokens.delete', subject: null }],
+      read: [{ action: 'admin::transfer.tokens.read', subject: null }],
+      update: [{ action: 'admin::transfer.tokens.update', subject: null }],
+      regenerate: [{ action: 'admin::transfer.tokens.regenerate', subject: null }],
+    },
+    'project-settings': {
+      read: [{ action: 'admin::project-settings.read', subject: null }],
+      update: [{ action: 'admin::project-settings.update', subject: null }],
     },
-  };
+  },
+};

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

@@ -43,7 +43,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const { setCurrentStep } = useGuidedTour();
   const { trackUsage } = useTracking();
   const { push, replace } = useHistory();
-  const [{ rawQuery }] = useQueryParams();
+  const [{ query, rawQuery }] = useQueryParams();
   const dispatch = useDispatch();
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
@@ -244,13 +244,15 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
        */
       const endPoint =
         typeof origin === 'string'
-          ? `${getRequestUrl(`collection-types/${slug}/clone/${origin}`)}${rawQuery}`
-          : `${getRequestUrl(`collection-types/${slug}`)}${rawQuery}`;
+          ? getRequestUrl(`collection-types/${slug}/clone/${origin}`)
+          : getRequestUrl(`collection-types/${slug}`);
       try {
         // Show a loading button in the EditView/Header.js && lock the app => no navigation
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await post(endPoint, body);
+        const { data } = await post(endPoint, body, {
+          params: query,
+        });
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -286,11 +288,12 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       replace,
       slug,
       dispatch,
-      rawQuery,
+      query,
       toggleNotification,
       setCurrentStep,
       queryClient,
       post,
+      rawQuery,
     ]
   );
 

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

@@ -75,20 +75,9 @@ function Inputs({
     return foundAttributeType === 'dynamiczone';
   }, [currentContentTypeLayout, fieldName]);
 
-  const inputType = useMemo(() => {
-    return getInputType(type);
-  }, [type]);
-
-  const inputValue = useMemo(() => {
-    // Fix for input file multipe
-    if (type === 'media' && !value) {
-      return [];
-    }
-
-    return value;
-  }, [type, value]);
+  const inputType = getInputType(type);
 
-  const step = getStep(type);
+  const inputValue = type === 'media' && !value ? [] : value;
 
   const isUserAllowedToEditField = useMemo(() => {
     const joinedName = fieldName.join('.');
@@ -159,36 +148,6 @@ function Inputs({
 
   const { label, description, placeholder, visible } = metadatas;
 
-  /**
-   * It decides whether using the default `step` accoding to its `inputType` or the one
-   * obtained from `metadatas`.
-   *
-   * The `metadatas.step` is returned when the `inputValue` is divisible by it or when the
-   * `inputValue` is empty, otherwise the default `step` is returned.
-   */
-  const inputStep = useMemo(() => {
-    if (!metadatas.step || (inputType !== 'datetime' && inputType !== 'time')) {
-      return step;
-    }
-
-    if (!inputValue) {
-      return metadatas.step;
-    }
-
-    let minutes;
-
-    /**
-     * Wtf is this?
-     */
-    if (inputType === 'datetime') {
-      minutes = parseInt(inputValue.substr(14, 2), 10);
-    } else if (inputType === 'time') {
-      minutes = parseInt(inputValue.slice(-2), 10);
-    }
-
-    return minutes % metadatas.step === 0 ? metadatas.step : step;
-  }, [inputType, inputValue, metadatas.step, step]);
-
   if (visible === false) {
     return null;
   }
@@ -271,7 +230,7 @@ function Inputs({
       options={options}
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
-      step={inputStep}
+      step={getStep(type)}
       type={customFieldUid || inputType}
       // validations={validations}
       value={inputValue}
@@ -317,9 +276,6 @@ const getStep = (type) => {
     case 'float':
     case 'decimal':
       return 0.01;
-    case 'time':
-    case 'datetime':
-      return 15;
     default:
       return 1;
   }

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

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
 
 import {
   formatContentTypeData,
@@ -16,7 +16,7 @@ import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import buildQueryString from '../../pages/ListView/utils/buildQueryString';
+import { buildValidGetParams } from '../../pages/ListView/utils';
 import {
   getData,
   getDataSucceeded,
@@ -40,7 +40,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const trackUsageRef = useRef(trackUsage);
   const [isCreatingEntry, setIsCreatingEntry] = useState(true);
   const [{ query, rawQuery }] = useQueryParams();
-  const searchToSend = buildQueryString(query);
+  const params = useMemo(() => buildValidGetParams(query), [query]);
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
@@ -110,8 +110,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       setIsCreatingEntry(true);
 
       try {
-        const { data } = await fetchClient.get(getRequestUrl(`${slug}${searchToSend}`), {
+        const { data } = await fetchClient.get(getRequestUrl(slug), {
           cancelToken: source.token,
+          params,
         });
 
         dispatch(getDataSucceeded(cleanReceivedData(data)));
@@ -143,16 +144,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     fetchData(source);
 
     return () => source.cancel('Operation canceled by the user.');
-  }, [
-    fetchClient,
-    cleanReceivedData,
-    push,
-    slug,
-    dispatch,
-    searchToSend,
-    rawQuery,
-    toggleNotification,
-  ]);
+  }, [fetchClient, cleanReceivedData, push, slug, dispatch, params, rawQuery, toggleNotification]);
 
   const displayErrors = useCallback(
     (err) => {
@@ -166,7 +158,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await del(getRequestUrl(`${slug}${searchToSend}`));
+        const { data } = await del(getRequestUrl(slug), {
+          params: query,
+        });
 
         toggleNotification({
           type: 'success',
@@ -187,17 +181,17 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [del, slug, displayErrors, toggleNotification, searchToSend, dispatch, rawQuery]
+    [del, slug, displayErrors, toggleNotification, query, dispatch, rawQuery]
   );
 
   const onPost = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = getRequestUrl(`${slug}${rawQuery}`);
+      const endPoint = getRequestUrl(slug);
 
       try {
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await put(endPoint, body);
+        const { data } = await put(endPoint, body, { params: query });
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -232,7 +226,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       displayErrors,
       slug,
       dispatch,
-      rawQuery,
+      query,
       toggleNotification,
       setCurrentStep,
       queryClient,
@@ -263,11 +257,17 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const onPublish = useCallback(async () => {
     try {
       trackUsageRef.current('willPublishEntry');
-      const endPoint = getRequestUrl(`${slug}/actions/publish${searchToSend}`);
+      const endPoint = getRequestUrl(`${slug}/actions/publish`);
 
       dispatch(setStatus('publish-pending'));
 
-      const { data } = await post(endPoint);
+      const { data } = await post(
+        endPoint,
+        {},
+        {
+          params: query,
+        }
+      );
 
       trackUsageRef.current('didPublishEntry');
       toggleNotification({
@@ -287,18 +287,18 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [post, cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
+  }, [post, cleanReceivedData, displayErrors, slug, query, dispatch, toggleNotification]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = getRequestUrl(`${slug}${rawQuery}`);
+      const endPoint = getRequestUrl(slug);
 
       try {
         trackUsageRef.current('willEditEntry', trackerProperty);
 
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await put(endPoint, body);
+        const { data } = await put(endPoint, body, { params: query });
 
         toggleNotification({
           type: 'success',
@@ -325,28 +325,25 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [
-      put,
-      cleanReceivedData,
-      displayErrors,
-      slug,
-      dispatch,
-      rawQuery,
-      toggleNotification,
-      queryClient,
-    ]
+    [put, cleanReceivedData, displayErrors, slug, dispatch, query, toggleNotification, queryClient]
   );
 
   // The publish and unpublish method could be refactored but let's leave the duplication for now
   const onUnpublish = useCallback(async () => {
-    const endPoint = getRequestUrl(`${slug}/actions/unpublish${searchToSend}`);
+    const endPoint = getRequestUrl(`${slug}/actions/unpublish`);
 
     dispatch(setStatus('unpublish-pending'));
 
     try {
       trackUsageRef.current('willUnpublishEntry');
 
-      const { data } = await post(endPoint);
+      const { data } = await post(
+        endPoint,
+        {},
+        {
+          params: query,
+        }
+      );
 
       trackUsageRef.current('didUnpublishEntry');
       toggleNotification({
@@ -361,7 +358,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(setStatus('resolved'));
       displayErrors(err);
     }
-  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, searchToSend]);
+  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, query]);
 
   return children({
     componentsDataStructure,

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

@@ -20,10 +20,6 @@ const FIELD_SIZES = [
   [12, '100%'],
 ];
 
-const TIME_FIELD_OPTIONS = [1, 5, 10, 15, 30, 60];
-
-const TIME_FIELD_TYPES = ['datetime', 'time'];
-
 const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
@@ -131,33 +127,10 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     </GridItem>
   );
 
-  const hasTimePicker = TIME_FIELD_TYPES.includes(attributes[selectedField].type);
-
-  const timeStepField = (
-    <GridItem col={6} key="step">
-      <Select
-        value={get(fieldForm, ['metadata', 'step'], 1)}
-        name="step"
-        onChange={(value) => onMetaChange({ target: { name: 'step', value } })}
-        label={formatMessage({
-          id: getTrad('containers.SettingPage.editSettings.step.label'),
-          defaultMessage: 'Time interval (minutes)',
-        })}
-      >
-        {TIME_FIELD_OPTIONS.map((value) => (
-          <Option key={value} value={value}>
-            {value}
-          </Option>
-        ))}
-      </Select>
-    </GridItem>
-  );
-
   return (
     <>
       {metaFields}
       {isResizable && sizeField}
-      {hasTimePicker && timeStepField}
     </>
   );
 };

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

@@ -124,7 +124,7 @@ Root.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
 
-export default {
+export const Information = {
   Root,
   Title,
   Body,

package/admin/src/content-manager/pages/EditView/InformationBox/InformationBoxCE.js

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import Information from '../Information';
+import { Information } from '../Information';
 
-// This component is overwritten by the EE counterpart
 export function InformationBoxCE() {
   return (
     <Information.Root>

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

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

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

@@ -9,12 +9,12 @@ import {
   useTracking,
 } from '@strapi/helper-plugin';
 import { Layer, Pencil } from '@strapi/icons';
-import InformationBox from 'ee_else_ce/content-manager/pages/EditView/InformationBox';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
+import { useEnterprise } from '../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
@@ -29,6 +29,7 @@ import DraftAndPublishBadge from './DraftAndPublishBadge';
 import GridRow from './GridRow';
 import Header from './Header';
 import { useOnce } from './hooks/useOnce';
+import { InformationBoxCE } from './InformationBox';
 import { selectCurrentLayout, selectAttributesLayout, selectCustomFieldUids } from './selectors';
 import { getFieldsActionMatchingPermissions } from './utils';
 
@@ -42,6 +43,12 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
   const permissions = useSelector(selectAdminPermissions);
   const location = useLocation();
   const toggleNotification = useNotification();
+  const Information = useEnterprise(
+    InformationBoxCE,
+    async () =>
+      (await import('../../../../../ee/admin/content-manager/pages/EditView/InformationBox'))
+        .InformationBoxEE
+  );
 
   useOnce(() => {
     /**
@@ -91,6 +98,11 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
     return <LoadingIndicatorPage />;
   }
 
+  // wait until the EE component is fully loaded before rendering, to prevent flickering
+  if (!Information) {
+    return null;
+  }
+
   return (
     <DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
       {({
@@ -202,7 +214,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         paddingTop={6}
                         shadow="tableShadow"
                       >
-                        <InformationBox />
+                        <Information />
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">