diff --git a/examples/getstarted/plugins/myplugin/admin/src/index.js b/examples/getstarted/plugins/myplugin/admin/src/index.js index bc186f0fcd..3be1ae8651 100644 --- a/examples/getstarted/plugins/myplugin/admin/src/index.js +++ b/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; diff --git a/packages/core/admin/admin/src/core/apis/Plugin.js b/packages/core/admin/admin/src/core/apis/Plugin.js index e430458f09..2953eb813e 100644 --- a/packages/core/admin/admin/src/core/apis/Plugin.js +++ b/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 diff --git a/packages/core/content-manager/admin/src/index.js b/packages/core/content-manager/admin/src/index.js index e159ac0b1c..e4c271e8e8 100644 --- a/packages/core/content-manager/admin/src/index.js +++ b/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, + }); + }, }; diff --git a/packages/core/content-type-builder/admin/src/containers/ListView/index.js b/packages/core/content-type-builder/admin/src/containers/ListView/index.js index c78edc7cb5..5dbbd729ae 100644 --- a/packages/core/content-type-builder/admin/src/containers/ListView/index.js +++ b/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 = ( + + ); const listActions = isInDevelopmentMode - ? [...listInjectedComponents, ] + ? [listInjectedComponents, ] : listInjectedComponents; const CustomRow = props => { diff --git a/packages/core/content-type-builder/admin/src/index.js b/packages/core/content-type-builder/admin/src/index.js index b25acd4d99..36cb9f4da2 100644 --- a/packages/core/content-type-builder/admin/src/index.js +++ b/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, diff --git a/packages/core/content-type-builder/admin/src/utils/getComponents.js b/packages/core/content-type-builder/admin/src/utils/getComponents.js deleted file mode 100644 index 6349d97dc4..0000000000 --- a/packages/core/content-type-builder/admin/src/utils/getComponents.js +++ /dev/null @@ -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 ; - }); - - return [...acc, ...compos]; - }, []); - - return componentsToInject; -}; - -export default getInjectedComponents; diff --git a/packages/core/content-type-builder/admin/src/utils/tests/getComponents.test.js b/packages/core/content-type-builder/admin/src/utils/tests/getComponents.test.js deleted file mode 100644 index b9c71f666d..0000000000 --- a/packages/core/content-type-builder/admin/src/utils/tests/getComponents.test.js +++ /dev/null @@ -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 = () =>
TestCompo1
; - const TestCompo2 = () =>
TestCompo2
; - - 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( -
- {getComponents('listView', 'list.link', plugins, 'test', 'test', 'test', jest.fn())} -
- ); - - 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); - }); -});