@strapi/admin 4.4.3 → 4.5.0-beta.0

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

@@ -1,4 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import get from 'lodash/get';
@@ -34,6 +35,7 @@ import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 
 // This container is used to handle the CRUD
 const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }) => {
+  const queryClient = useQueryClient();
   const toggleNotification = useNotification();
   const { setCurrentStep } = useGuidedTour();
   const { trackUsage } = useTracking();
@@ -260,7 +262,11 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
         setCurrentStep('contentManager.success');
 
+        // TODO: need to find a better place, or a better abstraction
+        queryClient.invalidateQueries(['relation']);
+
         dispatch(submitSucceeded(cleanReceivedData(data)));
+
         // Enable navigation and remove loaders
         dispatch(setStatus('resolved'));
 
@@ -284,9 +290,33 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       rawQuery,
       toggleNotification,
       setCurrentStep,
+      queryClient,
     ]
   );
 
+  const onDraftRelationCheck = useCallback(async () => {
+    try {
+      trackUsageRef.current('willCheckDraftRelations');
+
+      const endPoint = getRequestUrl(
+        `collection-types/${slug}/${id}/actions/numberOfDraftRelations`
+      );
+      dispatch(setStatus('draft-relation-check-pending'));
+
+      const numberOfDraftRelations = await axiosInstance.get(endPoint);
+      trackUsageRef.current('didCheckDraftRelations');
+
+      dispatch(setStatus('resolved'));
+
+      return numberOfDraftRelations.data.data;
+    } catch (err) {
+      displayErrors(err);
+      dispatch(setStatus('resolved'));
+
+      return Promise.reject(err);
+    }
+  }, [displayErrors, id, slug, dispatch]);
+
   const onPublish = useCallback(async () => {
     try {
       trackUsageRef.current('willPublishEntry');
@@ -332,6 +362,9 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
           message: { id: getTrad('success.record.save') },
         });
 
+        // TODO: need to find a better place, or a better abstraction
+        queryClient.invalidateQueries(['relation']);
+
         dispatch(submitSucceeded(cleanReceivedData(data)));
 
         dispatch(setStatus('resolved'));
@@ -346,7 +379,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
         return Promise.reject(err);
       }
     },
-    [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification]
+    [cleanReceivedData, displayErrors, slug, id, dispatch, toggleNotification, queryClient]
   );
 
   const onUnpublish = useCallback(async () => {
@@ -387,6 +420,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     onDeleteSucceeded,
     onPost,
     onPublish,
+    onDraftRelationCheck,
     onPut,
     onUnpublish,
     status,

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
 import { useIntl } from 'react-intl';
@@ -28,10 +28,12 @@ const fetchRelation = async (endPoint, notifyStatus) => {
   return { results, pagination };
 };
 
-const RelationMultiple = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) => {
+const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, contentType }) => {
   const { formatMessage } = useIntl();
   const { notifyStatus } = useNotifyAT();
-  const requestURL = getRequestUrl(`${queryInfos.endPoint}/${rowId}/${name.split('.')[0]}`);
+  const relationFetchEndpoint = useMemo(() => {
+    return getRequestUrl(`collection-types/${contentType.uid}/${entityId}/${name.split('.')[0]}`);
+  }, [entityId, name, contentType]);
   const [isOpen, setIsOpen] = useState(false);
 
   const Label = (
@@ -56,8 +58,8 @@ const RelationMultiple = ({ fieldSchema, metadatas, queryInfos, name, rowId, val
   };
 
   const { data, status } = useQuery(
-    [fieldSchema.targetModel, rowId],
-    () => fetchRelation(requestURL, notify),
+    [fieldSchema.targetModel, entityId],
+    () => fetchRelation(relationFetchEndpoint, notify),
     {
       enabled: isOpen,
       staleTime: 0,
@@ -115,6 +117,9 @@ const RelationMultiple = ({ fieldSchema, metadatas, queryInfos, name, rowId, val
 };
 
 RelationMultiple.propTypes = {
+  contentType: PropTypes.shape({
+    uid: PropTypes.string.isRequired,
+  }).isRequired,
   fieldSchema: PropTypes.shape({
     relation: PropTypes.string,
     targetModel: PropTypes.string,
@@ -127,8 +132,7 @@ RelationMultiple.propTypes = {
     }),
   }).isRequired,
   name: PropTypes.string.isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  queryInfos: PropTypes.shape({ endPoint: PropTypes.string.isRequired }).isRequired,
+  entityId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   value: PropTypes.object.isRequired,
 };
 

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

@@ -16,7 +16,7 @@ const TypographyMaxWidth = styled(Typography)`
   max-width: 300px;
 `;
 
-const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId }) => {
+const CellContent = ({ content, fieldSchema, metadatas, name, rowId, contentType }) => {
   const { type } = fieldSchema;
 
   if (!hasContent(type, content, metadatas, fieldSchema)) {
@@ -39,11 +39,11 @@ const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId
       return (
         <RelationMultiple
           fieldSchema={fieldSchema}
-          queryInfos={queryInfos}
           metadatas={metadatas}
           value={content}
           name={name}
-          rowId={rowId}
+          entityId={rowId}
+          contentType={contentType}
         />
       );
     }
@@ -66,11 +66,13 @@ const CellContent = ({ content, fieldSchema, metadatas, name, queryInfos, rowId
 
 CellContent.defaultProps = {
   content: undefined,
-  queryInfos: undefined,
 };
 
 CellContent.propTypes = {
   content: PropTypes.any,
+  contentType: PropTypes.shape({
+    uid: PropTypes.string.isRequired,
+  }).isRequired,
   fieldSchema: PropTypes.shape({
     component: PropTypes.string,
     multiple: PropTypes.bool,
@@ -81,7 +83,6 @@ CellContent.propTypes = {
   metadatas: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  queryInfos: PropTypes.shape({ endPoint: PropTypes.string.isRequired }),
 };
 
 export default CellContent;

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

@@ -24,6 +24,7 @@ import CellContent from '../CellContent';
 const TableRows = ({
   canCreate,
   canDelete,
+  contentType,
   headers,
   entriesToDelete,
   onClickDelete,
@@ -94,6 +95,7 @@ const TableRows = ({
                     <CellContent
                       content={data[name.split('.')[0]]}
                       name={name}
+                      contentType={contentType}
                       {...rest}
                       rowId={data.id}
                     />
@@ -185,6 +187,9 @@ TableRows.defaultProps = {
 TableRows.propTypes = {
   canCreate: PropTypes.bool,
   canDelete: PropTypes.bool,
+  contentType: PropTypes.shape({
+    uid: PropTypes.string.isRequired,
+  }).isRequired,
   entriesToDelete: PropTypes.array,
   headers: PropTypes.array.isRequired,
   onClickDelete: PropTypes.func,

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

@@ -112,6 +112,7 @@ const DynamicTable = ({
       <TableRows
         canCreate={canCreate}
         canDelete={canDelete}
+        contentType={layout.contentType}
         headers={tableHeaders}
         rows={rows}
         withBulkActions
@@ -139,7 +140,6 @@ DynamicTable.propTypes = {
       metadatas: PropTypes.object.isRequired,
       layouts: PropTypes.shape({
         list: PropTypes.array.isRequired,
-        editRelations: PropTypes.array,
       }).isRequired,
       options: PropTypes.object.isRequired,
       settings: PropTypes.object.isRequired,

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

@@ -36,6 +36,7 @@ const EditViewDataManagerProvider = ({
   isSingleType,
   onPost,
   onPublish,
+  onDraftRelationCheck,
   onPut,
   onUnpublish,
   readActionAllowedFields,
@@ -46,7 +47,15 @@ const EditViewDataManagerProvider = ({
   updateActionAllowedFields,
 }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState);
-  const { formErrors, initialData, modifiedData, modifiedDZName, shouldCheckErrors } = reducerState;
+  const {
+    formErrors,
+    initialData,
+    modifiedData,
+    modifiedDZName,
+    shouldCheckErrors,
+    publishConfirmation,
+  } = reducerState;
+
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
@@ -130,12 +139,17 @@ const EditViewDataManagerProvider = ({
 
   useEffect(() => {
     if (initialValues) {
+      const relationalFields = Object.keys(initialValues).filter(
+        (key) => currentContentTypeLayout?.attributes[key]?.type === 'relation'
+      );
+
       dispatch({
         type: 'INIT_FORM',
         initialValues,
+        relationalFields,
       });
     }
-  }, [initialValues]);
+  }, [initialValues, currentContentTypeLayout]);
 
   const addComponentToDynamicZone = useCallback((keys, componentUid, shouldCheckErrors = false) => {
     trackUsageRef.current('didAddComponentToDynamicZone');
@@ -156,9 +170,18 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const addRelation = useCallback(({ target: { name, value } }) => {
+  const connectRelation = useCallback(({ target: { name, value, replace } }) => {
+    dispatch({
+      type: 'CONNECT_RELATION',
+      keys: name.split('.'),
+      value,
+      replace,
+    });
+  }, []);
+
+  const loadRelation = useCallback(({ target: { name, value } }) => {
     dispatch({
-      type: 'ADD_RELATION',
+      type: 'LOAD_RELATION',
       keys: name.split('.'),
       value,
     });
@@ -287,6 +310,14 @@ const EditViewDataManagerProvider = ({
     return shouldNotRunValidations ? { status: 'draft' } : {};
   }, [hasDraftAndPublish, shouldNotRunValidations]);
 
+  const handlePublishPromptDismissal = useCallback(async (e) => {
+    e.preventDefault();
+
+    return dispatch({
+      type: 'RESET_PUBLISH_CONFIRMATION',
+    });
+  }, []);
+
   const handleSubmit = useCallback(
     async (e) => {
       e.preventDefault();
@@ -332,8 +363,27 @@ const EditViewDataManagerProvider = ({
       },
       { isCreatingEntry, isDraft: false, isFromComponent: false }
     );
-    let errors = {};
 
+    const draftCount = await onDraftRelationCheck();
+
+    if (!publishConfirmation.show && draftCount > 0) {
+      // If the warning hasn't already been shown and draft relations are found,
+      // abort the publish call and ask for confirmation from the user
+      dispatch({
+        type: 'SET_PUBLISH_CONFIRMATION',
+        publishConfirmation: {
+          show: true,
+          draftCount,
+        },
+      });
+
+      return;
+    }
+    dispatch({
+      type: 'RESET_PUBLISH_CONFIRMATION',
+    });
+
+    let errors = {};
     try {
       await schema.validate(modifiedData, { abortEarly: false });
     } catch (err) {
@@ -355,7 +405,15 @@ const EditViewDataManagerProvider = ({
       type: 'SET_FORM_ERRORS',
       errors,
     });
-  }, [allLayoutData, currentContentTypeLayout, isCreatingEntry, modifiedData, onPublish]);
+  }, [
+    allLayoutData,
+    currentContentTypeLayout,
+    isCreatingEntry,
+    modifiedData,
+    publishConfirmation.show,
+    onPublish,
+    onDraftRelationCheck,
+  ]);
 
   const shouldCheckDZErrors = useCallback(
     (dzName) => {
@@ -404,19 +462,11 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const moveRelation = useCallback((dragIndex, overIndex, name) => {
+  const disconnectRelation = useCallback(({ target: { name, value } }) => {
     dispatch({
-      type: 'MOVE_FIELD',
-      dragIndex,
-      overIndex,
+      type: 'DISCONNECT_RELATION',
       keys: name.split('.'),
-    });
-  }, []);
-
-  const onRemoveRelation = useCallback((keys) => {
-    dispatch({
-      type: 'REMOVE_RELATION',
-      keys,
+      value,
     });
   }, []);
 
@@ -470,7 +520,7 @@ const EditViewDataManagerProvider = ({
       value={{
         addComponentToDynamicZone,
         addNonRepeatableComponentToField,
-        addRelation,
+        connectRelation,
         addRepeatableComponentToField,
         allLayoutData,
         checkFormErrors,
@@ -483,15 +533,15 @@ const EditViewDataManagerProvider = ({
         shouldNotRunValidations,
         status,
         layout: currentContentTypeLayout,
+        loadRelation,
         modifiedData,
         moveComponentDown,
         moveComponentField,
         moveComponentUp,
-        moveRelation,
         onChange: handleChange,
         onPublish: handlePublish,
         onUnpublish,
-        onRemoveRelation,
+        disconnectRelation,
         readActionAllowedFields,
         redirectToPreviousPage,
         removeComponentFromDynamicZone,
@@ -500,6 +550,8 @@ const EditViewDataManagerProvider = ({
         slug,
         triggerFormValidation,
         updateActionAllowedFields,
+        onPublishPromptDismissal: handlePublishPromptDismissal,
+        publishConfirmation,
       }}
     >
       <>
@@ -543,6 +595,7 @@ EditViewDataManagerProvider.propTypes = {
   isSingleType: PropTypes.bool.isRequired,
   onPost: PropTypes.func.isRequired,
   onPublish: PropTypes.func.isRequired,
+  onDraftRelationCheck: PropTypes.func.isRequired,
   onPut: PropTypes.func.isRequired,
   onUnpublish: PropTypes.func.isRequired,
   readActionAllowedFields: PropTypes.array.isRequired,

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

@@ -3,6 +3,7 @@ import unset from 'lodash/unset';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import take from 'lodash/take';
+import pull from 'lodash/pull';
 import { moveFields } from './utils';
 import { getMaxTempKey } from '../../utils';
 
@@ -14,6 +15,10 @@ const initialState = {
   modifiedData: null,
   shouldCheckErrors: false,
   modifiedDZName: null,
+  publishConfirmation: {
+    show: false,
+    draftCount: 0,
+  },
 };
 
 const reducer = (state, action) =>
@@ -72,29 +77,170 @@ const reducer = (state, action) =>
 
         break;
       }
-      case 'ADD_RELATION': {
-        if (!Array.isArray(action.value) || !action.value.length) {
-          break;
-        }
+      case 'LOAD_RELATION': {
+        const initialDataPath = ['initialData', ...action.keys, 'results'];
+        const modifiedDataPath = ['modifiedData', ...action.keys, 'results'];
+        const { value } = action;
 
-        const el = action.value[0].value;
+        set(draftState, initialDataPath, value);
 
-        const currentValue = get(state, ['modifiedData', ...action.keys], null);
+        /**
+         * We need to set the value also on modifiedData, because initialData
+         * and modifiedData need to stay in sync, so that the CM can compare
+         * both states, to render the dirty UI state
+         */
 
-        if (!currentValue) {
-          set(draftState, ['modifiedData', ...action.keys], [el]);
+        set(draftState, modifiedDataPath, value);
 
-          break;
+        break;
+      }
+      case 'CONNECT_RELATION': {
+        const path = ['modifiedData', ...action.keys];
+        const { value, replace = false } = action;
+        const connectedRelations = get(state, [...path, 'connect']);
+        const disconnectedRelations = get(state, [...path, 'disconnect']) ?? [];
+        const savedRelations = get(state, [...path, 'results']) ?? [];
+        const existInSavedRelation =
+          savedRelations?.findIndex((savedRelations) => savedRelations.id === value.id) !== -1;
+
+        if (!connectedRelations) {
+          set(draftState, [...path, 'connect'], []);
+        }
+
+        // We should add a relation in the connect array only if it is not an already saved relation
+        if (!existInSavedRelation) {
+          if (replace) {
+            set(draftState, [...path, 'connect'], [value]);
+          } else {
+            const nextValue = get(draftState, [...path, 'connect']);
+            nextValue.push(value);
+          }
         }
 
-        set(draftState, ['modifiedData', ...action.keys], [...currentValue, el]);
+        // Disconnect array handling
+        if (replace) {
+          // In xToOne relations we should place the saved relation in disconnected array to not display it
+          // only needed if there is a saved relation and it is not already stored in disconnected array
+          if (savedRelations.length && !disconnectedRelations.length) {
+            set(draftState, [...path, 'disconnect'], savedRelations);
+          }
+
+          // If the saved relation is stored in disconnected array
+          // We should remove it when an action requires to reconnect this relation
+          // We then reset the connect/disconnect state
+          if (disconnectedRelations.length) {
+            const existsInDisconnectedRelations =
+              disconnectedRelations.findIndex(
+                (disconnectedRelation) => disconnectedRelation?.id === value.id
+              ) > -1;
+
+            if (existsInDisconnectedRelations) {
+              set(draftState, [...path, 'disconnect'], []);
+              set(draftState, [...path, 'connect'], []);
+            }
+          }
+        } else if (disconnectedRelations.length) {
+          // In xToMany relations, when an action requires to connect a relation
+          // We should remove it from the disconnected array if it existed in it
+          const existsInDisconnect = disconnectedRelations.find(
+            (disconnectValue) => disconnectValue.id === value.id
+          );
+
+          if (existsInDisconnect) {
+            const newDisconnectArray = pull([...disconnectedRelations], existsInDisconnect);
+            set(draftState, [...path, 'disconnect'], newDisconnectArray);
+          }
+        }
+
+        break;
+      }
+      case 'DISCONNECT_RELATION': {
+        const path = ['modifiedData', ...action.keys];
+        const { value } = action;
+        const connectedRelations = get(state, [...path, 'connect']);
+        const disconnectedRelations = get(state, [...path, 'disconnect']);
+
+        if (!disconnectedRelations) {
+          set(draftState, [...path, 'disconnect'], []);
+        }
+
+        const nextValue = get(draftState, [...path, 'disconnect']);
+        nextValue.push(value);
+
+        if (connectedRelations?.length) {
+          const existsInConnect = connectedRelations.find(
+            (connectValue) => connectValue.id === value.id
+          );
+
+          if (existsInConnect) {
+            const newConnectArray = pull([...connectedRelations], existsInConnect);
+            set(draftState, [...path, 'connect'], newConnectArray);
+          }
+        }
 
         break;
       }
       case 'INIT_FORM': {
+        const { initialValues, relationalFields = [] } = action;
+
         draftState.formErrors = {};
-        draftState.initialData = action.initialValues;
-        draftState.modifiedData = action.initialValues;
+
+        draftState.initialData = {
+          ...initialValues,
+
+          /**
+           * The state we keep in the client for relations looks like:
+           *
+           * {
+           *   count: <int>
+           *   results: [<Relation>]
+           * }
+           *
+           * The content API only returns { count: <int> }, which is why
+           * we need to extend the existing state rather than overwriting it.
+           */
+
+          ...relationalFields.reduce((acc, name) => {
+            acc[name] = {
+              ...(state.initialData?.[name] ?? {}),
+              ...(initialValues?.[name] ?? {}),
+            };
+
+            return acc;
+          }, {}),
+        };
+
+        draftState.modifiedData = {
+          ...initialValues,
+
+          /**
+           * The client sends the following to the content API:
+           *
+           * {
+           *   connect: [<Relation>],
+           *   disconnect: [<Relation>]
+           * }
+           *
+           * but receives only { count: <int> } in return. After save/ publish
+           * we have to:
+           *
+           * 1) reset the connect/ disconnect arrays
+           * 2) extend the existing state with the API response, so that `count`
+           *    stays in sync
+           */
+
+          ...relationalFields.reduce((acc, name) => {
+            const { connect, disconnect, ...currentState } = state.modifiedData?.[name] ?? {};
+
+            acc[name] = {
+              ...(currentState ?? {}),
+              ...(initialValues?.[name] ?? {}),
+            };
+
+            return acc;
+          }, {}),
+        };
+
         draftState.modifiedDZName = null;
         draftState.shouldCheckErrors = false;
         break;
@@ -213,19 +359,6 @@ const reducer = (state, action) =>
 
         break;
       }
-      case 'REMOVE_RELATION': {
-        const pathArray = action.keys.split('.');
-        const pathArrayLength = pathArray.length - 1;
-        const pathToData = ['modifiedData', ...take(pathArray, pathArrayLength)];
-        const currentValue = get(state, pathToData).slice();
-        const indexToRemove = parseInt(pathArray[pathArrayLength], 10);
-
-        currentValue.splice(indexToRemove, 1);
-
-        set(draftState, pathToData, currentValue);
-
-        break;
-      }
       case 'SET_DEFAULT_DATA_STRUCTURES': {
         draftState.componentsDataStructure = action.componentsDataStructure;
         draftState.contentTypeDataStructure = action.contentTypeDataStructure;
@@ -246,7 +379,14 @@ const reducer = (state, action) =>
 
         break;
       }
-
+      case 'SET_PUBLISH_CONFIRMATION': {
+        draftState.publishConfirmation = { ...action.publishConfirmation };
+        break;
+      }
+      case 'RESET_PUBLISH_CONFIRMATION': {
+        draftState.publishConfirmation = { ...state.publishConfirmation, show: false };
+        break;
+      }
       default:
         return draftState;
     }

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

@@ -51,6 +51,19 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
           }
 
           break;
+
+        case 'relation':
+          // Instead of the full relation object, we only want to send its ID
+          // and need to clean-up the connect|disconnect arrays
+          cleanedData = Object.entries(value).reduce((acc, [key, value]) => {
+            if (['connect', 'disconnect'].includes(key)) {
+              acc[key] = value.map((currentValue) => ({ id: currentValue.id }));
+            }
+
+            return acc;
+          }, {});
+          break;
+
         case 'dynamiczone':
           cleanedData = value.map((componentData) => {
             const subCleanedData = recursiveCleanData(
@@ -62,7 +75,6 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
           });
           break;
         default:
-          // The helper is mainly used for the relations in order to just send the id
           cleanedData = helperCleanData(value, 'id');
       }
 
@@ -75,6 +87,10 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
   return recursiveCleanData(retrievedData, currentSchema);
 };
 
+// TODO: check which parts are still needed: I suspect the
+// isArray part can go away, but I'm not sure what could send
+// an object; in case both can go away we might be able to get
+// rid of the whole helper
 export const helperCleanData = (value, key) => {
   if (isArray(value)) {
     return value.map((obj) => (obj[key] ? obj[key] : obj));