@nocobase/client-v2 2.1.7 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "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.1.7",
-    "@nocobase/flow-engine": "2.1.7",
-    "@nocobase/sdk": "2.1.7",
-    "@nocobase/shared": "2.1.7",
-    "@nocobase/utils": "2.1.7",
+    "@nocobase/evaluators": "2.1.9",
+    "@nocobase/flow-engine": "2.1.9",
+    "@nocobase/sdk": "2.1.9",
+    "@nocobase/shared": "2.1.9",
+    "@nocobase/utils": "2.1.9",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -46,5 +46,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "fc3bc8bf6ef0c185a456cb5241abc4716af8c20c"
+  "gitHead": "2b612d81c6f6115af75ea7b279384751af869510"
 }

package/src/components/form/JsonTextArea.tsx

@@ -10,8 +10,9 @@
 import { css, cx } from '@emotion/css';
 import { Input, Typography } from 'antd';
 import type { TextAreaProps } from 'antd/es/input';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
 import JSON5 from 'json5';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, type ChangeEvent, type FocusEvent } from 'react';
 
 export interface JsonTextAreaProps extends Omit<TextAreaProps, 'value' | 'onChange'> {
   value?: unknown;
@@ -36,14 +37,14 @@ function stringifyJsonValue(value: unknown, json: typeof JSON | typeof JSON5, sp
       json.parse(value);
       return value;
     } catch {
-      return json.stringify(value, undefined, space);
+      return json.stringify(value, undefined, space) ?? '';
     }
   }
 
-  return json.stringify(value, undefined, space);
+  return json.stringify(value, undefined, space) ?? '';
 }
 
-export const JsonTextArea = React.memo((props: JsonTextAreaProps) => {
+const JsonTextAreaComponent = React.forwardRef<TextAreaRef, JsonTextAreaProps>((props, ref) => {
   const {
     value,
     onChange,
@@ -74,11 +75,8 @@ export const JsonTextArea = React.memo((props: JsonTextAreaProps) => {
     [json],
   );
 
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const nextText = event.target.value;
-      setText(nextText);
-
+  const validateText = useCallback(
+    (nextText: string) => {
       try {
         parseText(nextText);
         setError(undefined);
@@ -89,12 +87,21 @@ export const JsonTextArea = React.memo((props: JsonTextAreaProps) => {
     [parseText],
   );
 
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const nextText = event.target.value;
+      setText(nextText);
+      validateText(nextText);
+    },
+    [validateText],
+  );
+
   const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLTextAreaElement>) => {
+    (event: FocusEvent<HTMLTextAreaElement>) => {
       try {
         const parsed = parseText(event.target.value);
         setError(undefined);
-        setText(parsed == null ? '' : json.stringify(parsed, undefined, space));
+        setText(parsed == null ? '' : json.stringify(parsed, undefined, space) ?? '');
         onChange?.(parsed);
       } catch (err) {
         setError(err instanceof Error ? err.message : String(err));
@@ -111,6 +118,7 @@ export const JsonTextArea = React.memo((props: JsonTextAreaProps) => {
     <>
       <Input.TextArea
         {...textAreaProps}
+        ref={ref}
         value={text}
         onChange={handleChange}
         onBlur={handleBlur}
@@ -126,4 +134,6 @@ export const JsonTextArea = React.memo((props: JsonTextAreaProps) => {
   );
 });
 
+export const JsonTextArea = React.memo(JsonTextAreaComponent);
+
 JsonTextArea.displayName = 'JsonTextArea';

package/src/components/form/VariableJsonTextArea.tsx

@@ -0,0 +1,175 @@
+/**
+ * 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 { css, cx } from '@emotion/css';
+import {
+  FlowContextSelector,
+  formatPathToValue as formatFlowPathToValue,
+  useFlowContext,
+  type MetaTreeNode,
+} from '@nocobase/flow-engine';
+import { Button, theme } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { JsonTextArea, type JsonTextAreaProps } from './JsonTextArea';
+import { useFilteredMetaTree } from './VariableInput';
+
+export interface VariableJsonTextAreaProps extends JsonTextAreaProps {
+  namespaces?: string[];
+  extraNodes?: MetaTreeNode[];
+  metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  formatPathToValue?: (meta: MetaTreeNode) => string | undefined;
+}
+
+export const VariableJsonTextArea = React.memo((props: VariableJsonTextAreaProps) => {
+  const {
+    value,
+    onChange,
+    space = 2,
+    json5 = false,
+    showError = true,
+    className,
+    status,
+    onBlur,
+    namespaces,
+    extraNodes,
+    metaTree,
+    formatPathToValue: customFormatPathToValue,
+    ...textAreaProps
+  } = props;
+  const { token } = theme.useToken();
+  const flowCtx = useFlowContext();
+  const filteredMetaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const ref = useRef<TextAreaRef>(null);
+
+  const insertAtCaret = useCallback((valueToInsert: string) => {
+    const textArea = ref.current?.resizableTextArea?.textArea;
+    if (!textArea) return;
+
+    const start = textArea.selectionStart ?? textArea.value.length;
+    const end = textArea?.selectionEnd ?? start;
+    const nextText = textArea.value.slice(0, start) + valueToInsert + textArea.value.slice(end);
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
+
+    nativeInputValueSetter?.call(textArea, nextText);
+    textArea.dispatchEvent(new Event('input', { bubbles: true }));
+
+    requestAnimationFrame(() => {
+      const nextPosition = start + valueToInsert.length;
+      textArea.setSelectionRange(start, nextPosition);
+      textArea.focus();
+    });
+  }, []);
+
+  const handleVariableSelected = useCallback(
+    (nextValue: string) => {
+      if (nextValue) {
+        insertAtCaret(nextValue);
+      }
+    },
+    [insertAtCaret],
+  );
+
+  const selectorMetaTree = useMemo(
+    () => metaTree ?? filteredMetaTree ?? (() => flowCtx.getPropertyMetaTree?.() ?? []),
+    [filteredMetaTree, flowCtx, metaTree],
+  );
+
+  const formatPathToValue = useMemo(() => {
+    if (!customFormatPathToValue) {
+      return;
+    }
+    return (meta: MetaTreeNode) => customFormatPathToValue(meta) ?? formatFlowPathToValue(meta);
+  }, [customFormatPathToValue]);
+
+  const wrapperClassName = useMemo(
+    () => css`
+      position: relative;
+      width: 100%;
+
+      .ant-input {
+        width: 100%;
+      }
+    `,
+    [],
+  );
+
+  const textAreaClassName = useMemo(
+    () => css`
+      font-size: ${token.fontSizeSM}px;
+      font-family: ${token.fontFamilyCode};
+    `,
+    [token.fontFamilyCode, token.fontSizeSM],
+  );
+
+  const selectorClassName = useMemo(
+    () => css`
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      z-index: 1;
+      line-height: 0;
+
+      .ant-btn {
+        font-size: ${token.fontSizeSM}px;
+      }
+    `,
+    [token.fontSizeSM],
+  );
+
+  const buttonClassName = useMemo(
+    () => css`
+      &:not(:hover) {
+        border-inline-end-color: transparent;
+        border-block-start-color: transparent;
+        background-color: transparent;
+      }
+    `,
+    [],
+  );
+
+  return (
+    <div className={wrapperClassName}>
+      <JsonTextArea
+        {...textAreaProps}
+        ref={ref}
+        value={value}
+        onChange={onChange}
+        space={space}
+        json5={json5}
+        showError={showError}
+        className={cx(textAreaClassName, className)}
+        status={status}
+        onBlur={onBlur}
+        disabled={textAreaProps.disabled}
+      />
+      <div className={selectorClassName}>
+        <FlowContextSelector
+          metaTree={selectorMetaTree}
+          disabled={textAreaProps.disabled}
+          formatPathToValue={formatPathToValue}
+          onChange={handleVariableSelected}
+        >
+          <Button
+            aria-label="variable-json-switcher"
+            disabled={textAreaProps.disabled}
+            className={buttonClassName}
+            style={{ fontStyle: 'italic', fontFamily: token.fontFamilyCode }}
+          >
+            x
+          </Button>
+        </FlowContextSelector>
+      </div>
+    </div>
+  );
+});
+
+VariableJsonTextArea.displayName = 'VariableJsonTextArea';
+
+export const VariableJSON = VariableJsonTextArea;

package/src/components/form/__tests__/JsonTextArea.test.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { JsonTextArea } from '../JsonTextArea';
+
+describe('JsonTextArea', () => {
+  it('formats object values and emits parsed JSON on blur', async () => {
+    const handleChange = vi.fn();
+
+    render(<JsonTextArea value={{ foo: 'bar' }} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    expect(textArea).toHaveValue('{\n  "foo": "bar"\n}');
+
+    fireEvent.change(textArea, { target: { value: '{"foo":"baz"}' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).toHaveBeenCalledWith({ foo: 'baz' });
+    expect(textArea).toHaveValue('{\n  "foo": "baz"\n}');
+  });
+
+  it('shows JSON parse errors and does not emit invalid values', async () => {
+    const handleChange = vi.fn();
+
+    render(<JsonTextArea value={{}} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    fireEvent.change(textArea, { target: { value: '{' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(await screen.findByText(/JSON/)).toBeInTheDocument();
+  });
+});

package/src/components/form/__tests__/VariableJsonTextArea.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 { FlowContext, FlowContextProvider } from '@nocobase/flow-engine';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { VariableJsonTextArea } from '../VariableJsonTextArea';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as unknown as { t: (key: string) => string }).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { API_KEY: 'secret' },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        API_KEY: { title: 'API Key', type: 'string' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('VariableJsonTextArea', () => {
+  it('formats object values and emits parsed JSON on blur', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{ foo: 'bar' }} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    expect(textArea).toHaveValue('{\n  "foo": "bar"\n}');
+
+    fireEvent.change(textArea, { target: { value: '{"foo":"baz"}' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).toHaveBeenCalledWith({ foo: 'baz' });
+    expect(textArea).toHaveValue('{\n  "foo": "baz"\n}');
+  });
+
+  it('shows JSON parse errors and does not emit invalid values', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{}} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    fireEvent.change(textArea, { target: { value: '{' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(await screen.findByText(/JSON/)).toBeInTheDocument();
+  });
+
+  it('inserts selected variables with the client-v2 template format', async () => {
+    const ctx = createContextWithEnv();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={null} namespaces={['$env']} onChange={() => undefined} />);
+
+    fireEvent.click(await screen.findByRole('button', { name: 'variable-json-switcher' }));
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('Env'));
+    });
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('API Key'));
+    });
+
+    expect(await screen.findByRole('textbox')).toHaveValue('{{ ctx.$env.API_KEY }}');
+  });
+});

package/src/components/form/index.tsx

@@ -19,3 +19,4 @@ export * from './RemoteSelect';
 export * from './ScanInput';
 export * from './TypedVariableInput';
 export * from './VariableInput';
+export * from './VariableJsonTextArea';

package/src/flow/actions/__tests__/fieldLinkageRules.scopeDepth.test.ts

@@ -9,7 +9,7 @@
 
 import { describe, expect, it, vi } from 'vitest';
 import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
-import { fieldLinkageRules } from '../linkageRules';
+import { fieldLinkageRules, linkageAssignField } from '../linkageRules';
 
 describe('fieldLinkageRules action - linkage scope metadata', () => {
   const targetCollection: any = {
@@ -868,6 +868,155 @@ describe('fieldLinkageRules action - linkage scope metadata', () => {
     expect(setFormValues).toHaveBeenCalledTimes(2);
   });
 
+  it('keeps row-scoped override patches editable after the target is user edited', async () => {
+    const store = {
+      roles: [{ uid: 'role-uid-1', name: 'existing' }],
+    };
+    const getAt = (path: Array<string | number>) => path.reduce((acc: any, seg) => acc?.[seg], store as any);
+    const setAt = (path: Array<string | number>, value: any) => {
+      let cur: any = store;
+      for (const seg of path.slice(0, -1)) {
+        cur = cur[seg];
+      }
+      cur[path[path.length - 1]] = value;
+    };
+    const editedKeys = new Set<string>();
+    const toKey = (path: Array<string | number>) => JSON.stringify(path);
+    const form = {
+      getFieldValue: (path: Array<string | number>) => getAt(path),
+    };
+    const formValueRuntime = {
+      canApplyOverrideValuePatch: vi.fn((path: Array<string | number>) => !editedKeys.has(toKey(path))),
+    };
+    const setFormValues = vi.fn(async (patches: Array<{ path: Array<string | number>; value: any }>) => {
+      for (const patch of patches) {
+        setAt(patch.path, patch.value);
+      }
+    });
+
+    const engine = new FlowEngine();
+    const rowFork = new FlowModel({ uid: 'role-override-row-fork', flowEngine: engine }) as any;
+    rowFork.context.defineProperty('fieldIndex', {
+      value: ['roles:0'],
+    });
+    rowFork.context.defineProperty('form', {
+      value: form,
+    });
+    rowFork.context.defineProperty('setFormValues', {
+      value: setFormValues,
+    });
+    rowFork.context.defineProperty('app', {
+      value: {
+        jsonLogic: {
+          apply: () => true,
+        },
+      },
+    });
+    rowFork.subModels = { items: [] };
+    rowFork.getAction = vi.fn((name: string) => {
+      if (name === 'linkageAssignField') {
+        return linkageAssignField;
+      }
+    });
+
+    const masterModel: any = {
+      uid: 'master-role-override-grid',
+      forks: new Set([rowFork]),
+    };
+    const rolesField: any = {
+      type: 'hasMany',
+      isAssociationField: () => true,
+      targetCollection: {
+        getField: (name: string) => ({ name, isAssociationField: () => false }),
+      },
+    };
+    const blockModel: any = {
+      collection: {
+        getField: (name: string) => (name === 'roles' ? rolesField : null),
+      },
+      formValueRuntime,
+    };
+    rowFork.context.defineProperty('blockModel', {
+      value: blockModel,
+    });
+    const gridModel: any = {
+      uid: 'grid-model-role-override-row',
+      context: {
+        blockModel,
+      },
+      getAction: vi.fn((name: string) => {
+        if (name === 'linkageAssignField') {
+          return linkageAssignField;
+        }
+      }),
+      __allModels: [],
+    };
+    const ctx: any = {
+      model: gridModel,
+      engine: {
+        forEachModel: (cb: (m: any) => void) => {
+          cb(masterModel);
+        },
+      },
+      flowKey: 'eventSettings',
+      inputArgs: {
+        source: 'user',
+        txId: 'tx-role-override-row',
+        changedPaths: [['roles', 0, 'uid']],
+      },
+      app: {
+        jsonLogic: {
+          apply: () => true,
+        },
+      },
+      resolveJsonTemplate: async (v: any) => v,
+    };
+    const makeParams = (value: string) => ({
+      value: [
+        {
+          key: `rule-${value}`,
+          title: `rule-${value}`,
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [
+            {
+              name: 'linkageAssignField',
+              params: {
+                value: [
+                  {
+                    key: `r-${value}`,
+                    enable: true,
+                    targetPath: 'roles.name',
+                    mode: 'override',
+                    value,
+                    condition: { logic: '$and', items: [] },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    });
+
+    await fieldLinkageRules.handler(ctx, makeParams('role-uid-1'));
+    expect(store.roles[0].name).toBe('role-uid-1');
+
+    store.roles[0].uid = 'role-uid-2';
+    await fieldLinkageRules.handler(ctx, makeParams('role-uid-2'));
+    expect(store.roles[0].name).toBe('role-uid-2');
+    expect(setFormValues).toHaveBeenCalledTimes(2);
+
+    store.roles[0].name = 'manual';
+    store.roles[0].uid = 'role-uid-3';
+    editedKeys.add(toKey(['roles', 0, 'name']));
+    await fieldLinkageRules.handler(ctx, makeParams('role-uid-3'));
+
+    expect(store.roles[0].name).toBe('manual');
+    expect(setFormValues).toHaveBeenCalledTimes(2);
+    expect(formValueRuntime.canApplyOverrideValuePatch).toHaveBeenCalledWith(['roles', 0, 'name']);
+  });
+
   it('skips stale subtable row forks after the row has been removed', async () => {
     const setFormValues = vi.fn(async () => undefined);
     const defaultHandler = vi.fn((actionCtx: any, { addFormValuePatch }: any) => {