Add link to CTB directly in the CM.

Remove EditSettingsView injection zone

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/core/content-manager/admin/src/containers/EditSettingsView/LinkToCTB/index.js

@@ -11,11 +11,12 @@ import { useHistory } from 'react-router-dom';
 import get from 'lodash/get';
 import { Button } from '@buffetjs/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import getTrad from '../../utils/getTrad';
-import pluginPermissions from '../../permissions';
+import getTrad from '../../../utils/getTrad';
+
+const permissions = [{ action: 'plugins::content-type-builder.read', subject: null }];
 
 // Create link from content-type-builder to content-manager
-function EditViewButton({ modifiedData, slug, type }) {
+const LinkToCTB = ({ modifiedData, slug, type }) => {
   const { emitEvent, formatMessage } = useGlobalContext();
   const { push } = useHistory();
 
@@ -36,13 +37,13 @@ function EditViewButton({ modifiedData, slug, type }) {
   }
 
   return (
-    <CheckPermissions permissions={pluginPermissions.main}>
+    <CheckPermissions permissions={permissions}>
       <Button
         type="button"
         onClick={handleClick}
         icon={<FontAwesomeIcon icon="cog" style={{ fontSize: 13 }} />}
         label={formatMessage({
-          id: getTrad(`injected-components.content-manager.edit-settings-view.link.${type}`),
+          id: getTrad(`edit-settings-view.link-to-ctb.${type}`),
         })}
         style={{
           paddingLeft: 15,
@@ -53,12 +54,12 @@ function EditViewButton({ modifiedData, slug, type }) {
       />
     </CheckPermissions>
   );
-}
+};
 
-EditViewButton.propTypes = {
+LinkToCTB.propTypes = {
   modifiedData: PropTypes.object.isRequired,
   slug: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
 };
 
-export default EditViewButton;
+export default LinkToCTB;

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { useSelector, shallowEqual } from 'react-redux';
 import { cloneDeep, flatMap, get, set, pick } from 'lodash';
-import { InjectionZone, request, useGlobalContext } from '@strapi/helper-plugin';
+import { request, useGlobalContext } from '@strapi/helper-plugin';
 import { Inputs as Input } from '@buffetjs/custom';
 import { FormattedMessage } from 'react-intl';
 import pluginId from '../../pluginId';
@@ -20,6 +20,7 @@ import init from './init';
 import reducer, { initialState } from './reducer';
 import { createPossibleMainFieldsForModelsAndComponents, getInputProps } from './utils';
 import { unformatLayout } from './utils/layout';
+import LinkToCTB from './LinkToCTB';
 
 const EditSettingsView = ({ components, mainLayout, isContentTypeView, slug, updateLayout }) => {
   const { push } = useHistory();
@@ -310,8 +311,7 @@ const EditSettingsView = ({ components, mainLayout, isContentTypeView, slug, upd
                   marginTop: -6,
                 }}
               >
-                <InjectionZone
-                  area={`${pluginId}.editSettingsView.links`}
+                <LinkToCTB
                   modifiedData={modifiedData}
                   slug={slug}
                   type={isContentTypeView ? 'content-types' : 'components'}

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

@@ -7,6 +7,7 @@ import {
   InjectionZone,
   LiLink,
   CheckPermissions,
+  useGlobalContext,
 } from '@strapi/helper-plugin';
 import { Padded } from '@buffetjs/core';
 import pluginId from '../../pluginId';
@@ -25,6 +26,9 @@ import { createAttributesLayout, getFieldsActionMatchingPermissions } from './ut
 import { LinkWrapper, SubWrapper } from './components';
 import DeleteLink from './DeleteLink';
 import InformationCard from './InformationCard';
+import { getTrad } from '../../utils';
+
+const ctbPermissions = [{ action: 'plugins::content-type-builder.read', subject: null }];
 
 /* eslint-disable  react/no-array-index-key */
 const EditView = ({
@@ -37,6 +41,7 @@ const EditView = ({
   origin,
   userPermissions,
 }) => {
+  const { emitEvent } = useGlobalContext();
   const {
     createActionAllowedFields,
     readActionAllowedFields,
@@ -232,6 +237,21 @@ const EditView = ({
                           }}
                         />
                       </CheckPermissions>
+                      {slug !== 'strapi::administrator' && (
+                        <CheckPermissions permissions={ctbPermissions}>
+                          <LiLink
+                            message={{
+                              id: getTrad('containers.Edit.Link.Fields'),
+                            }}
+                            onClick={() => {
+                              emitEvent('willEditEditLayout');
+                            }}
+                            icon="fa-cog"
+                            url={`/plugins/content-type-builder/content-types/${slug}`}
+                          />
+                        </CheckPermissions>
+                      )}
+                      {/*  TODO add DOCUMENTATION */}
                       <InjectionZone area={`${pluginId}.editView.right-links`} slug={slug} />
 
                       {allowedActions.canDelete && (

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

@@ -26,7 +26,6 @@ export default {
       icon,
       id: pluginId,
       injectionZones: {
-        editSettingsView: { links: [] },
         editView: { informations: [], 'right-links': [] },
         listView: { actions: [], deleteModalAdditionalInfos: [] },
       },

packages/core/content-manager/admin/src/translations/en.json

@@ -173,5 +173,7 @@
   "success.record.delete": "Deleted",
   "success.record.publish": "Published",
   "success.record.save": "Saved",
-  "success.record.unpublish": "Unpublished"
+  "success.record.unpublish": "Unpublished",
+  "edit-settings-view.link-to-ctb.components": "Edit the component",
+  "edit-settings-view.link-to-ctb.content-types": "Edit the content type"
 }

packages/core/content-type-builder/admin/src/InjectedComponents/ContentManager/EditViewLink.js

@@ -1,42 +0,0 @@
-/**
- *
- * EditViewLink
- *
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { LiLink, useGlobalContext, CheckPermissions } from '@strapi/helper-plugin';
-import pluginPermissions from '../../permissions';
-
-// Create link from content-type-builder to content-manager
-function EditViewLink(props) {
-  const { emitEvent } = useGlobalContext();
-  // Retrieve URL from props
-  const url = `/plugins/content-type-builder/content-types/${props.slug}`;
-
-  if (props.slug === 'strapi::administrator') {
-    return null;
-  }
-
-  return (
-    <CheckPermissions permissions={pluginPermissions.main}>
-      <LiLink
-        message={{
-          id: 'content-manager.containers.Edit.Link.Fields',
-        }}
-        icon="fa-cog"
-        url={url}
-        onClick={() => {
-          emitEvent('willEditEditLayout');
-        }}
-      />
-    </CheckPermissions>
-  );
-}
-
-EditViewLink.propTypes = {
-  slug: PropTypes.string.isRequired,
-};
-
-export default EditViewLink;

packages/core/content-type-builder/admin/src/InjectedComponents/ContentManager/tests/EditViewLink.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import EditViewLink from '../EditViewLink';
-
-describe('<EditViewLink />', () => {
-  let props;
-
-  beforeEach(() => {
-    props = {
-      currentEnvironment: 'development',
-      getContentTypeBuilderBaseUrl: jest.fn(() => '/plugins/'),
-      getModelName: jest.fn(() => 'test'),
-      getSource: jest.fn(),
-    };
-  });
-
-  it('should not crash', () => {
-    shallow(<EditViewLink {...props} />);
-  });
-});

packages/core/content-type-builder/admin/src/index.js

@@ -8,8 +8,6 @@
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
 import App from './containers/App';
-import Link from './InjectedComponents/ContentManager/EditViewLink';
-import Button from './InjectedComponents/ContentManager/EditSettingViewButton';
 import trads from './translations';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
@@ -56,17 +54,5 @@ export default {
       },
     });
   },
-  boot(app) {
-    const cmPlugin = app.getPlugin('content-manager');
-
-    cmPlugin.injectComponent('editView', 'right-links', {
-      name: 'content-type-builder.link',
-      Component: Link,
-    });
-
-    cmPlugin.injectComponent('editSettingsView', 'links', {
-      name: 'content-type-builder.left-link',
-      Component: Button,
-    });
-  },
+  boot() {},
 };

packages/core/content-type-builder/admin/src/translations/en.json

@@ -126,8 +126,6 @@
   "form.button.single-type.description": "Best for single instance like about us, homepage, etc.",
   "form.contentType.divider.draft-publish": "DRAFT/PUBLISH",
   "from": "from",
-  "injected-components.content-manager.edit-settings-view.link.components": "Edit the component",
-  "injected-components.content-manager.edit-settings-view.link.content-types": "Edit the content type",
   "menu.section.components.name.plural": "Components",
   "menu.section.components.name.singular": "Component",
   "menu.section.models.name.plural": "Collection Types",