@nocobase/client-v2 2.2.0-beta.8 → 2.3.0-alpha.1

package/src/flow/components/FlowRoute.tsx

@@ -10,10 +10,13 @@
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { deviceType } from 'react-device-detect';
-import { useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useApp } from '../../hooks/useApp';
-import { NocoBaseDesktopRouteType } from '../../flow-compat';
-import { resolveAdminRouteRuntimeTarget } from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
+import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../flow-compat';
+import {
+  resolveAdminRouteRuntimeTarget,
+  toRouterNavigationPath,
+} from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
 import { getAdminLayoutModel, type AdminLayoutModel } from '../admin-shell/admin-layout/AdminLayoutModel';
 import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutModel';
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
@@ -21,6 +24,7 @@ import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
 
 type FlowRouteGuardState = {
+  pageUid?: string;
   pending: boolean;
   allowBridge: boolean;
   notFound: boolean;
@@ -35,6 +39,14 @@ type FlowRouteLayoutContext = {
   uid?: string;
 };
 
+type FlowRouteRepositoryLike = {
+  refreshAccessible?: () => Promise<unknown>;
+  isAccessibleLoaded?: () => boolean;
+  ensureAccessibleLoaded?: () => Promise<unknown>;
+  getRouteBySchemaUid?: (schemaUid: string) => NocoBaseDesktopRoute | undefined;
+  listAccessible?: () => NocoBaseDesktopRoute[];
+};
+
 export type FlowRouteProps = {
   pageUid?: string;
   active?: boolean;
@@ -70,6 +82,44 @@ const getDefaultLegacyPageBehavior = (
 
 const shouldRequireAccessibleRoute = (contextLayout?: FlowRouteLayoutContext) => contextLayout?.authCheck !== false;
 
+const findAccessibleRouteByIdentity = (
+  routes: NocoBaseDesktopRoute[] | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  if (!Array.isArray(routes)) {
+    return undefined;
+  }
+
+  for (const route of routes) {
+    if (
+      (route.type !== NocoBaseDesktopRouteType.group && route.schemaUid === pageUid) ||
+      (route.type === NocoBaseDesktopRouteType.group && route.id != null && String(route.id) === pageUid)
+    ) {
+      return route;
+    }
+
+    const matched = findAccessibleRouteByIdentity(route.children, pageUid);
+    if (matched) {
+      return matched;
+    }
+  }
+
+  return undefined;
+};
+
+const getAccessibleRouteByPageUid = (
+  routeRepository: FlowRouteRepositoryLike | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  const routeBySchemaUid = routeRepository?.getRouteBySchemaUid?.(pageUid);
+
+  if (routeBySchemaUid && routeBySchemaUid.type !== NocoBaseDesktopRouteType.group) {
+    return routeBySchemaUid;
+  }
+
+  return findAccessibleRouteByIdentity(routeRepository?.listAccessible?.(), pageUid);
+};
+
 const hasFlowModel = async (flowEngine: FlowEngine, pageUid: string) => {
   if (flowEngine.getModel(pageUid)) {
     return true;
@@ -197,11 +247,15 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
   );
   const legacyPageBehavior = legacyPageBehaviorProp || getDefaultLegacyPageBehavior(flowEngine, routeLayout);
   const app = useApp();
-  const routeRepository = flowEngine.context.routeRepository;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const routeRepository = flowEngine.context.routeRepository as FlowRouteRepositoryLike | undefined;
   const params = useParams();
   const pageUid = pageUidProp || params?.name;
+  const hasNestedRoutePath = typeof params?.tabUid !== 'undefined' || typeof params?.['*'] !== 'undefined';
   const skipRouteRepositoryCheck = !routeRepository;
   const [guardState, setGuardState] = useState<FlowRouteGuardState>({
+    pageUid: undefined,
     pending: true,
     allowBridge: false,
     notFound: false,
@@ -213,19 +267,24 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     throw new Error('[NocoBase] FlowRoute requires pageUid or route.params.name.');
   }
 
+  useEffect(() => {
+    replaceTriggeredRef.current = false;
+  }, [location.hash, location.pathname, location.search, pageUid]);
+
   useEffect(() => {
     let active = true;
     const requestId = ++requestIdRef.current;
+    const requiresAccessibleRoute = shouldRequireAccessibleRoute(routeLayout);
 
     const run = async () => {
-      setGuardState({ pending: true, allowBridge: false, notFound: false });
+      setGuardState({ pageUid, pending: true, allowBridge: false, notFound: false });
 
-      if (!skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
+      if (requiresAccessibleRoute && !skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
         try {
           await routeRepository?.ensureAccessibleLoaded?.();
         } catch (_error) {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: true, notFound: false });
+            setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           }
           return;
         }
@@ -235,28 +294,67 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
         return;
       }
 
-      const route = skipRouteRepositoryCheck ? undefined : routeRepository?.getRouteBySchemaUid?.(pageUid);
-      if (!route && !skipRouteRepositoryCheck && shouldRequireAccessibleRoute(routeLayout)) {
-        setGuardState({ pending: false, allowBridge: false, notFound: true });
+      const route =
+        skipRouteRepositoryCheck || !requiresAccessibleRoute
+          ? undefined
+          : getAccessibleRouteByPageUid(routeRepository, pageUid);
+      if (!route && !skipRouteRepositoryCheck && requiresAccessibleRoute) {
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
         return;
       }
 
       if (!route && legacyPageBehavior === 'notFound') {
         const flowModelExists = await hasFlowModel(flowEngine, pageUid);
         if (active && requestId === requestIdRef.current) {
-          setGuardState({ pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
+          setGuardState({ pageUid, pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
+        }
+        return;
+      }
+
+      if (route?.type === NocoBaseDesktopRouteType.group) {
+        if (hasNestedRoutePath) {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+          return;
+        }
+
+        const target = resolveAdminRouteRuntimeTarget({
+          app,
+          route,
+          layout: routeLayout,
+        });
+
+        if (target.reason === 'emptyGroup') {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+          return;
+        }
+
+        if (target.runtimePath) {
+          if (replaceTriggeredRef.current) {
+            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+            return;
+          }
+
+          replaceTriggeredRef.current = true;
+          if (target.navigationMode === 'document') {
+            window.location.replace(target.runtimePath);
+            return;
+          }
+          navigate(toRouterNavigationPath(target.runtimePath, app.router?.getBasename?.()), { replace: true });
+          return;
         }
+
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
         return;
       }
 
       if (route?.type === NocoBaseDesktopRouteType.page) {
         if (legacyPageBehavior === 'notFound') {
-          setGuardState({ pending: false, allowBridge: false, notFound: true });
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
           return;
         }
 
         if (legacyPageBehavior === 'bridge') {
-          setGuardState({ pending: false, allowBridge: true, notFound: false });
+          setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           return;
         }
 
@@ -279,14 +377,14 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
 
         if (target.reason === 'unsupportedV2Runtime') {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: false, notFound: true });
+            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
           }
           return;
         }
       }
 
       if (active && requestId === requestIdRef.current) {
-        setGuardState({ pending: false, allowBridge: true, notFound: false });
+        setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
       }
     };
 
@@ -295,10 +393,20 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     return () => {
       active = false;
     };
-  }, [app, flowEngine, legacyPageBehavior, pageUid, routeLayout, routeRepository, skipRouteRepositoryCheck]);
+  }, [
+    app,
+    flowEngine,
+    hasNestedRoutePath,
+    legacyPageBehavior,
+    navigate,
+    pageUid,
+    routeLayout,
+    routeRepository,
+    skipRouteRepositoryCheck,
+  ]);
 
   const content = useMemo(() => {
-    if (guardState.pending) {
+    if (guardState.pageUid !== pageUid || guardState.pending) {
       return null;
     }
 
@@ -311,7 +419,15 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     }
 
     return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
-  }, [active, getLayoutModel, guardState.allowBridge, guardState.notFound, guardState.pending, pageUid]);
+  }, [
+    active,
+    getLayoutModel,
+    guardState.allowBridge,
+    guardState.notFound,
+    guardState.pageUid,
+    guardState.pending,
+    pageUid,
+  ]);
 
   return content;
 };

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

@@ -0,0 +1,216 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@nocobase/test/client';
+import { FieldAssignValueInput } from '../FieldAssignValueInput';
+
+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 () => {
+  const actual = await vi.importActual<typeof import('@nocobase/flow-engine')>('@nocobase/flow-engine');
+  class MockEditableItemModel extends actual.EditableItemModel {}
+  MockEditableItemModel.getDefaultBindingByField = mockGetDefaultBindingByField;
+
+  return {
+    ...actual,
+    useFlowContext: () => mockUseFlowContext(),
+    VariableInput: mockVariableInput,
+    FlowModelRenderer: () => <div data-testid="flow-model-renderer" />,
+    EditableItemModel: MockEditableItemModel,
+  };
+});
+
+describe('FieldAssignValueInput context', () => {
+  it('delegates temporary field model context to the source form context', async () => {
+    type MockContext = {
+      dataSourceManager: { getDataSource: ReturnType<typeof vi.fn> };
+      t: (key: string) => string;
+      engine?: { createModel: ReturnType<typeof vi.fn> };
+      collection?: MockCollection;
+      blockModel?: MockFormModel;
+    };
+    type MockFieldModel = {
+      props: Record<string, unknown>;
+      setProps: ReturnType<typeof vi.fn>;
+      dispatchEvent: ReturnType<typeof vi.fn>;
+      remove: ReturnType<typeof vi.fn>;
+    };
+    type MockCollectionField = {
+      name: string;
+      interface: string;
+      uiSchema: { enum: Array<{ label: string; value: string }> };
+      isAssociationField: () => boolean;
+      getComponentProps: () => Record<string, unknown>;
+    };
+    type MockCollection = {
+      dataSourceKey: string;
+      name: string;
+      getField: (name: string) => MockCollectionField | null;
+      getFields: () => MockCollectionField[];
+    };
+    type MockFormModel = {
+      context: MockContext;
+      collection: MockCollection;
+      subModels: Record<string, unknown>;
+    };
+
+    const sourceContext: MockContext = {
+      dataSourceManager: {
+        getDataSource: vi.fn(() => ({})),
+      },
+      t: (key: string) => key,
+    };
+    const fieldModel: MockFieldModel = {
+      props: {},
+      setProps: vi.fn((props: Record<string, unknown>) => {
+        fieldModel.props = { ...fieldModel.props, ...props };
+      }),
+      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),
+    };
+    sourceContext.engine = engine;
+
+    const collectionField: MockCollectionField = {
+      name: 'status',
+      interface: 'select',
+      uiSchema: {
+        enum: [{ label: 'Open', value: 'open' }],
+      },
+      isAssociationField: () => false,
+      getComponentProps: () => ({}),
+    };
+    const collection: MockCollection = {
+      dataSourceKey: 'main',
+      name: 'tasks',
+      getField: (name: string) => (name === 'status' ? collectionField : null),
+      getFields: () => [collectionField],
+    };
+    const formModel: MockFormModel = {
+      context: sourceContext,
+      collection,
+      subModels: {},
+    };
+    sourceContext.collection = collection;
+    sourceContext.blockModel = formModel;
+
+    mockGetDefaultBindingByField.mockReturnValue({ modelName: 'SelectFieldModel' });
+    mockUseFlowContext.mockReturnValue({
+      model: formModel,
+      t: (key: string) => key,
+      getPropertyMetaTree: vi.fn(async () => []),
+    });
+
+    render(<FieldAssignValueInput targetPath="status" value="" onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(engine.createModel).toHaveBeenCalled();
+    });
+    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>