Sort the application suggestion names in application filter form

web/src/components/application-detail-page/application-state-view/kubernetes-state-view/index.tsx

@@ -4,7 +4,7 @@ import dagre from "dagre";
 import { FC, useState } from "react";
 import { KubernetesResourceState } from "~/modules/applications-live-state";
 import { theme } from "~/theme";
-import { uniqueArray } from "~/utils/unique-array";
+import { sortedSet } from "~/utils/sorted-set";
 import { KubernetesResource } from "./kubernetes-resource";
 import { KubernetesResourceDetail } from "./kubernetes-resource-detail";
 import { ResourceFilterPopover } from "./resource-filter-popover";
@@ -95,7 +95,7 @@ export const KubernetesStateView: FC<KubernetesStateViewProps> = ({
     setSelectedResource,
   ] = useState<KubernetesResourceState.AsObject | null>(null);
 
-  const kinds: string[] = uniqueArray(resources.map((r) => r.kind));
+  const kinds: string[] = sortedSet(resources.map((r) => r.kind));
   const [filterState, setFilterState] = useState<Record<string, boolean>>(
     kinds.reduce<Record<string, boolean>>((prev, current) => {
       prev[current] = true;

web/src/components/applications-page/application-filter/application-autocomplete.tsx

@@ -3,7 +3,7 @@ import Autocomplete from "@material-ui/lab/Autocomplete";
 import { FC } from "react";
 import { useAppSelector } from "~/hooks/redux";
 import { selectAll as selectAllApplications } from "~/modules/applications";
-import { uniqueArray } from "~/utils/unique-array";
+import { sortedSet } from "~/utils/sorted-set";
 
 interface Props {
   value: string | null;
@@ -13,7 +13,7 @@ interface Props {
 export const ApplicationAutocomplete: FC<Props> = ({ value, onChange }) => {
   const applications = useAppSelector<string[]>(
     (state) =>
-      uniqueArray(
+      sortedSet(
         selectAllApplications(state.applications).map((app) => app.name)
       ),
     (left, right) => JSON.stringify(left) === JSON.stringify(right)

web/src/utils/sorted-set.test.ts

@@ -0,0 +1,7 @@
+import { sortedSet } from "./sorted-set";
+
+test("uniqueArray", () => {
+  expect(sortedSet([])).toEqual([]);
+  expect(sortedSet([1, 2, 3])).toEqual([1, 2, 3]);
+  expect(sortedSet([1, 2, 2, 3])).toEqual([1, 2, 3]);
+});

web/src/utils/sorted-set.ts

@@ -0,0 +1,2 @@
+export const sortedSet = <T>(arr: Array<T>): Array<T> =>
+  [...new Set(arr)].sort();