fix: add displayName on top of name rather than replace (#1055)

src/components/CheckEditor/CheckProbes/CheckProbes.tsx

@@ -1,30 +1,30 @@
 import React, { useMemo, useState } from 'react';
 import { Field, Stack } from '@grafana/ui';
 
-import { Probe } from 'types';
+import { ProbeWithMetadata } from 'types';
 
 import { PrivateProbesAlert } from './PrivateProbesAlert';
 import { PROBES_FILTER_ID, ProbesFilter } from './ProbesFilter';
 import { ProbesList } from './ProbesList';
 
 interface CheckProbesProps {
   probes: number[];
-  availableProbes: Probe[];
+  availableProbes: ProbeWithMetadata[];
   disabled?: boolean;
   onChange: (probes: number[]) => void;
   onBlur?: () => void;
   invalid?: boolean;
   error?: string;
 }
 export function CheckProbes({ probes, availableProbes, onChange, error }: CheckProbesProps) {
-  const [filteredProbes, setFilteredProbes] = useState<Probe[]>(availableProbes);
+  const [filteredProbes, setFilteredProbes] = useState<ProbeWithMetadata[]>(availableProbes);
 
   const publicProbes = useMemo(() => filteredProbes.filter((probe) => probe.public), [filteredProbes]);
   const privateProbes = useMemo(() => filteredProbes.filter((probe) => !probe.public), [filteredProbes]);
 
   const groupedByRegion = useMemo(
     () =>
-      publicProbes.reduce((acc: Record<string, Probe[]>, curr: Probe) => {
+      publicProbes.reduce((acc: Record<string, ProbeWithMetadata[]>, curr: ProbeWithMetadata) => {
         const region = curr.region;
         if (!acc[region]) {
           acc[region] = [];

src/components/CheckEditor/CheckProbes/ProbesFilter.tsx

@@ -1,11 +1,17 @@
 import React, { useState } from 'react';
 
-import { Probe } from 'types';
+import { ProbeWithMetadata } from 'types';
 import { SearchFilter } from 'components/SearchFilter';
 
 export const PROBES_FILTER_ID = 'check-probes-filter';
 
-export const ProbesFilter = ({ probes, onSearch }: { probes: Probe[]; onSearch: (probes: Probe[]) => void }) => {
+export const ProbesFilter = ({
+  probes,
+  onSearch,
+}: {
+  probes: ProbeWithMetadata[];
+  onSearch: (probes: ProbeWithMetadata[]) => void;
+}) => {
   const [showEmptyState, setShowEmptyState] = useState(false);
   const [filterText, setFilterText] = useState('');
 
@@ -15,11 +21,11 @@ export const ProbesFilter = ({ probes, onSearch }: { probes: Probe[]; onSearch:
       (probe) =>
         probe.region.toLowerCase().includes(searchValue) ||
         probe.name.toLowerCase().includes(searchValue) ||
-        probe.longRegion?.toLowerCase().includes(searchValue) ||
-        probe.city?.toLowerCase().includes(searchValue) ||
-        probe.provider?.toLowerCase().includes(searchValue) ||
-        probe.country?.toLowerCase().includes(searchValue) ||
-        probe.countryCode?.toLowerCase().includes(searchValue)
+        probe.displayName.toLowerCase().includes(searchValue) ||
+        probe.longRegion.toLowerCase().includes(searchValue) ||
+        probe.provider.toLowerCase().includes(searchValue) ||
+        probe.country.toLowerCase().includes(searchValue) ||
+        probe.countryCode.toLowerCase().includes(searchValue)
     );
 
     onSearch(filteredProbes);

src/components/CheckEditor/CheckProbes/ProbesList.tsx

@@ -3,7 +3,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Checkbox, Label, Stack, Text, TextLink, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
-import { Probe } from 'types';
+import { ProbeWithMetadata } from 'types';
 import { DeprecationNotice } from 'components/DeprecationNotice/DeprecationNotice';
 import { ProbeStatus } from 'components/ProbeCard/ProbeStatus';
 
@@ -14,7 +14,7 @@ export const ProbesList = ({
   onSelectionChange,
 }: {
   title: string;
-  probes: Probe[];
+  probes: ProbeWithMetadata[];
   selectedProbes: number[];
   onSelectionChange: (probes: number[]) => void;
 }) => {
@@ -29,7 +29,7 @@ export const ProbesList = ({
     onSelectionChange([...selected]);
   };
 
-  const handleToggleProbe = (probe: Probe) => {
+  const handleToggleProbe = (probe: ProbeWithMetadata) => {
     if (!probe.id) {
       return;
     }
@@ -73,7 +73,7 @@ export const ProbesList = ({
         </Label>
       </div>
       <div className={styles.probesList}>
-        {probes.map((probe: Probe) => (
+        {probes.map((probe: ProbeWithMetadata) => (
           <div key={probe.id} className={styles.item}>
             <Checkbox
               id={`probe-${probe.id}`}
@@ -83,7 +83,7 @@ export const ProbesList = ({
             <Label htmlFor={`probe-${probe.id}`}>
               <div className={styles.columnLabel}>
                 <ProbeStatus probe={probe} />{' '}
-                {`${probe.name}${probe.countryCode ? `, ${probe.countryCode}` : ''} ${
+                {`${probe.displayName}${probe.countryCode ? `, ${probe.countryCode}` : ''} ${
                   probe.provider ? `(${probe.provider})` : ''
                 }`}
                 {probe.deprecated && (

src/components/CheckEditor/ProbeOptions.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { Field } from '@grafana/ui';
 
-import { CheckFormValues, CheckType, Probe } from 'types';
+import { CheckFormValues, CheckType, ProbeWithMetadata } from 'types';
 import { useProbesWithMetadata } from 'data/useProbes';
 import { SliderInput } from 'components/SliderInput';
 
@@ -73,7 +73,7 @@ function getFrequencyBounds(checkType: CheckType) {
   };
 }
 
-function getAvailableProbes(probes: Probe[], checkType: CheckType) {
+function getAvailableProbes(probes: ProbeWithMetadata[], checkType: CheckType) {
   if (checkType === CheckType.Scripted) {
     return probes.filter((probe) => probe.capabilities.disableScriptedChecks === false);
   }

src/components/CheckEditor/ProbesMetadata.ts

@@ -1,4 +1,4 @@
-import { ProbeProvider } from 'types';
+import { ProbeMetadata, ProbeProvider } from 'types';
 
 const REGION_APAC = { code: 'APAC', long: 'Asia-Pacific' };
 const REGION_AMER = { code: 'AMER', long: 'The Americas' };
@@ -23,7 +23,7 @@ const COUNTRY_AE = { code: 'AE', long: 'United Arab Emirates' };
 const COUNTRY_ES = { code: 'ES', long: 'Spain' };
 const COUNTRY_ID = { code: 'ID', long: 'Indonesia' };
 
-export const PROBES_METADATA = [
+export const PROBES_METADATA: ProbeMetadata[] = [
   {
     name: 'Bangalore',
     region: REGION_APAC.code,

src/components/DeleteProbeButton/DeleteProbeButton.tsx

@@ -49,7 +49,7 @@ export function DeleteProbeButton({ probe, onDeleteSuccess: _onDeleteSuccess }:
       <>
         You do not have sufficient permissions
         <br />
-        to delete the probe <span className={styles.probeName}>&apos;{probe.name}&apos;</span>.
+        to delete the probe <span className={styles.probeName}>&apos;{probe.displayName}&apos;</span>.
       </>
     );
 

src/components/DeleteProbeButton/DeleteProbeButton.utils.ts

@@ -1,13 +1,13 @@
 import type { BackendError } from './DeleteProbeButton.types';
-import { Probe } from 'types';
+import { ProbeWithMetadata } from 'types';
 
-export function getPrettyError(error: Error | BackendError, probe: Probe) {
+export function getPrettyError(error: Error | BackendError, probe: ProbeWithMetadata) {
   if (!error) {
     return undefined;
   }
 
   if ('data' in error && 'err' in error.data && 'msg' in error.data && typeof error.data.msg === 'string') {
-    return { name: error.data.err, message: error.data.msg.replace(String(probe.id), `'${probe.name}'`) };
+    return { name: error.data.err, message: error.data.msg.replace(String(probe.id), `'${probe.displayName}'`) };
   }
 
   return { name: 'Unknown error', message: 'An unknown error occurred' };

src/components/ProbeCard/ProbeCard.test.tsx

@@ -18,9 +18,9 @@ it(`Displays the correct information`, async () => {
   const probe = probeToExtendedProbe(ONLINE_PROBE);
   render(<ProbeCard probe={probe} />);
 
-  await screen.findByText(probe.name);
+  await screen.findByText(probe.displayName);
 
-  expect(screen.getByText((content) => content.startsWith(probe.name))).toBeInTheDocument();
+  expect(screen.getByText((content) => content.startsWith(probe.displayName))).toBeInTheDocument();
   expect(screen.getByText(/Version:/)).toBeInTheDocument();
   expect(screen.getByText(probe.version, { exact: false })).toBeInTheDocument();
 
@@ -36,7 +36,7 @@ it(`Displays the correct information for an online probe`, async () => {
   const probe = probeToExtendedProbe(ONLINE_PROBE);
 
   render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name);
+  await screen.findByText(probe.displayName);
 
   // Check status circle
   const status = screen.getByTestId('probe-online-status');
@@ -47,15 +47,15 @@ it(`Displays the correct information for an online probe`, async () => {
   await userEvent.hover(status);
   const tooltip = await screen.findByTestId('probe-online-status-tooltip');
   expect(tooltip).toBeInTheDocument();
-  expect(tooltip).toHaveTextContent(`Probe ${probe.name} is online`);
+  expect(tooltip).toHaveTextContent(`Probe ${probe.displayName} is online`);
 });
 
 it(`Displays the correct information for an offline probe`, async () => {
   const { result } = renderHook<GrafanaTheme2, undefined>(useTheme2);
   const probe = probeToExtendedProbe(OFFLINE_PROBE);
 
   render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name);
+  await screen.findByText(probe.displayName);
 
   // Check status circle
   const status = screen.getByTestId('probe-online-status');
@@ -66,14 +66,14 @@ it(`Displays the correct information for an offline probe`, async () => {
   await userEvent.hover(status);
   const tooltip = await screen.findByTestId('probe-online-status-tooltip');
   expect(tooltip).toBeInTheDocument();
-  expect(tooltip).toHaveTextContent(`Probe ${probe.name} is offline`);
+  expect(tooltip).toHaveTextContent(`Probe ${probe.displayName} is offline`);
 });
 
 it(`Displays the correct information for a private probe`, async () => {
   const probe = probeToExtendedProbe(PRIVATE_PROBE);
 
   render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name, { exact: false });
+  await screen.findByText(probe.displayName, { exact: false });
 
   const button = screen.getByTestId('probe-card-action-button');
   expect(button).toBeInTheDocument();
@@ -85,7 +85,7 @@ it(`Displays the correct information for a private probe as a viewer`, async ()
   const probe = probeToExtendedProbe(PRIVATE_PROBE);
 
   render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name, { exact: false });
+  await screen.findByText(probe.displayName, { exact: false });
 
   const button = screen.getByTestId('probe-card-action-button');
   expect(button).toBeInTheDocument();
@@ -97,7 +97,7 @@ it(`Displays the correct information for a private probe as a RBAC viewer`, asyn
   const probe = probeToExtendedProbe(PRIVATE_PROBE);
 
   render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name, { exact: false });
+  await screen.findByText(probe.displayName, { exact: false });
 
   const button = screen.getByTestId('probe-card-action-button');
   expect(button).toBeInTheDocument();
@@ -108,7 +108,7 @@ it(`Displays the correct information for a public probe`, async () => {
   const probe = probeToExtendedProbe(PUBLIC_PROBE);
 
   render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name, { exact: false });
+  await screen.findByText(probe.displayName, { exact: false });
 
   const button = screen.getByTestId('probe-card-action-button');
   expect(button).toBeInTheDocument();
@@ -118,8 +118,8 @@ it(`Displays the correct information for a public probe`, async () => {
 it('handles public probe click', async () => {
   const probe = probeToExtendedProbe(PUBLIC_PROBE);
   const { user } = render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name);
-  await user.click(screen.getByText(probe.name));
+  await screen.findByText(probe.displayName);
+  await user.click(screen.getByText(probe.displayName));
 
   expect(screen.getByTestId(DataTestIds.TEST_ROUTER_INFO_PATHNAME)).toHaveTextContent(
     generateRoutePath(ROUTES.ViewProbe, { id: probe.id! })
@@ -129,8 +129,8 @@ it('handles public probe click', async () => {
 it('handles private probe click', async () => {
   const probe = probeToExtendedProbe(PRIVATE_PROBE);
   const { user } = render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name);
-  await user.click(screen.getByText(probe.name));
+  await screen.findByText(probe.displayName);
+  await user.click(screen.getByText(probe.displayName));
 
   expect(screen.getByTestId(DataTestIds.TEST_ROUTER_INFO_PATHNAME)).toHaveTextContent(
     generateRoutePath(ROUTES.EditProbe, { id: probe.id! })
@@ -146,7 +146,7 @@ it.each<[ExtendedProbe, string]>([
   async (probe: ExtendedProbe, expectedText: string) => {
     const { user } = render(<ProbeCard probe={probe} />);
 
-    await screen.findByText(probe.name);
+    await screen.findByText(probe.displayName);
 
     const usageLink = screen.getByTestId(DataTestIds.PROBE_USAGE_LINK);
     expect(usageLink).toBeInTheDocument();
@@ -163,7 +163,7 @@ it('Displays the correct information for a probe that is NOT in use', async () =
   const probe = probeToExtendedProbe(PUBLIC_PROBE);
 
   render(<ProbeCard probe={probe} />);
-  await screen.findByText(probe.name);
+  await screen.findByText(probe.displayName);
 
   const usageLink = screen.queryByTestId(DataTestIds.PROBE_USAGE_LINK);
   expect(usageLink).not.toBeInTheDocument();

src/components/ProbeCard/ProbeCard.tsx

@@ -27,7 +27,7 @@ export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
         <Stack alignItems="center" gap={0}>
           <ProbeStatus probe={probe} />
           <Link href={probeEditHref}>
-            <span>{probe.name}</span>
+            <span>{probe.displayName}</span>
             {probe.region && <span>&nbsp;{`(${probe.region})`}</span>}
           </Link>
           {probe.deprecated && (
@@ -80,7 +80,7 @@ export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
               fill="outline"
               variant="secondary"
               href={probeEditHref}
-              aria-label={`Edit probe ${probe.name}`}
+              aria-label={`Edit probe ${probe.displayName}`}
               tooltip="Edit probe"
             >
               Edit
@@ -94,7 +94,7 @@ export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
             variant="secondary"
             icon="eye"
             tooltip="View probe"
-            aria-label={`View probe ${probe.name}`}
+            aria-label={`View probe ${probe.displayName}`}
           >
             View
           </LinkButton>

src/components/ProbeCard/ProbeStatus.tsx

@@ -3,16 +3,16 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Tooltip, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
-import { Probe } from 'types';
+import { ProbeWithMetadata } from 'types';
 
-export function ProbeStatus({ probe }: { probe: Probe }) {
+export function ProbeStatus({ probe }: { probe: ProbeWithMetadata }) {
   const styles = useStyles2((theme) => getStyles(theme, probe));
 
   return (
     <Tooltip
       content={
         <div data-testid="probe-online-status-tooltip">
-          Probe {probe.name} is <span className={styles.statusText}>{probe.online ? 'online' : 'offline'}</span>
+          Probe {probe.displayName} is <span className={styles.statusText}>{probe.online ? 'online' : 'offline'}</span>
         </div>
       }
     >
@@ -21,7 +21,7 @@ export function ProbeStatus({ probe }: { probe: Probe }) {
   );
 }
 
-function getStyles(theme: GrafanaTheme2, probe: Probe) {
+function getStyles(theme: GrafanaTheme2, probe: ProbeWithMetadata) {
   return {
     container: css({
       display: 'inline-block',

src/data/useProbes.ts

@@ -3,15 +3,14 @@ import { type QueryKey, useMutation, UseMutationResult, useQuery, useSuspenseQue
 import { isFetchError } from '@grafana/runtime';
 
 import { type MutationProps } from 'data/types';
-import { ExtendedProbe, type Probe } from 'types';
+import { ExtendedProbe, type Probe, ProbeMetadata, ProbeWithMetadata } from 'types';
 import { FaroEvent } from 'faro';
 import { camelCaseToSentence } from 'utils';
 import { SMDataSource } from 'datasource/DataSource';
 import type {
   AddProbeResult,
   DeleteProbeError,
   DeleteProbeResult,
-  ListProbeResult,
   ResetProbeTokenResult,
   UpdateProbeResult,
 } from 'datasource/responses.types';
@@ -41,21 +40,23 @@ export function useProbes() {
 export function useProbesWithMetadata() {
   const { data: probes = [], isLoading } = useProbes();
 
-  const probesWithMetadata = useMemo<ListProbeResult>(() => {
+  const probesWithMetadata = useMemo<ProbeWithMetadata[]>(() => {
     if (isLoading) {
       return [];
     }
 
     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 metadata = PROBES_METADATA.find(
+          (info) => info.name === probe.name && info.region === probe.region
+        ) as ProbeMetadata;
         const displayName = camelCaseToSentence(probe.name);
 
         return {
           ...probe,
           ...metadata,
-          name: displayName,
+          displayName,
         };
       });
   }, [probes, isLoading]);