@oneuptime/common 13.0.4 → 13.0.5

package/Types/SecurityEvent/GoogleSecOpsRegion.ts

@@ -0,0 +1,34 @@
+/*
+ * Regional service endpoint prefixes published for chronicle.googleapis.com.
+ *
+ * Keep this list shared by server-side validation and the connection form. A
+ * free-text form in front of a stricter server allowlist lets a typo survive
+ * until save, while two copied allowlists eventually disagree as Google adds
+ * endpoints.
+ *
+ * Source: https://cloud.google.com/chronicle/docs/reference/rest
+ */
+export const GOOGLE_SECOPS_SUPPORTED_REGIONS: ReadonlyArray<string> = [
+  "us",
+  "eu",
+  "europe",
+  "africa-south1",
+  "asia-east1",
+  "asia-northeast1",
+  "asia-northeast3",
+  "asia-south1",
+  "asia-southeast1",
+  "asia-southeast2",
+  "australia-southeast1",
+  "europe-central2",
+  "europe-west12",
+  "europe-west2",
+  "europe-west3",
+  "europe-west6",
+  "europe-west9",
+  "me-central1",
+  "me-central2",
+  "me-west1",
+  "northamerica-northeast2",
+  "southamerica-east1",
+];

package/Types/Telemetry/EntityType.ts

@@ -72,6 +72,20 @@ enum EntityType {
   DockerSwarmService = "docker.swarm.service",
   DockerSwarmTask = "docker.swarm.task",
   TelemetrySdk = "telemetry.sdk",
+  /*
+   * Dependency types, discovered from the CLIENT / PRODUCER spans of an
+   * instrumented service rather than from a resource of their own. They are
+   * the far end of a call nothing on the other side reported: a PostgreSQL
+   * or Redis a service queries (`db.system.name` / `db.system`), or an HTTP /
+   * gRPC / messaging endpoint it talks to (`server.address`, `peer.service`,
+   * `messaging.system`). OneUptime-defined — semconv describes these only as
+   * span attributes, never as entities. Discovered (heartbeat-bumped by the
+   * ComputeServiceDependencies cron), so they age out like any other
+   * discovered row. Deliberately distinct from the manual ExternalService /
+   * ExternalDatabase types below, which nothing ever observes.
+   */
+  Database = "database",
+  RemoteService = "remote.service",
   /*
    * Inventory-mirrored types. Unlike everything above, these are never
    * derived from an OTLP resource — the estate they describe is collected

package/Types/Telemetry/ExceptionSpanScope.ts

@@ -0,0 +1,83 @@
+/*
+ * Scope a span query to the spans that raised one exception group.
+ *
+ * Spans carry no fingerprint of their own; an exception group's occurrences
+ * (ExceptionInstance rows) record the (traceId, spanId) they were raised in.
+ * The server compiles this scope to
+ *
+ *   (traceId, spanId) IN (
+ *     SELECT traceId, spanId FROM <exception occurrences>
+ *     WHERE projectId = <the query's project>
+ *       AND fingerprint = <fingerprint>
+ *       [AND primaryEntityId = <service>]
+ *   )
+ *
+ * so the span list, its count, the histogram and the facets all describe
+ * exactly the spans behind the exception's occurrences — with no cap on how
+ * many occurrences there are. It only ever narrows a query: authorization
+ * still runs on the span query's own projectId and primaryEntityId.
+ */
+
+// The synthetic query key the span list endpoint reads.
+export const EXCEPTION_SPAN_SCOPE_QUERY_KEY: string = "exceptionScope";
+
+// Fingerprints are SHA-256 hex today; the cap only rejects junk.
+export const EXCEPTION_SPAN_SCOPE_MAX_FINGERPRINT_LENGTH: number = 512;
+
+export interface ExceptionSpanScope {
+  fingerprint: string;
+  // The exception group's service; a fingerprint is only unique per service.
+  primaryEntityId?: string | undefined;
+}
+
+const UUID_PATTERN: RegExp =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/*
+ * Validate an untrusted scope (request body, deserialized query). Returns
+ * null for anything malformed so callers can decide how to fail; a blank or
+ * oversized fingerprint, or a service id that is not a UUID, is malformed.
+ */
+export function parseExceptionSpanScope(
+  value: unknown,
+): ExceptionSpanScope | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+
+  const record: Record<string, unknown> = value as Record<string, unknown>;
+  const fingerprint: unknown = record["fingerprint"];
+
+  if (typeof fingerprint !== "string") {
+    return null;
+  }
+
+  const trimmedFingerprint: string = fingerprint.trim();
+
+  if (
+    trimmedFingerprint.length === 0 ||
+    trimmedFingerprint.length > EXCEPTION_SPAN_SCOPE_MAX_FINGERPRINT_LENGTH
+  ) {
+    return null;
+  }
+
+  const rawEntityId: unknown = record["primaryEntityId"];
+
+  if (rawEntityId === undefined || rawEntityId === null || rawEntityId === "") {
+    return { fingerprint: trimmedFingerprint };
+  }
+
+  const primaryEntityId: string =
+    typeof rawEntityId === "string"
+      ? rawEntityId.trim()
+      : typeof rawEntityId === "object" &&
+          typeof (rawEntityId as Record<string, unknown>)["value"] === "string"
+        ? ((rawEntityId as Record<string, unknown>)["value"] as string).trim()
+        : "";
+
+  if (!UUID_PATTERN.test(primaryEntityId)) {
+    return null;
+  }
+
+  return { fingerprint: trimmedFingerprint, primaryEntityId };
+}

package/Types/Telemetry/LockedFilterDetail.ts

@@ -0,0 +1,46 @@
+/*
+ * What a LOCKED telemetry filter chip can explain about itself.
+ *
+ * A resource page (a Kubernetes cluster, a Docker host, a RUM application,
+ * an incident's stored query, ...) pins the telemetry explorers it embeds to
+ * its own scope. The viewer shows that scope as a grey chip with a lock icon
+ * — "Cluster: production" — and nothing else, so a reader cannot tell whether
+ * the match is by resource attribute, by entity membership, by service id,
+ * or by something else, nor how to reproduce it on the main explorer page.
+ *
+ * The chip builders in the Dashboard fill one of these per locked chip; the
+ * shared chip renderer turns it into a rich tooltip and into the
+ * "Copy filter" affordance. Display-only: nothing here changes the query.
+ */
+
+/** One predicate the server evaluates for the locked filter. */
+export interface LockedFilterPredicate {
+  /** "Attribute", "Entity key", "Entity id", "Trace ID", ... */
+  label: string;
+  /** The predicate as text, e.g. `resource.k8s.cluster.name = "prod-eks-01"`. */
+  expression: string;
+  /** Optional plain-language note under the expression. */
+  note?: string | undefined;
+}
+
+/** How several predicates of one locked filter combine. Defaults to "all". */
+export type LockedFilterCombinator = "any" | "all";
+
+export interface LockedFilterDetail {
+  /** Why the chip is locked, e.g. "Pinned by this page". */
+  source: string;
+  /** Plain-language summary, e.g. "Only logs from this Kubernetes cluster are shown." */
+  summary: string;
+  /** How rows are matched, in display order. */
+  predicates: Array<LockedFilterPredicate>;
+  /** "any" when the predicates are OR-ed (entity scope), "all" otherwise. */
+  combinator?: LockedFilterCombinator | undefined;
+  /**
+   * Search-bar text that reproduces this filter on the explorer for the same
+   * signal, e.g. `@resource.k8s.cluster.name:prod-eks-01`. Absent when the
+   * grammar cannot express the filter.
+   */
+  searchToken?: string | undefined;
+  /** Why `searchToken` is absent, when it is — shown in place of the syntax. */
+  searchTokenUnavailableReason?: string | undefined;
+}

package/Types/Telemetry/ResourceEntityFacet.ts

@@ -1,3 +1,5 @@
+import { RESOURCE_FACET_CATALOG_KEYS } from "./ResourceFacetCatalog";
+
 /*
  * The resource facets of the telemetry explorers (Logs / Traces), split by
  * how a selection has to be turned into a predicate.
@@ -8,8 +10,9 @@
  * selection has to be matched against depends on the ingestion path:
  *
  *   - Agent-ingested resource telemetry (Infrastructure / Docker / Podman /
- *     Kubernetes agents) has no `service.name`, so the resource IS the
- *     primary entity and `primaryEntityId` holds its Postgres id.
+ *     Kubernetes / Proxmox / Ceph / VMware ... agents) has no
+ *     `service.name`, so the resource IS the primary entity and
+ *     `primaryEntityId` holds its Postgres id.
  *   - OTLP telemetry that carries a `service.name` is primary-keyed on its
  *     Service (`OtelIngestBaseService.selectPrimaryEntity`); the host /
  *     cluster it runs on is recorded only in `entityKeys`.
@@ -34,16 +37,20 @@ export const SERVICE_FACET_KEYS: ReadonlyArray<string> = [
 ];
 
 /**
- * Facets whose values are ids of a NON-Service resource row. These are the
- * ones that need the entity-key treatment; the value is a Postgres id
- * (Host / DockerHost / PodmanHost / KubernetesCluster) which the server
- * resolves to the resource's identifying value and then to its entity key.
+ * Facets whose values are ids of a NON-Service resource row — every entry
+ * of the shared resource facet catalog, in catalog (sidebar) order. The
+ * value is a Postgres id which the server resolves, where the resource type
+ * has a telemetry identity, to its identifying value and from there to its
+ * entity key and resource attribute (see ResourceEntityFilter). Types with
+ * no such identity keep an id-only `primaryEntityId IN (...)` predicate.
+ *
+ * Derived rather than listed: a hand-kept copy of the catalog is exactly
+ * how Proxmox / vCenter / Ceph / Docker Swarm / Serverless / Cloud / RUM /
+ * IoT selections ended up silently dropped by the parser below while their
+ * facets were already on screen.
  */
 export const RESOURCE_ENTITY_FACET_KEYS: ReadonlyArray<string> = [
-  "hostId",
-  "dockerHostId",
-  "podmanHostId",
-  "kubernetesClusterId",
+  ...RESOURCE_FACET_CATALOG_KEYS,
 ];
 
 const RESOURCE_ENTITY_FACET_KEY_SET: ReadonlySet<string> = new Set<string>(

package/Types/Telemetry/ResourceFacetCatalog.ts

@@ -0,0 +1,171 @@
+import IconProp from "../Icon/IconProp";
+import ServiceType from "./ServiceType";
+
+/*
+ * The one list of non-Service resource types the telemetry explorers
+ * (Logs / Traces / Exceptions) offer as filter facets.
+ *
+ * Every per-resource table used to be copied by hand — the facet keys a
+ * viewer requests, the sidebar titles, the ServiceType each aggregation
+ * service counts, the keys the server resolves from Postgres — and the
+ * copies drifted: Host / Docker / Podman / Kubernetes were wired end to
+ * end while Proxmox, vCenter, Ceph, Docker Swarm, Serverless, Cloud, RUM
+ * and IoT were each missing from one layer or another. Deriving those
+ * tables from this catalog keeps a new resource type a one-line change.
+ *
+ * Kept free of React and database models so both the server and the
+ * browser (and plain unit tests) can import it.
+ */
+
+export interface ResourceFacetDefinition {
+  // Facet key used on the wire, in chips and in saved views.
+  facetKey: string;
+  /*
+   * `primaryEntityType` stamped on telemetry whose primary entity is this
+   * resource. IoT fleet telemetry is stamped `IoTDevice` with the fleet id
+   * (there is no fleet member), and RUM applications `RealUserMonitor`.
+   */
+  serviceType: ServiceType;
+  // Singular, title-cased label ("Kubernetes Cluster").
+  label: string;
+  // Plural label for sentences ("Kubernetes Clusters").
+  pluralLabel: string;
+  icon: IconProp;
+}
+
+export const RESOURCE_FACET_CATALOG: ReadonlyArray<ResourceFacetDefinition> = [
+  {
+    facetKey: "hostId",
+    serviceType: ServiceType.Host,
+    label: "Host",
+    pluralLabel: "Hosts",
+    icon: IconProp.Server,
+  },
+  {
+    facetKey: "dockerHostId",
+    serviceType: ServiceType.DockerHost,
+    label: "Docker Host",
+    pluralLabel: "Docker Hosts",
+    icon: IconProp.Docker,
+  },
+  {
+    facetKey: "podmanHostId",
+    serviceType: ServiceType.PodmanHost,
+    label: "Podman Host",
+    pluralLabel: "Podman Hosts",
+    icon: IconProp.Podman,
+  },
+  {
+    facetKey: "kubernetesClusterId",
+    serviceType: ServiceType.KubernetesCluster,
+    label: "Kubernetes Cluster",
+    pluralLabel: "Kubernetes Clusters",
+    icon: IconProp.Kubernetes,
+  },
+  {
+    facetKey: "dockerSwarmClusterId",
+    serviceType: ServiceType.DockerSwarmCluster,
+    label: "Docker Swarm Cluster",
+    pluralLabel: "Docker Swarm Clusters",
+    icon: IconProp.DockerSwarm,
+  },
+  {
+    facetKey: "proxmoxClusterId",
+    serviceType: ServiceType.ProxmoxCluster,
+    label: "Proxmox Cluster",
+    pluralLabel: "Proxmox Clusters",
+    icon: IconProp.Proxmox,
+  },
+  {
+    facetKey: "vmwareVCenterId",
+    serviceType: ServiceType.VMwareVCenter,
+    label: "vCenter",
+    pluralLabel: "vCenters",
+    icon: IconProp.VMware,
+  },
+  {
+    facetKey: "cephClusterId",
+    serviceType: ServiceType.CephCluster,
+    label: "Ceph Cluster",
+    pluralLabel: "Ceph Clusters",
+    icon: IconProp.Ceph,
+  },
+  {
+    facetKey: "serverlessFunctionId",
+    serviceType: ServiceType.ServerlessFunction,
+    label: "Serverless Function",
+    pluralLabel: "Serverless Functions",
+    icon: IconProp.Bolt,
+  },
+  {
+    facetKey: "cloudResourceId",
+    serviceType: ServiceType.CloudResource,
+    label: "Cloud Resource",
+    pluralLabel: "Cloud Resources",
+    icon: IconProp.Cloud,
+  },
+  {
+    facetKey: "rumApplicationId",
+    serviceType: ServiceType.RealUserMonitor,
+    label: "RUM Application",
+    pluralLabel: "RUM Applications",
+    icon: IconProp.Globe,
+  },
+  {
+    facetKey: "iotFleetId",
+    serviceType: ServiceType.IoTDevice,
+    label: "IoT Fleet",
+    pluralLabel: "IoT Fleets",
+    icon: IconProp.IoT,
+  },
+];
+
+// Catalog order — the order the sidebars list resource facets in.
+export const RESOURCE_FACET_CATALOG_KEYS: ReadonlyArray<string> =
+  RESOURCE_FACET_CATALOG.map((definition: ResourceFacetDefinition): string => {
+    return definition.facetKey;
+  });
+
+const DEFINITIONS_BY_KEY: ReadonlyMap<string, ResourceFacetDefinition> =
+  new Map<string, ResourceFacetDefinition>(
+    RESOURCE_FACET_CATALOG.map(
+      (
+        definition: ResourceFacetDefinition,
+      ): [string, ResourceFacetDefinition] => {
+        return [definition.facetKey, definition];
+      },
+    ),
+  );
+
+export function getResourceFacetDefinition(
+  facetKey: string,
+): ResourceFacetDefinition | undefined {
+  return DEFINITIONS_BY_KEY.get(facetKey);
+}
+
+export function isCatalogResourceFacetKey(facetKey: string): boolean {
+  return DEFINITIONS_BY_KEY.has(facetKey);
+}
+
+/*
+ * facetKey → ServiceType, the shape the aggregation services count
+ * resource facets with (`primaryEntityType = <ServiceType>`).
+ */
+export function getResourceFacetServiceTypeMap(): Map<string, ServiceType> {
+  return new Map<string, ServiceType>(
+    RESOURCE_FACET_CATALOG.map(
+      (definition: ResourceFacetDefinition): [string, ServiceType] => {
+        return [definition.facetKey, definition.serviceType];
+      },
+    ),
+  );
+}
+
+// facetKey → singular label, for chip keys and section titles.
+export function getResourceFacetLabelMap(): Record<string, string> {
+  const labels: Record<string, string> = {};
+  for (const definition of RESOURCE_FACET_CATALOG) {
+    labels[definition.facetKey] = definition.label;
+  }
+  return labels;
+}

package/UI/Components/Card/Card.tsx

@@ -21,6 +21,18 @@ export interface CardButtonSchema {
   buttonSize?: ButtonSize | undefined;
 }
 
+/*
+ * How the header shares its width.
+ *
+ * "default" puts the actions to the right of the title on md and up, which
+ * suits a full-width card. In a narrow column (the one-third sidebar of an
+ * overview page) that squeezes the title and description into a column a
+ * word or two wide beside the buttons, so "stacked" gives the title and
+ * description the whole width and moves the actions onto their own row
+ * underneath.
+ */
+export type CardHeaderLayout = "default" | "stacked";
+
 export interface ComponentProps {
   title?: string | ReactElement | undefined;
   description?: string | ReactElement | undefined;
@@ -29,106 +41,129 @@ export interface ComponentProps {
   className?: string | undefined;
   bodyClassName?: string | undefined;
   rightElement?: ReactElement | undefined;
+  headerLayout?: CardHeaderLayout | undefined;
 }
 
 const Card: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const { translateValue } = useTranslateValue();
-  const noRightElementsOrButtons: boolean =
-    !props.rightElement && (!props.buttons || props.buttons.length === 0);
+  const hasButtons: boolean = Boolean(
+    props.buttons && props.buttons.length > 0,
+  );
+  const noRightElementsOrButtons: boolean = !props.rightElement && !hasButtons;
+  const isStacked: boolean = props.headerLayout === "stacked";
   const translatedTitle: string | ReactElement | undefined = translateValue(
     props.title,
   );
   const translatedDescription: string | ReactElement | undefined =
     translateValue(props.description);
 
+  const renderButtons: () => Array<ReactElement> = (): Array<ReactElement> => {
+    return (props.buttons || []).map(
+      (button: CardButtonSchema | ReactElement, i: number) => {
+        return (
+          <div key={i} className="flex items-center">
+            {React.isValidElement(button) ? button : null}
+            {React.isValidElement(button) ? null : (
+              <Button
+                key={i}
+                title={(button as CardButtonSchema).title}
+                buttonStyle={(button as CardButtonSchema).buttonStyle}
+                buttonSize={(button as CardButtonSchema).buttonSize}
+                className={(button as CardButtonSchema).className}
+                onClick={() => {
+                  if ((button as CardButtonSchema).onClick) {
+                    (button as CardButtonSchema).onClick();
+                  }
+                }}
+                disabled={(button as CardButtonSchema).disabled}
+                tooltip={(button as CardButtonSchema).tooltip}
+                icon={(button as CardButtonSchema).icon}
+                shortcutKey={(button as CardButtonSchema).shortcutKey}
+                dataTestId="card-button"
+                isLoading={(button as CardButtonSchema).isLoading}
+              />
+            )}
+          </div>
+        );
+      },
+    );
+  };
+
+  const titleAndDescription: ReactElement = (
+    <React.Fragment>
+      {translatedTitle && (
+        <h2
+          data-testid="card-details-heading"
+          id="card-details-heading"
+          className="text-lg font-semibold leading-6 text-gray-900"
+        >
+          {translatedTitle}
+        </h2>
+      )}
+      {translatedDescription && (
+        <p
+          data-testid="card-description"
+          className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
+        >
+          {translatedDescription}
+        </p>
+      )}
+    </React.Fragment>
+  );
+
+  /*
+   * Button carries a left margin for the side-by-side header (ml-1 or
+   * md:ml-3, depending on its style). On a row of its own that margin only
+   * pushes the first button off the title's left edge, and the gap already
+   * spaces the rest, so it is cleared here.
+   */
+  const stackedHeader: ReactElement = (
+    <div data-testid="card-header" data-header-layout="stacked">
+      <div className="w-full min-w-0">{titleAndDescription}</div>
+      {(props.rightElement || hasButtons) && (
+        <div
+          data-testid="card-header-actions"
+          className="mt-3 flex flex-wrap items-center gap-2 [&_button]:ml-0 [&_button]:md:ml-0"
+        >
+          {props.rightElement && (
+            <div className="flex items-center">{props.rightElement}</div>
+          )}
+          {hasButtons && renderButtons()}
+        </div>
+      )}
+    </div>
+  );
+
+  const defaultHeader: ReactElement = (
+    <div className="flex flex-col md:flex-row md:justify-between md:items-start">
+      <div
+        className={`${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}`}
+      >
+        {titleAndDescription}
+      </div>
+      {(props.rightElement || hasButtons) && (
+        <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center">
+          {props.rightElement && (
+            <div className="mb-2 md:mb-0 md:mr-3">{props.rightElement}</div>
+          )}
+          {hasButtons && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              {renderButtons()}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
   return (
     <React.Fragment>
       <div data-testid="card" className={`mb-5 ${props.className || ""}`}>
         <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible">
           <div className="py-6 px-5 md:px-6">
-            <div className="flex flex-col md:flex-row md:justify-between md:items-start">
-              <div
-                className={`${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}`}
-              >
-                {translatedTitle && (
-                  <h2
-                    data-testid="card-details-heading"
-                    id="card-details-heading"
-                    className="text-lg font-semibold leading-6 text-gray-900"
-                  >
-                    {translatedTitle}
-                  </h2>
-                )}
-                {translatedDescription && (
-                  <p
-                    data-testid="card-description"
-                    className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
-                  >
-                    {translatedDescription}
-                  </p>
-                )}
-              </div>
-              {(props.rightElement ||
-                (props.buttons && props.buttons.length > 0)) && (
-                <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center">
-                  {props.rightElement && (
-                    <div className="mb-2 md:mb-0 md:mr-3">
-                      {props.rightElement}
-                    </div>
-                  )}
-                  {props.buttons && props.buttons.length > 0 && (
-                    <div className="flex flex-wrap items-center gap-1.5">
-                      {props.buttons.map(
-                        (
-                          button: CardButtonSchema | ReactElement,
-                          i: number,
-                        ) => {
-                          return (
-                            <div key={i} className="flex items-center">
-                              {React.isValidElement(button) ? button : null}
-                              {React.isValidElement(button) ? null : (
-                                <Button
-                                  key={i}
-                                  title={(button as CardButtonSchema).title}
-                                  buttonStyle={
-                                    (button as CardButtonSchema).buttonStyle
-                                  }
-                                  buttonSize={
-                                    (button as CardButtonSchema).buttonSize
-                                  }
-                                  className={
-                                    (button as CardButtonSchema).className
-                                  }
-                                  onClick={() => {
-                                    if ((button as CardButtonSchema).onClick) {
-                                      (button as CardButtonSchema).onClick();
-                                    }
-                                  }}
-                                  disabled={
-                                    (button as CardButtonSchema).disabled
-                                  }
-                                  tooltip={(button as CardButtonSchema).tooltip}
-                                  icon={(button as CardButtonSchema).icon}
-                                  shortcutKey={
-                                    (button as CardButtonSchema).shortcutKey
-                                  }
-                                  dataTestId="card-button"
-                                  isLoading={
-                                    (button as CardButtonSchema).isLoading
-                                  }
-                                />
-                              )}
-                            </div>
-                          );
-                        },
-                      )}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
+            {isStacked ? stackedHeader : defaultHeader}
 
             {props.children && (
               <div className={props.bodyClassName || "mt-4"}>

package/UI/Components/Checkbox/Checkbox.tsx

@@ -38,6 +38,8 @@ export interface CategoryProps {
 const CheckboxElement: FunctionComponent<CategoryProps> = (
   props: CategoryProps,
 ): ReactElement => {
+  const checkboxId: string = React.useId();
+  const descriptionId: string = `${checkboxId}-description`;
   const [value, setValue] = React.useState<boolean>(
     props.initialValue || false,
   );
@@ -65,6 +67,7 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
       >
         <div className="flex h-6 items-center">
           <input
+            id={checkboxId}
             checked={value}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
               setValue(event.target.checked);
@@ -83,9 +86,7 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
             data-testid={props.dataTestId}
             aria-label={props.ariaLabel}
             title={props.hoverText}
-            aria-describedby={
-              props.description ? "checkbox-description" : undefined
-            }
+            aria-describedby={props.description ? descriptionId : undefined}
             aria-invalid={props.error ? "true" : undefined}
             type="checkbox"
             className={`accent-indigo-600 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 ${
@@ -94,9 +95,11 @@ const CheckboxElement: FunctionComponent<CategoryProps> = (
           />
         </div>
         <div className="ml-3 text-sm leading-6">
-          <label className="font-medium text-gray-900">{props.title}</label>
+          <label className="font-medium text-gray-900" htmlFor={checkboxId}>
+            {props.title}
+          </label>
           {props.description && (
-            <div id="checkbox-description" className="text-gray-500">
+            <div id={descriptionId} className="text-gray-500">
               {props.description}
             </div>
           )}