Change content manager routing

packages/strapi-admin/admin/src/components/LeftMenuLinkContainer/index.js

@@ -65,7 +65,7 @@ function LeftMenuLinkContainer({ plugins, ...rest }) {
   // Check if the plugins list is empty or not and display plugins by name
   const pluginsLinks = !isEmpty(plugins) ? (
     map(sortBy(plugins, 'name'), plugin => {
-      if (plugin.id !== 'email') {
+      if (plugin.id !== 'email' && plugin.id !== 'content-manager') {
         const pluginSuffixUrl = plugin.suffixUrl
           ? plugin.suffixUrl(plugins)
           : '';

packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js

@@ -30,7 +30,7 @@ const DisplayedFieldsDropdown = ({
         <MenuDropdown isopen={isOpen.toString()}>
           <DropdownItemLink>
             <LayoutWrapper
-              to={`/plugins/${pluginId}/ctm-configurations/list-settings/${slug}?source=${source}`}
+              to={`${slug}/ctm-configurations/list-settings?source=${source}`}
             >
               <LayoutIcon />
               <FormattedMessage id="app.links.configure-view" />

packages/strapi-plugin-content-manager/admin/src/components/DraggedField/index.js

@@ -133,7 +133,7 @@ const DraggedField = forwardRef(
               <Link
                 onClick={e => {
                   e.stopPropagation();
-                  console.log('cll');
+
                   goTo(
                     `/plugins/${pluginId}/ctm-configurations/edit-settings/groups/${groupUid}`
                   );

packages/strapi-plugin-content-manager/admin/src/containers/EditSettingsView/index.js

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from 'react';
 import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
 import { cloneDeep, get, set } from 'lodash';
 import {
   // utils
@@ -41,10 +42,9 @@ const EditSettingsView = ({
   groupsAndModelsMainPossibleMainFields,
   history: { push },
   location: { search },
-  match: {
-    params: { slug, type },
-  },
+  slug,
 }) => {
+  const { groupSlug, type } = useParams();
   const [reducerState, dispatch] = useReducer(reducer, initialState);
   const [isModalFormOpen, setIsModalFormOpen] = useState(false);
 
@@ -127,11 +127,14 @@ const EditSettingsView = ({
   useEffect(() => {
     const getData = async () => {
       try {
-        const { data } = await request(getRequestUrl(`${type}/${slug}`), {
-          method: 'GET',
-          params,
-          signal,
-        });
+        const { data } = await request(
+          getRequestUrl(`${type}/${slug || groupSlug}`),
+          {
+            method: 'GET',
+            params,
+            signal,
+          }
+        );
 
         // TODO temporary to remove when api available
         const groups = retrieveDisplayedGroups(
@@ -202,7 +205,7 @@ const EditSettingsView = ({
       delete body.source;
       delete body.isGroup;
 
-      await request(getRequestUrl(`${type}/${slug}`), {
+      await request(getRequestUrl(`${type}/${slug || groupSlug}`), {
         method: 'PUT',
         body,
         params: type === 'groups' ? {} : params,
@@ -371,7 +374,7 @@ const EditSettingsView = ({
           });
         }}
         onConfirmSubmit={handleConfirm}
-        slug={slug}
+        slug={slug || groupSlug}
         isEditSettings
       >
         <div className="row">
@@ -439,6 +442,10 @@ const EditSettingsView = ({
   );
 };
 
+EditSettingsView.defaultProps = {
+  slug: null,
+};
+
 EditSettingsView.propTypes = {
   deleteLayout: PropTypes.func.isRequired,
   groupsAndModelsMainPossibleMainFields: PropTypes.object.isRequired,
@@ -448,12 +455,7 @@ EditSettingsView.propTypes = {
   location: PropTypes.shape({
     search: PropTypes.string.isRequired,
   }).isRequired,
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-      type: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
+  slug: PropTypes.string,
 };
 
 export default EditSettingsView;

packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { cloneDeep, get } from 'lodash';
+import { useParams } from 'react-router-dom';
 import {
   BackHeader,
   getQueryParameters,
@@ -43,11 +44,12 @@ function EditView({
   layouts,
   location: { pathname, search },
   history: { push },
-  match: {
-    params: { slug, id },
-  },
+
+  slug,
   plugins,
 }) {
+  const { id } = useParams();
+
   const abortController = new AbortController();
   const { signal } = abortController;
   const layout = get(layouts, [slug], {});
@@ -321,6 +323,8 @@ function EditView({
     }
   };
 
+  // return null;
+
   return (
     <EditViewProvider
       addRelation={({ target: { name, value } }) => {
@@ -538,7 +542,8 @@ function EditView({
                     }}
                     icon="layout"
                     key={`${pluginId}.link`}
-                    url={`/plugins/${pluginId}/ctm-configurations/edit-settings/content-types/${slug}${`?source=${source}`}`}
+                    // url={`/plugins/${pluginId}/ctm-configurations/edit-settings/content-types/${slug}${`?source=${source}`}`}
+                    url={`ctm-configurations/edit-settings/content-types${`?source=${source}`}`}
                     onClick={() => {
                       emitEvent('willEditContentTypeLayoutFromEditView');
                     }}
@@ -601,12 +606,7 @@ EditView.propTypes = {
     pathname: PropTypes.string,
     search: PropTypes.string,
   }),
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      slug: PropTypes.string.isRequired,
-    }),
-  }),
+  slug: PropTypes.string.isRequired,
   plugins: PropTypes.object,
 };
 

packages/strapi-plugin-content-manager/admin/src/containers/ListSettingsView/index.js

@@ -27,13 +27,7 @@ import Toggle from './Toggle';
 import reducer, { initialState } from './reducer';
 import forms from './forms.json';
 
-const ListSettingsView = ({
-  deleteLayout,
-  location: { search },
-  match: {
-    params: { slug },
-  },
-}) => {
+const ListSettingsView = ({ deleteLayout, location: { search }, slug }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState);
   const [isOpen, setIsOpen] = useState(false);
   const [isModalFormOpen, setIsModalFormOpen] = useState(false);
@@ -339,11 +333,7 @@ ListSettingsView.propTypes = {
   location: PropTypes.shape({
     search: PropTypes.string.isRequired,
   }).isRequired,
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
+  slug: PropTypes.string.isRequired,
 };
 
 export default ListSettingsView;

packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js

@@ -49,9 +49,6 @@ function ListView({
   layouts,
   isLoading,
   history: { push },
-  match: {
-    params: { slug },
-  },
   onChangeBulk,
   onChangeBulkSelectall,
   onChangeListLabels,
@@ -61,6 +58,7 @@ function ListView({
   resetProps,
   shouldRefetchData,
   showWarningDelete,
+  slug,
   toggleModalDelete,
   showWarningDeleteAll,
   toggleModalDeleteAll,
@@ -399,11 +397,6 @@ ListView.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
   }),
-  match: PropTypes.shape({
-    params: PropTypes.shape({
-      slug: PropTypes.string.isRequired,
-    }),
-  }),
   onChangeBulk: PropTypes.func.isRequired,
   onChangeBulkSelectall: PropTypes.func.isRequired,
   onChangeListLabels: PropTypes.func.isRequired,
@@ -414,6 +407,7 @@ ListView.propTypes = {
   shouldRefetchData: PropTypes.bool.isRequired,
   showWarningDelete: PropTypes.bool.isRequired,
   showWarningDeleteAll: PropTypes.bool.isRequired,
+  slug: PropTypes.string.isRequired,
   toggleModalDelete: PropTypes.func.isRequired,
   toggleModalDeleteAll: PropTypes.func.isRequired,
 };

packages/strapi-plugin-content-manager/admin/src/containers/Main/index.js

@@ -1,4 +1,4 @@
-import React, { Suspense, lazy, memo, useEffect, useRef } from 'react';
+import React, { Suspense, lazy, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
@@ -10,18 +10,11 @@ import {
 } from 'strapi-helper-plugin';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
-
 import pluginId from '../../pluginId';
-
 import DragLayer from '../../components/DragLayer';
 
-const EditView = lazy(() => import('../EditView'));
 const EditSettingsView = lazy(() => import('../EditSettingsView'));
-const ListView = lazy(() => import('../ListView'));
-const ListSettingsView = lazy(() => import('../ListSettingsView'));
-const SettingViewModel = lazy(() => import('../SettingViewModel'));
-const SettingViewGroup = lazy(() => import('../SettingViewGroup'));
-const SettingsView = lazy(() => import('../SettingsView'));
+const RecursivePath = lazy(() => import('../RecursivePath'));
 
 import { deleteLayout, getData, getLayout, resetProps } from './actions';
 import reducer from './reducer';
@@ -55,7 +48,7 @@ function Main({
   resetPropsRef.current = resetProps;
 
   const shouldShowLoader =
-    slug !== 'ctm-configurations' && layouts[slug] === undefined;
+    !pathname.includes('ctm-configurations/') && layouts[slug] === undefined;
 
   useEffect(() => {
     getDataRef.current();
@@ -91,21 +84,10 @@ function Main({
   );
   const routes = [
     {
-      path: 'ctm-configurations/list-settings/:slug',
-      comp: ListSettingsView,
-    },
-    {
-      path: 'ctm-configurations/edit-settings/:type/:slug',
+      path: 'ctm-configurations/edit-settings/:type/:groupSlug',
       comp: EditSettingsView,
     },
-    {
-      path: 'ctm-configurations/models/:name/:settingType',
-      comp: SettingViewModel,
-    },
-    { path: 'ctm-configurations/groups/:name', comp: SettingViewGroup },
-    { path: 'ctm-configurations/:type', comp: SettingsView },
-    { path: ':slug/:id', comp: EditView },
-    { path: ':slug', comp: ListView },
+    { path: ':slug', comp: RecursivePath },
   ].map(({ path, comp }) => (
     <Route
       key={path}
@@ -162,7 +144,4 @@ const withConnect = connect(
   mapDispatchToProps
 );
 
-export default compose(
-  withConnect,
-  memo
-)(Main);
+export default compose(withConnect)(Main);

packages/strapi-plugin-content-manager/admin/src/containers/RecursivePath/index.js

@@ -0,0 +1,46 @@
+import React, { Suspense, lazy } from 'react';
+import { Switch, Route, useRouteMatch, useParams } from 'react-router-dom';
+import { LoadingIndicatorPage } from 'strapi-helper-plugin';
+const EditView = lazy(() => import('../EditView'));
+const EditSettingsView = lazy(() => import('../EditSettingsView'));
+const ListView = lazy(() => import('../ListView'));
+const ListSettingsView = lazy(() => import('../ListSettingsView'));
+// import EditView from '../EditView';
+// import EditSettingsView from '../EditSettingsView';
+// import ListSettingsView from '../ListSettingsView';
+// import ListView from '../ListView';
+
+const RecursivePath = props => {
+  const { url } = useRouteMatch();
+  const { slug } = useParams();
+  const renderRoute = (routeProps, Component) => (
+    <Component {...props} {...routeProps} slug={slug} />
+  );
+
+  const routes = [
+    {
+      path: 'ctm-configurations/list-settings',
+      comp: ListSettingsView,
+    },
+    {
+      path: 'ctm-configurations/edit-settings/:type',
+      comp: EditSettingsView,
+    },
+    { path: ':id', comp: EditView },
+    { path: '', comp: ListView },
+  ].map(({ path, comp }) => (
+    <Route
+      key={path}
+      path={`${url}/${path}`}
+      render={props => renderRoute(props, comp)}
+    />
+  ));
+
+  return (
+    <Suspense fallback={<LoadingIndicatorPage />}>
+      <Switch>{routes}</Switch>
+    </Suspense>
+  );
+};
+
+export default RecursivePath;