@nocobase/client-v2 2.2.0-beta.5 → 2.2.0-beta.7

package/src/__tests__/settings-center.test.tsx

@@ -14,7 +14,7 @@ import { message } from 'antd';
 import { AdminSettingsLayoutModel as ClientV2AdminSettingsLayoutModel } from '../settings-center';
 import { AdminSettingsLayoutModel as ClientV1AdminSettingsLayoutModel } from '../../../client/src/pm/AdminSettingsLayoutModel';
 import { NocoBaseBuildInPlugin } from '../nocobase-buildin-plugin';
-import { matchSettingsRoute } from '../settings-center/utils';
+import { matchSettingsRoute, sortTopLevelSettings } from '../settings-center/utils';
 
 class TestAclPlugin extends Plugin {
   async load() {
@@ -168,6 +168,12 @@ describe('settings center', () => {
     });
   });
 
+  it('should sort system-settings with other top-level settings by normal ordering', () => {
+    const settings = [{ name: 'system-settings' }, { name: 'api-keys' }, { name: 'backups' }] as any;
+
+    expect(sortTopLevelSettings(settings).map((item) => item.name)).toEqual(['api-keys', 'backups', 'system-settings']);
+  });
+
   it('should redirect /admin/settings to system-settings by default', async () => {
     const app = createMockClient({
       plugins: [NocoBaseBuildInPlugin, TestAclPlugin],
@@ -354,6 +360,39 @@ describe('settings center', () => {
     expect(screen.getByRole('menuitem', { name: 'Menu ACL Demo' })).toBeInTheDocument();
   });
 
+  it('should allow the settings sidebar menu to scroll independently', async () => {
+    class ManySettingsPlugin extends Plugin {
+      async load() {
+        for (let index = 0; index < 30; index += 1) {
+          this.pluginSettingsManager.addMenuItem({
+            key: `scroll-demo-${index}`,
+            title: `Scroll demo ${index}`,
+          });
+          this.pluginSettingsManager.addPageTabItem({
+            menuKey: `scroll-demo-${index}`,
+            key: 'index',
+            title: `Scroll demo ${index}`,
+            Component: () => <div>{`Scroll demo page ${index}`}</div>,
+          });
+        }
+      }
+    }
+
+    const app = createMockClient({
+      plugins: [NocoBaseBuildInPlugin, TestAclPlugin, ManySettingsPlugin],
+      router: { type: 'memory', initialEntries: ['/admin/settings/scroll-demo-29'] },
+    });
+    mockAdminRuntime(app);
+
+    await renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check']);
+
+    expect(await screen.findByText('Scroll demo page 29')).toBeInTheDocument();
+
+    const sidebar = screen.getByRole('menuitem', { name: 'Scroll demo 29' }).closest('.ant-layout-sider');
+    expect(sidebar).toHaveStyle({ overflowY: 'auto' });
+  });
+
   it('should save system settings through systemSettings:put', async () => {
     const app = createMockClient({
       plugins: [NocoBaseBuildInPlugin, TestAclPlugin],

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/components/index.ts

@@ -12,6 +12,7 @@ export * from './BlankComponent';
 export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';
+export * from './KeepAlive';
 export * from './PoweredBy';
 export * from './RouterContextCleaner';
 export * from './SwitchLanguage';