Skip to content

Commit b8264af

Browse files
ckbedwellckbedwell
authored
fix: add displayName on top of name rather than replace (#1055)
1 parent 0253f91 commit b8264af

26 files changed

+152
-93
lines changed

‎src/components/CheckEditor/CheckProbes/CheckProbes.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
import React, { useMemo, useState } from 'react';
22
import { Field, Stack } from '@grafana/ui';
33

4-
import { Probe } from 'types';
4+
import { ProbeWithMetadata } from 'types';
55

66
import { PrivateProbesAlert } from './PrivateProbesAlert';
77
import { PROBES_FILTER_ID, ProbesFilter } from './ProbesFilter';
88
import { ProbesList } from './ProbesList';
99

1010
interface CheckProbesProps {
1111
probes: number[];
12-
availableProbes: Probe[];
12+
availableProbes: ProbeWithMetadata[];
1313
disabled?: boolean;
1414
onChange: (probes: number[]) => void;
1515
onBlur?: () => void;
1616
invalid?: boolean;
1717
error?: string;
1818
}
1919
export function CheckProbes({ probes, availableProbes, onChange, error }: CheckProbesProps) {
20-
const [filteredProbes, setFilteredProbes] = useState<Probe[]>(availableProbes);
20+
const [filteredProbes, setFilteredProbes] = useState<ProbeWithMetadata[]>(availableProbes);
2121

2222
const publicProbes = useMemo(() => filteredProbes.filter((probe) => probe.public), [filteredProbes]);
2323
const privateProbes = useMemo(() => filteredProbes.filter((probe) => !probe.public), [filteredProbes]);
2424

2525
const groupedByRegion = useMemo(
2626
() =>
27-
publicProbes.reduce((acc: Record<string, Probe[]>, curr: Probe) => {
27+
publicProbes.reduce((acc: Record<string, ProbeWithMetadata[]>, curr: ProbeWithMetadata) => {
2828
const region = curr.region;
2929
if (!acc[region]) {
3030
acc[region] = [];

‎src/components/CheckEditor/CheckProbes/ProbesFilter.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import React, { useState } from 'react';
22

3-
import { Probe } from 'types';
3+
import { ProbeWithMetadata } from 'types';
44
import { SearchFilter } from 'components/SearchFilter';
55

66
export const PROBES_FILTER_ID = 'check-probes-filter';
77

8-
export const ProbesFilter = ({ probes, onSearch }: { probes: Probe[]; onSearch: (probes: Probe[]) => void }) => {
8+
export const ProbesFilter = ({
9+
probes,
10+
onSearch,
11+
}: {
12+
probes: ProbeWithMetadata[];
13+
onSearch: (probes: ProbeWithMetadata[]) => void;
14+
}) => {
915
const [showEmptyState, setShowEmptyState] = useState(false);
1016
const [filterText, setFilterText] = useState('');
1117

@@ -15,11 +21,11 @@ export const ProbesFilter = ({ probes, onSearch }: { probes: Probe[]; onSearch:
1521
(probe) =>
1622
probe.region.toLowerCase().includes(searchValue) ||
1723
probe.name.toLowerCase().includes(searchValue) ||
18-
probe.longRegion?.toLowerCase().includes(searchValue) ||
19-
probe.city?.toLowerCase().includes(searchValue) ||
20-
probe.provider?.toLowerCase().includes(searchValue) ||
21-
probe.country?.toLowerCase().includes(searchValue) ||
22-
probe.countryCode?.toLowerCase().includes(searchValue)
24+
probe.displayName.toLowerCase().includes(searchValue) ||
25+
probe.longRegion.toLowerCase().includes(searchValue) ||
26+
probe.provider.toLowerCase().includes(searchValue) ||
27+
probe.country.toLowerCase().includes(searchValue) ||
28+
probe.countryCode.toLowerCase().includes(searchValue)
2329
);
2430

2531
onSearch(filteredProbes);

‎src/components/CheckEditor/CheckProbes/ProbesList.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { GrafanaTheme2 } from '@grafana/data';
33
import { Checkbox, Label, Stack, Text, TextLink, useStyles2 } from '@grafana/ui';
44
import { css } from '@emotion/css';
55

6-
import { Probe } from 'types';
6+
import { ProbeWithMetadata } from 'types';
77
import { DeprecationNotice } from 'components/DeprecationNotice/DeprecationNotice';
88
import { ProbeStatus } from 'components/ProbeCard/ProbeStatus';
99

@@ -14,7 +14,7 @@ export const ProbesList = ({
1414
onSelectionChange,
1515
}: {
1616
title: string;
17-
probes: Probe[];
17+
probes: ProbeWithMetadata[];
1818
selectedProbes: number[];
1919
onSelectionChange: (probes: number[]) => void;
2020
}) => {
@@ -29,7 +29,7 @@ export const ProbesList = ({
2929
onSelectionChange([...selected]);
3030
};
3131

32-
const handleToggleProbe = (probe: Probe) => {
32+
const handleToggleProbe = (probe: ProbeWithMetadata) => {
3333
if (!probe.id) {
3434
return;
3535
}
@@ -73,7 +73,7 @@ export const ProbesList = ({
7373
</Label>
7474
</div>
7575
<div className={styles.probesList}>
76-
{probes.map((probe: Probe) => (
76+
{probes.map((probe: ProbeWithMetadata) => (
7777
<div key={probe.id} className={styles.item}>
7878
<Checkbox
7979
id={`probe-${probe.id}`}
@@ -83,7 +83,7 @@ export const ProbesList = ({
8383
<Label htmlFor={`probe-${probe.id}`}>
8484
<div className={styles.columnLabel}>
8585
<ProbeStatus probe={probe} />{' '}
86-
{`${probe.name}${probe.countryCode ? `, ${probe.countryCode}` : ''} ${
86+
{`${probe.displayName}${probe.countryCode ? `, ${probe.countryCode}` : ''} ${
8787
probe.provider ? `(${probe.provider})` : ''
8888
}`}
8989
{probe.deprecated && (

‎src/components/CheckEditor/ProbeOptions.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { Controller, useFormContext } from 'react-hook-form';
33
import { Field } from '@grafana/ui';
44

5-
import { CheckFormValues, CheckType, Probe } from 'types';
5+
import { CheckFormValues, CheckType, ProbeWithMetadata } from 'types';
66
import { useProbesWithMetadata } from 'data/useProbes';
77
import { SliderInput } from 'components/SliderInput';
88

@@ -73,7 +73,7 @@ function getFrequencyBounds(checkType: CheckType) {
7373
};
7474
}
7575

76-
function getAvailableProbes(probes: Probe[], checkType: CheckType) {
76+
function getAvailableProbes(probes: ProbeWithMetadata[], checkType: CheckType) {
7777
if (checkType === CheckType.Scripted) {
7878
return probes.filter((probe) => probe.capabilities.disableScriptedChecks === false);
7979
}

‎src/components/CheckEditor/ProbesMetadata.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ProbeProvider } from 'types';
1+
import { ProbeMetadata, ProbeProvider } from 'types';
22

33
const REGION_APAC = { code: 'APAC', long: 'Asia-Pacific' };
44
const REGION_AMER = { code: 'AMER', long: 'The Americas' };
@@ -23,7 +23,7 @@ const COUNTRY_AE = { code: 'AE', long: 'United Arab Emirates' };
2323
const COUNTRY_ES = { code: 'ES', long: 'Spain' };
2424
const COUNTRY_ID = { code: 'ID', long: 'Indonesia' };
2525

26-
export const PROBES_METADATA = [
26+
export const PROBES_METADATA: ProbeMetadata[] = [
2727
{
2828
name: 'Bangalore',
2929
region: REGION_APAC.code,

‎src/components/DeleteProbeButton/DeleteProbeButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function DeleteProbeButton({ probe, onDeleteSuccess: _onDeleteSuccess }:
4949
<>
5050
You do not have sufficient permissions
5151
<br />
52-
to delete the probe <span className={styles.probeName}>&apos;{probe.name}&apos;</span>.
52+
to delete the probe <span className={styles.probeName}>&apos;{probe.displayName}&apos;</span>.
5353
</>
5454
);
5555

‎src/components/DeleteProbeButton/DeleteProbeButton.utils.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import type { BackendError } from './DeleteProbeButton.types';
2-
import { Probe } from 'types';
2+
import { ProbeWithMetadata } from 'types';
33

4-
export function getPrettyError(error: Error | BackendError, probe: Probe) {
4+
export function getPrettyError(error: Error | BackendError, probe: ProbeWithMetadata) {
55
if (!error) {
66
return undefined;
77
}
88

99
if ('data' in error && 'err' in error.data && 'msg' in error.data && typeof error.data.msg === 'string') {
10-
return { name: error.data.err, message: error.data.msg.replace(String(probe.id), `'${probe.name}'`) };
10+
return { name: error.data.err, message: error.data.msg.replace(String(probe.id), `'${probe.displayName}'`) };
1111
}
1212

1313
return { name: 'Unknown error', message: 'An unknown error occurred' };

‎src/components/ProbeCard/ProbeCard.test.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ it(`Displays the correct information`, async () => {
1818
const probe = probeToExtendedProbe(ONLINE_PROBE);
1919
render(<ProbeCard probe={probe} />);
2020

21-
await screen.findByText(probe.name);
21+
await screen.findByText(probe.displayName);
2222

23-
expect(screen.getByText((content) => content.startsWith(probe.name))).toBeInTheDocument();
23+
expect(screen.getByText((content) => content.startsWith(probe.displayName))).toBeInTheDocument();
2424
expect(screen.getByText(/Version:/)).toBeInTheDocument();
2525
expect(screen.getByText(probe.version, { exact: false })).toBeInTheDocument();
2626

@@ -36,7 +36,7 @@ it(`Displays the correct information for an online probe`, async () => {
3636
const probe = probeToExtendedProbe(ONLINE_PROBE);
3737

3838
render(<ProbeCard probe={probe} />);
39-
await screen.findByText(probe.name);
39+
await screen.findByText(probe.displayName);
4040

4141
// Check status circle
4242
const status = screen.getByTestId('probe-online-status');
@@ -47,15 +47,15 @@ it(`Displays the correct information for an online probe`, async () => {
4747
await userEvent.hover(status);
4848
const tooltip = await screen.findByTestId('probe-online-status-tooltip');
4949
expect(tooltip).toBeInTheDocument();
50-
expect(tooltip).toHaveTextContent(`Probe ${probe.name} is online`);
50+
expect(tooltip).toHaveTextContent(`Probe ${probe.displayName} is online`);
5151
});
5252

5353
it(`Displays the correct information for an offline probe`, async () => {
5454
const { result } = renderHook<GrafanaTheme2, undefined>(useTheme2);
5555
const probe = probeToExtendedProbe(OFFLINE_PROBE);
5656

5757
render(<ProbeCard probe={probe} />);
58-
await screen.findByText(probe.name);
58+
await screen.findByText(probe.displayName);
5959

6060
// Check status circle
6161
const status = screen.getByTestId('probe-online-status');
@@ -66,14 +66,14 @@ it(`Displays the correct information for an offline probe`, async () => {
6666
await userEvent.hover(status);
6767
const tooltip = await screen.findByTestId('probe-online-status-tooltip');
6868
expect(tooltip).toBeInTheDocument();
69-
expect(tooltip).toHaveTextContent(`Probe ${probe.name} is offline`);
69+
expect(tooltip).toHaveTextContent(`Probe ${probe.displayName} is offline`);
7070
});
7171

7272
it(`Displays the correct information for a private probe`, async () => {
7373
const probe = probeToExtendedProbe(PRIVATE_PROBE);
7474

7575
render(<ProbeCard probe={probe} />);
76-
await screen.findByText(probe.name, { exact: false });
76+
await screen.findByText(probe.displayName, { exact: false });
7777

7878
const button = screen.getByTestId('probe-card-action-button');
7979
expect(button).toBeInTheDocument();
@@ -85,7 +85,7 @@ it(`Displays the correct information for a private probe as a viewer`, async ()
8585
const probe = probeToExtendedProbe(PRIVATE_PROBE);
8686

8787
render(<ProbeCard probe={probe} />);
88-
await screen.findByText(probe.name, { exact: false });
88+
await screen.findByText(probe.displayName, { exact: false });
8989

9090
const button = screen.getByTestId('probe-card-action-button');
9191
expect(button).toBeInTheDocument();
@@ -97,7 +97,7 @@ it(`Displays the correct information for a private probe as a RBAC viewer`, asyn
9797
const probe = probeToExtendedProbe(PRIVATE_PROBE);
9898

9999
render(<ProbeCard probe={probe} />);
100-
await screen.findByText(probe.name, { exact: false });
100+
await screen.findByText(probe.displayName, { exact: false });
101101

102102
const button = screen.getByTestId('probe-card-action-button');
103103
expect(button).toBeInTheDocument();
@@ -108,7 +108,7 @@ it(`Displays the correct information for a public probe`, async () => {
108108
const probe = probeToExtendedProbe(PUBLIC_PROBE);
109109

110110
render(<ProbeCard probe={probe} />);
111-
await screen.findByText(probe.name, { exact: false });
111+
await screen.findByText(probe.displayName, { exact: false });
112112

113113
const button = screen.getByTestId('probe-card-action-button');
114114
expect(button).toBeInTheDocument();
@@ -118,8 +118,8 @@ it(`Displays the correct information for a public probe`, async () => {
118118
it('handles public probe click', async () => {
119119
const probe = probeToExtendedProbe(PUBLIC_PROBE);
120120
const { user } = render(<ProbeCard probe={probe} />);
121-
await screen.findByText(probe.name);
122-
await user.click(screen.getByText(probe.name));
121+
await screen.findByText(probe.displayName);
122+
await user.click(screen.getByText(probe.displayName));
123123

124124
expect(screen.getByTestId(DataTestIds.TEST_ROUTER_INFO_PATHNAME)).toHaveTextContent(
125125
generateRoutePath(ROUTES.ViewProbe, { id: probe.id! })
@@ -129,8 +129,8 @@ it('handles public probe click', async () => {
129129
it('handles private probe click', async () => {
130130
const probe = probeToExtendedProbe(PRIVATE_PROBE);
131131
const { user } = render(<ProbeCard probe={probe} />);
132-
await screen.findByText(probe.name);
133-
await user.click(screen.getByText(probe.name));
132+
await screen.findByText(probe.displayName);
133+
await user.click(screen.getByText(probe.displayName));
134134

135135
expect(screen.getByTestId(DataTestIds.TEST_ROUTER_INFO_PATHNAME)).toHaveTextContent(
136136
generateRoutePath(ROUTES.EditProbe, { id: probe.id! })
@@ -146,7 +146,7 @@ it.each<[ExtendedProbe, string]>([
146146
async (probe: ExtendedProbe, expectedText: string) => {
147147
const { user } = render(<ProbeCard probe={probe} />);
148148

149-
await screen.findByText(probe.name);
149+
await screen.findByText(probe.displayName);
150150

151151
const usageLink = screen.getByTestId(DataTestIds.PROBE_USAGE_LINK);
152152
expect(usageLink).toBeInTheDocument();
@@ -163,7 +163,7 @@ it('Displays the correct information for a probe that is NOT in use', async () =
163163
const probe = probeToExtendedProbe(PUBLIC_PROBE);
164164

165165
render(<ProbeCard probe={probe} />);
166-
await screen.findByText(probe.name);
166+
await screen.findByText(probe.displayName);
167167

168168
const usageLink = screen.queryByTestId(DataTestIds.PROBE_USAGE_LINK);
169169
expect(usageLink).not.toBeInTheDocument();

‎src/components/ProbeCard/ProbeCard.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
2727
<Stack alignItems="center" gap={0}>
2828
<ProbeStatus probe={probe} />
2929
<Link href={probeEditHref}>
30-
<span>{probe.name}</span>
30+
<span>{probe.displayName}</span>
3131
{probe.region && <span>&nbsp;{`(${probe.region})`}</span>}
3232
</Link>
3333
{probe.deprecated && (
@@ -80,7 +80,7 @@ export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
8080
fill="outline"
8181
variant="secondary"
8282
href={probeEditHref}
83-
aria-label={`Edit probe ${probe.name}`}
83+
aria-label={`Edit probe ${probe.displayName}`}
8484
tooltip="Edit probe"
8585
>
8686
Edit
@@ -94,7 +94,7 @@ export const ProbeCard = ({ probe }: { probe: ExtendedProbe }) => {
9494
variant="secondary"
9595
icon="eye"
9696
tooltip="View probe"
97-
aria-label={`View probe ${probe.name}`}
97+
aria-label={`View probe ${probe.displayName}`}
9898
>
9999
View
100100
</LinkButton>

‎src/components/ProbeCard/ProbeStatus.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import { GrafanaTheme2 } from '@grafana/data';
33
import { Tooltip, useStyles2 } from '@grafana/ui';
44
import { css } from '@emotion/css';
55

6-
import { Probe } from 'types';
6+
import { ProbeWithMetadata } from 'types';
77

8-
export function ProbeStatus({ probe }: { probe: Probe }) {
8+
export function ProbeStatus({ probe }: { probe: ProbeWithMetadata }) {
99
const styles = useStyles2((theme) => getStyles(theme, probe));
1010

1111
return (
1212
<Tooltip
1313
content={
1414
<div data-testid="probe-online-status-tooltip">
15-
Probe {probe.name} is <span className={styles.statusText}>{probe.online ? 'online' : 'offline'}</span>
15+
Probe {probe.displayName} is <span className={styles.statusText}>{probe.online ? 'online' : 'offline'}</span>
1616
</div>
1717
}
1818
>
@@ -21,7 +21,7 @@ export function ProbeStatus({ probe }: { probe: Probe }) {
2121
);
2222
}
2323

24-
function getStyles(theme: GrafanaTheme2, probe: Probe) {
24+
function getStyles(theme: GrafanaTheme2, probe: ProbeWithMetadata) {
2525
return {
2626
container: css({
2727
display: 'inline-block',

‎src/data/useProbes.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import { type QueryKey, useMutation, UseMutationResult, useQuery, useSuspenseQue
33
import { isFetchError } from '@grafana/runtime';
44

55
import { type MutationProps } from 'data/types';
6-
import { ExtendedProbe, type Probe } from 'types';
6+
import { ExtendedProbe, type Probe, ProbeMetadata, ProbeWithMetadata } from 'types';
77
import { FaroEvent } from 'faro';
88
import { camelCaseToSentence } from 'utils';
99
import { SMDataSource } from 'datasource/DataSource';
1010
import type {
1111
AddProbeResult,
1212
DeleteProbeError,
1313
DeleteProbeResult,
14-
ListProbeResult,
1514
ResetProbeTokenResult,
1615
UpdateProbeResult,
1716
} from 'datasource/responses.types';
@@ -41,21 +40,23 @@ export function useProbes() {
4140
export function useProbesWithMetadata() {
4241
const { data: probes = [], isLoading } = useProbes();
4342

44-
const probesWithMetadata = useMemo<ListProbeResult>(() => {
43+
const probesWithMetadata = useMemo<ProbeWithMetadata[]>(() => {
4544
if (isLoading) {
4645
return [];
4746
}
4847

4948
return probes
5049
.sort((a, b) => a.name.localeCompare(b.name))
5150
.map((probe) => {
52-
const metadata = PROBES_METADATA.find((info) => info.name === probe.name && info.region === probe.region);
51+
const metadata = PROBES_METADATA.find(
52+
(info) => info.name === probe.name && info.region === probe.region
53+
) as ProbeMetadata;
5354
const displayName = camelCaseToSentence(probe.name);
5455

5556
return {
5657
...probe,
5758
...metadata,
58-
name: displayName,
59+
displayName,
5960
};
6061
});
6162
}, [probes, isLoading]);

0 commit comments

Comments
 (0)