New: Use natural sorting for lists of items in the UI

(cherry picked from commit 1a1c8e6c08a6db5fcd2b5d17e65fa1f943d2e746)

Closes #4912
Closes #4921

frontend/src/Artist/Details/ArtistTagsConnector.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createArtistSelector from 'Store/Selectors/createArtistSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import ArtistTags from './ArtistTags';
 
 function createMapStateToProps() {
@@ -12,8 +13,8 @@ function createMapStateToProps() {
       const tags = artist.tags
         .map((tagId) => tagList.find((tag) => tag.id === tagId))
         .filter((tag) => !!tag)
-        .map((tag) => tag.label)
+        .sort(sortByProp('label'))
-        .sort((a, b) => a.localeCompare(b));
+        .map((tag) => tag.label);
 
       return {
         tags

frontend/src/Components/Filter/Builder/ArtistFilterBuilderRowValue.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import Artist from 'Artist/Artist';
 import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
 
@@ -11,7 +11,7 @@ function ArtistFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
 
   const tagList = allArtists
     .map((artist) => ({ id: artist.id, name: artist.artistName }))
-    .sort(sortByName);
+    .sort(sortByProp('name'));
 
   return <FilterBuilderRowValue {...props} tagList={tagList} />;
 }

frontend/src/Components/Filter/Builder/FilterBuilderRow.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import IconButton from 'Components/Link/IconButton';
 import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import ArtistFilterBuilderRowValue from './ArtistFilterBuilderRowValue';
 import ArtistStatusFilterBuilderRowValue from './ArtistStatusFilterBuilderRowValue';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
@@ -224,7 +225,7 @@ class FilterBuilderRow extends Component {
         key: name,
         value: typeof label === 'function' ? label() : label
       };
-    }).sort((a, b) => a.value.localeCompare(b.value));
+    }).sort(sortByProp('value'));
 
     const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { filterBuilderTypes } from 'Helpers/Props';
 import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
           }
 
           return acc;
-        }, []).sort(sortByName);
+        }, []).sort(sortByProp('name'));
       }
 
       return _.uniqBy(items, 'id');

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -5,6 +5,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import CustomFilter from './CustomFilter';
 import styles from './CustomFiltersModalContent.css';
@@ -31,7 +32,7 @@ function CustomFiltersModalContent(props) {
       <ModalBody>
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort((a, b) => sortByProp(a, b, 'label'))
             .map((customFilter) => {
               return (
                 <CustomFilter

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -4,7 +4,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchDownloadClients } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -22,7 +23,7 @@ function createMapStateToProps() {
 
       const filteredItems = items.filter((item) => item.protocol === protocolFilter);
 
-      const values = _.map(filteredItems.sort(sortByName), (downloadClient) => {
+      const values = _.map(filteredItems.sort(sortByProp('name')), (downloadClient) => {
         return {
           key: downloadClient.id,
           value: downloadClient.name,
@@ -33,7 +34,7 @@ function createMapStateToProps() {
       if (includeAny) {
         values.unshift({
           key: 0,
-          value: '(Any)'
+          value: `(${translate('Any')})`
         });
       }
 

frontend/src/Components/Form/IndexerSelectInputConnector.js

@@ -4,7 +4,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchIndexers } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -19,7 +20,7 @@ function createMapStateToProps() {
         items
       } = indexers;
 
-      const values = _.map(items.sort(sortByName), (indexer) => {
+      const values = _.map(items.sort(sortByProp('name')), (indexer) => {
         return {
           key: indexer.id,
           value: indexer.name
@@ -29,7 +30,7 @@ function createMapStateToProps() {
       if (includeAny) {
         values.unshift({
           key: 0,
-          value: '(Any)'
+          value: `(${translate('Any')})`
         });
       }
 

frontend/src/Components/Form/MetadataProfileSelectInputConnector.js

@@ -5,13 +5,13 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { metadataProfileNames } from 'Helpers/Props';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.metadataProfiles', sortByName),
+    createSortedSectionSelector('settings.metadataProfiles', sortByProp('name')),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeNoChangeDisabled }) => includeNoChangeDisabled,
     (state, { includeMixed }) => includeMixed,

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -4,13 +4,13 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.qualityProfiles', sortByName),
+    createSortedSectionSelector('settings.qualityProfiles', sortByProp('name')),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeNoChangeDisabled }) => includeNoChangeDisabled,
     (state, { includeMixed }) => includeMixed,

frontend/src/Components/Menu/FilterMenuContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import FilterMenuItem from './FilterMenuItem';
 import MenuContent from './MenuContent';
@@ -47,7 +48,7 @@ class FilterMenuContent extends Component {
 
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort(sortByProp('label'))
             .map((filter) => {
               return (
                 <FilterMenuItem

frontend/src/Components/TagList.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Label from './Label';
 import styles from './TagList.css';
 
@@ -8,7 +9,7 @@ function TagList({ tags, tagList }) {
   const sortedTags = tags
     .map((tagId) => tagList.find((tag) => tag.id === tagId))
     .filter((tag) => !!tag)
-    .sort((a, b) => a.label.localeCompare(b.label));
+    .sort(sortByProp('label'));
 
   return (
     <div className={styles.tags}>

frontend/src/Settings/CustomFormats/CustomFormats/CustomFormatsConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { cloneCustomFormat, deleteCustomFormat, fetchCustomFormats } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import CustomFormats from './CustomFormats';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.customFormats', sortByName),
+    createSortedSectionSelector('settings.customFormats', sortByProp('name')),
     (customFormats) => customFormats
   );
 }

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteDownloadClient, fetchDownloadClients } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import DownloadClients from './DownloadClients';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.downloadClients', sortByName),
+    createSortedSectionSelector('settings.downloadClients', sortByProp('name')),
     createTagsSelector(),
     (downloadClients, tagList) => {
       return {

frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { deleteImportList, fetchImportLists, fetchRootFolders } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import ImportLists from './ImportLists';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.importLists', sortByName),
+    createSortedSectionSelector('settings.importLists', sortByProp('name')),
     (importLists) => importLists
   );
 }

frontend/src/Settings/Indexers/Indexers/IndexersConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { cloneIndexer, deleteIndexer, fetchIndexers } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Indexers from './Indexers';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.indexers', sortByName),
+    createSortedSectionSelector('settings.indexers', sortByProp('name')),
     createTagsSelector(),
     (indexers, tagList) => {
       return {

frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchMetadata } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Metadatas from './Metadatas';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.metadata', sortByName),
+    createSortedSectionSelector('settings.metadata', sortByProp('name')),
     (metadata) => metadata
   );
 }

frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js

@@ -5,12 +5,12 @@ import { createSelector } from 'reselect';
 import { deleteNotification, fetchNotifications } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Notifications from './Notifications';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.notifications', sortByName),
+    createSortedSectionSelector('settings.notifications', sortByProp('name')),
     createTagsSelector(),
     (notifications, tagList) => {
       return {

frontend/src/Settings/Profiles/Metadata/MetadataProfiles.js

@@ -5,7 +5,7 @@ import FieldSet from 'Components/FieldSet';
 import Icon from 'Components/Icon';
 import PageSectionContent from 'Components/Page/PageSectionContent';
 import { icons, metadataProfileNames } from 'Helpers/Props';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EditMetadataProfileModalConnector from './EditMetadataProfileModalConnector';
 import MetadataProfile from './MetadataProfile';
@@ -59,17 +59,20 @@ class MetadataProfiles extends Component {
         >
           <div className={styles.metadataProfiles}>
             {
-              items.filter((item) => item.name !== metadataProfileNames.NONE).sort(sortByName).map((item) => {
+              items
-                return (
+                .filter((item) => item.name !== metadataProfileNames.NONE)
-                  <MetadataProfile
+                .sort(sortByProp('name'))
-                    key={item.id}
+                .map((item) => {
-                    {...item}
+                  return (
-                    isDeleting={isDeleting}
+                    <MetadataProfile
-                    onConfirmDeleteMetadataProfile={onConfirmDeleteMetadataProfile}
+                      key={item.id}
-                    onCloneMetadataProfilePress={this.onCloneMetadataProfilePress}
+                      {...item}
-                  />
+                      isDeleting={isDeleting}
-                );
+                      onConfirmDeleteMetadataProfile={onConfirmDeleteMetadataProfile}
-              })
+                      onCloneMetadataProfilePress={this.onCloneMetadataProfilePress}
+                    />
+                  );
+                })
             }
 
             <Card

frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js

@@ -19,7 +19,8 @@ function calcOrder(profileFormatItems) {
     if (b.score !== a.score) {
       return b.score - a.score;
     }
-    return a.name > b.name ? 1 : -1;
+
+    return a.name.localeCompare(b.name, undefined, { numeric: true });
   }).map((x) => items[x.format]);
 }
 

frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js

@@ -4,12 +4,12 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { cloneQualityProfile, deleteQualityProfile, fetchQualityProfiles } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import QualityProfiles from './QualityProfiles';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.qualityProfiles', sortByName),
+    createSortedSectionSelector('settings.qualityProfiles', sortByProp('name')),
     (qualityProfiles) => qualityProfiles
   );
 }

frontend/src/Settings/Tags/AutoTagging/AutoTaggings.js

@@ -13,7 +13,7 @@ import {
 } from 'Store/Actions/settingsActions';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import AutoTagging from './AutoTagging';
 import EditAutoTaggingModal from './EditAutoTaggingModal';
@@ -27,7 +27,7 @@ export default function AutoTaggings() {
     isFetching,
     isPopulated
   } = useSelector(
-    createSortedSectionSelector('settings.autoTaggings', sortByName)
+    createSortedSectionSelector('settings.autoTaggings', sortByProp('name'))
   );
 
   const tagList = useSelector(createTagsSelector());

frontend/src/Store/Actions/artistIndexActions.js

@@ -1,6 +1,6 @@
 import { createAction } from 'redux-actions';
 import { filterBuilderTypes, filterBuilderValueTypes, filterTypePredicates, sortDirections } from 'Helpers/Props';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import { filterPredicates, filters, sortPredicates } from './artistActions';
 import createHandleActions from './Creators/createHandleActions';
@@ -334,7 +334,7 @@ export const defaultState = {
           return acc;
         }, []);
 
-        return tagList.sort(sortByName);
+        return tagList.sort(sortByProp('name'));
       }
     },
     {

frontend/src/Store/Selectors/createRootFoldersSelector.ts

@@ -1,11 +1,12 @@
 import { createSelector } from 'reselect';
 import { RootFolderAppState } from 'App/State/SettingsAppState';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import RootFolder from 'typings/RootFolder';
+import sortByProp from 'Utilities/Array/sortByProp';
 
 export default function createRootFoldersSelector() {
   return createSelector(
-    createSortedSectionSelector('settings.rootFolders', sortByName),
+    createSortedSectionSelector<RootFolder>('rootFolders', sortByProp('name')),
     (rootFolders: RootFolderAppState) => rootFolders
   );
 }

frontend/src/Store/Selectors/createSortedSectionSelector.ts

@@ -1,14 +1,18 @@
 import { createSelector } from 'reselect';
 import getSectionState from 'Utilities/State/getSectionState';
 
-function createSortedSectionSelector(section, comparer) {
+function createSortedSectionSelector<T>(
+  section: string,
+  comparer: (a: T, b: T) => number
+) {
   return createSelector(
     (state) => state,
     (state) => {
       const sectionState = getSectionState(state, section, true);
+
       return {
         ...sectionState,
-        items: [...sectionState.items].sort(comparer)
+        items: [...sectionState.items].sort(comparer),
       };
     }
   );

frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.tsx

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import { CommandBody } from 'Commands/Command';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import createMultiArtistsSelector from 'Store/Selectors/createMultiArtistsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import styles from './QueuedTaskRowNameCell.css';
 
@@ -39,9 +40,7 @@ export default function QueuedTaskRowNameCell(
   }
 
   const artists = useSelector(createMultiArtistsSelector(movieIds));
-  const sortedArtists = artists.sort((a, b) =>
+  const sortedArtists = artists.sort(sortByProp('sortName'));
-    a.sortName.localeCompare(b.sortName)
-  );
 
   return (
     <TableRowCell>

frontend/src/Utilities/Array/sortByName.js

@@ -1,5 +0,0 @@
-function sortByName(a, b) {
-  return a.name.localeCompare(b.name);
-}
-
-export default sortByName;

frontend/src/Utilities/Array/sortByProp.ts

@@ -0,0 +1,13 @@
+import { StringKey } from 'typings/Helpers/KeysMatching';
+
+export function sortByProp<
+  // eslint-disable-next-line no-use-before-define
+  T extends Record<K, string>,
+  K extends StringKey<T>
+>(sortKey: K) {
+  return (a: T, b: T) => {
+    return a[sortKey].localeCompare(b[sortKey], undefined, { numeric: true });
+  };
+}
+
+export default sortByProp;

frontend/src/typings/Helpers/KeysMatching.ts

@@ -0,0 +1,7 @@
+type KeysMatching<T, V> = {
+  [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];
+
+export type StringKey<T> = KeysMatching<T, string>;
+
+export default KeysMatching;

src/NzbDrone.Core/Localization/Core/en.json

@@ -89,6 +89,7 @@
   "AnalyticsEnabledHelpText": "Send anonymous usage and error information to {appName}'s servers. This includes information on your browser, which {appName} WebUI pages you use, error reporting as well as OS and runtime version. We will use this information to prioritize features and bug fixes.",
   "AnalyticsEnabledHelpTextWarning": "Requires restart to take effect",
   "AnchorTooltip": "This file is already in your library for a release you are currently importing",
+  "Any": "Any",
   "AnyReleaseOkHelpText": "{appName} will automatically switch to the release best matching downloaded tracks",
   "ApiKeyHelpTextWarning": "Requires restart to take effect",
   "ApiKeyValidationHealthCheckMessage": "Please update your API key to be at least {0} characters long. You can do this via settings or the config file",