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

package/src/acl/__tests__/ACLProvider.test.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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 { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  FLOW_SETTINGS_PREFERENCE_STORAGE_KEY,
+  writeFlowSettingsPreference,
+} from '../../flow/admin-shell/admin-layout/flowSettingsPreference';
+import { ACLRolesCheckProvider } from '../ACLProvider';
+
+const mocks = vi.hoisted(() => ({
+  app: undefined as unknown,
+}));
+
+vi.mock('../../hooks/useApp', () => ({
+  useApp: () => mocks.app,
+}));
+
+describe('ACLRolesCheckProvider', () => {
+  beforeEach(() => {
+    window.localStorage.removeItem(FLOW_SETTINGS_PREFERENCE_STORAGE_KEY);
+  });
+
+  it('exits UI editing mode when the current role cannot configure pages', async () => {
+    const disable = vi.fn(async () => undefined);
+    const setRole = vi.fn();
+    const aclContext: Record<string, unknown> = {};
+    const appContext = {
+      acl: undefined,
+      defineProperty(name: string, descriptor: PropertyDescriptor) {
+        Object.defineProperty(this, name, descriptor);
+      },
+      ...aclContext,
+    };
+
+    mocks.app = {
+      apiClient: {
+        auth: {
+          role: 'member',
+          setRole,
+        },
+        request: vi.fn(async () => ({
+          data: {
+            data: {
+              role: 'viewer',
+              snippets: [],
+            },
+            meta: {},
+          },
+        })),
+      },
+      context: appContext,
+      flowEngine: {
+        flowSettings: {
+          disable,
+        },
+      },
+      pluginSettingsManager: {
+        setAclSnippets: vi.fn(),
+      },
+      renderComponent: () => <div>Loading</div>,
+      router: {
+        isSkippedAuthCheckRoute: () => false,
+      },
+    };
+    writeFlowSettingsPreference(true);
+
+    render(
+      <MemoryRouter initialEntries={['/admin']}>
+        <ACLRolesCheckProvider>
+          <div>Page content</div>
+        </ACLRolesCheckProvider>
+      </MemoryRouter>,
+    );
+
+    expect(await screen.findByText('Page content')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(disable).toHaveBeenCalledTimes(1);
+    });
+    expect(window.localStorage.getItem(FLOW_SETTINGS_PREFERENCE_STORAGE_KEY)).toBe('0');
+    expect(setRole).toHaveBeenCalledWith('viewer');
+  });
+});

package/src/collection-manager/__tests__/field-configure.test.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { getCoreFieldConfigureState, reverseFieldConfigureItems } from '../field-configure';
+
+describe('inverse relationship configuration', () => {
+  it.each(['hasOne', 'hasMany', 'belongsTo', 'belongsToMany'])(
+    'keeps the %s inverse relationship type disabled when creating or editing a field',
+    (type) => {
+      for (const createOnly of [true, false]) {
+        for (const showReverseFieldConfig of [true, false]) {
+          const values = {
+            autoCreateReverseField: true,
+            reverseField: { type, ...(createOnly ? {} : { key: 'existing-reverse-field' }) },
+          };
+
+          expect(
+            getCoreFieldConfigureState('reverseField.type', values, { createOnly, showReverseFieldConfig }),
+          ).toEqual({
+            disabled: true,
+            hidden: !showReverseFieldConfig,
+          });
+        }
+      }
+    },
+  );
+
+  it.each(['reverseField.name', 'reverseField.uiSchema.title'])(
+    'allows editing %s only when the inverse configuration is visible',
+    (name) => {
+      for (const showReverseFieldConfig of [true, false]) {
+        expect(getCoreFieldConfigureState(name, {}, { showReverseFieldConfig })).toEqual({
+          disabled: !showReverseFieldConfig,
+          hidden: !showReverseFieldConfig,
+        });
+      }
+    },
+  );
+
+  it('also disables the inverse relationship type in explicit configure items', () => {
+    const item = reverseFieldConfigureItems().find(({ name }) => name === 'reverseField.type');
+
+    expect(item?.disabled).toBe(true);
+  });
+});

package/src/collection-manager/field-configure.ts

@@ -271,7 +271,7 @@ export function getCoreFieldConfigureState(
 
   if (name.startsWith('reverseField.')) {
     return {
-      disabled: !context.showReverseFieldConfig,
+      disabled: name === 'reverseField.type' || !context.showReverseFieldConfig,
       hidden: !context.showReverseFieldConfig,
     };
   }
@@ -514,7 +514,7 @@ export function reverseFieldConfigureItems(): FieldConfigureItem[] {
         { label: "{{t('BelongsToMany')}}", value: 'belongsToMany' },
       ],
       hidden: ({ context, values }) => !context.showReverseFieldConfig && !get(values, 'autoCreateReverseField'),
-      disabled: ({ context }) => !context.showReverseFieldConfig,
+      disabled: true,
     },
     {
       name: 'reverseField.uiSchema.title',

package/src/components/form/ScanInput/CodeScanner.tsx

@@ -11,7 +11,7 @@ import { FileImageOutlined, LeftOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { Button, message, theme } from 'antd';
 import { Html5Qrcode } from 'html5-qrcode';
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { ScanBox } from './ScanBox';
@@ -26,6 +26,14 @@ type CodeScannerProps = {
 };
 
 const MAX_CODE_IMAGE_SIZE = 10 * 1024 * 1024;
+const SCANNER_RENDER_WIDTH = 1280;
+
+function getViewportSize() {
+  return {
+    width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
+    height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
+  };
+}
 
 function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess }: CodeScannerProps) {
   const { t } = useTranslation();
@@ -33,17 +41,17 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   const inputId = useId().replace(/:/g, '');
   const scannerElementId = `code-scanner-${inputId}`;
   const imgUploaderRef = useRef<HTMLInputElement>(null);
+  const scannerViewportRef = useRef<HTMLDivElement>(null);
   const [cameraAvailable, setCameraAvailable] = useState(false);
+  const [scannerSize, setScannerSize] = useState({ width: 0, height: 0 });
+  const [viewport, setViewport] = useState(getViewportSize);
 
-  const viewport = useMemo(() => {
-    const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-    const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-    return { width, height };
-  }, []);
-  const scanBoxSize = useMemo(
-    () => getCodeScanBoxSize(viewport.width, viewport.height),
-    [viewport.height, viewport.width],
-  );
+  const previewScale = scannerSize.width
+    ? Math.max(viewport.width / scannerSize.width, viewport.height / scannerSize.height)
+    : Math.min(1, viewport.width / SCANNER_RENDER_WIDTH);
+  const visibleScanBoxSize = scannerSize.width
+    ? getCodeScanBoxSize(viewport.width, viewport.height)
+    : { width: 0, height: 0 };
 
   const showScanFailure = useCallback(() => {
     message.error(t('Code recognition failed, please scan again'));
@@ -76,12 +84,19 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     enabled: visible && cameraAvailable,
     elementId: scannerElementId,
     formatsToSupport,
-    scanBoxSize,
+    onScannerSizeChanged: setScannerSize,
+    scanViewportRef: scannerViewportRef,
     onScanSuccess: handleScanSuccess,
     onScanFailure: showScanFailure,
     onCameraStartFailure: showCameraStartFailure,
   });
 
+  useEffect(() => {
+    const handleResize = () => setViewport(getViewportSize());
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   useEffect(() => {
     if (!visible) {
       return;
@@ -152,18 +167,22 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     inset: 0;
     overflow: hidden;
   `;
+  const scannerSurfaceClass = css`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: center;
+  `;
   const scannerClass = css`
     position: relative;
     width: 100%;
-    height: 100%;
-    overflow: hidden;
+    line-height: 0;
 
     video {
-      position: absolute !important;
-      inset: 0 !important;
       width: 100% !important;
-      height: 100% !important;
-      object-fit: cover !important;
+      height: auto !important;
+      max-width: none !important;
+      display: block !important;
     }
 
     #qr-shaded-region {
@@ -190,27 +209,37 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
 
   return (
     <div className={rootClass}>
-      <div className={scannerWrapperClass}>
-        <div id={scannerElementId} className={scannerClass} />
+      <div ref={scannerViewportRef} className={scannerWrapperClass}>
+        <div
+          className={scannerSurfaceClass}
+          style={{
+            width: `${SCANNER_RENDER_WIDTH}px`,
+            transform: `translate(-50%, -50%) scale(${previewScale})`,
+          }}
+        >
+          <div id={scannerElementId} className={scannerClass} />
+        </div>
       </div>
+      {cameraAvailable && scannerSize.width > 0 && (
+        <ScanBox
+          style={{
+            position: 'fixed',
+            top: `${(viewport.height - visibleScanBoxSize.height) / 2}px`,
+            left: `${(viewport.width - visibleScanBoxSize.width) / 2}px`,
+            width: `${visibleScanBoxSize.width}px`,
+            height: `${visibleScanBoxSize.height}px`,
+          }}
+        />
+      )}
+      <Button
+        aria-label={t('Close')}
+        className={closeButtonClass}
+        icon={<LeftOutlined />}
+        type="text"
+        onClick={onClose}
+      />
       {cameraAvailable && (
         <>
-          <ScanBox
-            style={{
-              position: 'fixed',
-              top: `${(viewport.height - scanBoxSize.height) / 2}px`,
-              left: `${(viewport.width - scanBoxSize.width) / 2}px`,
-              width: `${scanBoxSize.width}px`,
-              height: `${scanBoxSize.height}px`,
-            }}
-          />
-          <Button
-            aria-label={t('Close')}
-            className={closeButtonClass}
-            icon={<LeftOutlined />}
-            type="text"
-            onClick={onClose}
-          />
           <Button className={albumClass} icon={<FileImageOutlined />} type="text" onClick={handleImageButtonClick}>
             {t('Album')}
           </Button>

package/src/components/form/ScanInput/__tests__/CodeScanner.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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 { act, render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { CodeScanner } from '../CodeScanner';
+
+const mocks = vi.hoisted(() => ({
+  getCameras: vi.fn().mockResolvedValue([{ id: 'rear-camera' }]),
+  scanViewport: null as HTMLElement | null,
+}));
+
+vi.mock('html5-qrcode', () => ({
+  Html5Qrcode: {
+    getCameras: mocks.getCameras,
+  },
+  Html5QrcodeScannerState: {
+    PAUSED: 3,
+    SCANNING: 2,
+  },
+  Html5QrcodeSupportedFormats: {
+    CODABAR: 2,
+    CODE_128: 5,
+    CODE_39: 3,
+    CODE_93: 4,
+    DATA_MATRIX: 6,
+    EAN_13: 9,
+    EAN_8: 10,
+    ITF: 8,
+    PDF_417: 11,
+    QR_CODE: 0,
+    UPC_A: 14,
+    UPC_E: 15,
+  },
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('../useCodeScanner', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../useCodeScanner')>();
+  const ReactModule = await import('react');
+
+  return {
+    ...actual,
+    useCodeScanner: ({
+      enabled,
+      onScannerSizeChanged,
+      scanViewportRef,
+    }: {
+      enabled: boolean;
+      onScannerSizeChanged?: (size: { width: number; height: number }) => void;
+      scanViewportRef?: { current: HTMLElement | null };
+    }) => {
+      ReactModule.useEffect(() => {
+        if (enabled) {
+          mocks.scanViewport = scanViewportRef?.current || null;
+          onScannerSizeChanged?.({ width: 1280, height: 720 });
+        }
+      }, [enabled, onScannerSizeChanged, scanViewportRef]);
+
+      return { startScanFile: vi.fn() };
+    },
+  };
+});
+
+describe('CodeScanner', () => {
+  afterEach(() => {
+    mocks.scanViewport = null;
+    vi.restoreAllMocks();
+  });
+
+  it('keeps the camera preview covering portrait and landscape viewports', async () => {
+    let viewportWidth = 390;
+    let viewportHeight = 844;
+    vi.spyOn(window, 'innerWidth', 'get').mockImplementation(() => viewportWidth);
+    vi.spyOn(window, 'innerHeight', 'get').mockImplementation(() => viewportHeight);
+
+    render(<CodeScanner visible onClose={() => undefined} onScanSuccess={() => undefined} />);
+
+    await waitFor(() => expect(document.getElementById('code-scan-box')).toBeInTheDocument());
+    expect(mocks.scanViewport).toBeInstanceOf(HTMLElement);
+
+    const scannerElement = document.querySelector<HTMLElement>('[id^="code-scanner-"]');
+    const scannerSurface = scannerElement?.parentElement;
+    const scanBox = document.getElementById('code-scan-box');
+    expect(scannerSurface?.style.transform).toBe(`translate(-50%, -50%) scale(${844 / 720})`);
+    expect(scanBox).toHaveStyle({ width: '351px', height: '540px' });
+
+    viewportWidth = 844;
+    viewportHeight = 390;
+    act(() => window.dispatchEvent(new Event('resize')));
+
+    await waitFor(() => {
+      expect(scannerSurface?.style.transform).toBe(`translate(-50%, -50%) scale(${844 / 1280})`);
+      expect(scanBox).toHaveStyle({ width: '759px', height: '273px' });
+    });
+  });
+});