feat: sort probes alphabetically (#1050)

* feat: sort probes aplhabetically

* feat: alphabetize regions in checkprobes

src/components/CheckEditor/CheckProbes/CheckProbes.tsx

@@ -50,15 +50,17 @@ export function CheckProbes({ probes, availableProbes, onChange, error }: CheckP
           <ProbesFilter probes={availableProbes} onSearch={setFilteredProbes} />
           <Stack wrap="wrap">
             <Stack wrap="nowrap">
-              {Object.entries(groupedByRegion).map(([region, allProbes]) => (
-                <ProbesList
-                  key={region}
-                  title={region}
-                  probes={allProbes}
-                  selectedProbes={probes}
-                  onSelectionChange={onChange}
-                />
-              ))}
+              {Object.entries(groupedByRegion)
+                .sort(([regionA], [regionB]) => regionA.localeCompare(regionB))
+                .map(([region, allProbes]) => (
+                  <ProbesList
+                    key={region}
+                    title={region}
+                    probes={allProbes}
+                    selectedProbes={probes}
+                    onSelectionChange={onChange}
+                  />
+                ))}
             </Stack>
 
             {privateProbes.length > 0 && (

src/data/useProbes.ts

@@ -5,6 +5,7 @@ import { isFetchError } from '@grafana/runtime';
 import { type MutationProps } from 'data/types';
 import { ExtendedProbe, type Probe } from 'types';
 import { FaroEvent } from 'faro';
+import { camelCaseToSentence } from 'utils';
 import { SMDataSource } from 'datasource/DataSource';
 import type {
   AddProbeResult,
@@ -44,20 +45,26 @@ export function useProbesWithMetadata() {
     if (isLoading) {
       return [];
     }
-
-    return probes.map((probe) => {
-      const metadata = PROBES_METADATA.find(
-        (info) => info.name === probe.name && info.region === probe.region
-      );
-      return metadata ? { ...probe, ...metadata } : probe;
-    });
+
+    return probes
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .map((probe) => {
+        const metadata = PROBES_METADATA.find((info) => info.name === probe.name && info.region === probe.region);
+        const displayName = camelCaseToSentence(probe.name);
+
+        return {
+          ...probe,
+          ...metadata,
+          name: displayName,
+        };
+      });
   }, [probes, isLoading]);
 
   return { data: probesWithMetadata, isLoading };
 }
 
 export function useExtendedProbes(): [ExtendedProbe[], boolean] {
-  const { data: probes = [], isLoading: isLoadingProbes } = useProbes();
+  const { data: probes = [], isLoading: isLoadingProbes } = useProbesWithMetadata();
   const { data: checks = [], isLoading: isLoadingChecks } = useChecks();
   const isLoading = isLoadingProbes || isLoadingChecks;
 

src/page/Probes/Probes.tsx

@@ -58,7 +58,6 @@ const ProbesContent = () => {
   };
 
   const { publicProbes, privateProbes } = extendedProbes
-    .sort((probeA, probeB) => probeA.name.localeCompare(probeB.name))
     .filter((probe) => Boolean(probe.id))
     .reduce((acc, probe) => {
       if (!probe.id) {

src/utils.test.ts

@@ -1,4 +1,4 @@
-import { getRandomProbes } from 'utils';
+import { camelCaseToSentence, getRandomProbes } from 'utils';
 
 it('gets random probes', async () => {
   const probes = [11, 23, 5, 5212, 43, 3, 4, 6];
@@ -13,3 +13,13 @@ it('gets random probes', async () => {
   const random2 = getRandomProbes(probes, 2);
   expect(random2.length).toBe(2);
 });
+
+describe(`camelCaseToSentence`, () => {
+  it(`converts camelCase to sentence`, () => {
+    expect(camelCaseToSentence('camelCaseToSentence')).toBe('Camel Case To Sentence');
+  });
+
+  it(`doesn't convert values which are all uppercase`, () => {
+    expect(camelCaseToSentence('ALLUPPERCASE')).toBe('ALLUPPERCASE');
+  });
+});

src/utils.ts

@@ -426,3 +426,11 @@ export function createNavModel(base: NavModelItem, items: NavModelItem[]): NavMo
     };
   }, base);
 }
+
+export function camelCaseToSentence(value: string) {
+  if (value.toUpperCase() === value || value.toLowerCase() === value) {
+    return value;
+  }
+
+  return value.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase());
+}