fix(frontend): sort namespaces by name for the namespace selector (kubeflow#913)

Signed-off-by: Christian Vogt <[email protected]>

Author: christianvogt

clients/ui/frontend/src/shared/context/NamespaceSelectorContext.tsx

@@ -44,7 +44,11 @@ declare global {
 const EnabledNamespaceSelectorContextProvider: React.FC<NamespaceSelectorContextProviderProps> = ({
   children,
 }) => {
-  const [namespaces, isLoaded, error] = useNamespaces();
+  const [unsortedNamespaces, isLoaded, error] = useNamespaces();
+  const namespaces = React.useMemo(
+    () => unsortedNamespaces.toSorted((a, b) => a.name.localeCompare(b.name)),
+    [unsortedNamespaces],
+  );
   const [preferredNamespace, setPreferredNamespace] =
     React.useState<NamespaceSelectorContextType['preferredNamespace']>(undefined);
   const [initializationError, setInitializationError] = React.useState<Error>();

clients/ui/frontend/src/shared/context/__tests__/NamespaceSelectorContext.test.tsx

@@ -12,7 +12,7 @@ import {
 jest.mock('~/shared/hooks/useNamespaces');
 jest.mock('~/shared/utilities/const');
 
-const mockNamespaces = [{ name: 'namespace-1' }, { name: 'namespace-2' }, { name: 'namespace-3' }];
+const mockNamespaces = [{ name: 'namespace-2' }, { name: 'namespace-3' }, { name: 'namespace-1' }];
 
 describe('NamespaceSelectorContext', () => {
   const TestConsumer = () => {