From 05f6fb7d405bb52386b8ec1fbd984a9e863551ea Mon Sep 17 00:00:00 2001 From: soupette Date: Wed, 27 May 2020 16:41:32 +0200 Subject: [PATCH] Move configure button to the ctm Signed-off-by: soupette --- .../ConfigureViewButton/index.js | 40 ++++++++++++++ .../admin/src/index.js | 10 +++- .../admin/src/components/ListButton/index.js | 3 +- .../admin/src/components/ListHeader/index.js | 19 +------ .../admin/src/containers/ListView/index.js | 31 ++++++----- .../admin/src/utils/getComponents.js | 31 +++++++++++ .../src/utils/tests/getComponents.test.js | 54 +++++++++++++++++++ 7 files changed, 152 insertions(+), 36 deletions(-) create mode 100644 packages/strapi-plugin-content-manager/admin/src/InjectedComponents/ContentTypeBuilder/ConfigureViewButton/index.js create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/utils/getComponents.js create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/utils/tests/getComponents.test.js diff --git a/packages/strapi-plugin-content-manager/admin/src/InjectedComponents/ContentTypeBuilder/ConfigureViewButton/index.js b/packages/strapi-plugin-content-manager/admin/src/InjectedComponents/ContentTypeBuilder/ConfigureViewButton/index.js new file mode 100644 index 0000000000..c646799ce2 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/InjectedComponents/ContentTypeBuilder/ConfigureViewButton/index.js @@ -0,0 +1,40 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { LayoutIcon } from 'strapi-helper-plugin'; +import { Button as Base } from '@buffetjs/core'; +import { useIntl } from 'react-intl'; + +const StyledButton = styled(Base)` + padding-left: 15px; + padding-right: 15px; +`; + +const Button = ({ onClick, isTemporary }) => { + const { formatMessage } = useIntl(); + const icon = ; + const label = formatMessage({ id: 'content-type-builder.form.button.configure-view' }); + + return ( + + ); +}; + +Button.defaultProps = { + isTemporary: false, + onClick: () => {}, +}; + +Button.propTypes = { + isTemporary: PropTypes.bool, + onClick: PropTypes.func, +}; + +export default Button; diff --git a/packages/strapi-plugin-content-manager/admin/src/index.js b/packages/strapi-plugin-content-manager/admin/src/index.js index 919f6947ff..fcb99a67d8 100644 --- a/packages/strapi-plugin-content-manager/admin/src/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/index.js @@ -10,6 +10,7 @@ import pluginId from './pluginId'; import pluginLogo from './assets/images/logo.svg'; import App from './containers/Main'; import Initializer from './containers/Initializer'; +import ConfigureViewButton from './InjectedComponents/ContentTypeBuilder/ConfigureViewButton'; import lifecycles from './lifecycles'; import reducers from './reducers'; import trads from './translations'; @@ -23,7 +24,14 @@ export default strapi => { icon: pluginPkg.strapi.icon, id: pluginId, initializer: Initializer, - injectedComponents: [], + injectedComponents: [ + { + plugin: 'content-type-builder.listView', + area: 'list.link', + component: ConfigureViewButton, + key: 'content-manager.link', + }, + ], isReady: false, isRequired: pluginPkg.strapi.required || false, layout: null, diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js index e605914baa..d1de9bc7ed 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js @@ -1,10 +1,9 @@ import styled from 'styled-components'; import { Button } from '@buffetjs/core'; -/* eslint-disable */ const ListHeaderButton = styled(Button)` padding-left: 15px; padding-right: 15px; `; -export { ListHeaderButton }; +export default ListHeaderButton; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js index 2e0ad30cbb..cb92529425 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { ListHeaderButton } from '../ListButton'; + import Title from './Title'; import Wrapper from './Wrapper'; @@ -8,22 +8,7 @@ import Wrapper from './Wrapper'; function ListHeader({ actions, title }) { return ( -
- {actions.map(action => { - const { disabled, label, onClick } = action; - - return ( - - {label} - - ); - })} -
+
{actions}
{title.map(item => { return {item} ; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ListView/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ListView/index.js index 582dfa9c8d..9982b3641d 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ListView/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ListView/index.js @@ -1,20 +1,20 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, 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, LayoutIcon } from 'strapi-helper-plugin'; +import { BackHeader, 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'; import List from '../../components/List'; - +import ListButton from '../../components/ListButton'; import useDataManager from '../../hooks/useDataManager'; -import pluginId from '../../pluginId'; - import ListHeader from '../../components/ListHeader'; import LeftMenu from '../LeftMenu'; import Wrapper from './Wrapper'; @@ -31,7 +31,7 @@ const ListView = () => { toggleModalCancel, } = useDataManager(); - const { emitEvent, formatMessage } = useGlobalContext(); + const { emitEvent, formatMessage, plugins } = useGlobalContext(); const { push, goBack } = useHistory(); const { search } = useLocation(); const [enablePrompt, togglePrompt] = useState(true); @@ -265,18 +265,17 @@ const ListView = () => { } }; - const configureButtonProps = { - icon: , - color: 'secondary', - label: formatMessage({ id: `${pluginId}.form.button.configure-view` }), - onClick: goToCMSettingsPage, - style: { marginTop: '2px' }, - disabled: isTemporary, - }; + const listInjectedComponents = useMemo(() => { + return getComponents('listView', 'list.link', plugins, { + onClick: goToCMSettingsPage, + isTemporary, + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isTemporary]); const listActions = isInDevelopmentMode - ? [{ ...configureButtonProps }, { ...addButtonProps }] - : [configureButtonProps]; + ? [...listInjectedComponents, ] + : listInjectedComponents; const CustomRow = props => { const { name } = props; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/utils/getComponents.js b/packages/strapi-plugin-content-type-builder/admin/src/utils/getComponents.js new file mode 100644 index 0000000000..6349d97dc4 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/utils/getComponents.js @@ -0,0 +1,31 @@ +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/strapi-plugin-content-type-builder/admin/src/utils/tests/getComponents.test.js b/packages/strapi-plugin-content-type-builder/admin/src/utils/tests/getComponents.test.js new file mode 100644 index 0000000000..b9c71f666d --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/utils/tests/getComponents.test.js @@ -0,0 +1,54 @@ +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); + }); +});