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

package.json

@@ -121,6 +121,7 @@
     "react-popper": "^2.2.5",
     "react-router-dom": "^5.2.0",
     "rxjs": "7.8.1",
+    "usehooks-ts": "^3.1.0",
     "valid-url": "^1.0.9",
     "yaml": "^2.2.2",
     "zod": "3.23.6"

src/components/CheckEditor/CheckProbes/CheckProbes.tsx

@@ -0,0 +1,78 @@
+import React, { forwardRef, useMemo, useState } from 'react';
+import { Field, Stack } from '@grafana/ui';
+
+import { Probe } from 'types';
+
+import { PrivateProbesAlert } from './PrivateProbesAlert';
+import { PROBES_FILTER_ID, 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) => {
+  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]
+  );
+
+  const showPrivateProbesDiscovery = privateProbes.length === 0 && filteredProbes.length === availableProbes.length;
+
+  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}
+        htmlFor={PROBES_FILTER_ID}
+      >
+        <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>
+      {showPrivateProbesDiscovery && <PrivateProbesAlert />}
+    </div>
+  );
+});
+
+CheckProbes.displayName = 'CheckProbes';

src/components/CheckEditor/CheckProbes/PrivateProbesAlert.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Alert, LinkButton, Stack, TextLink } from '@grafana/ui';
+import { useLocalStorage } from 'usehooks-ts';
+
+import { ROUTES } from 'types';
+import { getRoute } from 'components/Routing.utils';
+
+export const PrivateProbesAlert = () => {
+  const [dismissed, setDismissed] = useLocalStorage<boolean>('dismissedPrivateProbesAlert', false);
+
+  if (dismissed) {
+    return null;
+  }
+
+  return (
+    <Alert
+      title="You haven't set up any private probes yet."
+      severity="info"
+      onRemove={() => {
+        setDismissed(true);
+      }}
+    >
+      <Stack gap={1} direction="column" alignItems="flex-start">
+        <p>
+          Private probes are instances of the open source Grafana{' '}
+          <TextLink
+            href="https://grafana.com/docs/grafana-cloud/testing/synthetic-monitoring/set-up/set-up-private-probes/"
+            external={true}
+          >
+            Synthetic Monitoring Agent
+          </TextLink>{' '}
+          and are only accessible to you.
+        </p>
+        <LinkButton size="sm" href={`${getRoute(ROUTES.NewProbe)}`}>
+          Set up a Private Probe
+        </LinkButton>
+      </Stack>
+    </Alert>
+  );
+};

src/components/CheckEditor/CheckProbes/ProbesFilter.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import { Probe } 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 }) => {
+  const [showEmptyState, setShowEmptyState] = useState(false);
+  const [filterText, setFilterText] = useState('');
+
+  const handleSearch = (searchValue: string) => {
+    setFilterText(searchValue);
+    const filteredProbes = probes.filter(
+      (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)
+    );
+
+    onSearch(filteredProbes);
+    setShowEmptyState(filteredProbes.length === 0);
+  };
+
+  return (
+    <>
+      <SearchFilter
+        onSearch={handleSearch}
+        id={PROBES_FILTER_ID}
+        value={filterText}
+        showEmptyState={showEmptyState}
+        emptyText="There are no probes matching your criteria."
+        placeholder="Find a probe by city, country, region or provider"
+      />
+    </>
+  );
+};