@nocobase/client-v2 2.2.0-beta.13 → 2.2.0-beta.15

package/src/components/form/filter/__tests__/useFilterActionProps.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FlowEngine, FlowEngineProvider, type Collection } from '@nocobase/flow-engine';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { useFilterActionProps } from '../useFilterActionProps';
+
+vi.mock('../../../flow/components/filter/useFilterOptions', () => ({
+  useFilterOptions: () => [],
+}));
+
+vi.mock('../CollectionFilterItem', () => ({
+  createCollectionFilterItem: () => undefined,
+}));
+
+function makeCollection(): Collection {
+  return {
+    getFields: () => [{ name: 'title' }, { name: 'type' }],
+  } as unknown as Collection;
+}
+
+function makeWrapper() {
+  const engine = new FlowEngine();
+  const Wrapper: React.FC = ({ children }) => <FlowEngineProvider engine={engine}>{children}</FlowEngineProvider>;
+  return Wrapper;
+}
+
+describe('useFilterActionProps', () => {
+  it('seeds the editable group from defaultValue when initialValue is missing', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+  });
+
+  it('reset restores defaultValue and emits its compiled filter', () => {
+    const onApply = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          initialValue: { $and: [{ title: { $includes: 'abc' } }] },
+          onApply,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    result.current.onReset();
+
+    expect(result.current.value).toMatchObject({
+      logic: '$and',
+      items: [
+        { path: 'title', operator: '$includes', value: '' },
+        { path: 'type', operator: '$eq', value: undefined },
+      ],
+    });
+    expect(onApply).toHaveBeenCalledWith(undefined, 'reset');
+  });
+
+  it('counts only effective compiled conditions, so empty default rows do not highlight the button', () => {
+    const { result } = renderHook(
+      () =>
+        useFilterActionProps({
+          collection: makeCollection(),
+          defaultValue: { $and: [{ title: { $includes: '' } }, { type: { $eq: undefined } }] },
+          onApply: () => undefined,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    expect(result.current.conditionCount).toBe(0);
+  });
+});

package/src/components/form/filter/index.ts

@@ -11,5 +11,7 @@
 export { CollectionFilter } from './CollectionFilter';
 export type { CollectionFilterProps } from './CollectionFilter';
 export { CollectionFilterPanel } from './CollectionFilterPanel';
+export { CollectionFilterItem } from './CollectionFilterItem';
+export type { CollectionFilterItemValue } from './CollectionFilterItem';
 export type { CollectionFilterPanelProps, CollectionFilterPanelRef } from './CollectionFilterPanel';
 export type { CompiledFilter } from './useFilterActionProps';

package/src/components/form/filter/useFilterActionProps.ts

@@ -43,6 +43,14 @@ const isCondition = (item: FilterGroupItem): item is CollectionFilterItemValue =
   typeof (item as CollectionFilterItemValue).path === 'string' &&
   Object.prototype.hasOwnProperty.call(item, 'operator');
 
+const cloneFilterGroupItem = (item: FilterGroupItem): FilterGroupItem =>
+  isGroup(item) ? { logic: item.logic, items: item.items.map((child) => cloneFilterGroupItem(child)) } : { ...item };
+
+const cloneFilterGroup = (group: FilterGroupValue): FilterGroupValue => ({
+  logic: group.logic,
+  items: group.items.map((item) => cloneFilterGroupItem(item)),
+});
+
 /**
  * `true` when the rhs of a condition is "no real value yet" — covers `undefined` / `null` / empty string / empty array / empty plain object. Mirrors v1's `removeNullCondition` `isEmpty` predicate so half-filled rows ("Locked time → is → (no date picked yet)") get dropped on Submit instead of being sent to the server as `{lockedTs:{}}` and triggering a 500.
  */
@@ -164,6 +172,8 @@ export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
   collection: Collection | undefined;
   /** Previously compiled filter param used to seed the editable filter group. */
   initialValue?: CompiledFilter;
+  /** Default compiled filter used both for initial empty state and Reset. */
+  defaultValue?: CompiledFilter;
   /**
    * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
    */
@@ -216,12 +226,23 @@ export interface UseFilterActionPropsResult {
  * ```
  */
 export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult {
-  const { collection, initialValue, onApply, filterableFieldNames, nonfilterableFieldNames, noIgnore, t } = args;
+  const {
+    collection,
+    initialValue,
+    defaultValue,
+    onApply,
+    filterableFieldNames,
+    nonfilterableFieldNames,
+    noIgnore,
+    t,
+  } = args;
+  const seedValue = initialValue ?? defaultValue;
+  const defaultGroup = decompileFilterGroup(defaultValue) || createEmptyGroup();
 
   // Held in a ref so the group object identity is stable for the lifetime of the host component — `<FilterContent>` mutates this object directly (push/splice on `items`, swap `logic`), and a fresh observable on every render would reset that internal state.
   const valueRef = useRef<FilterGroupValue>();
   if (!valueRef.current) {
-    valueRef.current = observable(decompileFilterGroup(initialValue) || createEmptyGroup()) as FilterGroupValue;
+    valueRef.current = observable(decompileFilterGroup(seedValue) || createEmptyGroup()) as FilterGroupValue;
   }
   const value = valueRef.current;
 
@@ -240,9 +261,10 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   });
 
   const onReset = useMemoizedFn(() => {
-    value.logic = '$and';
-    value.items = [];
-    onApply(undefined, 'reset');
+    const next = cloneFilterGroup(defaultGroup);
+    value.logic = next.logic;
+    value.items = next.items;
+    onApply(compileFilterGroup(value), 'reset');
   });
 
   const translate = useMemoizedFn((key: string) => (t ? t(key) : key));
@@ -261,7 +283,16 @@ export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterA
   );
 
   // Re-read on each render so `observer`-wrapped hosts re-render when the reactive `items` array length changes. No useMemo needed — the `value` object's identity is stable (held in a ref), but its observable `items.length` is what we actually care about, and the eslint exhaustive-deps rule rightly complains about depending on a mutable property of a stable ref.
-  const conditionCount = value.items.length;
+  const conditionCount = (() => {
+    const compiled = compileFilterGroup(value);
+    if (compiled?.$and && Array.isArray(compiled.$and)) {
+      return compiled.$and.length;
+    }
+    if (compiled?.$or && Array.isArray(compiled.$or)) {
+      return compiled.$or.length;
+    }
+    return 0;
+  })();
 
   return { value, options, FilterItem, ctx, onSubmit, onReset, conditionCount };
 }

package/src/components/index.ts

@@ -9,6 +9,7 @@
 
 export * from './AppComponents';
 export * from './BlankComponent';
+export * from './category-tabs';
 export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';

package/src/flow/actions/__tests__/linkageRules.tab.test.ts

@@ -0,0 +1,171 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ActionScene } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+
+import * as registeredActions from '../index';
+import * as linkageActions from '../linkageRules';
+
+const tabLinkageRules = (linkageActions as Record<string, unknown>).tabLinkageRules as
+  | typeof linkageActions.menuLinkageRules
+  | undefined;
+const linkageSetTabProps = (linkageActions as Record<string, unknown>).linkageSetTabProps as
+  | typeof linkageActions.linkageSetMenuItemProps
+  | undefined;
+
+function createRuntime() {
+  let matched = true;
+  const setProps = vi.fn(function (this: { props: Record<string, unknown> }, props: Record<string, unknown>) {
+    this.props = {
+      ...this.props,
+      ...props,
+    };
+  });
+  const setHidden = vi.fn(function (this: { hidden: boolean }, value: boolean) {
+    this.hidden = value;
+  });
+  const model = {
+    uid: 'tab-1',
+    props: {} as Record<string, unknown>,
+    hidden: false,
+    __allModels: [],
+    setProps,
+    setHidden,
+  };
+  const ctx = {
+    app: { jsonLogic: { apply: () => matched } },
+    model,
+    t: (text: string) => text,
+    getAction: (name: string) => (name === 'linkageSetTabProps' ? linkageSetTabProps : undefined),
+    resolveJsonTemplate: vi.fn(async (value: unknown) => value),
+  };
+
+  return {
+    ctx,
+    model,
+    setMatched(value: boolean) {
+      matched = value;
+    },
+  };
+}
+
+const hideRule = {
+  value: [
+    {
+      key: 'rule-1',
+      title: 'Hide tab',
+      enable: true,
+      condition: {
+        logic: '$and',
+        items: [{ path: 'status', operator: '$eq', value: 'visible' }],
+      },
+      actions: [
+        {
+          key: 'action-1',
+          name: 'linkageSetTabProps',
+          params: { value: 'hidden' },
+        },
+      ],
+    },
+  ],
+};
+
+describe('tab linkage rules', () => {
+  it('should append the tab linkage scene without changing existing scene values', () => {
+    const scenes = ActionScene as unknown as Record<string, number>;
+
+    expect(scenes.MENU_LINKAGE_RULES).toBe(7);
+    expect(scenes.TAB_LINKAGE_RULES).toBe(8);
+    expect(scenes.TAB_LINKAGE_RULES).toBe(Math.max(...Object.values(scenes).filter(Number.isInteger)));
+  });
+
+  it('should register tab linkage actions from the actions entry', () => {
+    expect((registeredActions as Record<string, unknown>).tabLinkageRules).toBe(tabLinkageRules);
+    expect((registeredActions as Record<string, unknown>).linkageSetTabProps).toBe(linkageSetTabProps);
+    expect(tabLinkageRules).toBeDefined();
+    expect(linkageSetTabProps).toBeDefined();
+  });
+
+  it('should expose tab state and runjs actions in ui schema', () => {
+    expect(tabLinkageRules).toBeDefined();
+    expect(linkageSetTabProps).toBeDefined();
+
+    const schema = tabLinkageRules?.uiSchema?.({
+      getActions: () =>
+        new Map([
+          ['linkageSetTabProps', linkageSetTabProps],
+          ['linkageRunjs', linkageActions.linkageRunjs],
+          ['linkageSetMenuItemProps', linkageActions.linkageSetMenuItemProps],
+        ]),
+    } as never) as Record<string, Record<string, Record<string, unknown>>> | undefined;
+
+    expect(schema?.value?.['x-component-props']?.supportedActions).toEqual(['linkageSetTabProps', 'linkageRunjs']);
+    expect(linkageSetTabProps?.scene).toBe((ActionScene as unknown as Record<string, number>).TAB_LINKAGE_RULES);
+    expect(linkageActions.linkageRunjs.scene).toContain(
+      (ActionScene as unknown as Record<string, number>).TAB_LINKAGE_RULES,
+    );
+  });
+
+  it('should hide the tab when the condition matches and restore it when the condition misses', async () => {
+    expect(tabLinkageRules).toBeDefined();
+    const runtime = createRuntime();
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(true);
+
+    runtime.setMatched(false);
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(false);
+  });
+
+  it('should restore the tab when linkage rules are cleared', async () => {
+    expect(tabLinkageRules).toBeDefined();
+    const runtime = createRuntime();
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(true);
+
+    await tabLinkageRules?.handler(runtime.ctx as never, { value: [] });
+    expect(runtime.model.hidden).toBe(false);
+  });
+
+  it('should not restore stale tab props while applying or clearing visibility rules', async () => {
+    expect(tabLinkageRules).toBeDefined();
+    const runtime = createRuntime();
+    runtime.model.props = {
+      title: 'Original title',
+      icon: 'original-icon',
+      route: { options: { badge: 'original' } },
+    };
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(true);
+
+    const updatedProps = {
+      title: 'Updated title',
+      icon: 'updated-icon',
+      route: { options: { badge: 'updated' } },
+    };
+    runtime.model.props = updatedProps;
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.props).toMatchObject(updatedProps);
+    expect(runtime.model.hidden).toBe(true);
+
+    runtime.setMatched(false);
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.props).toMatchObject(updatedProps);
+    expect(runtime.model.hidden).toBe(false);
+
+    await tabLinkageRules?.handler(runtime.ctx as never, { value: [] });
+    expect(runtime.model.props).toMatchObject(updatedProps);
+    expect(runtime.model.hidden).toBe(false);
+  });
+});

package/src/flow/actions/index.ts

@@ -43,10 +43,12 @@ export {
   linkageSetDetailsFieldProps,
   actionLinkageRules,
   menuLinkageRules,
+  tabLinkageRules,
   blockLinkageRules,
   linkageSetBlockProps,
   linkageSetActionProps,
   linkageSetMenuItemProps,
+  linkageSetTabProps,
   linkageSetFieldProps,
   subFormLinkageSetFieldProps,
   linkageAssignField,

package/src/flow/actions/linkageRules.tsx

@@ -731,6 +731,41 @@ export const linkageSetMenuItemProps = defineAction({
   },
 });
 
+export const linkageSetTabProps = defineAction({
+  name: 'linkageSetTabProps',
+  title: tExpr('Set tab state'),
+  scene: ActionScene.TAB_LINKAGE_RULES,
+  sort: 100,
+  uiSchema: {
+    value: {
+      type: 'string',
+      'x-component': (props) => {
+        const { value, onChange } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const ctx = useFlowContext();
+        const t = ctx.model.translate.bind(ctx.model);
+
+        return (
+          <Select
+            value={value}
+            onChange={onChange}
+            placeholder={t('Please select state')}
+            style={{ width: '100%' }}
+            options={[
+              { label: t('Visible'), value: 'visible' },
+              { label: t('Hidden'), value: 'hidden' },
+            ]}
+            allowClear
+          />
+        );
+      },
+    },
+  },
+  handler(ctx, { value, setProps }) {
+    setProps(ctx.model, { hiddenModel: value === 'hidden' });
+  },
+});
+
 export const linkageSetFieldProps = defineAction({
   name: 'linkageSetFieldProps',
   title: tExpr('Set field state'),
@@ -1339,6 +1374,7 @@ export const linkageRunjs = defineAction({
     ActionScene.FIELD_LINKAGE_RULES,
     ActionScene.ACTION_LINKAGE_RULES,
     ActionScene.MENU_LINKAGE_RULES,
+    ActionScene.TAB_LINKAGE_RULES,
     ActionScene.DETAILS_FIELD_LINKAGE_RULES,
     ActionScene.SUB_FORM_FIELD_LINKAGE_RULES,
   ],
@@ -2169,17 +2205,30 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
               }
             : props;
 
-        // 存储原始值，用于恢复
-        if (!model.__originalProps) {
-          model.__originalProps = {
-            hiddenModel: model.hidden,
-            hiddenText: undefined,
-            disabled: undefined,
-            required: undefined,
-            hidden: undefined,
-            ...model.props,
-          };
-        }
+        // 只记录联动实际控制的属性，避免之后恢复状态时把标题、路由等无关的新配置回滚到旧快照。
+        const originalProps = model.__originalProps || (model.__originalProps = {});
+        const rememberOriginalProp = (key: string, value: unknown) => {
+          if (!Object.prototype.hasOwnProperty.call(originalProps, key)) {
+            originalProps[key] = value;
+          }
+        };
+        Object.keys(normalizedProps || {}).forEach((key) => {
+          if (key === 'hiddenModel') {
+            rememberOriginalProp(
+              key,
+              Object.prototype.hasOwnProperty.call(model.props || {}, key) ? model.props?.[key] : model.hidden,
+            );
+            return;
+          }
+
+          rememberOriginalProp(key, model.props?.[key]);
+          if (key === 'hiddenText') {
+            rememberOriginalProp('title', model.props?.title);
+          }
+          if (key === 'required') {
+            rememberOriginalProp('rules', model.props?.rules);
+          }
+        });
 
         // 临时存起来，遍历完所有规则后，再统一处理
         patchPropsByModel.set(model, {
@@ -2463,6 +2512,32 @@ export const menuLinkageRules = defineAction({
   },
 });
 
+export const tabLinkageRules = defineAction({
+  name: 'tabLinkageRules',
+  title: tExpr('Tab linkage rules'),
+  uiMode: 'embed',
+  uiSchema(ctx) {
+    return {
+      value: {
+        type: 'array',
+        'x-component': LinkageRulesUI,
+        'x-component-props': {
+          supportedActions: getSupportedActions(ctx, ActionScene.TAB_LINKAGE_RULES),
+          title: tExpr('Tab linkage rules'),
+        },
+      },
+    };
+  },
+  defaultParams: {
+    value: [],
+  },
+  useRawParams: true,
+  handler: async (ctx, params) => {
+    const resolved = await resolveLinkageRulesParamsPreservingRunJsScripts(ctx, params);
+    return commonLinkageRulesHandler(ctx, resolved);
+  },
+});
+
 export const fieldLinkageRules = defineAction({
   name: 'fieldLinkageRules',
   title: tExpr('Field linkage rules'),

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -712,7 +712,6 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
-              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}