Merge pull request #10530 from strapi/core/remove-middleware-cm-edit-layout

Core/remove middleware cm edit layout

packages/core/content-manager/admin/src/exposedHooks.js

@@ -1,3 +1,27 @@
+/**
+ * Hook that allows to mutate the displayed headers of the list view table
+ * @constant
+ * @type {string}
+ */
 export const INJECT_COLUMN_IN_TABLE = 'CM/pages/ListView/inject-column-in-table';
+
+/**
+ * Hook that allows to mutate the CM's collection types links pre-set filters
+ * @constant
+ * @type {string}
+ */
 export const MUTATE_COLLECTION_TYPES_LINKS = 'CM/pages/App/mutate-collection-types-links';
+
+/**
+ * Hook that allows to mutate the CM's edit view layout
+ * @constant
+ * @type {string}
+ */
+export const MUTATE_EDIT_VIEW_LAYOUT = 'CM/pages/EditView/mutate-edit-view-layout';
+
+/**
+ * Hook that allows to mutate the CM's single types links pre-set filters
+ * @constant
+ * @type {string}
+ */
 export const MUTATE_SINGLE_TYPES_LINKS = 'CM/pages/App/mutate-single-types-links';

packages/core/content-manager/admin/src/index.js

@@ -9,6 +9,7 @@ import pluginPkg from '../../package.json';
 import {
   INJECT_COLUMN_IN_TABLE,
   MUTATE_COLLECTION_TYPES_LINKS,
+  MUTATE_EDIT_VIEW_LAYOUT,
   MUTATE_SINGLE_TYPES_LINKS,
 } from './exposedHooks';
 import pluginId from './pluginId';
@@ -33,12 +34,10 @@ export default {
     });
 
     app.addReducers(reducers);
-
-    // Hook that allows to mutate the displayed headers of the list view table
     app.createHook(INJECT_COLUMN_IN_TABLE);
-    // Hook that allows to mutate the CM's link pre-set filters
     app.createHook(MUTATE_COLLECTION_TYPES_LINKS);
     app.createHook(MUTATE_SINGLE_TYPES_LINKS);
+    app.createHook(MUTATE_EDIT_VIEW_LAYOUT);
 
     app.registerPlugin({
       description: pluginDescription,

packages/core/content-manager/admin/src/pages/EditViewLayoutManager/index.js

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { LoadingIndicatorPage, useQueryParams } from '@strapi/helper-plugin';
+import { LoadingIndicatorPage, useQueryParams, useStrapiApp } from '@strapi/helper-plugin';
+import { MUTATE_EDIT_VIEW_LAYOUT } from '../../exposedHooks';
 import { useSyncRbac } from '../../hooks';
 import { resetProps, setLayout } from './actions';
 import selectLayout from './selectors';
@@ -11,15 +12,19 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
   const currentLayout = useSelector(selectLayout);
   const dispatch = useDispatch();
   const [{ query }] = useQueryParams();
+  const { runHookWaterfall } = useStrapiApp();
   const permissions = useSyncRbac(query, rest.slug, 'editView');
 
   useEffect(() => {
-    dispatch(setLayout(layout, query));
+    // Allow the plugins to extend the edit view layout
+    const mutatedLayout = runHookWaterfall(MUTATE_EDIT_VIEW_LAYOUT, { layout, query });
+
+    dispatch(setLayout(mutatedLayout.layout, query));
 
     return () => {
       dispatch(resetProps());
     };
-  }, [layout, dispatch, query]);
+  }, [layout, dispatch, query, runHookWaterfall]);
 
   if (!currentLayout || !permissions) {
     return <LoadingIndicatorPage />;

packages/plugins/i18n/admin/src/contentManagerHooks/mutateEditViewLayout.js

@@ -97,60 +97,57 @@ const enhanceComponentLayoutForRelations = (layout, locale) =>
     return enhancedRow;
   });
 
-const extendCMEditViewLayoutMiddleware = () => () => next => action => {
+const getPathToContentType = pathArray => ['contentType', ...pathArray];
-  if (action.type !== 'ContentManager/EditViewLayoutManager/SET_LAYOUT') {
-    return next(action);
-  }
 
-  const hasi18nEnabled = get(
+const mutateEditViewLayoutHook = ({ layout, query }) => {
-    action,
+  const hasI18nEnabled = get(
+    layout,
     getPathToContentType(['pluginOptions', 'i18n', 'localized']),
     false
   );
 
-  if (!hasi18nEnabled) {
+  if (!hasI18nEnabled) {
-    return next(action);
+    return { layout, query };
   }
 
-  const currentLocale = get(action, ['query', 'plugins', 'i18n', 'locale'], null);
+  const currentLocale = get(query, ['plugins', 'i18n', 'locale'], null);
 
   // This might break the cm, has the user might be redirected to the homepage
   if (!currentLocale) {
-    return next(action);
+    return { layout, query };
   }
 
   const editLayoutPath = getPathToContentType(['layouts', 'edit']);
   const editRelationsPath = getPathToContentType(['layouts', 'editRelations']);
-  const editLayout = get(action, editLayoutPath);
+  const editLayout = get(layout, editLayoutPath);
-  const editRelationsLayout = get(action, editRelationsPath);
+  const editRelationsLayout = get(layout, editRelationsPath);
   const nextEditRelationLayout = enhanceRelationLayout(editRelationsLayout, currentLocale);
   const nextEditLayout = enhanceEditLayout(editLayout);
 
   const enhancedLayouts = {
-    ...action.layout.contentType.layouts,
+    ...layout.contentType.layouts,
     editRelations: nextEditRelationLayout,
     edit: nextEditLayout,
   };
-  const components = enhanceComponentsLayout(action.layout.components, currentLocale);
 
-  const enhancedAction = {
+  const components = enhanceComponentsLayout(layout.components, currentLocale);
-    ...action,
+
+  const enhancedData = {
+    query,
     layout: {
-      ...action.layout,
+      ...layout,
       contentType: {
-        ...action.layout.contentType,
+        ...layout.contentType,
         layouts: enhancedLayouts,
       },
       components,
     },
   };
 
-  return next(enhancedAction);
+  return enhancedData;
 };
 
-const getPathToContentType = pathArray => ['layout', 'contentType', ...pathArray];
+export default mutateEditViewLayoutHook;
-
-export default extendCMEditViewLayoutMiddleware;
 export {
   enhanceComponentLayoutForRelations,
   enhanceComponentsLayout,

packages/plugins/i18n/admin/src/contentManagerHooks/tests/mutateEditViewLayout.test.js

@@ -1,41 +1,18 @@
 import React from 'react';
 import { Globe, GlobeCrossed } from '@buffetjs/icons';
 import { getTrad } from '../../utils';
-import extendCMEditViewLayoutMiddleware, {
+import mutateEditViewLayout, {
   enhanceComponentsLayout,
   enhanceEditLayout,
   enhanceRelationLayout,
-} from '../extendCMEditViewLayoutMiddleware';
+} from '../mutateEditViewLayout';
 
 const localizedTrad = getTrad('Field.localized');
 const localizedTradDefaultMessage = 'This value is unique for the selected locale';
 const notLocalizedTrad = getTrad('Field.not-localized');
 const notLocalizedTradDefaultMessage = 'This value is common to all locales';
 
-describe('i18n | Middlewares | extendCMEditViewLayoutMiddleware', () => {
+describe('i18n | contentManagerHooks | mutateEditViewLayout', () => {
-  it('should forward the action if the type is undefined', () => {
-    const middleware = extendCMEditViewLayoutMiddleware();
-    const action = { test: true, type: undefined };
-
-    const next = jest.fn();
-
-    middleware()(next)(action);
-
-    expect(next).toBeCalledWith(action);
-  });
-
-  it('should forward if the type is not correct', () => {
-    const middleware = extendCMEditViewLayoutMiddleware();
-    const action = { test: true, type: 'TEST' };
-
-    const next = jest.fn();
-
-    middleware()(next)(action);
-
-    expect(next).toBeCalledWith(action);
-  });
-
-  describe('should forward when the type is ContentManager/EditViewLayoutManager/SET_LAYOUT', () => {
   it('should forward when i18n is not enabled on the content type', () => {
     const layout = {
       components: {},
@@ -47,16 +24,13 @@ describe('i18n | Middlewares | extendCMEditViewLayoutMiddleware', () => {
         },
       },
     };
-      const action = {
+    const data = {
-        type: 'ContentManager/EditViewLayoutManager/SET_LAYOUT',
       layout,
+      query: null,
     };
-      const middleware = extendCMEditViewLayoutMiddleware();
+    const results = mutateEditViewLayout(data);
-      const next = jest.fn();
 
-      middleware()(next)(action);
+    expect(results).toEqual(data);
-
-      expect(next).toBeCalledWith(action);
   });
 
   it('should forward the action when i18n is enabled and the query.locale is not defined', () => {
@@ -80,16 +54,13 @@ describe('i18n | Middlewares | extendCMEditViewLayoutMiddleware', () => {
       },
     };
 
-      const action = {
+    const data = {
-        type: 'ContentManager/EditViewLayoutManager/SET_LAYOUT',
+      query: null,
       layout,
     };
-      const middleware = extendCMEditViewLayoutMiddleware();
+    const results = mutateEditViewLayout(data);
 
-      const next = jest.fn();
+    expect(results).toEqual(data);
-      middleware()(next)(action);
-
-      expect(next).toBeCalledWith(action);
   });
 
   it('should modify the editRelations layout when i18n is enabled and the query.locale is defined', () => {
@@ -118,18 +89,14 @@ describe('i18n | Middlewares | extendCMEditViewLayoutMiddleware', () => {
       components: {},
     };
 
-      const action = {
+    const data = {
-        type: 'ContentManager/EditViewLayoutManager/SET_LAYOUT',
       layout,
       query: { plugins: { i18n: { locale: 'en' } } },
     };
-      const middleware = extendCMEditViewLayoutMiddleware();
+    const results = mutateEditViewLayout(data);
 
-      const next = jest.fn();
+    expect(results).toEqual({
-      middleware()(next)(action);
+      ...data,
-
-      expect(next).toBeCalledWith({
-        ...action,
       layout: {
         ...layout,
         contentType: {
@@ -159,7 +126,6 @@ describe('i18n | Middlewares | extendCMEditViewLayoutMiddleware', () => {
       },
     });
   });
-  });
 
   describe('enhanceComponentsLayout', () => {
     it('should not enhance the field when the type is not relation', () => {

packages/plugins/i18n/admin/src/index.js

@@ -19,6 +19,7 @@ import DeleteModalAdditionalInfos from './components/DeleteModalAdditionalInfos'
 import addLocaleToCollectionTypesLinksHook from './contentManagerHooks/addLocaleToCollectionTypesLinks';
 import addLocaleToSingleTypesLinksHook from './contentManagerHooks/addLocaleToSingleTypesLinks';
 import addColumnToTableHook from './contentManagerHooks/addColumnToTable';
+import mutateEditViewLayoutHook from './contentManagerHooks/mutateEditViewLayout';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -50,6 +51,8 @@ export default {
     app.registerHook('CM/pages/App/mutate-single-types-links', addLocaleToSingleTypesLinksHook);
     // Hook that adds a column into the CM's LV table
     app.registerHook('CM/pages/ListView/inject-column-in-table', addColumnToTableHook);
+    // Hooks that mutates the edit view layout
+    app.registerHook('CM/pages/EditView/mutate-edit-view-layout', mutateEditViewLayoutHook);
     // Add the settings link
     app.addSettingsLink('global', {
       intlLabel: {

packages/plugins/i18n/admin/src/middlewares/index.js

@@ -1,12 +1,10 @@
 import addCommonFieldsToInitialDataMiddleware from './addCommonFieldsToInitialDataMiddleware';
-import extendCMEditViewLayoutMiddleware from './extendCMEditViewLayoutMiddleware';
 import extendCTBInitialDataMiddleware from './extendCTBInitialDataMiddleware';
 import extendCTBAttributeInitialDataMiddleware from './extendCTBAttributeInitialDataMiddleware';
 import localePermissionMiddleware from './localePermissionMiddleware';
 
 const middlewares = [
   addCommonFieldsToInitialDataMiddleware,
-  extendCMEditViewLayoutMiddleware,
   extendCTBInitialDataMiddleware,
   extendCTBAttributeInitialDataMiddleware,
   localePermissionMiddleware,