From 442954c4b6db50904a2a4917f65981e6bc422502 Mon Sep 17 00:00:00 2001
From: Evangelos Skopelitis <eskopelitis@microsoft.com>
Date: Fri, 13 Dec 2024 14:45:45 -0500
Subject: [PATCH] frontend: k8s: Sort namespaces in UI

This change alphabetically sorts namespaces in the UI, addressing the
case where namespace lists from k3d/k3s clusters are not sorted by
default.

Fixes: #2656

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
---
 .../components/common/NamespacesAutocomplete.tsx   |  6 +++++-
 .../components/common/Resource/ResourceTable.tsx   |  7 ++++++-
 .../__snapshots__/List.Items.stories.storyshot     | 14 +++++++-------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/common/NamespacesAutocomplete.tsx b/frontend/src/components/common/NamespacesAutocomplete.tsx
index 97ff32e8c0..10c4b0c39d 100644
--- a/frontend/src/components/common/NamespacesAutocomplete.tsx
+++ b/frontend/src/components/common/NamespacesAutocomplete.tsx
@@ -157,7 +157,11 @@ function NamespacesFromClusterAutocomplete(
 ) {
   const [namespacesList] = Namespace.useList();
   const namespaceNames = useMemo(
-    () => namespacesList?.map(namespace => namespace.metadata.name) ?? [],
+    () =>
+      namespacesList
+        ?.map(namespace => namespace.metadata.name)
+        .slice()
+        .sort((a, b) => a.localeCompare(b)) ?? [],
     [namespacesList]
   );
 
diff --git a/frontend/src/components/common/Resource/ResourceTable.tsx b/frontend/src/components/common/Resource/ResourceTable.tsx
index 59f3e85bbb..6c20473151 100644
--- a/frontend/src/components/common/Resource/ResourceTable.tsx
+++ b/frontend/src/components/common/Resource/ResourceTable.tsx
@@ -147,8 +147,13 @@ function TableFromResourceClass<KubeClass extends KubeObjectClass>(
   const { resourceClass, id, ...otherProps } = props;
   const { items, error, clusterErrors } = resourceClass.useList({ namespace: useNamespaces() });
 
+  const sortedItems = useMemo(() => {
+    if (!items) return items;
+    return items.slice().sort((a, b) => a.metadata.name.localeCompare(b.metadata.name));
+  }, [items]);
+
   // throttle the update of the table to once per second
-  const throttledItems = useThrottle(items, 1000);
+  const throttledItems = useThrottle(sortedItems, 1000);
   const dispatchHeadlampEvent = useEventCallback(HeadlampEventType.LIST_VIEW);
 
   useEffect(() => {
diff --git a/frontend/src/components/ingress/__snapshots__/List.Items.stories.storyshot b/frontend/src/components/ingress/__snapshots__/List.Items.stories.storyshot
index 77153112a4..d489110a63 100644
--- a/frontend/src/components/ingress/__snapshots__/List.Items.stories.storyshot
+++ b/frontend/src/components/ingress/__snapshots__/List.Items.stories.storyshot
@@ -709,7 +709,7 @@
                   class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
                   href="/"
                 >
-                  tls-example-ingress
+                  resource-example-ingress
                 </a>
               </td>
               <td
@@ -740,12 +740,11 @@
                 class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1e2xkc-MuiTableCell-root"
               >
                 <span
-                  aria-label="/ 🞂 service1:80
-/second 🞂 service2:someport"
+                  aria-label="/ 🞂 Service:service1"
                   class=""
                   data-mui-internal-clone-element="true"
                 >
-                  / 🞂 service1:80, /second 🞂 service2:someport
+                  / 🞂 Service:service1
                 </span>
               </td>
               <td
@@ -827,7 +826,7 @@
                   class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
                   href="/"
                 >
-                  resource-example-ingress
+                  tls-example-ingress
                 </a>
               </td>
               <td
@@ -858,11 +857,12 @@
                 class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-1e2xkc-MuiTableCell-root"
               >
                 <span
-                  aria-label="/ 🞂 Service:service1"
+                  aria-label="/ 🞂 service1:80
+/second 🞂 service2:someport"
                   class=""
                   data-mui-internal-clone-element="true"
                 >
-                  / 🞂 Service:service1
+                  / 🞂 service1:80, /second 🞂 service2:someport
                 </span>
               </td>
               <td