From 88b2d2a5fa4737b01d0534543272ec58a9c46efd Mon Sep 17 00:00:00 2001 From: Jamie Howard Date: Tue, 17 Jan 2023 11:49:37 +0000 Subject: [PATCH 1/3] fix(content-manager): leftMenu collection type name sorting --- .../admin/src/content-manager/pages/App/LeftMenu/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js index cdd05abe1b..cd13676772 100644 --- a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js @@ -8,9 +8,12 @@ import React, { useMemo, useState } from 'react'; import { useSelector, shallowEqual } from 'react-redux'; import { useIntl } from 'react-intl'; import matchSorter from 'match-sorter'; +import { NavLink } from 'react-router-dom'; + import sortBy from 'lodash/sortBy'; import toLower from 'lodash/toLower'; -import { NavLink } from 'react-router-dom'; +import camelCase from 'lodash/camelCase'; + import { SubNav, SubNavHeader, @@ -18,13 +21,14 @@ import { SubNavSections, SubNavLink, } from '@strapi/design-system/v2/SubNav'; + import getTrad from '../../../utils/getTrad'; import { makeSelectModelLinks } from '../selectors'; const matchByTitle = (links, search) => search ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] }) - : sortBy(links, (object) => object.title.toLowerCase()); + : sortBy(links, (object) => camelCase(object.title)); const LeftMenu = () => { const [search, setSearch] = useState(''); From 2ae9cd3a45a1c1f74f35102b1318549617a71eff Mon Sep 17 00:00:00 2001 From: Jamie Howard Date: Fri, 20 Jan 2023 15:28:50 +0000 Subject: [PATCH 2/3] test(content-manager): leftMenu title sorting chore(content-manager) --- .../pages/App/LeftMenu/index.js | 11 +---- .../pages/App/LeftMenu/utils/index.js | 1 + .../pages/App/LeftMenu/utils/matchByTitle.js | 24 +++++++++++ .../LeftMenu/utils/tests/matchByTitle.test.js | 43 +++++++++++++++++++ 4 files changed, 69 insertions(+), 10 deletions(-) create mode 100644 packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js create mode 100644 packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js create mode 100644 packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js index cd13676772..b7baa0be02 100644 --- a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/index.js @@ -7,13 +7,8 @@ import React, { useMemo, useState } from 'react'; import { useSelector, shallowEqual } from 'react-redux'; import { useIntl } from 'react-intl'; -import matchSorter from 'match-sorter'; import { NavLink } from 'react-router-dom'; -import sortBy from 'lodash/sortBy'; -import toLower from 'lodash/toLower'; -import camelCase from 'lodash/camelCase'; - import { SubNav, SubNavHeader, @@ -22,14 +17,10 @@ import { SubNavLink, } from '@strapi/design-system/v2/SubNav'; +import { matchByTitle } from './utils'; import getTrad from '../../../utils/getTrad'; import { makeSelectModelLinks } from '../selectors'; -const matchByTitle = (links, search) => - search - ? matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] }) - : sortBy(links, (object) => camelCase(object.title)); - const LeftMenu = () => { const [search, setSearch] = useState(''); const { formatMessage } = useIntl(); diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js new file mode 100644 index 0000000000..f77f21bb4b --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/index.js @@ -0,0 +1 @@ +export { default as matchByTitle } from './matchByTitle'; diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js new file mode 100644 index 0000000000..340d80dadf --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js @@ -0,0 +1,24 @@ +import matchSorter from 'match-sorter'; +import camelCase from 'lodash/camelCase'; + +/** + * @type {(links: array, search? : string) => array } + */ +const matchByTitle = (links, search) => + search + ? matchSorter(links, search.toLowerCase(), { keys: [(item) => item.title.toLowerCase()] }) + : links.sort((link, linkNext) => { + const title = camelCase(link.title); + const nextTitle = camelCase(linkNext.title); + + if (title < nextTitle) { + return -1; + } + if (title > nextTitle) { + return 1; + } + + return 0; + }); + +export default matchByTitle; diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js new file mode 100644 index 0000000000..ddf1e00857 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/tests/matchByTitle.test.js @@ -0,0 +1,43 @@ +import { matchByTitle } from '../index'; + +describe('Content Manager | Pages | LeftMenu | Utils', () => { + describe('matchByTitle', () => { + it('correctly sorts a list of links with special characters', () => { + const links = [ + { + title: 'zebra', + }, + { + title: 'Address', + }, + { + title: 'dog', + }, + { + title: 'škola', + }, + { + title: 'Članky', + }, + ]; + + expect(matchByTitle(links)).toEqual([ + { + title: 'Address', + }, + { + title: 'Članky', + }, + { + title: 'dog', + }, + { + title: 'škola', + }, + { + title: 'zebra', + }, + ]); + }); + }); +}); From b4b600808d364bc3b2fb8375a385dcfc6c6b9588 Mon Sep 17 00:00:00 2001 From: Jamie Howard Date: Fri, 20 Jan 2023 16:22:56 +0000 Subject: [PATCH 3/3] chore(content-manager) --- .../content-manager/pages/App/LeftMenu/utils/matchByTitle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js index 340d80dadf..9bc23b2686 100644 --- a/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js +++ b/packages/core/admin/admin/src/content-manager/pages/App/LeftMenu/utils/matchByTitle.js @@ -7,9 +7,9 @@ import camelCase from 'lodash/camelCase'; const matchByTitle = (links, search) => search ? matchSorter(links, search.toLowerCase(), { keys: [(item) => item.title.toLowerCase()] }) - : links.sort((link, linkNext) => { + : links.sort((link, nextLink) => { const title = camelCase(link.title); - const nextTitle = camelCase(linkNext.title); + const nextTitle = camelCase(nextLink.title); if (title < nextTitle) { return -1;