Add: [DI-29170] - Value field selection limitation in CloudPulse metrics and alerts dimension filters

packages/manager/.changeset/pr-13361-added-1770207290291.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Ability to restrict the number of selectable values in cloudpulse metrics and alerts dimension filter value field ([#13361](https://github.com/linode/manager/pull/13361))

packages/manager/src/featureFlags.ts

@@ -174,6 +174,7 @@ interface AclpAlerting {
   alertDefinitions: boolean;
   beta: boolean;
   editDisabledStatuses?: AlertStatusType[];
+  maxDimensionFiltersValues?: number;
   maxEmailChannelRecipients?: number;
   notificationChannels: boolean;
   recentActivity: boolean;

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/BlockStorageDimensionFilterAutocomplete.tsx

@@ -4,7 +4,12 @@ import React from 'react';
 
 import { useBlockStorageFetchOptions } from './useBlockStorageFetchOptions';
 import { useCleanupStaleValues } from './useCleanupStaleValues';
-import { handleValueChange, resolveSelectedValues } from './utils';
+import {
+  handleValueChange,
+  isMaxSelectionsReached,
+  isOptionDisabled,
+  resolveSelectedValues,
+} from './utils';
 
 import type { DimensionFilterAutocompleteProps } from './constants';
 
@@ -26,6 +31,7 @@ export const BlockStorageDimensionFilterAutocomplete = (
     selectedRegions,
     serviceType,
     type,
+    maxSelections,
   } = props;
 
   const { data: regions } = useRegionsQuery();
@@ -47,14 +53,40 @@ export const BlockStorageDimensionFilterAutocomplete = (
     isLoading,
   });
 
+  const maxReached = React.useMemo(() => {
+    return isMaxSelectionsReached(
+      multiple ?? false,
+      fieldValue ?? '',
+      maxSelections
+    );
+  }, [fieldValue, maxSelections, multiple]);
+
+  const showHelperText = !errorText && maxSelections !== undefined && multiple;
+  const disableSelectAll =
+    maxSelections !== undefined && multiple
+      ? values.length > maxSelections
+      : false;
+
   return (
     <Autocomplete
       data-qa-dimension-filter={`${name}-value`}
       data-testid="value"
       disabled={disabled}
+      disableSelectAll={disableSelectAll}
       errorText={
         errorText ?? (isError ? 'Failed to fetch the values.' : undefined)
       }
+      getOptionDisabled={(option) => {
+        return isOptionDisabled({
+          maxReached,
+          value: fieldValue ?? undefined,
+          multiple: multiple ?? false,
+          option,
+        });
+      }}
+      helperText={
+        showHelperText ? `Select up to ${maxSelections} values` : undefined
+      }
       isOptionEqualToValue={(option, value) => value.value === option.value}
       label="Value"
       limitTags={1}

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/DimensionFilterAutocomplete.tsx

@@ -4,6 +4,8 @@ import React, { useMemo } from 'react';
 import {
   getStaticOptions,
   handleValueChange,
+  isMaxSelectionsReached,
+  isOptionDisabled,
   resolveSelectedValues,
 } from './utils';
 
@@ -28,18 +30,44 @@ export const DimensionFilterAutocomplete = (
     serviceType,
     dimensionLabel,
     values,
+    maxSelections,
   } = props;
 
   const options = useMemo(
     () => getStaticOptions(serviceType, dimensionLabel ?? '', values ?? []),
     [dimensionLabel, serviceType, values]
   );
+  const maxReached = React.useMemo(() => {
+    return isMaxSelectionsReached(
+      multiple ?? false,
+      fieldValue ?? '',
+      maxSelections
+    );
+  }, [fieldValue, maxSelections, multiple]);
+
+  const showHelperText = !errorText && maxSelections !== undefined && multiple;
+  const disableSelectAll =
+    maxSelections !== undefined && multiple
+      ? options.length > maxSelections
+      : false;
   return (
     <Autocomplete
       data-qa-dimension-filter={`${name}-value`}
       data-testid="value"
       disabled={disabled}
+      disableSelectAll={disableSelectAll}
       errorText={errorText}
+      getOptionDisabled={(option) => {
+        return isOptionDisabled({
+          maxReached,
+          value: fieldValue ?? undefined,
+          multiple: multiple ?? false,
+          option,
+        });
+      }}
+      helperText={
+        showHelperText ? `Select up to ${maxSelections} values` : undefined
+      }
       isOptionEqualToValue={(option, value) => value.value === option.value}
       label="Value"
       limitTags={1}

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/FirewallDimensionFilterAutocomplete.tsx

@@ -4,7 +4,12 @@ import React from 'react';
 
 import { useCleanupStaleValues } from './useCleanupStaleValues';
 import { useFirewallFetchOptions } from './useFirewallFetchOptions';
-import { handleValueChange, resolveSelectedValues } from './utils';
+import {
+  handleValueChange,
+  isMaxSelectionsReached,
+  isOptionDisabled,
+  resolveSelectedValues,
+} from './utils';
 
 import type { DimensionFilterAutocompleteProps } from './constants';
 
@@ -31,6 +36,7 @@ export const FirewallDimensionFilterAutocomplete = (
     serviceType,
     type,
     selectedRegions,
+    maxSelections,
   } = props;
 
   const { data: regions } = useRegionsQuery();
@@ -55,14 +61,40 @@ export const FirewallDimensionFilterAutocomplete = (
     isLoading,
   });
 
+  const maxReached = React.useMemo(() => {
+    return isMaxSelectionsReached(
+      multiple ?? false,
+      fieldValue ?? '',
+      maxSelections
+    );
+  }, [fieldValue, maxSelections, multiple]);
+
+  const showHelperText = !errorText && maxSelections !== undefined && multiple;
+  const disableSelectAll =
+    maxSelections !== undefined && multiple
+      ? values.length > maxSelections
+      : false;
+
   return (
     <Autocomplete
       data-qa-dimension-filter={`${name}-value`}
       data-testid="value"
       disabled={disabled}
+      disableSelectAll={disableSelectAll}
       errorText={
         errorText ?? (isError ? 'Failed to fetch the values.' : undefined)
       }
+      getOptionDisabled={(option) => {
+        return isOptionDisabled({
+          maxReached,
+          value: fieldValue ?? undefined,
+          multiple: multiple ?? false,
+          option,
+        });
+      }}
+      helperText={
+        showHelperText ? `Select up to ${maxSelections} values` : undefined
+      }
       isOptionEqualToValue={(option, value) => value.value === option.value}
       label="Value"
       limitTags={1}

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ObjectStorageDimensionFilterAutocomplete.tsx

@@ -4,7 +4,12 @@ import React from 'react';
 
 import { useCleanupStaleValues } from './useCleanupStaleValues';
 import { useObjectStorageFetchOptions } from './useObjectStorageFetchOptions';
-import { handleValueChange, resolveSelectedValues } from './utils';
+import {
+  handleValueChange,
+  isMaxSelectionsReached,
+  isOptionDisabled,
+  resolveSelectedValues,
+} from './utils';
 
 import type { DimensionFilterAutocompleteProps } from './constants';
 
@@ -29,6 +34,7 @@ export const ObjectStorageDimensionFilterAutocomplete = (
     selectedRegions,
     serviceType,
     type,
+    maxSelections,
   } = props;
 
   const { data: regions } = useRegionsQuery();
@@ -50,15 +56,41 @@ export const ObjectStorageDimensionFilterAutocomplete = (
     isLoading,
   });
 
+  const maxReached = React.useMemo(() => {
+    return isMaxSelectionsReached(
+      multiple ?? false,
+      fieldValue ?? '',
+      maxSelections
+    );
+  }, [fieldValue, maxSelections, multiple]);
+
+  const showHelperText = !errorText && maxSelections !== undefined && multiple;
+  const disableSelectAll =
+    maxSelections !== undefined && multiple
+      ? values.length > maxSelections
+      : false;
+
   return (
     <Autocomplete
       data-qa-dimension-filter={`${name}-value`}
       data-testid="value"
       disabled={disabled}
+      disableSelectAll={disableSelectAll}
       errorText={
         errorText ??
         (isError ? 'Failed to fetch Object Storage endpoints.' : undefined)
       }
+      getOptionDisabled={(option) => {
+        return isOptionDisabled({
+          maxReached,
+          value: fieldValue ?? undefined,
+          multiple: multiple ?? false,
+          option,
+        });
+      }}
+      helperText={
+        showHelperText ? `Select up to ${maxSelections} values` : undefined
+      }
       isOptionEqualToValue={(option, value) => value.value === option.value}
       label="Value"
       limitTags={1}

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ValueFieldRenderer.tsx

@@ -1,6 +1,8 @@
 import { TextField } from '@linode/ui';
 import React from 'react';
 
+import { useFlags } from 'src/hooks/useFlags';
+
 import { BlockStorageDimensionFilterAutocomplete } from './BlockStorageDimensionFilterAutocomplete';
 import {
   MULTISELECT_PLACEHOLDER_TEXT,
@@ -102,12 +104,18 @@ export const ValueFieldRenderer = (props: ValueFieldRendererProps) => {
     onChange,
     operator,
     scope,
-    selectedRegions,
-    serviceType,
-    type = 'alerts',
     value,
     values,
+    type = 'alerts',
+    selectedRegions,
+    serviceType,
   } = props;
+
+  const flags = useFlags();
+
+  const maxDimensionFiltersValues =
+    flags.aclpAlerting?.maxDimensionFiltersValues ?? undefined;
+
   // Use operator group for config lookup
   const operatorGroup = getOperatorGroup(operator);
   let dimensionConfig: Record<OperatorGroup, ValueFieldConfig>;
@@ -165,6 +173,7 @@ export const ValueFieldRenderer = (props: ValueFieldRendererProps) => {
       placeholderText: config.placeholder ?? autocompletePlaceholder,
       serviceType: serviceType ?? null,
       type,
+      maxSelections: maxDimensionFiltersValues,
     };
 
     // Determine custom fetch behaviour if there are same dimension_labels across service types

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ValueSchemas.ts

@@ -272,5 +272,35 @@ export const getDimensionFilterValueSchema = ({
   if (['endswith', 'startswith'].includes(operator)) {
     return string().max(100, LENGTH_ERROR_MESSAGE).concat(baseValueSchema);
   }
+
+  if (operator === 'in') {
+    // here it is always autocomplete with comma separated values
+    return string()
+      .test(
+        'max-comma-values',
+        'More than max values selected',
+        function (value) {
+          if (!value) return true;
+
+          const { maxDimensionFilterValues } = this.options.context ?? {};
+
+          if (!maxDimensionFilterValues) return true; // if not passed, skip the check
+
+          const count = value
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean).length;
+
+          return (
+            count <= maxDimensionFilterValues ||
+            this.createError({
+              message: `Select up to ${maxDimensionFilterValues} values`,
+            })
+          );
+        }
+      )
+      .concat(baseValueSchema);
+  }
+
   return baseValueSchema;
 };

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/constants.ts

@@ -428,6 +428,10 @@ export interface DimensionFilterAutocompleteProps {
    * Current raw string value (or null) from the form state.
    */
   fieldValue: null | string;
+  /**
+   * The maximum number of selections allowed (for multi-select).
+   */
+  maxSelections?: number;
   /**
    * To control single-select/multi-select in the Autocomplete.
    */