feat(client): adjust toolbar for Table Actions (#4538)

* feat(client): adjust toolbar for Table Actions * chore: ensure backward compatibility * chore: update e2e tests * chore: fix fialed unit tests * Revert "chore: update e2e tests" This reverts commit 0a70171. * chore: update e2e tests * chore: update e2e tests * chore: don't forget to revert me * chore: update e2e tests * chore: update e2e tests * Revert "chore: don't forget to revert me" This reverts commit 29a51df. * chore: update timeout and retries in defineConfig * chore: make e2e tests more stable * chore: make e2e tests more stable
nocobase · Jun 2, 2024 · 773f05d · 773f05d
1 parent 6bc3f7a
commit 773f05d
Show file tree

Hide file tree

Showing 20 changed files with 216 additions and 174 deletions.
diff --git a/packages/core/client/src/modules/actions/disassociate/__e2e__/disassociate.test.ts b/packages/core/client/src/modules/actions/disassociate/__e2e__/disassociate.test.ts
@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { test, expect } from '@nocobase/test/e2e';
+import { expect, test } from '@nocobase/test/e2e';
 import { disassociatePage } from './templatesOfPage';
 
 test('basic', async ({ page, mockPage, mockRecord }) => {
@@ -35,7 +35,7 @@ test('basic', async ({ page, mockPage, mockRecord }) => {
     .hover();
   await page
     .getByTestId('drawer-Action.Container-collection1-Edit record')
-    .getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-collection2')
+    .getByLabel('designer-schema-initializer-TableV2.Column-fieldSettings:TableColumn-collection2')
     .hover();
   await page.getByRole('menuitem', { name: 'Disassociate' }).click();
 

diff --git a/...re/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts b/...re/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaInitializer.test.ts
@@ -88,15 +88,15 @@ test.describe('configure actions column', () => {
     await expectActionsColumnWidth(200);
 
     await page.getByText('Actions', { exact: true }).hover();
-    await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-users').hover();
+    await page.getByLabel('designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-users').hover();
     await page.getByRole('menuitem', { name: 'Column width' }).click();
 
     await expect(page.getByRole('dialog').getByText('Column width')).toBeVisible();
 
     // 修改列宽度为 400
     await page.getByRole('dialog').getByRole('spinbutton').click();
     await page.getByRole('dialog').getByRole('spinbutton').fill('400');
-    await page.getByTestId('modal-Action.Modal-users-Column width').getByRole('button', { name: 'Submit' }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
 
     await expectActionsColumnWidth(400);
   });

diff --git a/.../core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaSettings.test.ts b/.../core/client/src/modules/blocks/data-blocks/table-selector/__e2e__/schemaSettings.test.ts
@@ -7,9 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { expectSettingsMenu, test, expect } from '@nocobase/test/e2e';
-import { createTable } from './utils';
+import { expect, expectSettingsMenu, test } from '@nocobase/test/e2e';
 import { tableSelectorDataScopeVariable } from './templatesOfBug';
+import { createTable } from './utils';
 
 test.describe('table data selector schema settings', () => {
   test('supported options', async ({ page, mockPage }) => {
@@ -126,7 +126,10 @@ test.describe('table data selector schema settings', () => {
     await page.getByRole('button', { name: 'OK', exact: true }).click();
 
     // Table 中显示 singleLineText 字段
-    await page.getByLabel('schema-initializer-TableV2.').hover();
+    await page
+      .getByTestId('drawer-AssociationField.Selector-table-selector-data-scope-variable-Select record')
+      .getByLabel('schema-initializer-TableV2.')
+      .hover();
     await page.getByRole('menuitem', { name: 'singleLineText' }).click();
     await page.mouse.move(300, 0);
 

diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/TableActionColumnInitializers.tsx b/packages/core/client/src/modules/blocks/data-blocks/table/TableActionColumnInitializers.tsx
@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { MenuOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import _ from 'lodash';
 import React from 'react';
@@ -145,147 +145,121 @@ const commonOptions = {
   Component: (props: any) => {
     const { getAriaLabel } = useGetAriaLabelOfDesigner();
     return (
-      <MenuOutlined
+      <PlusOutlined
         {...props}
         role="button"
-        aria-label={getAriaLabel('schema-settings')}
+        aria-label={getAriaLabel('schema-initializer')}
         style={{ cursor: 'pointer' }}
       />
     );
   },
   items: [
     {
-      type: 'itemGroup',
-      name: 'actions',
-      title: '{{t("Configure actions")}}',
-      children: [
-        {
-          type: 'item',
-          title: '{{t("View")}}',
-          name: 'view',
-          Component: 'ViewActionInitializer',
-          schema: {
-            'x-component': 'Action.Link',
-            'x-action': 'view',
-            'x-decorator': 'ACLActionProvider',
-          },
-        },
-        {
-          type: 'item',
-          name: 'edit',
-          title: '{{t("Edit")}}',
-          Component: 'UpdateActionInitializer',
-          schema: {
-            'x-component': 'Action.Link',
-            'x-action': 'update',
-            'x-decorator': 'ACLActionProvider',
-          },
-          useVisible() {
-            const collection = useCollection_deprecated();
-            return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Delete")}}',
-          name: 'delete',
-          Component: 'DestroyActionInitializer',
-          schema: {
-            'x-component': 'Action.Link',
-            'x-action': 'destroy',
-            'x-decorator': 'ACLActionProvider',
-          },
-          useVisible() {
-            const collection = useCollection_deprecated();
-            return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Disassociate")}}',
-          name: 'disassociate',
-          Component: 'DisassociateActionInitializer',
-          schema: {
-            'x-component': 'Action.Link',
-            'x-action': 'disassociate',
-            'x-acl-action': 'destroy',
-            'x-decorator': 'ACLActionProvider',
-          },
-          useVisible() {
-            const props = useDataBlockProps();
-            const collection = useCollection_deprecated();
-            return (
-              !!props?.association &&
-              (collection.template !== 'view' || collection?.writableView) &&
-              collection.template !== 'sql'
-            );
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Add child")}}',
-          name: 'addChildren',
-          Component: 'CreateChildInitializer',
-          schema: {
-            'x-component': 'Action.Link',
-            'x-action': 'create',
-            'x-decorator': 'ACLActionProvider',
-          },
-          useVisible() {
-            const fieldSchema = useFieldSchema();
-            const collection = useCollection_deprecated();
-            const { treeTable } = fieldSchema?.parent?.parent['x-decorator-props'] || {};
-            return collection.tree && treeTable;
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Popup")}}',
-          name: 'popup',
-          Component: 'PopupActionInitializer',
-        },
-        {
-          type: 'item',
-          title: '{{t("Update record")}}',
-          name: 'updateRecord',
-          Component: 'UpdateRecordActionInitializer',
-          useVisible() {
-            const collection = useCollection_deprecated();
-            return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
-          },
-        },
-        {
-          name: 'customRequest',
-          title: '{{t("Custom request")}}',
-          Component: 'CustomRequestInitializer',
-          schema: {
-            'x-action': 'customize:table:request',
-          },
-          useVisible() {
-            const collection = useCollection_deprecated();
-            return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
-          },
-        },
-      ],
+      type: 'item',
+      title: '{{t("View")}}',
+      name: 'view',
+      Component: 'ViewActionInitializer',
+      schema: {
+        'x-component': 'Action.Link',
+        'x-action': 'view',
+        'x-decorator': 'ACLActionProvider',
+      },
     },
     {
-      name: 'divider',
-      type: 'divider',
-      sort: 100,
+      type: 'item',
+      name: 'edit',
+      title: '{{t("Edit")}}',
+      Component: 'UpdateActionInitializer',
+      schema: {
+        'x-component': 'Action.Link',
+        'x-action': 'update',
+        'x-decorator': 'ACLActionProvider',
+      },
+      useVisible() {
+        const collection = useCollection_deprecated();
+        return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
+      },
     },
     {
-      name: 'fixed',
-      title: 't("Fixed")',
       type: 'item',
-      Component: SchemaSettingsFixed,
-      sort: 100,
+      title: '{{t("Delete")}}',
+      name: 'delete',
+      Component: 'DestroyActionInitializer',
+      schema: {
+        'x-component': 'Action.Link',
+        'x-action': 'destroy',
+        'x-decorator': 'ACLActionProvider',
+      },
+      useVisible() {
+        const collection = useCollection_deprecated();
+        return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
+      },
+    },
+    {
+      type: 'item',
+      title: '{{t("Disassociate")}}',
+      name: 'disassociate',
+      Component: 'DisassociateActionInitializer',
+      schema: {
+        'x-component': 'Action.Link',
+        'x-action': 'disassociate',
+        'x-acl-action': 'destroy',
+        'x-decorator': 'ACLActionProvider',
+      },
+      useVisible() {
+        const props = useDataBlockProps();
+        const collection = useCollection_deprecated();
+        return (
+          !!props?.association &&
+          (collection.template !== 'view' || collection?.writableView) &&
+          collection.template !== 'sql'
+        );
+      },
     },
     {
       type: 'item',
-      name: 'columnWidth',
-      title: 't("Column width")',
-      Component: Resizable,
-      sort: 100,
+      title: '{{t("Add child")}}',
+      name: 'addChildren',
+      Component: 'CreateChildInitializer',
+      schema: {
+        'x-component': 'Action.Link',
+        'x-action': 'create',
+        'x-decorator': 'ACLActionProvider',
+      },
+      useVisible() {
+        const fieldSchema = useFieldSchema();
+        const collection = useCollection_deprecated();
+        const { treeTable } = fieldSchema?.parent?.parent['x-decorator-props'] || {};
+        return collection.tree && treeTable;
+      },
+    },
+    {
+      type: 'item',
+      title: '{{t("Popup")}}',
+      name: 'popup',
+      Component: 'PopupActionInitializer',
+    },
+    {
+      type: 'item',
+      title: '{{t("Update record")}}',
+      name: 'updateRecord',
+      Component: 'UpdateRecordActionInitializer',
+      useVisible() {
+        const collection = useCollection_deprecated();
+        return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
+      },
+    },
+    {
+      name: 'customRequest',
+      title: '{{t("Custom request")}}',
+      Component: 'CustomRequestInitializer',
+      schema: {
+        'x-action': 'customize:table:request',
+      },
+      useVisible() {
+        const collection = useCollection_deprecated();
+        return (collection.template !== 'view' || collection?.writableView) && collection.template !== 'sql';
+      },
     },
   ],
 };

diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/TableColumnSchemaToolbar.tsx b/packages/core/client/src/modules/blocks/data-blocks/table/TableColumnSchemaToolbar.tsx
@@ -7,9 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import _ from 'lodash';
 import React from 'react';
 import { SchemaToolbar } from '../../../../schema-settings';
 
 export const TableColumnSchemaToolbar = (props) => {
-  return <SchemaToolbar initializer={false} showBorder={false} showBackground {...props} />;
+  return (
+    <SchemaToolbar
+      initializer={props.initializer || false}
+      showBorder={false}
+      showBackground
+      {..._.omit(props, 'initializer')}
+    />
+  );
 };
diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaInitializer.test.ts b/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaInitializer.test.ts
@@ -136,7 +136,7 @@ test.describe('configure actions column', () => {
 
     // add view & Edit & Delete & Duplicate ------------------------------------------------------------
     await page.getByText('Actions', { exact: true }).hover();
-    await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-t_unp4scqamw9').hover();
+    await page.getByLabel('designer-schema-initializer-TableV2.Column-TableV2.ActionColumnDesigner-').hover();
     await page.getByRole('menuitem', { name: 'View' }).click();
     await page.getByRole('menuitem', { name: 'Edit' }).click();
     await page.getByRole('menuitem', { name: 'Delete' }).click();
@@ -162,7 +162,7 @@ test.describe('configure actions column', () => {
 
     // add custom action ------------------------------------------------------------
     await page.getByText('Actions', { exact: true }).hover();
-    await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-t_unp4scqamw9').hover();
+    await page.getByLabel('designer-schema-initializer-TableV2.Column-TableV2.ActionColumnDesigner-').hover();
 
     await page.getByRole('menuitem', { name: 'Popup' }).click();
     // 此时二级菜单，不应该关闭，可以继续点击？
@@ -182,14 +182,14 @@ test.describe('configure actions column', () => {
     await expect(page.getByRole('columnheader', { name: 'Actions', exact: true })).toHaveJSProperty('offsetWidth', 200);
 
     await page.getByText('Actions', { exact: true }).hover();
-    await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-t_unp4scqamw9').hover();
+    await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-').hover();
     await page.getByRole('menuitem', { name: 'Column width' }).click();
 
     await expect(page.getByRole('dialog').getByText('Column width')).toBeVisible();
 
     await page.getByRole('dialog').getByRole('spinbutton').click();
     await page.getByRole('dialog').getByRole('spinbutton').fill('400');
-    await page.getByRole('button', { name: 'Submit' }).click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
 
     await expect(page.getByRole('columnheader', { name: 'Actions', exact: true })).toHaveJSProperty('offsetWidth', 400);
   });

diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaSettings.test.ts b/packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaSettings.test.ts
@@ -35,7 +35,7 @@ const addSomeCustomActions = async (page: Page) => {
 
   // 再增加两个自定义的 actions
   await page.getByRole('button', { name: 'Actions', exact: true }).hover();
-  await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-general').hover();
+  await page.getByLabel('designer-schema-initializer-TableV2.Column-TableV2.ActionColumnDesigner-general').hover();
   await page.getByRole('menuitem', { name: 'Popup' }).click();
   await page.getByRole('menuitem', { name: 'Update record' }).click();
 };
@@ -393,7 +393,9 @@ test.describe('actions schema settings', () => {
       const openPopup = async () => {
         if (!(await page.getByLabel('action-Action.Link-Update record-customize:update-users2-table-0').isVisible())) {
           await page.getByRole('button', { name: 'Actions', exact: true }).hover();
-          await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-users2').hover();
+          await page
+            .getByLabel('designer-schema-initializer-TableV2.Column-TableV2.ActionColumnDesigner-users2')
+            .hover();
           await page.getByRole('menuitem', { name: 'Update record' }).click();
         }
 
@@ -476,7 +478,7 @@ test.describe('actions schema settings', () => {
 
       // 添加 add child 按钮
       await page.getByRole('button', { name: 'Actions', exact: true }).hover();
-      await page.getByLabel('designer-schema-settings-TableV2.Column-TableV2.ActionColumnDesigner-tree').hover();
+      await page.getByLabel('designer-schema-initializer-TableV2.Column-TableV2.ActionColumnDesigner-tree').hover();
       await page.getByRole('menuitem', { name: 'Add child' }).click();
 
       await expectSettingsMenu({