@strapi/admin 4.6.1 → 4.9.0-alpha.0

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

@@ -10,6 +10,7 @@ import {
   formatContentTypeData,
   contentManagementUtilRemoveFieldsFromData,
   useGuidedTour,
+  useAPIErrorHandler,
   useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
@@ -45,6 +46,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
     useSelector(selectCrudReducer);
   const redirectionLink = useFindRedirectionLink(slug);
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   const isMounted = useRef(true);
   const trackUsageRef = useRef(trackUsage);
@@ -148,8 +150,6 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
           return;
         }
 
-        console.error(err);
-
         const resStatus = get(err, 'response.status', null);
 
         if (resStatus === 404) {
@@ -203,19 +203,9 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const displayErrors = useCallback(
     (err) => {
-      const errorPayload = err.response.data;
-      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
-
-      // TODO handle errors correctly when back-end ready
-      if (Array.isArray(errorMessage)) {
-        errorMessage = get(errorMessage, ['0', 'messages', '0', 'id']);
-      }
-
-      if (typeof errorMessage === 'string') {
-        toggleNotification({ type: 'warning', message: errorMessage });
-      }
+      toggleNotification({ type: 'warning', message: formatAPIError(err) });
     },
-    [toggleNotification]
+    [toggleNotification, formatAPIError]
   );
 
   const onDelete = useCallback(

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

@@ -67,7 +67,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
       staleTime: 0,
       select: (data) => ({
         ...data,
-        results: data.results.reverse(),
+        results: [...data.results].reverse(),
       }),
     }
   );

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

@@ -42,6 +42,8 @@ const IconButtonCustom = styled(IconButton)`
   }
 `;
 
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
 const StyledBox = styled(Box)`
   > div:first-child {
     box-shadow: ${({ theme }) => theme.shadows.tableShadow};

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

@@ -8,6 +8,7 @@ import uniqBy from 'lodash/uniqBy';
 import merge from 'lodash/merge';
 import castArray from 'lodash/castArray';
 import isNil from 'lodash/isNil';
+import { generateNKeysBetween } from 'fractional-indexing';
 
 import {
   findLeafByPathAndReplace,
@@ -155,17 +156,33 @@ const reducer = (state, action) =>
         const initialDataRelations = get(state, initialDataPath);
         const modifiedDataRelations = get(state, modifiedDataPath);
 
-        /**
-         * Check if the values we're loading are already in initial
-         * data if they are then we don't need to load them at all
-         */
         const valuesToLoad = value.filter((relation) => {
           return !initialDataRelations.some((initialDataRelation) => {
             return initialDataRelation.id === relation.id;
           });
         });
 
-        set(draftState, initialDataPath, uniqBy([...valuesToLoad, ...initialDataRelations], 'id'));
+        const keys = generateNKeysBetween(
+          null,
+          modifiedDataRelations[0]?.__temp_key__,
+          valuesToLoad.length
+        );
+
+        /**
+         * Check if the values we're loading are already in initial
+         * data if they are then we don't need to load them at all
+         */
+
+        const valuesWithKeys = valuesToLoad.map((relation, index) => ({
+          ...relation,
+          __temp_key__: keys[index],
+        }));
+
+        set(
+          draftState,
+          initialDataPath,
+          uniqBy([...valuesWithKeys, ...initialDataRelations], 'id')
+        );
 
         /**
          * We need to set the value also on modifiedData, because initialData
@@ -175,7 +192,7 @@ const reducer = (state, action) =>
         set(
           draftState,
           modifiedDataPath,
-          uniqBy([...valuesToLoad, ...modifiedDataRelations], 'id')
+          uniqBy([...valuesWithKeys, ...modifiedDataRelations], 'id')
         );
 
         break;
@@ -192,7 +209,9 @@ const reducer = (state, action) =>
           set(draftState, path, [value]);
         } else {
           const modifiedDataRelations = get(state, path);
-          const newRelations = [...modifiedDataRelations, value];
+          const [key] = generateNKeysBetween(modifiedDataRelations.at(-1)?.__temp_key__, null, 1);
+
+          const newRelations = [...modifiedDataRelations, { ...value, __temp_key__: key }];
           set(draftState, path, newRelations);
         }
 
@@ -219,8 +238,19 @@ const reducer = (state, action) =>
 
         const newRelations = [...modifiedDataRelations];
 
-        newRelations.splice(oldIndex, 1);
-        newRelations.splice(newIndex, 0, currentItem);
+        if (action.type === 'REORDER_RELATION') {
+          const [newKey] = generateNKeysBetween(
+            modifiedDataRelations[newIndex - 1]?.__temp_key__,
+            modifiedDataRelations[newIndex]?.__temp_key__,
+            1
+          );
+
+          newRelations.splice(oldIndex, 1);
+          newRelations.splice(newIndex, 0, { ...currentItem, __temp_key__: newKey });
+        } else {
+          newRelations.splice(oldIndex, 1);
+          newRelations.splice(newIndex, 0, currentItem);
+        }
 
         set(draftState, path, newRelations);
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -95,28 +95,22 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            */
           let actualOldValue = get(rootServerState, trueInitialDataPath, []);
 
-          const valuesWithPositions = value.map((relation, index, allRelations) => {
-            const nextRelation = allRelations[index + 1];
-
-            if (nextRelation) {
-              return { ...relation, position: { before: nextRelation.id } };
-            }
-
-            return { ...relation, position: { end: true } };
-          });
-
           /**
            * Instead of the full relation object, we only want to send its ID
            *  connectedRelations are the items that are in the browserState
            * array but not in the serverState
            */
-          const connectedRelations = valuesWithPositions.reduce((acc, relation, currentIndex) => {
-            const indexOfRelationOnServer = actualOldValue.findIndex(
+          const connectedRelations = value.reduce((acc, relation, currentIndex, array) => {
+            const relationOnServer = actualOldValue.find(
               (oldRelation) => oldRelation.id === relation.id
             );
 
-            if (indexOfRelationOnServer === -1 || indexOfRelationOnServer !== currentIndex) {
-              return [...acc, { id: relation.id, position: relation.position }];
+            const relationInFront = array[currentIndex + 1];
+
+            if (!relationOnServer || relationOnServer.__temp_key__ !== relation.__temp_key__) {
+              const position = relationInFront ? { before: relationInFront.id } : { end: true };
+
+              return [...acc, { id: relation.id, position }];
             }
 
             return acc;
@@ -127,7 +121,7 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
            * are no longer in the browserState
            */
           const disconnectedRelations = actualOldValue.reduce((acc, relation) => {
-            if (!valuesWithPositions.find((newRelation) => newRelation.id === relation.id)) {
+            if (!value.find((newRelation) => newRelation.id === relation.id)) {
               return [...acc, { id: relation.id }];
             }
 

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

@@ -8,6 +8,7 @@ import {
   useQueryParams,
   useNotification,
   useGuidedTour,
+  useAPIErrorHandler,
   useFetchClient,
 } from '@strapi/helper-plugin';
 import { useSelector, useDispatch } from 'react-redux';
@@ -39,6 +40,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const searchToSend = buildQueryString(query);
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
   const fetchClient = useFetchClient();
   const { post, put, del } = fetchClient;
 
@@ -151,19 +153,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
   const displayErrors = useCallback(
     (err) => {
-      const errorPayload = err.response.data;
-      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
-
-      // TODO handle errors correctly when back-end ready
-      if (Array.isArray(errorMessage)) {
-        errorMessage = get(errorMessage, ['0', 'messages', '0', 'id']);
-      }
-
-      if (typeof errorMessage === 'string') {
-        toggleNotification({ type: 'warning', message: errorMessage });
-      }
+      toggleNotification({ type: 'warning', message: formatAPIError(err) });
     },
-    [toggleNotification]
+    [toggleNotification, formatAPIError]
   );
 
   const onDelete = useCallback(

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

@@ -1,10 +1,9 @@
 import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
-import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import { Button } from '@strapi/design-system/Button';
 import Trash from '@strapi/icons/Trash';
-import { ConfirmDialog, useNotification } from '@strapi/helper-plugin';
+import { ConfirmDialog, useNotification, useAPIErrorHandler } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
@@ -13,6 +12,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
   const [showWarningDelete, setWarningDelete] = useState(false);
   const [isModalConfirmButtonLoading, setIsModalConfirmButtonLoading] = useState(false);
   const { formatMessage } = useIntl();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
   const toggleNotification = useNotification();
 
   const toggleWarningDelete = () => setWarningDelete((prevState) => !prevState);
@@ -29,14 +29,12 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
       toggleWarningDelete();
       onDeleteSucceeded();
     } catch (err) {
-      const errorMessage = get(
-        err,
-        'response.payload.message',
-        formatMessage({ id: getTrad('error.record.delete') })
-      );
       setIsModalConfirmButtonLoading(false);
       toggleWarningDelete();
-      toggleNotification({ type: 'warning', message: errorMessage });
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(err),
+      });
     }
   };
 

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

@@ -21,6 +21,7 @@ import {
   useRBACProvider,
   useTracking,
   Link,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -84,6 +85,7 @@ function ListView({
   const trackUsageRef = useRef(trackUsage);
   const fetchPermissionsRef = useRef(refetchPermissions);
   const { notifyStatus } = useNotifyAT();
+  const { formatAPIError } = useAPIErrorHandler(getTrad);
 
   useFocusWhenNavigate();
 
@@ -148,7 +150,6 @@ function ListView({
           return;
         }
 
-        console.error(err);
         toggleNotification({
           type: 'warning',
           message: { id: getTrad('error.model.fetch') },
@@ -171,11 +172,11 @@ function ListView({
       } catch (err) {
         toggleNotification({
           type: 'warning',
-          message: { id: getTrad('error.record.delete') },
+          message: formatAPIError(err),
         });
       }
     },
-    [fetchData, params, slug, toggleNotification, post]
+    [fetchData, params, slug, toggleNotification, formatAPIError, post]
   );
 
   const handleConfirmDeleteData = useCallback(
@@ -191,19 +192,13 @@ function ListView({
           message: { id: getTrad('success.record.delete') },
         });
       } catch (err) {
-        const errorMessage = get(
-          err,
-          'response.payload.message',
-          formatMessage({ id: getTrad('error.record.delete') })
-        );
-
         toggleNotification({
           type: 'warning',
-          message: errorMessage,
+          message: formatAPIError(err),
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatMessage, del]
+    [slug, params, fetchData, toggleNotification, formatAPIError, del]
   );
 
   useEffect(() => {

package/admin/src/index.js

@@ -13,6 +13,7 @@ window.strapi = {
   features: {
     SSO: 'sso',
     AUDIT_LOGS: 'audit-logs',
+    REVIEW_WORKFLOWS: 'review-workflows',
   },
   projectType: 'Community',
 };

package/admin/src/pages/Admin/Onboarding/constants.js

@@ -0,0 +1,46 @@
+import { Book, PaperPlane } from '@strapi/icons';
+
+export const VIDEO_LINKS = [
+  {
+    label: {
+      id: 'app.components.Onboarding.link.build-content',
+      defaultMessage: 'Build a content architecture',
+    },
+    href: 'https://www.youtube.com/watch?v=G9GjN0RxhkE',
+    duration: '5:48',
+  },
+  {
+    label: {
+      id: 'app.components.Onboarding.link.manage-content',
+      defaultMessage: 'Add & manage content',
+    },
+    href: 'https://www.youtube.com/watch?v=DEZw4KbybAI',
+    duration: '3:18',
+  },
+  {
+    label: { id: 'app.components.Onboarding.link.manage-media', defaultMessage: 'Manage media' },
+    href: 'https://www.youtube.com/watch?v=-61MuiMQb38',
+    duration: '3:41',
+  },
+];
+
+export const WATCH_MORE = {
+  href: 'https://www.youtube.com/playlist?list=PL7Q0DQYATmvidz6lEmwE5nIcOAYagxWqq',
+  label: {
+    id: 'app.components.Onboarding.link.more-videos',
+    defaultMessage: 'Watch more videos',
+  },
+};
+
+export const DOCUMENTATION_LINKS = [
+  {
+    label: { id: 'global.documentation', defaultMessage: 'documentation' },
+    href: 'https://docs.strapi.io',
+    icon: Book,
+  },
+  {
+    label: { id: 'app.static.links.cheatsheet', defaultMessage: 'cheatsheet' },
+    href: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
+    icon: PaperPlane,
+  },
+];