Fix sort

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

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 (
+    <ItemDropdown key={name} toggle={false} onClick={handleChange}>
+      <div>
+        <InputCheckbox onChange={handleChange} name={name} value={value} />
+      </div>
+    </ItemDropdown>
+  );
+};
+
+DropdownItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.bool.isRequired,
+};
+
+export default memo(DropdownItem);

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
           </FormattedMessage>
           {items.map(headerName => {
             return (
-              <ItemDropdown key={headerName} toggle={false} onClick={handleChange}>
-                <div>
-                  <InputCheckbox
-                    onChange={handleChange}
-                    name={headerName}
-                    value={getCheckboxValue(headerName)}
-                  />
-                </div>
-              </ItemDropdown>
+              <DropdownItem
+                key={headerName}
+                name={headerName}
+                onChange={onChange}
+                value={getCheckboxValue(headerName)}
+              />
             );
           })}
         </MenuDropdown>

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');
 

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;

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');
+  });
 });