@strapi/admin 4.4.0-rc.0 → 4.5.0-alpha.0

package/admin/src/StrapiApp.js

@@ -8,7 +8,7 @@ import invariant from 'invariant';
 import { Helmet } from 'react-helmet';
 import { basename, createHook } from './core/utils';
 import configureStore from './core/store/configureStore';
-import { customFields, Plugin } from './core/apis';
+import { Plugin } from './core/apis';
 import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
@@ -48,7 +48,6 @@ class StrapiApp {
     this.admin = {
       injectionZones,
     };
-    this.customFields = customFields;
 
     this.menu = [];
     this.settings = {
@@ -282,7 +281,17 @@ class StrapiApp {
 
   async initialize() {
     Object.keys(this.appPlugins).forEach((plugin) => {
-      this.appPlugins[plugin].register(this);
+      this.appPlugins[plugin].register({
+        addComponents: this.addComponents,
+        addCorePluginMenuLink: this.addCorePluginMenuLink,
+        addFields: this.addFields,
+        addMenuLink: this.addMenuLink,
+        addMiddlewares: this.addMiddlewares,
+        addReducers: this.addReducers,
+        createHook: this.createHook,
+        createSettingSection: this.createSettingSection,
+        registerPlugin: this.registerPlugin,
+      });
     });
   }
 
@@ -422,7 +431,6 @@ class StrapiApp {
         authLogo={this.configurations.authLogo}
         components={components}
         fields={fields}
-        customFields={this.customFields}
         localeNames={localeNames}
         getAdminInjectedComponents={this.getAdminInjectedComponents}
         getPlugin={this.getPlugin}

package/admin/src/components/Providers/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { QueryClientProvider, QueryClient } from 'react-query';
-import { LibraryProvider, CustomFieldsProvider, StrapiAppProvider } from '@strapi/helper-plugin';
+import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
 import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
@@ -25,7 +25,6 @@ const Providers = ({
   authLogo,
   children,
   components,
-  customFields,
   fields,
   getAdminInjectedComponents,
   getPlugin,
@@ -65,17 +64,15 @@ const Providers = ({
                   settings={settings}
                 >
                   <LibraryProvider components={components} fields={fields}>
-                    <CustomFieldsProvider customFields={customFields}>
-                      <LanguageProvider messages={messages} localeNames={localeNames}>
-                        <AutoReloadOverlayBlockerProvider>
-                          <OverlayBlocker>
-                            <GuidedTour>
-                              <Notifications>{children}</Notifications>
-                            </GuidedTour>
-                          </OverlayBlocker>
-                        </AutoReloadOverlayBlockerProvider>
-                      </LanguageProvider>
-                    </CustomFieldsProvider>
+                    <LanguageProvider messages={messages} localeNames={localeNames}>
+                      <AutoReloadOverlayBlockerProvider>
+                        <OverlayBlocker>
+                          <GuidedTour>
+                            <Notifications>{children}</Notifications>
+                          </GuidedTour>
+                        </OverlayBlocker>
+                      </AutoReloadOverlayBlockerProvider>
+                    </LanguageProvider>
                   </LibraryProvider>
                 </StrapiAppProvider>
               </ConfigurationsProvider>
@@ -91,7 +88,6 @@ Providers.propTypes = {
   authLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.any]).isRequired,
   children: PropTypes.element.isRequired,
   components: PropTypes.object.isRequired,
-  customFields: PropTypes.object.isRequired,
   fields: PropTypes.object.isRequired,
   getAdminInjectedComponents: PropTypes.func.isRequired,
   getPlugin: PropTypes.func.isRequired,

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,6 +290,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       rawQuery,
       toggleNotification,
       setCurrentStep,
+      queryClient,
     ]
   );
 
@@ -332,6 +339,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 +356,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 () => {

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

@@ -18,6 +18,7 @@ import { getFullName } from '../../../../utils';
 const TableRows = ({
   canCreate,
   canDelete,
+  contentType,
   headers,
   entriesToDelete,
   onClickDelete,
@@ -88,6 +89,7 @@ const TableRows = ({
                     <CellContent
                       content={data[name.split('.')[0]]}
                       name={name}
+                      contentType={contentType}
                       {...rest}
                       rowId={data.id}
                     />
@@ -180,6 +182,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

@@ -130,12 +130,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 +161,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,
     });
@@ -404,19 +418,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 +476,7 @@ const EditViewDataManagerProvider = ({
       value={{
         addComponentToDynamicZone,
         addNonRepeatableComponentToField,
-        addRelation,
+        connectRelation,
         addRepeatableComponentToField,
         allLayoutData,
         checkFormErrors,
@@ -483,15 +489,15 @@ const EditViewDataManagerProvider = ({
         shouldNotRunValidations,
         status,
         layout: currentContentTypeLayout,
+        loadRelation,
         modifiedData,
         moveComponentDown,
         moveComponentField,
         moveComponentUp,
-        moveRelation,
         onChange: handleChange,
         onPublish: handlePublish,
         onUnpublish,
-        onRemoveRelation,
+        disconnectRelation,
         readActionAllowedFields,
         redirectToPreviousPage,
         removeComponentFromDynamicZone,

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';
 
@@ -72,29 +73,140 @@ 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;
+
+        set(draftState, initialDataPath, value);
+
+        /**
+         * 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
+         */
+
+        set(draftState, modifiedDataPath, value);
+
+        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']);
+
+        if (!connectedRelations) {
+          set(draftState, [...path, 'connect'], []);
         }
 
-        const el = action.value[0].value;
+        if (replace) {
+          set(draftState, [...path, 'connect'], [value]);
+        } else {
+          const nextValue = get(draftState, [...path, 'connect']);
+          nextValue.push(value);
+        }
 
-        const currentValue = get(state, ['modifiedData', ...action.keys], null);
+        if (disconnectedRelations?.length) {
+          const existsInDisconnect = disconnectedRelations.find(
+            (disconnectValue) => disconnectValue.id === value.id
+          );
 
-        if (!currentValue) {
-          set(draftState, ['modifiedData', ...action.keys], [el]);
+          if (existsInDisconnect) {
+            const newDisconnectArray = pull([...disconnectedRelations], existsInDisconnect);
+            set(draftState, [...path, 'disconnect'], newDisconnectArray);
+          }
+        }
 
-          break;
+        break;
+      }
+      case 'DISCONNECT_RELATION': {
+        const path = ['modifiedData', ...action.keys];
+        const { value } = action;
+        const disconnectedRelations = get(state, [...path, 'disconnect']);
+        const connectedRelations = get(state, [...path, 'connect']);
+
+        if (!disconnectedRelations) {
+          set(draftState, [...path, 'disconnect'], []);
         }
 
-        set(draftState, ['modifiedData', ...action.keys], [...currentValue, el]);
+        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 +325,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;

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));

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { useCustomFields } from '@strapi/helper-plugin';
 import Date from '@strapi/icons/Date';
 import Boolean from '@strapi/icons/Boolean';
 import Email from '@strapi/icons/Email';
@@ -42,38 +40,10 @@ const iconByTypes = {
   dynamiczone: <DynamicZone />,
 };
 
-const FieldTypeIcon = ({ type, customFieldUid }) => {
-  const customFieldsRegistry = useCustomFields();
-
-  let Compo = iconByTypes[type];
-
-  if (customFieldUid) {
-    const customField = customFieldsRegistry.get(customFieldUid);
-    const CustomFieldIcon = customField.icon;
-
-    if (CustomFieldIcon) {
-      Compo = (
-        <Box marginRight={3} width={7} height={6}>
-          <CustomFieldIcon />
-        </Box>
-      );
-    }
-  }
-
-  if (!iconByTypes[type]) {
-    return null;
-  }
-
-  return Compo;
-};
-
-FieldTypeIcon.defaultProps = {
-  customFieldUid: null,
-};
+const FieldTypeIcon = ({ type }) => iconByTypes[type] || null;
 
 FieldTypeIcon.propTypes = {
   type: PropTypes.string.isRequired,
-  customFieldUid: PropTypes.string,
 };
 
 export default FieldTypeIcon;