@nocobase/client-v2 2.3.0-beta.20 → 2.3.0-beta.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.3.0-beta.20",
+  "version": "2.3.0-beta.21",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.3.0-beta.20",
-    "@nocobase/flow-engine": "2.3.0-beta.20",
-    "@nocobase/sdk": "2.3.0-beta.20",
-    "@nocobase/shared": "2.3.0-beta.20",
-    "@nocobase/utils": "2.3.0-beta.20",
+    "@nocobase/evaluators": "2.3.0-beta.21",
+    "@nocobase/flow-engine": "2.3.0-beta.21",
+    "@nocobase/sdk": "2.3.0-beta.21",
+    "@nocobase/shared": "2.3.0-beta.21",
+    "@nocobase/utils": "2.3.0-beta.21",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -49,5 +49,5 @@
     "react-router-dom": "^6.30.1",
     "zxing-wasm": "^3.1.3"
   },
-  "gitHead": "31adfe1b6bd3136bec29ff936fe1a0a7b5273d67"
+  "gitHead": "a2bdd27cc7bc8ced9ad395b3a7468fc1850eef4a"
 }

package/src/flow/admin-shell/admin-layout/MobileTopbarActionsContext.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 { createContext } from 'react';
+
+// Internal callback for dismissing the mobile topbar after a nested menu action completes.
+export const MobileTopbarActionsContext = createContext<(() => void) | undefined>(undefined);

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

@@ -11,13 +11,14 @@ import { EllipsisOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { FlowModelRenderer } from '@nocobase/flow-engine';
 import { ConfigProvider, Divider, Popover, theme } from 'antd';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useAclSnippets } from '../../../acl/useAclSnippets';
 import type { CustomToken } from '../../../theme';
 import { TopbarActionModel } from '../../models/topbar/TopbarActionModel';
 import { USER_CENTER_ACTION_ID } from '../../models/topbar/UserCenterTopbarActionModel';
 import { HelpLite } from './HelpLite';
+import { MobileTopbarActionsContext } from './MobileTopbarActionsContext';
 
 const topbarActionsBarClassName = css`
   display: inline-flex;
@@ -183,11 +184,21 @@ export const TopbarActionsBar = React.memo((props: { actions: TopbarActionModel[
     setOpen(false);
   }, []);
 
+  useEffect(() => {
+    if (!props.isMobile) {
+      setOpen(false);
+    }
+  }, [props.isMobile]);
+
   if (props.isMobile) {
     return (
       <Popover
         rootClassName={popoverStyle}
-        content={<TopbarActionsContent actions={props.actions} onActionClick={handleContentClick} />}
+        content={
+          <MobileTopbarActionsContext.Provider value={handleContentClick}>
+            <TopbarActionsContent actions={props.actions} onActionClick={handleContentClick} />
+          </MobileTopbarActionsContext.Provider>
+        }
         color={customToken.colorBgHeader}
         trigger="click"
         open={open}

package/src/flow/admin-shell/admin-layout/__tests__/TopbarActionsBar.mobile.test.tsx

@@ -0,0 +1,205 @@
+/**
+ * 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 { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Drawer, Input } from 'antd';
+import React, { useState } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@nocobase/flow-engine', () => ({
+  FlowModel: class {
+    uid: string;
+    context = { t: (value: string) => value };
+
+    constructor(options: { uid: string }) {
+      this.uid = options.uid;
+    }
+  },
+  FlowModelRenderer: ({ model }: { model: { render: () => React.ReactNode } }) => model.render(),
+  observer: (component: React.ComponentType) => component,
+}));
+
+vi.mock('../../../models/topbar/TopbarActionModel', async () => {
+  const { FlowModel } = await import('@nocobase/flow-engine');
+  return {
+    TopbarActionModel: class extends FlowModel {
+      isHidden() {
+        return false;
+      }
+
+      getActionId() {
+        return 'user-center';
+      }
+
+      renderWrapper(node: React.ReactNode) {
+        return node;
+      }
+
+      renderButton() {
+        return <button data-testid="user-center-button">User center</button>;
+      }
+    },
+  };
+});
+
+vi.mock('../../../../acl/useAclSnippets', () => ({
+  useAclSnippets: () => ({ allow: () => true }),
+}));
+
+vi.mock('../HelpLite', () => ({ HelpLite: () => null }));
+
+import {
+  UserCenterActionItemModel,
+  UserCenterSelectItemModel,
+  UserCenterTopbarActionModel,
+} from '../../../models/topbar/UserCenterTopbarActionModel';
+import { TopbarActionsBar } from '../TopbarActionsBar';
+
+afterEach(cleanup);
+
+function createUserCenter(onClick: () => Promise<void>, closeOnClick = true) {
+  const item = new UserCenterActionItemModel({ uid: 'test-edit-profile', use: 'UserCenterActionItemModel' });
+  item.label = 'Edit profile';
+  item.onClick = onClick;
+  item.closeOnClick = closeOnClick;
+  const model = new UserCenterTopbarActionModel({ uid: 'test-user-center', use: 'UserCenterTopbarActionModel' });
+  vi.spyOn(model, 'getPreparedItems').mockImplementation(async (closeDropdown) => {
+    item.setCloseDropdown(closeDropdown);
+    return [item];
+  });
+  return model;
+}
+
+async function openUserMenu(isMobile: boolean) {
+  if (isMobile) {
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+  }
+  fireEvent.mouseEnter(screen.getByTestId('user-center-button'));
+  const action = await screen.findByRole('button', { name: 'Edit profile' });
+  await waitFor(() => expect(action).toBeVisible());
+  return action;
+}
+
+describe('mobile user center popover', () => {
+  it('closes both menus after selecting an action and keeps the opened drawer mounted', async () => {
+    const model = createUserCenter(vi.fn());
+    const Test = () => {
+      const [open, setOpen] = useState(false);
+      model.getPreparedItems = async (closeDropdown) => {
+        const item = new UserCenterActionItemModel({ uid: 'profile', use: 'UserCenterActionItemModel' });
+        item.label = 'Edit profile';
+        item.onClick = async () => setOpen(true);
+        item.setCloseDropdown(closeDropdown);
+        return [item];
+      };
+      return (
+        <>
+          <TopbarActionsBar actions={[model]} isMobile />
+          <Drawer open={open} title="Edit profile">
+            <Input aria-label="Nickname" />
+          </Drawer>
+        </>
+      );
+    };
+    render(<Test />);
+
+    fireEvent.click(await openUserMenu(true));
+
+    await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument());
+    expect(screen.getByRole('textbox', { name: 'Nickname' })).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Edit profile' })).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+    fireEvent.mouseEnter(screen.getByTestId('user-center-button'));
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Edit profile' })).toBeVisible());
+  });
+
+  it('respects actions that keep the menu open', async () => {
+    const onClick = vi.fn(async () => {});
+    render(<TopbarActionsBar actions={[createUserCenter(onClick, false)]} isMobile />);
+
+    fireEvent.click(await openUserMenu(true));
+
+    await waitFor(() => expect(onClick).toHaveBeenCalledOnce());
+    expect(screen.getByRole('tooltip')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Edit profile' })).toBeVisible();
+  });
+
+  it('keeps the topbar open when the user only leaves the nested menu', async () => {
+    render(<TopbarActionsBar actions={[createUserCenter(vi.fn())]} isMobile />);
+    const action = await openUserMenu(true);
+
+    const dropdown = action.closest('.ant-dropdown');
+    expect(dropdown).not.toBeNull();
+    if (dropdown) {
+      fireEvent.mouseLeave(dropdown);
+    }
+    fireEvent.mouseLeave(screen.getByTestId('user-center-button'));
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Edit profile' })).not.toBeInTheDocument());
+    expect(screen.getByRole('tooltip')).toBeVisible();
+  });
+
+  it('keeps desktop actions working without a mobile popover', async () => {
+    const onClick = vi.fn(async () => {});
+    render(<TopbarActionsBar actions={[createUserCenter(onClick)]} />);
+
+    fireEvent.click(await openUserMenu(false));
+
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Edit profile' })).not.toBeInTheDocument());
+    expect(onClick).toHaveBeenCalledOnce();
+    expect(screen.queryByRole('img', { name: 'ellipsis' })).not.toBeInTheDocument();
+  });
+
+  it.each([true, false])('respects closeOnChange=%s for preference selectors', async (closeOnChange) => {
+    const onChange = vi.fn(async () => {});
+    const item = new UserCenterSelectItemModel({ uid: 'language', use: 'UserCenterSelectItemModel' });
+    item.label = 'Language';
+    item.value = 'en';
+    item.options = [
+      { label: 'English', value: 'en' },
+      { label: 'Chinese', value: 'zh' },
+    ];
+    item.onChange = onChange;
+    item.closeOnChange = closeOnChange;
+    const model = createUserCenter(vi.fn());
+    model.getPreparedItems = async (closeDropdown) => {
+      item.setCloseDropdown(closeDropdown);
+      return [item];
+    };
+    render(<TopbarActionsBar actions={[model]} isMobile />);
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+    fireEvent.mouseEnter(screen.getByTestId('user-center-button'));
+    const select = await screen.findByRole('combobox');
+    await waitFor(() => expect(select.closest('.ant-select')).toBeVisible());
+
+    fireEvent.mouseDown(select);
+    fireEvent.click(await screen.findByText('Chinese'));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith('zh'));
+    if (closeOnChange) {
+      await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument());
+    } else {
+      expect(screen.getByRole('tooltip')).toBeVisible();
+      expect(select.closest('.ant-select')).toBeVisible();
+    }
+  });
+
+  it('does not reopen the previous popover after switching to desktop and back', async () => {
+    const actions = [createUserCenter(vi.fn())];
+    const { rerender } = render(<TopbarActionsBar actions={actions} isMobile />);
+    fireEvent.click(screen.getByRole('img', { name: 'ellipsis' }));
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeVisible());
+
+    rerender(<TopbarActionsBar actions={actions} isMobile={false} />);
+    rerender(<TopbarActionsBar actions={actions} isMobile />);
+
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/CascadeSelectFieldModel.tsx

@@ -751,7 +751,10 @@ async function originalHandler(ctx, params) {
 
     const targetInterface = targetLabelField.getInterfaceOptions();
 
-    const operator = targetInterface?.filterable?.operators?.[0]?.value || '$includes';
+    const operator =
+      targetLabelField.type === 'string' || targetLabelField.dataType === 'string'
+        ? '$includes'
+        : targetInterface?.filterable?.operators?.[0]?.value || '$includes';
 
     const searchText = ctx.inputArgs.searchText?.trim();
     const resource = ctx.model.resource;

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -590,7 +590,10 @@ async function originalHandler(ctx, params) {
 
     const targetInterface = targetLabelField.getInterfaceOptions();
 
-    const operator = targetInterface?.filterable?.operators?.[0]?.value || '$includes';
+    const operator =
+      targetLabelField.type === 'string' || targetLabelField.dataType === 'string'
+        ? '$includes'
+        : targetInterface?.filterable?.operators?.[0]?.value || '$includes';
 
     const searchText = ctx.inputArgs.searchText?.trim();
 

package/src/flow/models/fields/AssociationFieldModel/__tests__/associationSelect.search.test.ts

@@ -0,0 +1,113 @@
+/**
+ * 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 { CollectionField } from '@nocobase/flow-engine';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import '../../../index';
+import { createTypedFilterable } from '../../../../../collection-manager/filter-operators';
+import { CascadeSelectInnerFieldModel } from '../CascadeSelectFieldModel';
+import { RecordSelectFieldModel } from '../RecordSelectFieldModel';
+
+function createContext(fieldOptions: Record<string, unknown>, searchText = ' 3 ') {
+  const field = new CollectionField({ name: 'display_name', ...fieldOptions });
+  const filterable = createTypedFilterable<{ dataType?: string }>(
+    [
+      { types: ['boolean'], operators: 'boolean' },
+      { types: ['string'], operators: 'string' },
+      { types: ['integer'], operators: 'number' },
+    ],
+    (meta) => meta.dataType || 'string',
+  );
+  vi.spyOn(field, 'getInterfaceOptions').mockReturnValue({ filterable });
+  const records = [{ id: 3, display_name: '3 Jackson Hughes' }];
+  const resource = {
+    setPage: vi.fn(),
+    addFilterGroup: vi.fn(),
+    removeFilterGroup: vi.fn(),
+    refresh: vi.fn().mockResolvedValue(undefined),
+    getData: vi.fn(() => records),
+  };
+  return {
+    field,
+    inputArgs: { searchText },
+    model: {
+      collectionField: { targetCollection: { getField: vi.fn(() => field) } },
+      props: { fieldNames: { label: 'display_name', value: 'id' } },
+      resource,
+      setDataSource: vi.fn(),
+      setProps: vi.fn(),
+    },
+  };
+}
+
+describe.each([
+  { name: 'RecordSelect', model: RecordSelectFieldModel, searchGroup: '__search__display_name' },
+  { name: 'CascadeSelect', model: CascadeSelectInnerFieldModel, searchGroup: 'display_name' },
+])('$name search', ({ model, searchGroup }) => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  async function search(ctx: ReturnType<typeof createContext>) {
+    const handler = model.globalFlowRegistry.getFlow('searchSettings').getStep('step1').serialize().handler as (
+      ctx: ReturnType<typeof createContext>,
+      params: Record<string, unknown>,
+    ) => unknown;
+    handler(ctx, {});
+    await vi.advanceTimersByTimeAsync(500);
+  }
+
+  it.each([{ type: 'formula', dataType: 'string' }, { type: 'string' }])(
+    'uses partial text matching for $type labels',
+    async (options) => {
+      const ctx = createContext(options);
+
+      await search(ctx);
+
+      expect(ctx.model.resource.addFilterGroup).toHaveBeenCalledWith(searchGroup, { 'display_name.$includes': '3' });
+      expect(ctx.model.resource.setPage).toHaveBeenCalledWith(1);
+      expect(ctx.model.resource.refresh).toHaveBeenCalledOnce();
+      expect(ctx.model.setDataSource).toHaveBeenCalledWith([
+        expect.objectContaining({ display_name: '3 Jackson Hughes' }),
+      ]);
+      expect(ctx.model.setProps).toHaveBeenCalledWith({ searchText: '3' });
+    },
+  );
+
+  it('preserves the interface operator for non-string labels', async () => {
+    const ctx = createContext({ type: 'integer' });
+    vi.spyOn(ctx.field, 'getInterfaceOptions').mockReturnValue({ filterable: { operators: [{ value: '$eq' }] } });
+
+    await search(ctx);
+
+    expect(ctx.model.resource.addFilterGroup).toHaveBeenCalledWith(searchGroup, { 'display_name.$eq': '3' });
+  });
+
+  it('falls back to partial text matching without an interface', async () => {
+    const ctx = createContext({ type: 'string' });
+    vi.spyOn(ctx.field, 'getInterfaceOptions').mockReturnValue(undefined);
+
+    await search(ctx);
+
+    expect(ctx.model.resource.addFilterGroup).toHaveBeenCalledWith(searchGroup, { 'display_name.$includes': '3' });
+  });
+
+  it('removes the search filter when the search is cleared', async () => {
+    const ctx = createContext({ type: 'formula', dataType: 'string' }, '   ');
+
+    await search(ctx);
+
+    expect(ctx.model.resource.removeFilterGroup).toHaveBeenCalledWith(searchGroup);
+    expect(ctx.model.resource.addFilterGroup).not.toHaveBeenCalled();
+    expect(ctx.model.resource.refresh).toHaveBeenCalledOnce();
+  });
+});

package/src/flow/models/topbar/UserCenterTopbarActionModel.tsx

@@ -11,9 +11,10 @@ import { UserOutlined } from '@ant-design/icons';
 import { css, cx } from '@emotion/css';
 import { FlowModel, FlowModelRenderer, observer } from '@nocobase/flow-engine';
 import { Divider, Dropdown, Empty, Select, Spin, theme } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { createAclSnippetAllow } from '../../../acl/createAclSnippetAllow';
+import { MobileTopbarActionsContext } from '../../admin-shell/admin-layout/MobileTopbarActionsContext';
 import { TopbarActionModel } from './TopbarActionModel';
 
 export const USER_CENTER_ACTION_ID = 'user-center';
@@ -452,6 +453,11 @@ const UserCenterTopbarActionView = observer(
   (props: { model: UserCenterTopbarActionModel }) => {
     const { model } = props;
     const [open, setOpen] = useState(false);
+    const closeMobileTopbar = useContext(MobileTopbarActionsContext);
+    const closeDropdown = useCallback(() => {
+      setOpen(false);
+      closeMobileTopbar?.();
+    }, [closeMobileTopbar]);
 
     return model.renderWrapper(
       <Dropdown
@@ -459,9 +465,7 @@ const UserCenterTopbarActionView = observer(
         placement="bottomRight"
         open={open}
         onOpenChange={setOpen}
-        dropdownRender={() => (
-          <UserCenterDropdownPanel model={model} open={open} closeDropdown={() => setOpen(false)} />
-        )}
+        dropdownRender={() => <UserCenterDropdownPanel model={model} open={open} closeDropdown={closeDropdown} />}
       >
         <span className={userCenterTriggerClassName}>{model.renderButton()}</span>
       </Dropdown>,