Remove old injectedComponents api in CTB

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

examples/getstarted/plugins/myplugin/admin/src/index.js

@@ -1,6 +1,7 @@
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 
+// TODO
 export default strapi => {
   const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 

packages/core/admin/admin/src/core/apis/Plugin.js

@@ -7,8 +7,6 @@ class Plugin {
     this.icon = pluginConf.icon;
     this.initializer = pluginConf.initializer || null;
 
-    // TODO
-    this.injectedComponents = pluginConf.injectedComponents || undefined;
     this.injectionZones = pluginConf.injectionZones || {};
     this.isReady = pluginConf.isReady !== undefined ? pluginConf.isReady : true;
     // TODO

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

@@ -25,15 +25,6 @@ export default {
       description: pluginDescription,
       icon,
       id: pluginId,
-      // TODO
-      injectedComponents: [
-        {
-          plugin: 'content-type-builder.listView',
-          area: 'list.link',
-          component: ConfigureViewButton,
-          key: 'content-manager.link',
-        },
-      ],
       injectionZones: {
         editSettingsView: { links: [] },
         editView: { informations: [], 'right-links': [] },
@@ -48,5 +39,12 @@ export default {
       trads,
     });
   },
-  boot() {},
+  boot(app) {
+    const ctbPlugin = app.getPlugin('content-type-builder');
+
+    ctbPlugin.injectComponent('listView', 'links', {
+      name: 'content-type-builder.link',
+      Component: ConfigureViewButton,
+    });
+  },
 };

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

@@ -1,14 +1,13 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Prompt, useHistory, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { get, has, isEqual } from 'lodash';
-import { BackHeader, ListWrapper, useGlobalContext, useStrapi } from '@strapi/helper-plugin';
+import { BackHeader, InjectionZone, ListWrapper, useGlobalContext } from '@strapi/helper-plugin';
 import { Header } from '@buffetjs/custom';
 import ListViewContext from '../../contexts/ListViewContext';
 import convertAttrObjToArray from '../../utils/convertAttrObjToArray';
 import getAttributeDisplayedType from '../../utils/getAttributeDisplayedType';
 import pluginId from '../../pluginId';
-import getComponents from '../../utils/getComponents';
 import getTrad from '../../utils/getTrad';
 import makeSearch from '../../utils/makeSearch';
 import ListRow from '../../components/ListRow';
@@ -32,10 +31,6 @@ const ListView = () => {
   } = useDataManager();
 
   const { emitEvent, formatMessage } = useGlobalContext();
-  const {
-    strapi: { plugins },
-  } = useStrapi();
-
   const { push, goBack } = useHistory();
   const { search } = useLocation();
   const [enablePrompt, togglePrompt] = useState(true);
@@ -260,17 +255,19 @@ const ListView = () => {
     },
   };
 
-  const listInjectedComponents = useMemo(() => {
-    return getComponents('listView', 'list.link', plugins, {
-      targetUid,
-      isTemporary,
-      isInContentTypeView,
-      contentTypeKind,
-    });
-  }, [plugins, isTemporary, targetUid, isInContentTypeView, contentTypeKind]);
+  const listInjectedComponents = (
+    <InjectionZone
+      key="injection-zone"
+      area={`${pluginId}.listView.links`}
+      targetUid={targetUid}
+      isTemporary={isTemporary}
+      isInContentTypeView={isInContentTypeView}
+      contentTypeKind={contentTypeKind}
+    />
+  );
 
   const listActions = isInDevelopmentMode
-    ? [...listInjectedComponents, <ListButton {...addButtonProps} key="add-button" />]
+    ? [listInjectedComponents, <ListButton {...addButtonProps} key="add-button" />]
     : listInjectedComponents;
 
   const CustomRow = props => {

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

@@ -27,6 +27,9 @@ export default {
       description: pluginDescription,
       icon,
       id: pluginId,
+      injectionZones: {
+        listView: { links: [] },
+      },
       isRequired: pluginPkg.strapi.required || false,
       isReady: true,
       mainComponent: App,

packages/core/content-type-builder/admin/src/utils/getComponents.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { get } from 'lodash';
-import pluginId from '../pluginId';
-
-/**
- * Retrieve external links from injected components
- * @type {Array} List of external links to display
- */
-const getInjectedComponents = (container, area, plugins, rest) => {
-  const componentsToInject = Object.keys(plugins).reduce((acc, current) => {
-    // Retrieve injected compos from plugin
-    const currentPlugin = plugins[current];
-    const injectedComponents = get(currentPlugin, 'injectedComponents', []);
-
-    const compos = injectedComponents
-      .filter(compo => {
-        return compo.plugin === `${pluginId}.${container}` && compo.area === area;
-      })
-      .map(compo => {
-        const Component = compo.component;
-
-        return <Component {...compo} {...rest} key={compo.key} />;
-      });
-
-    return [...acc, ...compos];
-  }, []);
-
-  return componentsToInject;
-};
-
-export default getInjectedComponents;

packages/core/content-type-builder/admin/src/utils/tests/getComponents.test.js

@@ -1,54 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import getComponents from '../getComponents';
-
-describe('Content Type Builder | utils | getComponents', () => {
-  it('should not crash', () => {
-    getComponents('', {}, '', '', '', jest.fn());
-  });
-
-  it('should return the correct components', () => {
-    const TestCompo1 = () => <div>TestCompo1</div>;
-    const TestCompo2 = () => <div>TestCompo2</div>;
-
-    const plugins = {
-      test: {
-        injectedComponents: [
-          {
-            plugin: 'content-type-builder.listView',
-            area: 'list.link',
-            component: TestCompo1,
-            key: 'test.TestCompo1',
-            props: {
-              someProps: { test: 'test' },
-              icon: 'fa-cog',
-            },
-          },
-          {
-            plugin: 'not.target.testContainer',
-            area: 'right.links',
-            component: TestCompo2,
-            key: 'test.TestCompo2',
-            props: {
-              someProps: { test: 'test' },
-              icon: 'fa-cog',
-            },
-          },
-        ],
-      },
-    };
-
-    const container = shallow(
-      <div>
-        {getComponents('listView', 'list.link', plugins, 'test', 'test', 'test', jest.fn())}
-      </div>
-    );
-
-    expect(
-      getComponents('listView', 'list.link', plugins, 'test', 'test', 'test', jest.fn())
-    ).toHaveLength(1);
-
-    expect(container.find(TestCompo1)).toHaveLength(1);
-    expect(container.find(TestCompo2)).toHaveLength(0);
-  });
-});