feat: sort bookingUserId options alphabetically on the /insights/routing page (#23791)

* feat: sort bookingUserId options alphabetically in insights routing faceted values - Add .sort((a, b) => a.label.localeCompare(b.label)) to bookingUserId options - Makes user dropdown more human-friendly with alphabetical ordering - Follows existing sorting pattern used in FilterSegmentSelect.tsx - Fix ESLint warning by replacing Table<any> with Table<unknown> Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * fix: use generic type parameter instead of unknown in Table type - Replace Table<unknown> with <TData>(_: Table<TData>) to fix CI type errors - Maintains type safety while avoiding ESLint any type warning - Allows hook to work with any table type through generic parameter Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2025-09-15 09:53:30 +01:00
1 parent 31270ca86b
commit da1863069d
@@ -60,52 +60,55 @@ export const useInsightsRoutingFacetedUniqueValues = ({
  );

  return useCallback(
-    (_: Table<any>, columnId: string) => (): Map<FacetedValue, number> => {
-      if (!headers) {
-        return new Map<FacetedValue, number>();
-      }
+    <TData>(_: Table<TData>, columnId: string) =>
+      (): Map<FacetedValue, number> => {
+        if (!headers) {
+          return new Map<FacetedValue, number>();
+        }

-      const fieldHeader = headers.find((h) => h.id === columnId);
-      if (fieldHeader?.options) {
-        return convertFacetedValuesToMap(
-          fieldHeader.options
-            .filter((option): option is { id: string; label: string } => option.id !== null)
-            .map((option) => ({
-              label: option.label,
-              value: option.id,
+        const fieldHeader = headers.find((h) => h.id === columnId);
+        if (fieldHeader?.options) {
+          return convertFacetedValuesToMap(
+            fieldHeader.options
+              .filter((option): option is { id: string; label: string } => option.id !== null)
+              .map((option) => ({
+                label: option.label,
+                value: option.id,
+              }))
+          );
+        } else if (columnId === "bookingStatusOrder") {
+          return convertFacetedValuesToMap(
+            Object.keys(statusOrder).map((status) => ({
+              value: statusOrder[status as BookingStatus],
+              label: bookingStatusToText(status as BookingStatus),
            }))
-        );
-      } else if (columnId === "bookingStatusOrder") {
-        return convertFacetedValuesToMap(
-          Object.keys(statusOrder).map((status) => ({
-            value: statusOrder[status as BookingStatus],
-            label: bookingStatusToText(status as BookingStatus),
-          }))
-        );
-      } else if (columnId === "formId") {
-        return convertFacetedValuesToMap(
-          forms?.map((form) => ({
-            label: form.name,
-            value: form.id,
-          })) ?? []
-        );
-      } else if (columnId === "bookingUserId") {
-        return convertFacetedValuesToMap(
-          users?.map((user) => ({
-            label: user.name ?? user.email,
-            value: user.id,
-          })) ?? []
-        );
-      } else if (columnId === "eventTypeId") {
-        return convertFacetedValuesToMap(
-          eventTypes?.map((eventType) => ({
-            value: eventType.id,
-            label: eventType.teamId ? `${eventType.title} (${eventType.team?.name})` : eventType.title,
-          })) ?? []
-        );
-      }
-      return new Map<FacetedValue, number>();
-    },
+          );
+        } else if (columnId === "formId") {
+          return convertFacetedValuesToMap(
+            forms?.map((form) => ({
+              label: form.name,
+              value: form.id,
+            })) ?? []
+          );
+        } else if (columnId === "bookingUserId") {
+          return convertFacetedValuesToMap(
+            users
+              ?.map((user) => ({
+                label: user.name ?? user.email,
+                value: user.id,
+              }))
+              .sort((a, b) => a.label.localeCompare(b.label)) ?? []
+          );
+        } else if (columnId === "eventTypeId") {
+          return convertFacetedValuesToMap(
+            eventTypes?.map((eventType) => ({
+              value: eventType.id,
+              label: eventType.teamId ? `${eventType.title} (${eventType.team?.name})` : eventType.title,
+            })) ?? []
+          );
+        }
+        return new Map<FacetedValue, number>();
+      },
    [headers, forms, users, eventTypes]
  );
 };