feat(filter-input): add disabled chip support [AS-801] (#71)

pigarevaoks · claude · web-flow · commit 0dbb922eae9f · 2026-04-02T17:02:44.000+02:00
Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/design-system/src/components/FilterInput/FilterInputField/ChipsWithGaps.tsx b/packages/design-system/src/components/FilterInput/FilterInputField/ChipsWithGaps.tsx
@@ -49,8 +49,13 @@ export const ChipsWithGaps: FC<ChipsWithGapsProps> = ({
             valueParts={chip.valueParts}
             valueSeparator={chip.valueSeparator}
             errorValueIndices={chip.errorValueIndices}
-            onRemove={() => onChipRemove(chip.id)}
-            onSegmentClick={(segment, anchorRect) => onChipClick(chip.id, segment, anchorRect)}
+            disabled={chip.disabled}
+            onRemove={chip.disabled ? undefined : () => onChipRemove(chip.id)}
+            onSegmentClick={
+              chip.disabled
+                ? undefined
+                : (segment, anchorRect) => onChipClick(chip.id, segment, anchorRect)
+            }
           />
         </div>,
       );
diff --git a/packages/design-system/src/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.tsx b/packages/design-system/src/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.tsx
@@ -21,6 +21,8 @@ export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement
   valueSeparator?: string;
   errorValueIndices?: number[];
   building?: boolean;
+  /** When true, the chip cannot be edited or removed (dimmed appearance) */
+  disabled?: boolean;
   onRemove?: () => void;
   onSegmentClick?: (segment: ChipSegment, anchorRect: DOMRect) => void;
 }
@@ -36,12 +38,13 @@ export const FilterInputChip: FC<FilterInputChipProps> = ({
   valueSeparator,
   errorValueIndices,
   building = false,
+  disabled = false,
   onRemove,
   onSegmentClick,
   className,
   ...props
 }) => {
-  const interactive = !building;
+  const interactive = !building && !disabled;
   const hasError = !!error;
   const internalRef = useRef<HTMLDivElement>(null);
 
@@ -85,7 +88,11 @@ export const FilterInputChip: FC<FilterInputChipProps> = ({
   return (
     <div
       ref={setRefs}
-      className={cn(chipVariants({ error: hasError, interactive }), 'max-w-[600px]', className)}
+      className={cn(
+        chipVariants({ error: hasError, interactive, disabled }),
+        'max-w-[600px]',
+        className,
+      )}
       data-slot='filter-input-condition-chip'
       {...props}
     >
@@ -125,7 +132,7 @@ export const FilterInputChip: FC<FilterInputChipProps> = ({
 
       {building && <ChipSearchInput />}
 
-      {onRemove && <FilterInputRemoveButton error={hasError} onRemove={onRemove} />}
+      {onRemove && !disabled && <FilterInputRemoveButton error={hasError} onRemove={onRemove} />}
     </div>
   );
 };
diff --git a/packages/design-system/src/components/FilterInput/FilterInputField/FilterInputChip/classes.ts b/packages/design-system/src/components/FilterInput/FilterInputField/FilterInputChip/classes.ts
@@ -13,13 +13,18 @@ export const chipVariants = cva(
         true: 'cursor-pointer',
         false: '',
       },
+      disabled: {
+        true: 'opacity-50 cursor-default',
+        false: '',
+      },
     },
     compoundVariants: [
       { interactive: false, error: false, className: 'border-border-strong-primary' },
     ],
     defaultVariants: {
       error: false,
       interactive: false,
+      disabled: false,
     },
   },
 );
diff --git a/packages/design-system/src/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.ts b/packages/design-system/src/components/FilterInput/hooks/useFilterInputAutocomplete/useFilterInputAutocomplete.ts
@@ -68,6 +68,8 @@ export const useFilterInputAutocomplete = ({
   // Refs keep values fresh for callbacks to avoid stale closures and unnecessary recreation
   const effectiveInsertIndexRef = useRef(effectiveInsertIndex);
   effectiveInsertIndexRef.current = effectiveInsertIndex;
+  const conditionsRef = useRef(conditions);
+  conditionsRef.current = conditions;
   const conditionsLengthRef = useRef(conditions.length);
   conditionsLengthRef.current = conditions.length;
 
@@ -181,6 +183,7 @@ export const useFilterInputAutocomplete = ({
     isFocused,
     fields,
     inputRef,
+    conditionsRef,
     conditionsLengthRef,
     effectiveInsertIndexRef,
     setInputText,
diff --git a/packages/design-system/src/components/FilterInput/hooks/useFilterInputAutocomplete/useInputHandlers.ts b/packages/design-system/src/components/FilterInput/hooks/useFilterInputAutocomplete/useInputHandlers.ts
@@ -1,7 +1,7 @@
 import type { ChangeEvent, KeyboardEvent, MutableRefObject, RefObject } from 'react';
 import { useCallback, useRef } from 'react';
 import { getOperatorFromLabel, hasFieldValues, OPERATOR_SYMBOLS } from '../../lib';
-import type { FieldMetadata, FilterOperator, MenuState } from '../../types';
+import type { Condition, FieldMetadata, FilterOperator, MenuState } from '../../types';
 
 interface UseInputHandlersDeps {
   inputText: string;
@@ -10,6 +10,7 @@ interface UseInputHandlersDeps {
   isFocused: boolean;
   fields: FieldMetadata[];
   inputRef: RefObject<HTMLInputElement | null>;
+  conditionsRef: MutableRefObject<Condition[]>;
   conditionsLengthRef: MutableRefObject<number>;
   effectiveInsertIndexRef: MutableRefObject<number>;
   setInputText: (text: string) => void;
@@ -29,6 +30,7 @@ export const useInputHandlers = ({
   isFocused,
   fields,
   inputRef,
+  conditionsRef,
   conditionsLengthRef,
   effectiveInsertIndexRef,
   setInputText,
@@ -133,7 +135,7 @@ export const useInputHandlers = ({
       ) {
         e.preventDefault();
         const removeIdx = effectiveInsertIndexRef.current - 1;
-        if (removeIdx >= 0) {
+        if (removeIdx >= 0 && !conditionsRef.current[removeIdx]?.disabled) {
           removeConditionAtIndex(removeIdx);
           setInsertIndex(prev => {
             const eff = prev ?? conditionsLengthRef.current;
@@ -155,6 +157,7 @@ export const useInputHandlers = ({
       setInputText,
       setMenuState,
       setInsertIndex,
+      conditionsRef,
       conditionsLengthRef,
       effectiveInsertIndexRef,
     ],
diff --git a/packages/design-system/src/components/FilterInput/hooks/useFilterInputExpression/buildChips.ts b/packages/design-system/src/components/FilterInput/hooks/useFilterInputExpression/buildChips.ts
@@ -40,6 +40,7 @@ const buildBaseChip = (i: number, condition: Condition, field: FieldMetadata | u
   operator: condition.operator
     ? getOperatorLabel(condition.operator, field?.type || DEFAULT_FIELD_TYPE)
     : undefined,
+  ...(condition.disabled && { disabled: true }),
 });
 
 /** Build chip for a date range condition (between) */
diff --git a/packages/design-system/src/components/FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.ts b/packages/design-system/src/components/FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.ts
@@ -164,6 +164,9 @@ export const useFilterInputExpression = ({
       if (idx === null) return;
 
       setState(prev => {
+        // Do not remove disabled conditions
+        if (prev.conditions[idx]?.disabled) return prev;
+
         const newConditions = prev.conditions.filter((_, i) => i !== idx);
         const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
 
@@ -179,6 +182,8 @@ export const useFilterInputExpression = ({
     (idx: number) => {
       setState(prev => {
         if (idx < 0 || idx >= prev.conditions.length) return prev;
+        // Do not remove disabled conditions
+        if (prev.conditions[idx]?.disabled) return prev;
         const newConditions = prev.conditions.filter((_, i) => i !== idx);
         const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
 
@@ -191,8 +196,17 @@ export const useFilterInputExpression = ({
   );
 
   const clearAll = useCallback(() => {
-    setState(EMPTY_STATE);
-    onChange?.(null);
+    setState(prev => {
+      const disabledConditions = prev.conditions.filter(c => c.disabled);
+      if (disabledConditions.length === 0) {
+        onChange?.(null);
+        return EMPTY_STATE;
+      }
+      // Keep disabled conditions and their connectors
+      const next = { conditions: disabledConditions, connectors: [] as Array<'and' | 'or'> };
+      onChange?.(buildExpression(next.conditions, next.connectors));
+      return next;
+    });
   }, [onChange]);
 
   const setConnectorValue = useCallback(
diff --git a/packages/design-system/src/components/FilterInput/stories/FilterInput.stories.tsx b/packages/design-system/src/components/FilterInput/stories/FilterInput.stories.tsx
@@ -199,3 +199,69 @@ export const ErrorWithValue: Story = {
     );
   },
 };
+
+/**
+ * Disabled chips cannot be edited or removed.
+ * They appear dimmed and do not react to clicks.
+ * Useful for locked filter conditions (e.g. drill-down context in investigation flows).
+ */
+export const WithDisabledChips: Story = {
+  render: () => {
+    const [expression, setExpression] = useState<ExprNode | null>({
+      type: 'group',
+      operator: 'and',
+      children: [
+        { type: 'condition', field: 'country', operator: '=', value: 'US', disabled: true },
+        { type: 'condition', field: 'status', operator: '=', value: 'blocked', disabled: true },
+        { type: 'condition', field: 'priority', operator: '>', value: 5 },
+      ],
+    });
+
+    return (
+      <>
+        <FilterInput
+          fields={sampleFields}
+          value={expression}
+          onChange={setExpression}
+          placeholder='Add more filters...'
+        />
+        {expression && (
+          <div className='mt-16 p-4 bg-gray-100 rounded text-xs'>
+            <pre>{JSON.stringify(expression, null, 2)}</pre>
+          </div>
+        )}
+      </>
+    );
+  },
+};
+
+/**
+ * All chips disabled — clear button removes nothing, input still allows adding new chips.
+ */
+export const AllChipsDisabled: Story = {
+  render: () => {
+    const [expression, setExpression] = useState<ExprNode | null>({
+      type: 'group',
+      operator: 'and',
+      children: [
+        { type: 'condition', field: 'status', operator: '=', value: 'registered', disabled: true },
+        {
+          type: 'condition',
+          field: 'country',
+          operator: 'in',
+          value: ['US', 'DE'],
+          disabled: true,
+        },
+      ],
+    });
+
+    return (
+      <FilterInput
+        fields={sampleFields}
+        value={expression}
+        onChange={setExpression}
+        placeholder='Add more filters...'
+      />
+    );
+  },
+};
diff --git a/packages/design-system/src/components/FilterInput/stories/FilterInputChip.stories.tsx b/packages/design-system/src/components/FilterInput/stories/FilterInputChip.stories.tsx
@@ -190,6 +190,56 @@ export const InteractiveDeleteExample: StoryFn = () => {
   );
 };
 
+// ============================================================================
+// Disabled Chip Variants
+// ============================================================================
+
+/**
+ * Disabled chip — dimmed, not clickable, no remove button.
+ * Used for locked filter conditions (e.g. drill-down context).
+ */
+export const Disabled = Template.bind({});
+Disabled.args = {
+  attribute: 'IP Address',
+  operator: 'is',
+  value: '34.74.73.20',
+  disabled: true,
+};
+
+/**
+ * Disabled chip with onRemove — remove button is still hidden.
+ */
+export const DisabledWithOnRemove = Template.bind({});
+DisabledWithOnRemove.args = {
+  attribute: 'Host',
+  operator: 'is',
+  value: 'api.example.com',
+  disabled: true,
+  onRemove: () => alert('This should never fire'),
+};
+
+/**
+ * Mix of disabled and interactive chips.
+ */
+export const DisabledAndInteractiveMix: StoryFn = () => (
+  <div className='flex items-center gap-4'>
+    <FilterInputChip
+      attribute='IP Address'
+      operator='is'
+      value='34.74.73.20'
+      disabled
+      onRemove={() => undefined}
+    />
+    <FilterInputConnectorChip variant='and' />
+    <FilterInputChip
+      attribute='Country'
+      operator='is'
+      value='US'
+      onRemove={() => alert('Removed Country filter')}
+    />
+  </div>
+);
+
 // ============================================================================
 // Connector Variants
 // ============================================================================
@@ -250,6 +300,21 @@ export const AllStatesShowcase: StoryFn = () => (
       </div>
     </div>
 
+    {/* Disabled chip variants */}
+    <div>
+      <h3 className='text-sm font-medium text-text-primary mb-2'>Disabled Chip</h3>
+      <div className='flex items-center gap-2 flex-wrap'>
+        <FilterInputChip attribute='IP Address' operator='is' value='34.74.73.20' disabled />
+        <FilterInputChip
+          attribute='Host'
+          operator='is'
+          value='api.example.com'
+          disabled
+          onRemove={() => undefined}
+        />
+      </div>
+    </div>
+
     {/* Building chip variants */}
     <div>
       <h3 className='text-sm font-medium text-text-primary mb-2'>Building Chip</h3>
diff --git a/packages/design-system/src/components/FilterInput/types.ts b/packages/design-system/src/components/FilterInput/types.ts
@@ -24,6 +24,8 @@ export interface FilterInputChipData {
   valueSeparator?: string;
   /** Indices of invalid values in a multi-value chip (e.g. "in" operator) */
   errorValueIndices?: number[];
+  /** When true, the chip cannot be edited or removed */
+  disabled?: boolean;
 }
 
 /**
@@ -95,6 +97,8 @@ export interface Condition {
   error?: ChipErrorSegment;
   /** For date fields: tracks whether the value originated as relative preset or absolute date */
   dateOrigin?: 'relative' | 'absolute';
+  /** When true, the condition cannot be edited or removed */
+  disabled?: boolean;
 }
 
 /**
diff --git a/packages/design-system/src/icons/Link.tsx b/packages/design-system/src/icons/Link.tsx
@@ -0,0 +1,25 @@
+import type { FC } from 'react';
+import { SvgIcon, type SvgIconProps } from './SvgIcon';
+
+export const Link: FC<SvgIconProps> = props => (
+  <SvgIcon {...props} viewBox='0 0 24 24'>
+    <path
+      d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      fill='none'
+    />
+    <path
+      d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'
+      stroke='currentColor'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      fill='none'
+    />
+  </SvgIcon>
+);
+
+Link.displayName = 'LinkIcon';
diff --git a/packages/design-system/src/icons/index.ts b/packages/design-system/src/icons/index.ts
@@ -107,6 +107,7 @@ export { LayoutPanelLeft } from './LayoutPanelLeft';
 export { LayoutPanelTop } from './LayoutPanelTop';
 export { LayoutTemplate } from './LayoutTemplate';
 export { LibraryBig } from './LibraryBig';
+export { Link } from './Link';
 export { Loader } from './Loader';
 export { LoaderCircle } from './LoaderCircle';
 export { Lock } from './Lock';
