use safe method for sorting arrays

src/components/app-list/index.tsx

@@ -16,7 +16,7 @@ import {
   toggleFavouriteApp,
 } from '../../state/applications-favourite';
 import { RequestState } from '../../state/state-utils/request-states';
-import { sortCompareString } from '../../utils/sort-utils';
+import { dataSorter, sortCompareString } from '../../utils/sort-utils';
 
 import './style.css';
 
@@ -115,22 +115,21 @@ export const AppList: FunctionComponent<AppListProps> = ({
     pollApplicationsByNames(pollAppsInterval, true, favourites, includeFields)
   );
 
-  const apps = allApps.data
-    .sort((x, y) => sortCompareString(x.name, y.name))
-    .map((app) => ({
-      app: app,
-      isFavourite: favourites.includes(app.name),
-    }));
-  const favouriteApps = allFavouriteApps.data
-    .filter(({ name }) => favourites.includes(name))
-    .map((app) => ({ app: app, isFavourite: true }));
-  favouriteApps.push(
-    ...apps.filter(
-      (x) =>
-        x.isFavourite && !favouriteApps.some((y) => y.app.name === x.app.name)
-    )
+  const apps = dataSorter(allApps.data, [
+    (x, y) => sortCompareString(x.name, y.name),
+  ]).map((app) => ({ app, isFavourite: favourites.includes(app.name) }));
+  const favouriteApps = dataSorter(
+    [
+      ...(allFavouriteApps.data ?? [])
+        .filter(({ name }) => favourites.includes(name))
+        .map((app) => ({ app, isFavourite: true })),
+      ...apps,
+    ].filter(
+      ({ app, isFavourite }, i, arr) =>
+        isFavourite && arr.findIndex((x) => x.app.name === app.name) === i // remove non-favourites and duplicates
+    ),
+    [(x, y) => sortCompareString(x.app.name, y.app.name)]
   );
-  favouriteApps.sort((x, y) => sortCompareString(x.app.name, y.app.name));
 
   const favStatus: AsyncState<null> = {
     data: null,

src/components/component/scheduled-job/scheduled-batch-list.tsx

@@ -42,16 +42,13 @@ import { refreshEnvironmentScheduledBatches } from '../../../state/subscriptions
 import { promiseHandler } from '../../../utils/promise-handler';
 import { getScheduledBatchUrl } from '../../../utils/routing';
 import {
+  dataSorter,
   sortCompareDate,
   sortCompareString,
   sortDirection,
 } from '../../../utils/sort-utils';
 import { smallScheduledBatchName } from '../../../utils/string';
-import {
-  TableSortIcon,
-  getNewSortDir,
-  tableDataSorter,
-} from '../../../utils/table-sort-utils';
+import { TableSortIcon, getNewSortDir } from '../../../utils/table-sort-utils';
 
 import './style.css';
 
@@ -111,7 +108,7 @@ export const ScheduledBatchList: FunctionComponent<ScheduledBatchListProps> = ({
 
   useEffect(() => {
     setSortedData(
-      tableDataSorter(scheduledBatchList, [
+      dataSorter(scheduledBatchList, [
         (x, y) =>
           sortCompareDate(x.created, y.created, dateSort, () => !!dateSort),
         (x, y) =>

src/components/component/scheduled-job/scheduled-job-list.tsx

@@ -46,16 +46,13 @@ import { refreshEnvironmentScheduledJobs } from '../../../state/subscriptions/ac
 import { promiseHandler } from '../../../utils/promise-handler';
 import { getScheduledJobUrl } from '../../../utils/routing';
 import {
+  dataSorter,
   sortCompareDate,
   sortCompareString,
   sortDirection,
 } from '../../../utils/sort-utils';
 import { smallScheduledJobName } from '../../../utils/string';
-import {
-  TableSortIcon,
-  getNewSortDir,
-  tableDataSorter,
-} from '../../../utils/table-sort-utils';
+import { TableSortIcon, getNewSortDir } from '../../../utils/table-sort-utils';
 
 import '../style.css';
 
@@ -140,7 +137,7 @@ export const ScheduledJobList: FunctionComponent<ScheduledJobListProps> = ({
 
   useEffect(() => {
     setSortedData(
-      tableDataSorter(scheduledJobList, [
+      dataSorter(scheduledJobList, [
         (x, y) =>
           sortCompareDate(x.created, y.created, dateSort, () => !!dateSort),
         (x, y) =>

src/components/component/secrets/secret-tables.tsx

@@ -25,8 +25,11 @@ import {
 } from '../../../models/radix-api/secrets/secret';
 import { SecretStatus } from '../../../models/radix-api/secrets/secret-status';
 import { SecretType } from '../../../models/radix-api/secrets/secret-type';
-import { sortCompareString, sortDirection } from '../../../utils/sort-utils';
-import { tableDataSorter } from '../../../utils/table-sort-utils';
+import {
+  dataSorter,
+  sortCompareString,
+  sortDirection,
+} from '../../../utils/sort-utils';
 
 import './style.css';
 
@@ -101,7 +104,7 @@ function useGetSortedSecrets(
 
   useEffect(() => {
     setSortedData(
-      tableDataSorter(secrets, [
+      dataSorter(secrets, [
         (x, y) =>
           sortCompareString(
             getDisplayName(x),

src/components/data-chart/index.tsx

@@ -17,7 +17,11 @@ import { createDynatraceApiUrl } from '../../api/api-config';
 import { getJson, RadixRequestInit } from '../../api/api-helpers';
 import { configVariables } from '../../utils/config';
 import { differenceInWords, formatDateMonthTime } from '../../utils/datetime';
-import { sortCompareNumber, sortCompareString } from '../../utils/sort-utils';
+import {
+  dataSorter,
+  sortCompareNumber,
+  sortCompareString,
+} from '../../utils/sort-utils';
 
 import './style.css';
 
@@ -322,10 +326,10 @@ export const AvailabilityCharts: FunctionComponent = () => {
     ) / 100;
 
   const timelineData = generateTimelineData(
-    [...statusCodes].sort(
+    dataSorter(statusCodes, [
       ({ statusCode: s1, timestamp: t1 }, { statusCode: s2, timestamp: t2 }) =>
-        sortCompareNumber(t1, t2) || sortCompareString(s1, s2)
-    )
+        sortCompareNumber(t1, t2) || sortCompareString(s1, s2),
+    ])
   );
 
   // adjust charts to match start and end

src/components/deployments-list/index.tsx

@@ -11,15 +11,12 @@ import {
   DeploymentSummaryModelValidationMap,
 } from '../../models/radix-api/deployments/deployment-summary';
 import {
+  dataSorter,
   sortCompareDate,
   sortCompareString,
   sortDirection,
 } from '../../utils/sort-utils';
-import {
-  TableSortIcon,
-  getNewSortDir,
-  tableDataSorter,
-} from '../../utils/table-sort-utils';
+import { TableSortIcon, getNewSortDir } from '../../utils/table-sort-utils';
 
 import './style.css';
 
@@ -46,7 +43,7 @@ export const DeploymentsList: FunctionComponent<DeploymentsListProps> = ({
 
   useEffect(() => {
     setSortedData(
-      tableDataSorter(deployments?.slice(0, limit || deployments.length), [
+      dataSorter(deployments?.slice(0, limit || deployments.length), [
         (x, y) => sortCompareDate(x.activeFrom, y.activeFrom, dateSort),
         (x, y) =>
           sortCompareString(

src/components/jobs-list/index.tsx

@@ -9,15 +9,12 @@ import {
   JobSummaryModelValidationMap,
 } from '../../models/radix-api/jobs/job-summary';
 import {
+  dataSorter,
   sortCompareDate,
   sortCompareString,
   sortDirection,
 } from '../../utils/sort-utils';
-import {
-  getNewSortDir,
-  tableDataSorter,
-  TableSortIcon,
-} from '../../utils/table-sort-utils';
+import { TableSortIcon, getNewSortDir } from '../../utils/table-sort-utils';
 
 import './style.css';
 
@@ -39,7 +36,7 @@ export const JobsList: FunctionComponent<JobsListProps> = ({
   const [pipelineSort, setPipelineSort] = useState<sortDirection>();
   useEffect(() => {
     setSortedData(
-      tableDataSorter(jobs?.slice(0, limit || jobs.length), [
+      dataSorter(jobs?.slice(0, limit || jobs.length), [
         (x, y) => sortCompareDate(x.created, y.created, dateSort),
         (x, y) =>
           sortCompareString(

src/components/page-active-component/component-replica-log-accordion.tsx

@@ -29,17 +29,17 @@ import {
 } from '../../store/log-api';
 import { FetchQueryResult } from '../../store/types';
 import { getFetchErrorData } from '../../store/utils';
-import { sortCompareDate, sortDirection } from '../../utils/sort-utils';
+import {
+  dataSorter,
+  sortCompareDate,
+  sortDirection,
+} from '../../utils/sort-utils';
 import {
   copyToTextFile,
   smallGithubCommitHash,
   smallReplicaName,
 } from '../../utils/string';
-import {
-  TableSortIcon,
-  getNewSortDir,
-  tableDataSorter,
-} from '../../utils/table-sort-utils';
+import { TableSortIcon, getNewSortDir } from '../../utils/table-sort-utils';
 
 interface ComponentNameProps {
   appName: string;
@@ -100,7 +100,7 @@ export const ComponentReplicaLogAccordion: FunctionComponent<
   useEffect(() => {
     if (inventory.isSuccess) {
       setSortedData(
-        tableDataSorter(inventory.data?.replicas, [
+        dataSorter(inventory.data?.replicas, [
           (x, y) =>
             sortCompareDate(x.creationTimestamp, y.creationTimestamp, dateSort),
         ])
@@ -151,25 +151,24 @@ export const ComponentReplicaLogAccordion: FunctionComponent<
                         />
 
                         {!!expandedRows[replica.name] &&
-                          replica.containers
-                            ?.sort((a, b) =>
+                          dataSorter(replica.containers, [
+                            (a, b) =>
                               sortCompareDate(
                                 a.creationTimestamp,
                                 b.creationTimestamp,
                                 'descending'
-                              )
-                            )
-                            .map((container, i, { length }) => (
-                              <ReplicaContainerTableRow
-                                key={container.id}
-                                className={clsx({
-                                  'border-bottom-transparent': length - 1 > i,
-                                })}
-                                container={container}
-                                replicaName={replica.name}
-                                {...{ appName, envName, componentName }}
-                              />
-                            ))}
+                              ),
+                          ]).map((container, i, { length }) => (
+                            <ReplicaContainerTableRow
+                              key={container.id}
+                              className={clsx({
+                                'border-bottom-transparent': length - 1 > i,
+                              })}
+                              container={container}
+                              replicaName={replica.name}
+                              {...{ appName, envName, componentName }}
+                            />
+                          ))}
                       </Fragment>
                     ))}
                   </Table.Body>

src/components/page-configuration/build-secrets-accordion.tsx

@@ -10,7 +10,7 @@ import { ScrimPopup } from '../scrim-popup';
 import { SecretForm } from '../secret-form';
 import { BuildSecretStatusBadge } from '../status-badges/build-secret-status-badge';
 import { BuildSecretModel } from '../../models/radix-api/buildsecrets/build-secret';
-import { sortCompareString } from '../../utils/sort-utils';
+import { dataSorter, sortCompareString } from '../../utils/sort-utils';
 
 import './style.css';
 
@@ -88,22 +88,22 @@ export const BuildSecretsAccordion: FunctionComponent<{ appName: string }> = ({
           <AsyncResource asyncState={buildSecretsState}>
             {buildSecretsState.data?.length > 0 ? (
               <List className="o-indent-list">
-                {buildSecretsState.data
-                  .sort((a, b) => sortCompareString(a.name, b.name))
-                  .map((buildSecret) => (
-                    <List.Item key={buildSecret.name}>
-                      <div className="grid grid--gap-large grid--auto-columns">
-                        <SecretLink
-                          title={buildSecret.name}
-                          appName={appName}
-                          buildSecret={buildSecret}
-                          pollSecret={pollBuildSecrets}
-                        />
+                {dataSorter(buildSecretsState.data, [
+                  (a, b) => sortCompareString(a.name, b.name),
+                ]).map((buildSecret) => (
+                  <List.Item key={buildSecret.name}>
+                    <div className="grid grid--gap-large grid--auto-columns">
+                      <SecretLink
+                        title={buildSecret.name}
+                        appName={appName}
+                        buildSecret={buildSecret}
+                        pollSecret={pollBuildSecrets}
+                      />
 
-                        <BuildSecretStatusBadge status={buildSecret.status} />
-                      </div>
-                    </List.Item>
-                  ))}
+                      <BuildSecretStatusBadge status={buildSecret.status} />
+                    </div>
+                  </List.Item>
+                ))}
               </List>
             ) : (
               <Typography>This app has no build secrets</Typography>

src/components/page-configuration/image-hubs-accordion.tsx

@@ -10,7 +10,7 @@ import { ScrimPopup } from '../scrim-popup';
 import { SecretForm } from '../secret-form';
 import { ImageHubSecretStatusBadge } from '../status-badges/image-hub-secret-status-badge';
 import { ImageHubSecretModel } from '../../models/radix-api/privateimagehubs/image-hub-secret';
-import { sortCompareString } from '../../utils/sort-utils';
+import { dataSorter, sortCompareString } from '../../utils/sort-utils';
 
 import './style.css';
 
@@ -98,23 +98,23 @@ export const ImageHubsAccordion: FunctionComponent<{ appName: string }> = ({
           <AsyncResource asyncState={imageHubState}>
             {imageHubState.data?.length > 0 ? (
               <List className="o-indent-list">
-                {imageHubState.data
-                  .sort((a, b) => sortCompareString(a.server, b.server))
-                  .map((imageHub) => (
-                    <List.Item key={imageHub.server}>
-                      <div className="grid grid--gap-large grid--auto-columns">
-                        <SecretLink
-                          title={imageHub.server}
-                          scrimTitle={`${imageHub.server}: password`}
-                          appName={appName}
-                          imageHub={imageHub}
-                          pollSecret={pollImageHubs}
-                        />
+                {dataSorter(imageHubState.data, [
+                  (a, b) => sortCompareString(a.server, b.server),
+                ]).map((imageHub) => (
+                  <List.Item key={imageHub.server}>
+                    <div className="grid grid--gap-large grid--auto-columns">
+                      <SecretLink
+                        title={imageHub.server}
+                        scrimTitle={`${imageHub.server}: password`}
+                        appName={appName}
+                        imageHub={imageHub}
+                        pollSecret={pollImageHubs}
+                      />
 
-                        <ImageHubSecretStatusBadge status={imageHub.status} />
-                      </div>
-                    </List.Item>
-                  ))}
+                      <ImageHubSecretStatusBadge status={imageHub.status} />
+                    </div>
+                  </List.Item>
+                ))}
               </List>
             ) : (
               <Typography>This app has no private image hubs</Typography>

src/components/page-configuration/overview.tsx

@@ -16,7 +16,7 @@ import { adGroupModel } from '../graph/adGroupModel';
 import { getGroup } from '../graph/graphService';
 import { AsyncState } from '../../effects/effect-types';
 import { RequestState } from '../../state/state-utils/request-states';
-import { sortCompareString } from '../../utils/sort-utils';
+import { dataSorter, sortCompareString } from '../../utils/sort-utils';
 
 export interface OverviewProps {
   adGroups?: Array<string>;
@@ -52,9 +52,9 @@ export const Overview: FunctionComponent<OverviewProps> = ({
           .then(() => {
             if (mountedRef.current) {
               setResult({
-                data: data.sort((x, y) =>
-                  sortCompareString(x.displayName, y.displayName)
-                ),
+                data: dataSorter(data, [
+                  (x, y) => sortCompareString(x.displayName, y.displayName),
+                ]),
                 status: RequestState.SUCCESS,
               });
             }