@nocobase/client-v2 2.2.0-beta.14 → 2.2.0-beta.16

package/src/flow/components/FieldAssignValueInput.tsx

@@ -42,6 +42,12 @@ import { normalizeFilterValueByOperator } from '../models/blocks/filter-form/val
 import { FieldAssignExactDatePicker, type ExactDatePickerMode } from './FieldAssignExactDatePicker';
 import { limitAssociationMetaTree } from './filter/metaTreeAssociationDepth';
 
+type VariableInputConverters = {
+  renderInputComponent?: (metaTreeNode: MetaTreeNode | null) => React.ComponentType<any> | null;
+  resolvePathFromValue?: (value: any) => string[] | undefined;
+  resolveValueFromPath?: (metaTreeNode: MetaTreeNode) => any;
+};
+
 const DATE_FIELD_INTERFACES = new Set(['date', 'datetime', 'datetimeNoTz', 'createdAt', 'updatedAt', 'unixTimestamp']);
 
 const TZ_AWARE_DATE_INTERFACES = new Set(['datetime', 'createdAt', 'updatedAt', 'unixTimestamp']);
@@ -341,7 +347,11 @@ interface Props {
    * 默认 false，保持历史行为。
    */
   enableDateVariableAsConstant?: boolean;
+  /** 是否允许在变量选择器中使用 RunJS。默认 true，保持历史行为。 */
+  allowRunJS?: boolean;
   maxAssociationFieldDepth?: number;
+  disabled?: boolean;
+  variableConverters?: VariableInputConverters;
 }
 
 type ResolvedFieldContext = {
@@ -712,7 +722,10 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   preferFormItemFieldModel,
   associationFieldNamesOverride,
   enableDateVariableAsConstant = false,
+  allowRunJS = true,
   maxAssociationFieldDepth = 2,
+  disabled = false,
+  variableConverters,
 }) => {
   const flowCtx = useFlowContext<FlowModelContext>();
   const normalizeEventValue = React.useCallback((eventOrValue: unknown) => {
@@ -1077,7 +1090,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       fm.setStepParams('selectSettings', 'fieldNames', { label: overrideLabel });
     }
     fm?.setProps?.({
-      disabled: false,
+      disabled,
       readPretty: false,
       pattern: 'editable',
       updateAssociation: false,
@@ -1140,6 +1153,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
     preferFormItemFieldModel,
     associationFieldNamesOverride?.label,
     associationFieldNamesOverride?.value,
+    disabled,
   ]);
 
   // 当传入 operator / operatorMetaList 时，按 operator schema 适配临时字段的输入组件与 props。
@@ -1192,6 +1206,9 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       React.useEffect(() => {
         const coercedValue = coerceEmptyValueForRenderer(inputProps?.value);
         const handleChange = (ev: any) => {
+          if (inputProps?.disabled) {
+            return;
+          }
           const nextRaw = normalizeEventValue(ev);
           const normalizedForStore = operator ? normalizeFilterValueByOperator(operator, nextRaw) : nextRaw;
           const nextValue = coerceEmptyValueForRenderer(normalizedForStore);
@@ -1223,6 +1240,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
             value={inputProps?.value}
             onChange={(e) => inputProps?.onChange?.(normalizeEventValue(e))}
             placeholder={placeholder}
+            disabled={inputProps?.disabled}
             style={withFullWidthStyle(wrapperStyle)}
           />
         );
@@ -1241,6 +1259,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
     const C: React.FC<any> = (inputProps) => {
       const wrapperStyle = pickStyle(inputProps?.style);
       const raw = inputProps?.value;
+      const isDisabled = Boolean(inputProps?.disabled);
       const parsed = isCtxDateExpression(raw) ? parseCtxDateExpression(raw) : raw;
       const parsedValue = typeof parsed === 'undefined' ? undefined : parsed;
       const { token } = theme.useToken();
@@ -1265,6 +1284,9 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       });
 
       const handleSelect = (val: string) => {
+        if (isDisabled) {
+          return;
+        }
         setOpen(false);
         if (val === 'exact') {
           inputProps?.onChange?.('');
@@ -1279,10 +1301,16 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       };
 
       const handleExactSingleChange = (nextValue: any) => {
+        if (isDisabled) {
+          return;
+        }
         inputProps?.onChange?.(nextValue || '');
       };
 
       const handleExactRangeChange = (nextValue: any) => {
+        if (isDisabled) {
+          return;
+        }
         inputProps?.onChange?.(nextValue || '');
       };
 
@@ -1327,7 +1355,11 @@ export const FieldAssignValueInput: React.FC<Props> = ({
           <Select
             options={options}
             open={open}
-            onDropdownVisibleChange={setOpen}
+            onDropdownVisibleChange={(nextOpen) => {
+              if (!isDisabled) {
+                setOpen(nextOpen);
+              }
+            }}
             allowClear={false}
             style={{
               width: '100%',
@@ -1337,13 +1369,18 @@ export const FieldAssignValueInput: React.FC<Props> = ({
             value={selectedType}
             onChange={handleSelect}
             dropdownRender={dropdownRender}
+            disabled={isDisabled}
           />
           {['past', 'next'].includes(selectedType) && [
             <InputNumber
               key="number"
               style={{ flex: 1 }}
               value={(parsedValue as any)?.number}
+              disabled={isDisabled}
               onChange={(nextNumber) => {
+                if (isDisabled) {
+                  return;
+                }
                 inputProps?.onChange?.({
                   ...(parsedValue as any),
                   type: selectedType,
@@ -1356,7 +1393,11 @@ export const FieldAssignValueInput: React.FC<Props> = ({
               key="unit"
               value={(parsedValue as any)?.unit}
               style={{ minWidth: 130, maxWidth: 140 }}
+              disabled={isDisabled}
               onChange={(nextUnit) => {
+                if (isDisabled) {
+                  return;
+                }
                 inputProps?.onChange?.({
                   ...(parsedValue as any),
                   type: selectedType,
@@ -1379,6 +1420,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
               isRange={isRange}
               value={isRange ? exactRangeValue : exactSingleValue}
               onChange={isRange ? handleExactRangeChange : handleExactSingleChange}
+              disabled={isDisabled}
               style={{ flex: 1 }}
             />
           )}
@@ -1398,7 +1440,12 @@ export const FieldAssignValueInput: React.FC<Props> = ({
 
   const RunJSComponent = React.useMemo(() => {
     const C: React.FC<any> = (inputProps) => (
-      <RunJSValueEditor t={flowCtx.t} value={inputProps?.value} onChange={inputProps?.onChange} />
+      <RunJSValueEditor
+        t={flowCtx.t}
+        value={inputProps?.value}
+        onChange={inputProps?.onChange}
+        disabled={inputProps?.disabled}
+      />
     );
     return C;
   }, [flowCtx]);
@@ -1421,11 +1468,13 @@ export const FieldAssignValueInput: React.FC<Props> = ({
           render: ConstantEditor,
         },
         { title: tExpr('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
-        { title: tExpr('RunJS'), name: 'runjs', type: 'object', paths: ['runjs'], render: RunJSComponent },
+        ...(allowRunJS
+          ? [{ title: tExpr('RunJS'), name: 'runjs', type: 'object', paths: ['runjs'], render: RunJSComponent }]
+          : []),
         ...limitedBase,
       ];
     };
-  }, [flowCtx, ConstantEditor, NullComponent, RunJSComponent, maxAssociationFieldDepth]);
+  }, [flowCtx, ConstantEditor, NullComponent, RunJSComponent, allowRunJS, maxAssociationFieldDepth]);
 
   const displayValue = React.useMemo(() => {
     if (!useDateVariableConstant) {
@@ -1442,6 +1491,10 @@ export const FieldAssignValueInput: React.FC<Props> = ({
 
   const handleVariableInputChange = React.useCallback(
     (nextValue: any) => {
+      if (disabled) {
+        return;
+      }
+
       if (!useDateVariableConstant) {
         onChange(nextValue);
         return;
@@ -1449,7 +1502,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
 
       onChange(normalizeDateVariableOutput(nextValue, dateVariableComponentProps));
     },
-    [dateVariableComponentProps, onChange, useDateVariableConstant],
+    [dateVariableComponentProps, disabled, onChange, useDateVariableConstant],
   );
 
   if (!fieldPath) {
@@ -1464,26 +1517,40 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       metaTree={metaTree}
       style={{ width: '100%' }}
       clearValue={''}
+      disabled={disabled}
       converters={{
+        ...variableConverters,
         renderInputComponent: (meta) => {
+          const external = variableConverters?.renderInputComponent?.(meta ?? null);
+          if (external) {
+            return external;
+          }
           const firstPath = meta?.paths?.[0];
           if (firstPath === 'constant') return ConstantEditor;
           if (firstPath === 'null') return NullComponent;
-          if (firstPath === 'runjs') return RunJSComponent;
+          if (allowRunJS && firstPath === 'runjs') return RunJSComponent;
           return null;
         },
         resolveValueFromPath: (item) => {
+          const external = variableConverters?.resolveValueFromPath?.(item);
+          if (external !== undefined) {
+            return external;
+          }
           const firstPath = item?.paths?.[0];
           if (firstPath === 'constant') {
             return useDateVariableConstant ? { type: 'today' } : '';
           }
           if (firstPath === 'null') return null;
-          if (firstPath === 'runjs') return { code: '', version: 'v2' };
+          if (allowRunJS && firstPath === 'runjs') return { code: '', version: 'v2' };
           return undefined;
         },
         resolvePathFromValue: (currentValue) => {
+          const external = variableConverters?.resolvePathFromValue?.(currentValue);
+          if (external !== undefined) {
+            return external;
+          }
           if (currentValue === null) return ['null'];
-          if (isRunJSValue(currentValue)) return ['runjs'];
+          if (allowRunJS && isRunJSValue(currentValue)) return ['runjs'];
           if (useDateVariableConstant && isCtxDateExpression(currentValue)) {
             return ['constant'];
           }

package/src/flow/components/FlowRoute.tsx

@@ -8,9 +8,11 @@
  */
 
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
+import { Button, Result } from 'antd';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { deviceType } from 'react-device-detect';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { getModernClientPrefix, stripModernClientPrefix } from '../../authRedirect';
 import { useApp } from '../../hooks/useApp';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../flow-compat';
 import {
@@ -22,12 +24,14 @@ import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutM
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
 import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
+import { registerDeviceTypeContext } from '../internal/registerDeviceTypeContext';
 
 type FlowRouteGuardState = {
   pageUid?: string;
   pending: boolean;
   allowBridge: boolean;
   notFound: boolean;
+  legacyPageUnsupported?: boolean;
 };
 
 export type LegacyPageBehavior = 'redirect' | 'notFound' | 'bridge';
@@ -156,31 +160,9 @@ const BridgeFlowRoute = ({
   const layoutContentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    flowEngine.context.defineProperty('deviceType', {
-      get: () => (deviceType === 'browser' ? 'computer' : deviceType),
-      cache: false,
-      meta: {
-        type: 'string',
-        title: flowEngine.translate('Current device type'),
-        interface: 'select',
-        uiSchema: {
-          enum: [
-            { label: flowEngine.translate('Computer'), value: 'computer' },
-            { label: flowEngine.translate('Mobile'), value: 'mobile' },
-            { label: flowEngine.translate('Tablet'), value: 'tablet' },
-            { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
-            { label: flowEngine.translate('Console'), value: 'console' },
-            { label: flowEngine.translate('Wearable'), value: 'wearable' },
-            { label: flowEngine.translate('Embedded'), value: 'embedded' },
-          ],
-          'x-component': 'Select',
-        },
-      },
-      info: {
-        description: 'Current device type (computer/mobile/tablet/...).',
-        detail: 'string',
-      },
-    });
+    if (!flowEngine.context.getPropertyOptions('deviceType')) {
+      registerDeviceTypeContext(flowEngine);
+    }
   }, [flowEngine]);
 
   useLayoutRoutePage({
@@ -195,11 +177,58 @@ const BridgeFlowRoute = ({
   return <div ref={layoutContentRef} />;
 };
 
+type RouteLocation = {
+  pathname: string;
+  search: string;
+  hash: string;
+};
+
+const getLegacyPageHref = (app: { getPublicPath: () => string }, location: RouteLocation) => {
+  const modernPublicPath = app.getPublicPath();
+  const browserLocationMatchesPublicPath = window.location.pathname.startsWith(modernPublicPath);
+  const currentLocation = browserLocationMatchesPublicPath ? window.location : location;
+  const pathWithinModernClient = currentLocation.pathname.startsWith(modernPublicPath)
+    ? currentLocation.pathname.slice(modernPublicPath.length)
+    : currentLocation.pathname.replace(/^\/+/, '');
+  return `${stripModernClientPrefix(modernPublicPath)}${pathWithinModernClient}${currentLocation.search}${
+    currentLocation.hash
+  }`;
+};
+
+const LegacyPageUnsupported = ({
+  app,
+  location,
+}: {
+  app: { getPublicPath: () => string };
+  location: RouteLocation;
+}) => {
+  const { t } = useTranslation();
+  const modernClientPath = `/${getModernClientPrefix()}/`;
+  const withModernClientPath = (message: string) => message.replaceAll('{{modernClientPath}}', modernClientPath);
+
+  return (
+    <Result
+      status="warning"
+      title={withModernClientPath(t('This page is not supported in the {{modernClientPath}} branch'))}
+      subTitle={withModernClientPath(
+        t(
+          'The {{modernClientPath}} branch only supports new pages. This page is a legacy page. Please open it from the original entry.',
+        ),
+      )}
+      extra={
+        <Button href={getLegacyPageHref(app, location)} type="primary">
+          {t('Open from the original entry')}
+        </Button>
+      }
+    />
+  );
+};
+
 /**
  * 管理后台动态页面路由组件。
  *
- * 负责读取当前路由页面 UID，补充运行时设备变量，
- * 并把页面生命周期桥接到 AdminLayout host model。
+ * 负责读取当前路由页面 UID，并把页面生命周期桥接到 AdminLayout host model。
+ * 设备变量通常由 PluginFlowEngine 共享初始化提供；独立渲染时会在挂载后补充注册。
  *
  * @example
  * ```tsx
@@ -377,7 +406,13 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
 
         if (target.reason === 'unsupportedV2Runtime') {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+            setGuardState({
+              pageUid,
+              pending: false,
+              allowBridge: false,
+              notFound: false,
+              legacyPageUnsupported: true,
+            });
           }
           return;
         }
@@ -414,6 +449,10 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
       return <AppNotFound />;
     }
 
+    if (guardState.legacyPageUnsupported) {
+      return <LegacyPageUnsupported app={app} location={location} />;
+    }
+
     if (!guardState.allowBridge) {
       return null;
     }
@@ -421,11 +460,14 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
   }, [
     active,
+    app,
     getLayoutModel,
     guardState.allowBridge,
+    guardState.legacyPageUnsupported,
     guardState.notFound,
     guardState.pageUid,
     guardState.pending,
+    location,
     pageUid,
   ]);
 

package/src/flow/components/RunJSValueEditor.tsx

@@ -15,6 +15,7 @@ export interface RunJSValueEditorProps {
   t?: (key: string) => string;
   value?: unknown;
   onChange?: (value: RunJSValue) => void;
+  disabled?: boolean;
   height?: string;
   scene?: string;
   containerStyle?: React.CSSProperties;
@@ -25,6 +26,7 @@ export const RunJSValueEditor: React.FC<RunJSValueEditorProps> = (props) => {
     t,
     value,
     onChange,
+    disabled,
     height = '200px',
     scene = 'formValue',
     containerStyle = { flex: 1, minWidth: 0 },
@@ -38,9 +40,15 @@ export const RunJSValueEditor: React.FC<RunJSValueEditorProps> = (props) => {
     <div style={containerStyle}>
       <CodeEditor
         value={current.code}
-        onChange={(code) => onChange?.({ ...current, code })}
+        onChange={(code) => {
+          if (disabled) {
+            return;
+          }
+          onChange?.({ ...current, code });
+        }}
         version={current.version}
         height={height}
+        readonly={disabled}
         enableLinter
         placeholder={placeholderText}
         scene={scene}

package/src/flow/components/__tests__/FieldAssignValueInput.context.test.tsx

@@ -12,9 +12,10 @@ import { describe, expect, it, vi } from 'vitest';
 import { render, waitFor } from '@nocobase/test/client';
 import { FieldAssignValueInput } from '../FieldAssignValueInput';
 
-const { mockUseFlowContext, mockGetDefaultBindingByField } = vi.hoisted(() => ({
+const { mockUseFlowContext, mockGetDefaultBindingByField, mockVariableInput } = vi.hoisted(() => ({
   mockUseFlowContext: vi.fn(),
   mockGetDefaultBindingByField: vi.fn(),
+  mockVariableInput: vi.fn(() => <div data-testid="variable-input" />),
 }));
 
 vi.mock('@nocobase/flow-engine', async () => {
@@ -25,7 +26,7 @@ vi.mock('@nocobase/flow-engine', async () => {
   return {
     ...actual,
     useFlowContext: () => mockUseFlowContext(),
-    VariableInput: () => <div data-testid="variable-input" />,
+    VariableInput: mockVariableInput,
     FlowModelRenderer: () => <div data-testid="flow-model-renderer" />,
     EditableItemModel: MockEditableItemModel,
   };
@@ -131,4 +132,85 @@ describe('FieldAssignValueInput context', () => {
     });
     expect(engine.createModel).toHaveBeenCalledWith(expect.any(Object), { delegate: sourceContext });
   });
+
+  it('lets callers override variable path parsing for domain-specific stored formats', async () => {
+    mockVariableInput.mockClear();
+    const sourceContext = {
+      dataSourceManager: {
+        getDataSource: vi.fn(() => ({})),
+      },
+      t: (key: string) => key,
+    };
+    const fieldModel = {
+      props: {},
+      setProps: vi.fn(),
+      dispatchEvent: vi.fn(),
+      remove: vi.fn(),
+    };
+    const tempRoot = {
+      context: {
+        defineProperty: vi.fn(),
+      },
+      subModels: {
+        fields: [fieldModel],
+      },
+      setProps: vi.fn(),
+      remove: vi.fn(),
+    };
+    const engine = {
+      createModel: vi.fn(() => tempRoot),
+    };
+    const collectionField = {
+      name: 'status',
+      interface: 'input',
+      uiSchema: { 'x-component': 'Input' },
+      isAssociationField: () => false,
+      getComponentProps: () => ({}),
+    };
+    const collection = {
+      dataSourceKey: 'main',
+      name: 'tasks',
+      getField: (name: string) => (name === 'status' ? collectionField : null),
+      getFields: () => [collectionField],
+    };
+    const formModel = {
+      context: { ...sourceContext, engine, collection, blockModel: null as any },
+      collection,
+      subModels: {},
+    };
+    formModel.context.blockModel = formModel;
+
+    mockGetDefaultBindingByField.mockReturnValue({ modelName: 'InputFieldModel' });
+    mockUseFlowContext.mockReturnValue({
+      model: formModel,
+      t: (key: string) => key,
+      getPropertyMetaTree: vi.fn(async () => []),
+    });
+
+    const variableConverters = {
+      resolvePathFromValue: vi.fn((value: string) =>
+        value === '{{$context.data.updatedAt}}' ? ['$context', 'data', 'updatedAt'] : undefined,
+      ),
+      resolveValueFromPath: vi.fn(() => undefined),
+    };
+
+    render(
+      <FieldAssignValueInput
+        targetPath="status"
+        value="{{$context.data.updatedAt}}"
+        onChange={vi.fn()}
+        variableConverters={variableConverters}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(engine.createModel).toHaveBeenCalled();
+    });
+    const latestVariableInputCall = mockVariableInput.mock.calls.at(-1)?.[0];
+    expect(latestVariableInputCall.converters.resolvePathFromValue('{{$context.data.updatedAt}}')).toEqual([
+      '$context',
+      'data',
+      'updatedAt',
+    ]);
+  });
 });

package/src/flow/components/filter/FilterGroup.tsx

@@ -45,6 +45,7 @@ interface FilterGroupProps {
   value: Record<string, any>;
   /** 自定义筛选项组件 */
   FilterItem?: React.FC<FilterItemProps>;
+  disabled?: boolean;
   closeIcon?: ReactNode;
   /** 是否显示边框 */
   showBorder?: boolean;
@@ -89,6 +90,7 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
     const {
       value = { logic: '$and', items: [] },
       FilterItem,
+      disabled = false,
       showBorder = false,
       onRemove,
       onChange,
@@ -120,11 +122,17 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
         };
 
     const handleLogicChange = (newLogic: '$and' | '$or') => {
+      if (disabled) {
+        return;
+      }
       value.logic = newLogic;
       onChange?.(value);
     };
 
     const handleAddCondition = () => {
+      if (disabled) {
+        return;
+      }
       items.push({
         path: '',
         operator: '',
@@ -134,6 +142,9 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
     };
 
     const handleAddConditionGroup = () => {
+      if (disabled) {
+        return;
+      }
       items.push({
         logic: '$and',
         items: [],
@@ -142,6 +153,9 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
     };
 
     const handleRemoveItem = (index: number) => {
+      if (disabled) {
+        return;
+      }
       items.splice(index, 1);
       onChange?.(value);
     };
@@ -160,11 +174,12 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
           <button
             type="button"
             aria-label="icon-close"
+            disabled={disabled}
             style={{
               position: 'absolute',
               right: 10,
               top: 10,
-              cursor: 'pointer',
+              cursor: disabled ? 'not-allowed' : 'pointer',
               background: 'transparent',
               border: 0,
               padding: 0,
@@ -182,6 +197,7 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
               data-testid="filter-select-all-or-any"
               style={{ width: 'auto' }}
               value={logic}
+              disabled={disabled}
               onChange={handleLogicChange}
             >
               <Select.Option value="$and">{t('All')}</Select.Option>
@@ -200,6 +216,7 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
                   key={getFilterItemKey(item)}
                   value={item}
                   FilterItem={FilterItem}
+                  disabled={disabled}
                   showBorder={true}
                   onRemove={() => handleRemoveItem(index)}
                   onChange={(v) => {
@@ -221,11 +238,12 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
                       <button
                         type="button"
                         aria-label="icon-close"
+                        disabled={disabled}
                         style={{
                           marginLeft: 8,
                           marginRight: 8,
                           flex: '0 0 auto',
-                          cursor: 'pointer',
+                          cursor: disabled ? 'not-allowed' : 'pointer',
                           background: 'transparent',
                           border: 0,
                           padding: 0,
@@ -251,11 +269,12 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
                       <button
                         type="button"
                         aria-label="icon-close"
+                        disabled={disabled}
                         style={{
                           marginLeft: 8,
                           marginRight: 8,
                           flex: '0 0 auto',
-                          cursor: 'pointer',
+                          cursor: disabled ? 'not-allowed' : 'pointer',
                           background: 'transparent',
                           border: 0,
                           padding: 0,
@@ -277,11 +296,12 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
                     <button
                       type="button"
                       aria-label="icon-close"
+                      disabled={disabled}
                       style={{
                         marginLeft: 8,
                         marginRight: 8,
                         flex: '0 0 auto',
-                        cursor: 'pointer',
+                        cursor: disabled ? 'not-allowed' : 'pointer',
                         background: 'transparent',
                         border: 0,
                         padding: 0,
@@ -298,7 +318,14 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
         </div>
 
         <Space size={16} style={{ marginTop: 8, marginBottom: 8 }}>
-          <Button style={{ padding: 0 }} type="link" size="small" icon={<PlusOutlined />} onClick={handleAddCondition}>
+          <Button
+            style={{ padding: 0 }}
+            type="link"
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={handleAddCondition}
+            disabled={disabled}
+          >
             {t('Add condition')}
           </Button>
           <Button
@@ -307,6 +334,7 @@ export const FilterGroup: FC<FilterGroupProps> = observer(
             size="small"
             icon={<PlusOutlined />}
             onClick={handleAddConditionGroup}
+            disabled={disabled}
           >
             {t('Add condition group')}
           </Button>