added Disable .sort for .toSorted lint rule

frontend/.eslintrc

@@ -199,6 +199,10 @@
         "object": "Promise",
         "property": "allSettled",
         "message": "Avoid using Promise.allSettled, use allSettledPromises utility function instead."
+      },
+      {
+        "property": "sort",
+        "message": "Avoid using .sort, use .toSorted instead."
       }
     ],
     "import/newline-after-import": "error",

frontend/babel.config.js

@@ -4,8 +4,10 @@ module.exports = {
       '@babel/preset-env',
       {
         targets: {
-          chrome: 100,
+          chrome: 110,
         },
+        useBuiltIns: 'usage',
+        corejs: '3',
       },
     ],
     '@babel/preset-react',

frontend/package.json

@@ -119,6 +119,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^4.2.2",
+    "core-js": "^3.37.1",
     "cypress": "^13.6.0",
     "cypress-axe": "^1.5.0",
     "dotenv": "^8.2.0",

frontend/src/__tests__/unit/jest.setup.ts

@@ -1,5 +1,6 @@
 import { TextEncoder } from 'util';
 import { JestAssertionError } from 'expect';
+import 'core-js/actual/array/to-sorted';
 import {
   BooleanValues,
   RenderHookResultExt,

frontend/src/api/prometheus/distributedWorkloads.ts

@@ -81,7 +81,7 @@ export const getTopResourceConsumingWorkloads = (
         usage: getWorkloadCurrentUsage(workload)[usageType],
       }))
       .filter(({ usage }) => usage !== undefined)
-      .sort((a, b) => (b.usage || 0) - (a.usage || 0));
+      .toSorted((a, b) => (b.usage || 0) - (a.usage || 0));
 
     const topWorkloads =
       workloadsSortedByUsage.length === 6

frontend/src/app/AppLauncher.tsx

@@ -71,7 +71,7 @@ const AppLauncher: React.FC = () => {
         (link) =>
           link.spec.location === 'ApplicationMenu' && link.metadata?.name !== odhConsoleLinkName,
       )
-      .sort((a, b) => a.spec.text.localeCompare(b.spec.text));
+      .toSorted((a, b) => a.spec.text.localeCompare(b.spec.text));
 
     const getODHApplications = (): Section[] => {
       const osConsoleAction = getOpenShiftConsoleAction(serverURL);
@@ -110,9 +110,7 @@ const AppLauncher: React.FC = () => {
       return acc;
     }, getODHApplications());
 
-    sections.sort((a, b) => sectionSortValue(a) - sectionSortValue(b));
-
-    return sections;
+    return sections.toSorted((a, b) => sectionSortValue(a) - sectionSortValue(b));
   }, [clusterBranding, clusterID, consoleLinks, disableClusterManager, serverURL]);
 
   const onToggle = () => {

frontend/src/app/AppNotificationDrawer.tsx

@@ -25,7 +25,7 @@ interface AppNotificationDrawerProps {
 
 const AppNotificationDrawer: React.FC<AppNotificationDrawerProps> = ({ onClose }) => {
   const stateNotifications: AppNotification[] = useAppSelector((state) => state.notifications);
-  const notifications = [...stateNotifications].sort(
+  const notifications = stateNotifications.toSorted(
     (a, b) => b.timestamp.getTime() - a.timestamp.getTime(),
   );
   const dispatch = useAppDispatch();

frontend/src/components/SimpleDropdownSelect.tsx

@@ -59,7 +59,7 @@ const SimpleDropdownSelect: React.FC<SimpleDropdownProps> = ({
     >
       <DropdownList>
         {[...options]
-          .sort((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1))
+          .toSorted((a, b) => (a.isPlaceholder === b.isPlaceholder ? 0 : a.isPlaceholder ? -1 : 1))
           .map(({ key, dropdownLabel, label, description, isPlaceholder }) => (
             <DropdownItem
               data-testid={`dropdown-item ${key}`}

frontend/src/components/table/useTableColumnSort.ts

@@ -89,7 +89,7 @@ const useTableColumnSort = <T>(
         return data;
       }
 
-      return [...data].sort((a, b) => {
+      return data.toSorted((a, b) => {
         const columnField =
           activeSortIndex < columns.length
             ? columns[activeSortIndex]

frontend/src/concepts/pipelines/content/compareRuns/metricsSection/scalar/utils.ts

@@ -85,7 +85,9 @@ export const generateTableStructure = (scalarMetricsArtifacts: RunArtifact[]): S
   ];
 
   // Prepare data rows and sort them
-  const sortedDataList = Object.entries(dataMap).sort((a, b) => b[1].dataCount - a[1].dataCount);
+  const sortedDataList = Object.entries(dataMap).toSorted(
+    (a, b) => b[1].dataCount - a[1].dataCount,
+  );
 
   return {
     columns,

frontend/src/concepts/pipelines/topology/parseUtils.ts

@@ -147,7 +147,7 @@ export const lowestProgress = (details: TaskDetailKF[]): PipelineTaskRunStatus['
     }
   };
 
-  return details.sort(
+  return details.toSorted(
     ({ state: stateA }, { state: stateB }) => statusWeight(stateB) - statusWeight(stateA),
   )[0].state;
 };

frontend/src/concepts/projects/ProjectsContext.tsx

@@ -131,10 +131,10 @@ const ProjectsContextProvider: React.FC<ProjectsProviderProps> = ({ children })
 
   const contextValue = React.useMemo(
     () => ({
-      projects: projects.sort(projectSorter),
-      dataScienceProjects: dataScienceProjects.sort(projectSorter),
-      modelServingProjects: modelServingProjects.sort(projectSorter),
-      nonActiveProjects: nonActiveProjects.sort(projectSorter),
+      projects: projects.toSorted(projectSorter),
+      dataScienceProjects: dataScienceProjects.toSorted(projectSorter),
+      modelServingProjects: modelServingProjects.toSorted(projectSorter),
+      nonActiveProjects: nonActiveProjects.toSorted(projectSorter),
       preferredProject,
       updatePreferredProject,
       loaded,

frontend/src/pages/enabledApplications/EnabledApplications.tsx

@@ -50,7 +50,7 @@ const EnabledApplications: React.FC = () => {
     () =>
       _.cloneDeep(components)
         .filter((component) => !component.spec.hidden)
-        .sort((a, b) => a.spec.displayName.localeCompare(b.spec.displayName)),
+        .toSorted((a, b) => a.spec.displayName.localeCompare(b.spec.displayName)),
     [components],
   );
 

frontend/src/pages/exploreApplication/ExploreApplications.tsx

@@ -121,7 +121,7 @@ const ExploreApplications: React.FC = () => {
     () =>
       _.cloneDeep(components)
         .filter((component) => !component.spec.hidden)
-        .sort((a, b) => a.spec.displayName.localeCompare(b.spec.displayName)),
+        .toSorted((a, b) => a.spec.displayName.localeCompare(b.spec.displayName)),
     [components],
   );
 

frontend/src/pages/learningCenter/ApplicationFilters.tsx

@@ -64,7 +64,7 @@ const ApplicationFilters: React.FC<ApplicationFiltersProps> = ({ docApps, catego
       showAll={showAll}
     >
       {Object.keys(applications)
-        .sort((a, b) => a.localeCompare(b))
+        .toSorted((a, b) => a.localeCompare(b))
         .map((application) => (
           <FilterSidePanelCategoryItem
             data-id={application}

frontend/src/pages/learningCenter/CategoryFilters.tsx

@@ -37,7 +37,7 @@ const CategoryFilters: React.FC<CategoryFiltersProps> = ({ docApps, favorites })
         }
         return acc;
       }, initCategories)
-      .sort((a, b) => a.localeCompare(b));
+      .toSorted((a, b) => a.localeCompare(b));
     setCategories([ALL_ITEMS, ...updatedCategories]);
   }, [docApps, favorites]);
 

frontend/src/pages/learningCenter/LearningCenter.tsx

@@ -55,7 +55,7 @@ export const LearningCenter: React.FC = () => {
   React.useEffect(() => {
     const filtered = docFilterer(docs);
     setFilteredDocApps(
-      filtered.sort((a, b) => {
+      filtered.toSorted((a, b) => {
         const aFav = favoriteResources.includes(a.metadata.name);
         const bFav = favoriteResources.includes(b.metadata.name);
         if (aFav && !bFav) {

frontend/src/pages/learningCenter/ProviderTypeFilters.tsx

@@ -69,7 +69,7 @@ const ProviderTypeFilters: React.FC<ProviderTypeFiltersProps> = ({ docApps, cate
       showAll={showAll}
     >
       {Object.keys(providerTypes)
-        .sort((a, b) => {
+        .toSorted((a, b) => {
           if (a.toLowerCase().includes(`${ODH_PRODUCT_NAME}`)) {
             return -1;
           }

frontend/src/pages/modelServing/customServingRuntimes/utils.ts

@@ -17,7 +17,7 @@ export const isTemplateOOTB = (template: TemplateKind): boolean =>
   template.metadata.labels?.['opendatahub.io/ootb'] === 'true';
 
 export const getSortedTemplates = (templates: TemplateKind[], order: string[]): TemplateKind[] =>
-  [...templates].sort(
+  templates.toSorted(
     (a, b) =>
       order.indexOf(getServingRuntimeNameFromTemplate(a)) -
       order.indexOf(getServingRuntimeNameFromTemplate(b)),

frontend/src/pages/modelServing/utils.ts

@@ -293,8 +293,8 @@ export const isModelServerEditInfoChanged = (
         !_.isEqual(
           getServingRuntimeTokens(editInfo.secrets)
             .map((token) => token.name)
-            .sort(),
-          createData.tokens.map((token) => token.name).sort(),
+            .toSorted(),
+          createData.tokens.map((token) => token.name).toSorted(),
         ))
     : true;
 

frontend/src/pages/notebookController/screens/server/AcceleratorProfileSelectField.tsx

@@ -98,7 +98,7 @@ const AcceleratorProfileSelectField: React.FC<AcceleratorProfileSelectFieldProps
   };
 
   const options: SimpleDropdownOption[] = enabledAcceleratorProfiles
-    .sort((a, b) => {
+    .toSorted((a, b) => {
       const aSupported = isAcceleratorProfileSupported(a);
       const bSupported = isAcceleratorProfileSupported(b);
       if (aSupported && !bSupported) {

frontend/src/pages/notebookController/screens/server/ImageVersions.tsx

@@ -37,7 +37,7 @@ const ImageVersions: React.FC<ImageVersionsProps> = ({ image, tags, selectedTag,
       isExpanded={isExpanded}
       className="odh-notebook-controller__notebook-image-tags"
     >
-      {[...tags].sort(compareTagVersions).map((tag: ImageTagInfo) => {
+      {tags.toSorted(compareTagVersions).map((tag: ImageTagInfo) => {
         const disabled = !isImageTagBuildValid(buildStatuses, image, tag);
         return (
           <Radio

frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx

@@ -291,7 +291,7 @@ const SpawnerPage: React.FC = () => {
               <Grid sm={12} md={12} lg={12} xl={6} xl2={6} hasGutter>
                 {[...images]
                   .filter((image) => !image.error)
-                  .sort(checkOrder)
+                  .toSorted(checkOrder)
                   .map((image) => (
                     <GridItem key={image.name}>
                       <ImageSelector

frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunParamsSection.tsx

@@ -134,7 +134,7 @@ export const CompareRunParamsSection: React.FunctionComponent = () => {
         <InnerScrollContainer>
           <Table
             loading={!loaded}
-            data={Object.entries(runParamsMap).sort()}
+            data={Object.entries(runParamsMap).toSorted()}
             columns={hasParameters ? runNameColumns : []}
             hasNestedHeader
             emptyTableView={

frontend/src/pages/projects/notebook/utils.ts

@@ -72,7 +72,7 @@ const filterEvents = (
 ): [filterEvents: EventKind[], thisInstanceEvents: EventKind[], gracePeriod: boolean] => {
   const thisInstanceEvents = allEvents
     .filter((event) => new Date(getEventTimestamp(event)) >= lastActivity)
-    .sort((a, b) => getEventTimestamp(a).localeCompare(getEventTimestamp(b)));
+    .toSorted((a, b) => getEventTimestamp(a).localeCompare(getEventTimestamp(b)));
   if (thisInstanceEvents.length === 0) {
     // Filtered out all of the events, exit early
     return [[], [], false];

frontend/src/pages/projects/screens/detail/overview/trainModels/NotebooksCardItems.tsx

@@ -35,7 +35,7 @@ const NotebooksCardItems: React.FC<NotebooksCardItemsProps> = ({
     return [];
   }
 
-  const listItems = notebooks.sort(notebookSorter).slice(0, 5);
+  const listItems = notebooks.toSorted(notebookSorter).slice(0, 5);
 
   return (
     <Flex direction={{ default: 'column' }} gap={{ default: 'gapSm' }}>

frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx

@@ -26,7 +26,7 @@ const ImageStreamSelector: React.FC<ImageStreamSelectorProps> = ({
   buildStatuses,
   compatibleAcceleratorIdentifier,
 }) => {
-  const options = [...imageStreams].sort(compareImageStreamOrder).map((imageStream) => {
+  const options = imageStreams.toSorted(compareImageStreamOrder).map((imageStream) => {
     const description = getRelatedVersionDescription(imageStream);
     const displayName = getImageStreamDisplayName(imageStream);
 

frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx

@@ -44,7 +44,7 @@ const ImageVersionSelector: React.FC<ImageVersionSelectorProps> = ({
   }
 
   const selectOptionObjects = [...imageVersions]
-    .sort(compareImageVersionOrder)
+    .toSorted(compareImageVersionOrder)
     .map((imageVersion) => getImageVersionSelectOptionObject(imageStream, imageVersion));
 
   const options = selectOptionObjects.map((optionObject) => {

frontend/src/pages/projects/screens/spawner/spawnerUtils.ts

@@ -248,7 +248,7 @@ export const getDefaultVersionForImageStream = (
     return undefined;
   }
 
-  const sortedVersions = [...availableVersions].sort(compareTagVersions);
+  const sortedVersions = availableVersions.toSorted(compareTagVersions);
 
   // Return the most recent version
   return sortedVersions[0];

frontend/src/pages/projects/screens/spawner/useBuildStatuses.ts

@@ -26,7 +26,7 @@ const useBuildStatuses = (namespace?: string): BuildStatus[] => {
               imageStreamVersion: buildConfig.spec.output.to.name,
             };
           }
-          const mostRecent = builds.sort(compareBuilds).pop() as BuildKind;
+          const mostRecent = builds.toSorted(compareBuilds).pop() as BuildKind;
           return {
             name: buildNotebookName,
             status: mostRecent.status.phase,

frontend/src/utilities/__tests__/imageUtils.spec.ts

@@ -31,7 +31,7 @@ describe('compareTagVersions', () => {
         { name: 'v3', recommended: false },
       ] as ImageTagInfo[],
     };
-    expect(recemendedTagVersion.tag.sort(compareTagVersions)).toEqual([
+    expect(recemendedTagVersion.tag.toSorted(compareTagVersions)).toEqual([
       { name: 'v2', recommended: true },
       { name: 'v3', recommended: false },
       { name: 'v1', recommended: false },

frontend/src/utilities/imageUtils.ts

@@ -91,7 +91,7 @@ export const getDefaultTag = (
   }
 
   // Return the most recent version
-  return [...tags].sort(compareTagVersions)[0];
+  return tags.toSorted(compareTagVersions)[0];
 };
 
 export const getTagForImage = (

frontend/src/utilities/notebookControllerUtils.ts

@@ -245,7 +245,7 @@ const filterEvents = (
 ): [filterEvents: K8sEvent[], thisInstanceEvents: K8sEvent[], gracePeroid: boolean] => {
   const thisInstanceEvents = allEvents
     .filter((event) => new Date(getEventTimestamp(event)) >= lastActivity)
-    .sort((a, b) => getEventTimestamp(a).localeCompare(getEventTimestamp(b)));
+    .toSorted((a, b) => getEventTimestamp(a).localeCompare(getEventTimestamp(b)));
   if (thisInstanceEvents.length === 0) {
     // Filtered out all of the events, exit early
     return [[], [], false];

frontend/src/utilities/useWatchBuildStatus.tsx

@@ -28,8 +28,7 @@ export const useWatchBuildStatus = (): BuildStatus[] => {
     const watchBuildStatuses = () => {
       fetchBuildStatuses()
         .then((buildStatuses: BuildStatus[]) => {
-          buildStatuses.sort((a, b) => a.name.localeCompare(b.name));
-          setStatuses(buildStatuses);
+          setStatuses(buildStatuses.toSorted((a, b) => a.name.localeCompare(b.name)));
         })
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         .catch(() => {});

frontend/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "public",
     "module": "esnext",
     "target": "es5",
-    "lib": ["es6", "dom"],
+    "lib": ["es6", "dom", "ES2023.Array"],
     "sourceMap": true,
     "jsx": "react",
     "moduleResolution": "node",
@@ -25,10 +25,5 @@
     "skipLibCheck": true
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js"],
-  "exclude": [
-    "node_modules",
-    "public",
-    "public-cypress",
-    "src/__tests__/cypress"
-  ]
+  "exclude": ["node_modules", "public", "public-cypress", "src/__tests__/cypress"]
 }