From e16207715bf5396bf0b4fe0d36361e32c48d7131 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 12 Oct 2021 11:47:47 +0200 Subject: [PATCH 1/2] feedback fixes - plugins query params --- .../ListSettingsView/components/Settings.js | 8 ++--- .../pages/ListSettingsView/index.js | 33 ++++++++++++------- .../utils/excludedSortOptions.js | 8 +++++ .../content-manager/pages/ListView/index.js | 8 ++--- 4 files changed, 38 insertions(+), 19 deletions(-) create mode 100644 packages/core/admin/admin/src/content-manager/pages/ListSettingsView/utils/excludedSortOptions.js diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js index 169c066b85..dd27e8c9a1 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { get } from 'lodash'; +import get from 'lodash/get'; import { useIntl } from 'react-intl'; import { Row } from '@strapi/parts/Row'; import { Grid, GridItem } from '@strapi/parts/Grid'; @@ -99,7 +99,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => { defaultMessage: 'Note: You can override this value in the Collection Type settings page.', })} - onChange={e => onChange({ target: { name: 'settings.pageSize', value: e } })} + onChange={value => onChange({ target: { name: 'settings.pageSize', value } })} name="settings.pageSize" value={get(modifiedData, 'settings.pageSize', '')} > @@ -116,7 +116,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => { id: 'content-manager.form.Input.defaultSort', defaultMessage: 'Default sort attribute', })} - onChange={e => onChange({ target: { name: 'settings.defaultSortBy', value: e } })} + onChange={value => onChange({ target: { name: 'settings.defaultSortBy', value } })} name="settings.defaultSortBy" value={get(modifiedData, 'settings.defaultSortBy', '')} > @@ -133,7 +133,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => { id: 'content-manager.form.Input.sort.order', defaultMessage: 'Default sort order', })} - onChange={e => onChange({ target: { name: 'settings.defaultSortOrder', value: e } })} + onChange={value => onChange({ target: { name: 'settings.defaultSortOrder', value } })} name="settings.defaultSortOrder" value={get(modifiedData, 'settings.defaultSortOrder', '')} > diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js index 0806bcd420..80f22df17d 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js @@ -7,7 +7,9 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import { useMutation } from 'react-query'; -import { isEqual, upperFirst, pick } from 'lodash'; +import isEqual from 'lodash/isEqual'; +import upperFirst from 'lodash/upperFirst'; +import pick from 'lodash/pick'; import { stringify } from 'qs'; import { useNotification, useTracking, ConfirmDialog } from '@strapi/helper-plugin'; import { useIntl } from 'react-intl'; @@ -26,8 +28,9 @@ import Settings from './components/Settings'; // import LayoutDndProvider from '../../components/LayoutDndProvider'; import init from './init'; import reducer, { initialState } from './reducer'; +import { EXCLUDED_SORT_OPTIONS } from './utils/excludedSortOptions'; -const ListSettingsView = ({ layout, slug, updateLayout }) => { +const ListSettingsView = ({ layout, slug }) => { const pluginsQueryParams = usePluginsQueryParams(); const toggleNotification = useNotification(); const { refetchData } = useContext(ModelsContext); @@ -58,12 +61,12 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { // return get(modifiedData, ['layouts', 'list'], []); // }, [modifiedData]); - const excludedSortOptions = ['media', 'richtext', 'dynamiczone', 'relation', 'component', 'json']; + // const excludedSortOptions = ['media', 'richtext', 'dynamiczone', 'relation', 'component', 'json']; const sortOptions = Object.entries(attributes).reduce((acc, cur) => { const [name, { type }] = cur; - if (!excludedSortOptions.includes(type)) { + if (!EXCLUDED_SORT_OPTIONS.includes(type)) { acc.push(name); } @@ -119,7 +122,7 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { settings: { pageSize, defaultSortBy, defaultSortOrder }, kind, uid, - } = modifiedData; + } = initialData; const sort = `${defaultSortBy}:${defaultSortOrder}`; const goBackSearch = `${stringify( { @@ -147,9 +150,7 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { }; const submitMutation = useMutation(body => putCMSettingsLV(body, slug), { - onSuccess: async ({ data: { data } }) => { - updateLayout(data); - + onSuccess: async () => { dispatch({ type: 'SUBMIT_SUCCEEDED', }); @@ -406,13 +407,23 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { ListSettingsView.propTypes = { layout: PropTypes.shape({ uid: PropTypes.string.isRequired, - settings: PropTypes.object.isRequired, + settings: PropTypes.shape({ + bulkable: PropTypes.bool, + defaultSortBy: PropTypes.string, + defaultSortOrder: PropTypes.string, + filterable: PropTypes.bool, + pageSize: PropTypes.number, + searchable: PropTypes.bool, + }).isRequired, metadatas: PropTypes.object.isRequired, options: PropTypes.object.isRequired, - attributes: PropTypes.object.isRequired, + attributes: PropTypes.objectOf( + PropTypes.shape({ + type: PropTypes.string, + }) + ).isRequired, }).isRequired, slug: PropTypes.string.isRequired, - updateLayout: PropTypes.func.isRequired, }; export default memo(ListSettingsView); diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/utils/excludedSortOptions.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/utils/excludedSortOptions.js new file mode 100644 index 0000000000..4fdf34dd4b --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/utils/excludedSortOptions.js @@ -0,0 +1,8 @@ +export const EXCLUDED_SORT_OPTIONS = [ + 'media', + 'richtext', + 'dynamiczone', + 'relation', + 'component', + 'json', +]; diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js index c0415da89c..0f9a5f8ec7 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js @@ -81,6 +81,7 @@ function ListView({ const [{ query }] = useQueryParams(); const params = buildQueryString(query); + const pluginsQueryParams = stringify({ plugins: query.plugins }, { encode: false }); const { pathname } = useLocation(); const { push } = useHistory(); @@ -136,8 +137,6 @@ function ListView({ return; } - console.log('iii'); - console.error(err); toggleNotification({ type: 'warning', @@ -256,7 +255,7 @@ function ListView({ trackUsageRef.current('willCreateEntry', trackerProperty); push({ pathname: `${pathname}/create`, - search: query.plugins ? stringify({ plugins: query.plugins }, { encode: false }) : '', + search: query.plugins ? pluginsQueryParams : '', }); }} startIcon={} @@ -282,7 +281,8 @@ function ListView({ push(`${slug}/configurations/list`)} + onClick={() => + push({ pathname: `${slug}/configurations/list`, search: pluginsQueryParams })} icon={} label={formatMessage({ id: 'app.links.configure-view', From 2cb688e871c01860b96df6f555fec17e504cac53 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 12 Oct 2021 12:06:21 +0200 Subject: [PATCH 2/2] plugins query params test --- .../pages/ListSettingsView/index.js | 2 +- .../ListSettingsView/tests/index.test.js | 31 +++++++++++++++---- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js index 80f22df17d..1454658535 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js @@ -223,7 +223,7 @@ const ListSettingsView = ({ layout, slug }) => {
} to={goBackUrl}> + } to={goBackUrl} id="go-back"> {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Go back' })} } diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js index e99b01de93..785fdb55c0 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, waitFor, screen } from '@testing-library/react'; +import { render, waitFor, screen, fireEvent } from '@testing-library/react'; import { Router } from 'react-router-dom'; import { createMemoryHistory } from 'history'; import { IntlProvider } from 'react-intl'; @@ -49,10 +49,7 @@ const layout = { options: {}, }; -const history = createMemoryHistory(); -history.push('/content-manager'); - -const App = ( +const makeApp = history => ( @@ -72,7 +69,10 @@ const App = ( describe('ADMIN | CM | LV | Configure the view', () => { it('renders and matches the snapshot', async () => { - const { container } = render(App); + const history = createMemoryHistory(); + history.push('/content-manager'); + + const { container } = render(makeApp(history)); await waitFor(() => { expect(screen.getByText('Configure the view - Michka')).toBeInTheDocument(); }); @@ -797,6 +797,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {