diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItem.js b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItem.js
new file mode 100644
index 0000000000..4ffe8e0e55
--- /dev/null
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItem.js
@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import InputCheckbox from '../InputCheckbox';
+import ItemDropdown from './ItemDropdownReset';
+
+const DropdownItem = ({ name, onChange, value }) => {
+ const handleChange = () => {
+ onChange({ name, value });
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+DropdownItem.propTypes = {
+ name: PropTypes.string.isRequired,
+ onChange: PropTypes.func.isRequired,
+ value: PropTypes.bool.isRequired,
+};
+
+export default memo(DropdownItem);
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js
index b3c893505b..4cdedfd566 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js
@@ -4,25 +4,19 @@ import { ButtonDropdown } from 'reactstrap';
import { FormattedMessage } from 'react-intl';
import { LayoutIcon, useGlobalContext } from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
-import InputCheckbox from '../InputCheckbox';
import DropdownItemLink from './DropdownItemLink';
import DropdownWrapper from './DropdownWrapper';
-import ItemDropdown from './ItemDropdown';
import ItemDropdownReset from './ItemDropdownReset';
import LayoutWrapper from './LayoutWrapper';
import MenuDropdown from './MenuDropdown';
import Toggle from './Toggle';
+import DropdownItem from './DropdownItem';
const DisplayedFieldsDropdown = ({ displayedHeaders, items, onChange, onClickReset, slug }) => {
const { emitEvent } = useGlobalContext();
const emitEventRef = useRef(emitEvent);
-
const [isOpen, setIsOpen] = useState(false);
- const handleChange = ({ target: { name, checked } }) => {
- onChange({ name, value: !checked });
- };
-
const getCheckboxValue = checkboxName => {
return displayedHeaders.findIndex(({ name }) => name === checkboxName) !== -1;
};
@@ -71,15 +65,12 @@ const DisplayedFieldsDropdown = ({ displayedHeaders, items, onChange, onClickRes
{items.map(headerName => {
return (
-
-
-
-
-
+
);
})}
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
index 2bc6e3acba..02279e4e4a 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
@@ -172,8 +172,12 @@ function ListView({
const handleChangeListLabels = useCallback(
({ name, value }) => {
// Display a notification if trying to remove the last displayed field
+
if (value && displayedHeaders.length === 1) {
- strapi.notification.error('content-manager.notification.error.displayedFields');
+ strapi.notification.toggle({
+ type: 'warning',
+ message: { id: 'content-manager.notification.error.displayedFields' },
+ });
} else {
emitEventRef.current('didChangeDisplayedFields');
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js
index ec0a1d11ec..b233871504 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js
@@ -2,8 +2,13 @@ import { get } from 'lodash';
const getFirstSortableHeader = headers => {
const matched = headers.find(header => header.metadatas.sortable === true);
+ const fieldName = get(matched, 'name', 'id');
- return get(matched, 'name', 'id');
+ if (get(matched, 'fieldSchema.type', '') === 'relation') {
+ return `${fieldName}.${matched.metadatas.mainField}`;
+ }
+
+ return fieldName;
};
export default getFirstSortableHeader;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js
index d5d61be394..81f99e82f9 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js
@@ -23,4 +23,24 @@ describe('CONTENT MANAGER | containers | ListView | utils | getFirstSortableHead
expect(getFirstSortableHeader(headers)).toBe('two');
});
+
+ it('should return the first sortable element if it is a relation', () => {
+ const headers = [
+ {
+ name: 'un',
+ metadatas: { sortable: false },
+ },
+ {
+ name: 'two',
+ fieldSchema: { type: 'relation' },
+ metadatas: { sortable: true, mainField: 'test' },
+ },
+ {
+ name: 'three',
+ metadatas: { sortable: true },
+ },
+ ];
+
+ expect(getFirstSortableHeader(headers)).toBe('two.test');
+ });
});