From 9200f1822943eb441dd1868b27620aeb888bd541 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Tue, 6 Aug 2024 10:52:23 +0100
Subject: [PATCH] display the custom labels by in case-insensitive alphabetical
 ascending order (#21041)

relates to #20194

The UI displayed the custom labels by creation date, but we now display
custom labels in the UI by name in case-insensitive alphabetical
ascending order.


![image](https://github.com/user-attachments/assets/43ce642b-8335-4542-ac38-4b5a4ab569e4)

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality
---
 changes/20194-sort-label-names-in-ui          |  1 +
 .../AddProfileModal/AddProfileModal.tsx       |  7 ++----
 .../components/LabelFilterSelect/helpers.ts   |  4 +++-
 frontend/services/entities/labels.ts          | 22 +++++++++++++++++++
 4 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 changes/20194-sort-label-names-in-ui

diff --git a/changes/20194-sort-label-names-in-ui b/changes/20194-sort-label-names-in-ui
new file mode 100644
index 0000000000..2f27f77f0b
--- /dev/null
+++ b/changes/20194-sort-label-names-in-ui
@@ -0,0 +1 @@
+- display the label names case-insensitive alphabetical order in the fleet UI
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
index 88b7e96ed9..12191a9641 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
@@ -7,7 +7,7 @@ import { NotificationContext } from "context/notification";
 import { IApiError } from "interfaces/errors";
 import { ILabelSummary } from "interfaces/label";
 
-import labelsAPI from "services/entities/labels";
+import labelsAPI, { getCustomLabels } from "services/entities/labels";
 import mdmAPI from "services/entities/mdm";
 
 // @ts-ignore
@@ -250,10 +250,7 @@ const AddProfileModal = ({
     isError: isErrorLabels,
   } = useQuery<ILabelSummary[], Error>(
     ["custom_labels"],
-    () =>
-      labelsAPI
-        .summary()
-        .then((res) => res.labels.filter((l) => l.label_type !== "builtin")),
+    () => labelsAPI.summary().then((res) => getCustomLabels(res.labels)),
 
     {
       enabled: isPremiumTier,
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
index b6aad87e53..746a2b6ddb 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
@@ -1,4 +1,6 @@
 import { ILabel } from "interfaces/label";
+import { getCustomLabels } from "services/entities/labels";
+
 import { EMPTY_OPTION, FILTERED_LINUX, NO_LABELS_OPTION } from "./constants";
 
 export interface IEmptyOption {
@@ -27,7 +29,7 @@ const createOptionGroup = (
 /** Will create the custom label group options and handles when no labels have been created yet or
  * will filter by the desired search query */
 const createCustomLabelOptions = (labels: ILabel[], query: string) => {
-  const customLabels = labels.filter((label) => label.label_type === "regular");
+  const customLabels = getCustomLabels(labels);
 
   let customLabelGroupOptions: ILabel[] | IEmptyOption[];
   if (customLabels.length === 0) {
diff --git a/frontend/services/entities/labels.ts b/frontend/services/entities/labels.ts
index 7a58cb9a04..5ce8d04938 100644
--- a/frontend/services/entities/labels.ts
+++ b/frontend/services/entities/labels.ts
@@ -49,6 +49,28 @@ const generateCreateLabelBody = (
 
 const generateUpdateLabelBody = generateCreateLabelBody;
 
+/** gets the custom label and returns them in case-insensitive alphabetical
+ * ascending order by label name. (e.g. [A, B, C, a, b, c] => [A, a, B, b, C, c])
+ */
+export const getCustomLabels = <T extends { label_type: string; name: string }>(
+  labels: T[]
+) => {
+  if (labels.length === 0) {
+    return [];
+  }
+
+  return labels
+    .filter((label) => label.label_type === "regular")
+    .sort((a, b) => {
+      // Found this technique here
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+      // This is a case insensitive sort
+      return a.name.localeCompare(b.name, undefined, {
+        sensitivity: "base",
+      });
+    });
+};
+
 export default {
   create: (
     formData: IDynamicLabelFormData | IManualLabelFormData