chore: sort cluster list in service

Author: arunjaindev

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx

@@ -285,3 +285,17 @@ export const DeleteCluster = ({ clusterList, reloadClusterList, handleClose }: E
         />
     )
 }
+
+export const ClusterEnvLoader = () => (
+    <>
+        {Array.from({ length: 3 }).map((_, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={idx} className="px-20 py-8 dc__grid environment-row dc__align-items-center">
+                {Array.from({ length: 5 }).map((_, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <span key={index} className="shimmer" />
+                ))}
+            </div>
+        ))}
+    </>
+)

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.tsx

@@ -66,7 +66,13 @@ import {
     EnvListSortableKeys,
 } from './cluster.type'
 import { parseClusterEnvSearchParams } from './cluster.util'
-import { AddEnvironment, ClusterListCellComponent, DeleteCluster, EditCluster } from './ClusterList.components'
+import {
+    AddEnvironment,
+    ClusterEnvLoader,
+    ClusterListCellComponent,
+    DeleteCluster,
+    EditCluster,
+} from './ClusterList.components'
 import { ALL_CLUSTER_VALUE } from './constants'
 import EnvironmentList from './EnvironmentList'
 
@@ -270,13 +276,7 @@ const ClusterList = () => {
 
     const renderList = () => {
         if (isClusterEnvListLoading) {
-            return Array.from({ length: 3 }).map(() => (
-                <div className="px-20 py-8 dc__grid cluster-row dc__align-items-center">
-                    {Array.from({ length: 5 }).map(() => (
-                        <span className="shimmer" />
-                    ))}
-                </div>
-            ))
+            return <ClusterEnvLoader />
         }
 
         if (clusterListError || envListError) {

src/Pages/GlobalConfigurations/ClustersAndEnvironments/EnvironmentList.tsx

@@ -35,6 +35,7 @@ import {
 } from './cluster.type'
 import { environmentNameComparator, getSelectParsedCategory } from './cluster.util'
 import { ClusterEnvironmentDrawer } from './ClusterEnvironmentDrawer'
+import { ClusterEnvLoader } from './ClusterList.components'
 import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from './constants'
 
 import './cluster.scss'
@@ -129,13 +130,7 @@ const ClustersEnvironmentsList = ({
 
     const renderNamespaceEnvList = () => {
         if (namespaceListLoading) {
-            return Array.from({ length: 3 }).map(() => (
-                <div className="px-20 py-8 dc__grid environment-row dc__align-items-center">
-                    {Array.from({ length: 5 }).map(() => (
-                        <span className="shimmer" />
-                    ))}
-                </div>
-            ))
+            return <ClusterEnvLoader />
         }
 
         if (namespaceListError) {
@@ -405,7 +400,6 @@ const EnvironmentList = ({
                 <SortableTableHeaderCell title="DESCRIPTION" isSortable={false} />
             </div>
             {clusterList
-                .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName))
                 .filter(({ clusterId }) => !filterClusterId || filterClusterId === String(clusterId))
                 .map(({ clusterId, clusterName, isProd, isVirtualCluster }) => (
                     <ClustersEnvironmentsList

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.scss

@@ -65,12 +65,6 @@
     }
 }
 
-.cluster-list-row {
-    display: grid;
-    grid-template-columns: 24px minmax(278px, 346px) 120px 130px 190px minmax(80px, 90px);
-    grid-column-gap: 16px;
-}
-
 .saved-cluster-list-row {
     display: grid;
     grid-template-columns: 300px 100px 1fr;

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.service.ts

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { get, getUrlWithSearchParams, post, put, trash } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    get,
+    getUrlWithSearchParams,
+    post,
+    put,
+    stringComparatorBySortOrder,
+    trash,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { Routes } from '@Config/constants'
 
@@ -46,23 +53,27 @@ export const getClusterList = async (clusterIds?: number[]): Promise<Cluster[]>
     const url = getUrlWithSearchParams(Routes.CLUSTER, { clusterId: clusterIds?.join() })
     const { result } = await get<ClusterDTO[]>(url)
 
-    // eslint-disable-next-line camelcase
-    return (result ?? []).map(({ id, server_url, cluster_name, prometheus_url, category, ...res }) => ({
-        ...res,
-        clusterId: id,
-        // eslint-disable-next-line camelcase
-        serverUrl: server_url,
-        // eslint-disable-next-line camelcase
-        clusterName: cluster_name,
-        // eslint-disable-next-line camelcase
-        prometheusUrl: prometheus_url,
-        category: category?.name
-            ? {
-                  label: category.name,
-                  value: category.id,
-              }
-            : null,
-    }))
+    return (
+        (result ?? [])
+            // eslint-disable-next-line camelcase
+            .map(({ id, server_url, cluster_name, prometheus_url, category, ...res }) => ({
+                ...res,
+                clusterId: id,
+                // eslint-disable-next-line camelcase
+                serverUrl: server_url,
+                // eslint-disable-next-line camelcase
+                clusterName: cluster_name,
+                // eslint-disable-next-line camelcase
+                prometheusUrl: prometheus_url,
+                category: category?.name
+                    ? {
+                          label: category.name,
+                          value: category.id,
+                      }
+                    : null,
+            }))
+            .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName))
+    )
 }
 
 export function getCluster(id: number) {