Feat: Re-design probe selection when creating / editing checks

src/components/CheckEditor/CheckProbes/CheckProbes.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef, useMemo, useState } from 'react';
+import { Field, Stack } from '@grafana/ui';
+
+import { Probe } from 'types';
+
+import { PrivateProbesAlert } from './PrivateProbesAlert';
+import { ProbesFilter } from './ProbesFilter';
+import { ProbesList } from './ProbesList';
+
+interface CheckProbesProps {
+  probes: number[];
+  availableProbes: Probe[];
+  disabled?: boolean;
+  onChange: (probes: number[]) => void;
+  onBlur?: () => void;
+  invalid?: boolean;
+  error?: string;
+}
+export const CheckProbes = forwardRef(({ probes, availableProbes, onChange, error }: CheckProbesProps, ref) => {
+  const [filteredProbes, setFilteredProbes] = useState<Probe[]>(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) => {
+        const region = curr.region;
+        if (!acc[region]) {
+          acc[region] = [];
+        }
+        acc[region].push(curr);
+        return acc;
+      }, {}),
+    [publicProbes]
+  );
+
+  return (
+    <div>
+      <Field
+        label="Probe locations"
+        description="Select one, multiple, or all probes where this target will be checked from. Deprecated probes can be removed, but they cannot be added."
+        invalid={!!error}
+        error={error}
+      >
+        <div>
+          <ProbesFilter probes={availableProbes} onSearch={setFilteredProbes} />
+          <Stack wrap={'wrap'}>
+            {privateProbes.length > 0 && (
+              <ProbesList
+                title="Private probes"
+                probes={privateProbes}
+                selectedProbes={probes}
+                onSelectionChange={onChange}
+              />
+            )}
+
+            {Object.entries(groupedByRegion).map(([region, allProbes]) => (
+              <ProbesList
+                key={region}
+                title={region}
+                probes={allProbes}
+                selectedProbes={probes}
+                onSelectionChange={onChange}
+              />
+            ))}
+          </Stack>
+        </div>
+      </Field>
+      {privateProbes.length === 0 && filteredProbes.length === availableProbes.length && <PrivateProbesAlert />}
+    </div>
+  );
+});
+
+CheckProbes.displayName = 'CheckProbes';

src/components/CheckEditor/CheckProbes/PrivateProbesAlert.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Alert, LinkButton, Stack } from '@grafana/ui';
+
+import { ROUTES } from 'types';
+import { getRoute } from 'components/Routing.utils';
+
+export const PrivateProbesAlert = () => {
+  const [display, setDisplay] = useState(true);
+
+  if (!display) {
+    return null;
+  }
+
+  return (
+    <Alert
+      title="You haven't set up any private probes yet."
+      severity="info"
+      onRemove={() => {
+        setDisplay(false);
+      }}
+    >
+      <Stack gap={1} direction={'column'} alignItems={'flex-start'}>
+        Probes are automated tools that test websites and apps. They act like users by sending requests and checking the
+        responses.
+        <LinkButton size="sm" href={`${getRoute(ROUTES.NewProbe)}`}>
+          Set up a Private Probe
+        </LinkButton>
+      </Stack>
+    </Alert>
+  );
+};

src/components/CheckEditor/CheckProbes/ProbesFilter.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, Input, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+
+import { Probe } from 'types';
+
+export const ProbesFilter = ({ probes, onSearch }: { probes: Probe[]; onSearch: (probes: Probe[]) => void }) => {
+  const styles = useStyles2(getStyles);
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const searchValue = event.target.value.toLowerCase();
+
+    const filteredProbes = probes.filter(
+      (probe) => probe.region.toLowerCase().includes(searchValue) || probe.name.toLowerCase().includes(searchValue)
+    );
+
+    onSearch(filteredProbes);
+  };
+
+  return (
+    <div className={styles.searchInput}>
+      <Input prefix={<Icon name="search" />} placeholder="Find a probe by city or region" onChange={handleSearch} />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  searchInput: css({
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  }),
+});

src/components/CheckEditor/CheckProbes/ProbesList.tsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Checkbox, Label, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+
+import { Probe } from 'types';
+import { ProbeStatus } from 'components/ProbeCard/ProbeStatus';
+
+export const ProbesList = ({
+  title,
+  probes,
+  selectedProbes,
+  onSelectionChange,
+}: {
+  title: string;
+  probes: Probe[];
+  selectedProbes: number[];
+  onSelectionChange: (probes: number[]) => void;
+}) => {
+  const styles = useStyles2(getStyles);
+
+  const handleToggleAll = () => {
+    if (allProbesSelected) {
+      onSelectionChange(selectedProbes.filter((id) => !probes.some((probe) => probe.id === id)));
+      return;
+    }
+    onSelectionChange([
+      ...selectedProbes,
+      ...(probes.filter((probe) => !probe.deprecated).map((probe) => probe.id) as number[]),
+    ]);
+  };
+
+  const handleToggleProbe = (probe: Probe) => {
+    if (!probe.id || probe.deprecated) {
+      return;
+    }
+    if (selectedProbes.includes(probe.id)) {
+      onSelectionChange(selectedProbes.filter((p) => p !== probe.id));
+      return;
+    }
+    onSelectionChange([...selectedProbes, probe.id]);
+  };
+
+  const allProbesSelected = useMemo(
+    () => probes.every((probe) => selectedProbes.includes(probe.id as number)),
+    [probes, selectedProbes]
+  );
+
+  return (
+    <div className={styles.probesColumn}>
+      <div className={styles.sectionHeader}>
+        <Checkbox id={`header-${title}`} onClick={handleToggleAll} checked={allProbesSelected} />
+        <Label htmlFor={`header-${title}`} className={styles.headerLabel}>
+          {title} ({probes.length})
+        </Label>
+      </div>
+      <div className={styles.probesList}>
+        {probes.map((probe: Probe) => (
+          <div key={probe.id} className={styles.item}>
+            <Checkbox
+              id={`probe-${probe.id}`}
+              onClick={() => handleToggleProbe(probe)}
+              checked={selectedProbes.includes(probe.id as number)}
+            />
+            <Label htmlFor={`probe-${probe.id}`} className={styles.columnLabel}>
+              <ProbeStatus probe={probe} /> {probe.name}
+            </Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  item: css({
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    display: `flex`,
+    gap: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    alignItems: 'center',
+  }),
+
+  probesColumn: css({
+    fontSize: theme.typography.h6.fontSize,
+    fontWeight: theme.typography.fontWeightLight,
+  }),
+
+  probesList: css({
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: '250px',
+    maxWidth: '350px',
+    maxHeight: '230px',
+    overflowY: 'auto',
+  }),
+
+  sectionHeader: css({
+    display: 'flex',
+    border: `1px solid ${theme.colors.border.weak}`,
+    backgroundColor: `${theme.colors.background.secondary}`,
+    padding: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    gap: theme.spacing(1),
+    verticalAlign: 'middle',
+    alignItems: 'center',
+  }),
+
+  headerLabel: css({
+    fontWeight: theme.typography.fontWeightLight,
+    fontSize: theme.typography.h5.fontSize,
+    color: 'white',
+  }),
+
+  columnLabel: css({
+    fontWeight: theme.typography.fontWeightLight,
+    fontSize: theme.typography.h6.fontSize,
+  }),
+});

src/components/CheckEditor/ProbeOptions.tsx

@@ -6,7 +6,7 @@ import { CheckFormValues, CheckType, Probe } from 'types';
 import { useProbes } from 'data/useProbes';
 import { SliderInput } from 'components/SliderInput';
 
-import { CheckProbes } from './CheckProbes';
+import { CheckProbes } from './CheckProbes/CheckProbes';
 
 interface ProbeOptionsProps {
   checkType: CheckType;