feat: udpate table header

1. update table header's buttons postion 2. update e2e command to adjust the change Change-Id: I50379428eaad9ba3b4571987b2478e6f05d25caa
2023-11-17 15:07:36 +08:00 · 2023-11-17 15:07:36 +08:00 · 91c5b7933b
commit 91c5b7933b
parent 968e2cf577
41 changed files with 211 additions and 152 deletions
--- a/docs/en/test/3-1-E2E-form-operation.md
+++ b/docs/en/test/3-1-E2E-form-operation.md
@ -48,11 +48,11 @@ Because of the consistency of the front-end framework, when we write related use
        .wait(10000);
      cy.tableSearchText(name)
        .selectFirst()
-        .clickHeaderButtonByTitle('Start')
+        .clickHeaderActionButtonByTitle('Start')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Reboot')
+        .clickHeaderActionButtonByTitle('Reboot')
        .checkDisableAction(2000);
    });
    ```
@ -66,7 +66,7 @@ Because of the consistency of the front-end framework, when we write related use

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .url()
        .should('include', `${listUrl}/create`)
        .wait(5000)
@ -149,7 +149,7 @@ Looking at the structure and style of the elements through the page, I found tha
      const volumeJson = {
        name: volumeName,
      };
-      cy.clickHeaderButton(1, 2000)
+      cy.clickHeaderActionButton(0, 2000)
        .formAttachFile('content', contentFile)
        .formAttachFile('params', paramFile)
        .clickStepActionNextButton()
@ -280,14 +280,14 @@ Looking at the structure and style of the elements through the page, I found tha

    ```javascript
    it('successfully create full backup', () => {
-      cy.clickHeaderButton(1, 5000)
+      cy.clickHeaderActionButton(0, 5000)
        .formInput('name', name)
        .formTableSelectBySearch('volume', volumeName)
        .clickModalActionSubmitButton()
        .wait(5000)
        .waitTableLoading();

-      cy.clickHeaderButton(1, 5000)
+      cy.clickHeaderActionButton(0, 5000)
        .formInput('name', nameIns)
        .formTableSelectBySearchOption('volume', 'Status', 'In-use')
        .clickModalActionSubmitButton();
@ -306,7 +306,7 @@ Looking at the structure and style of the elements through the page, I found tha

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('name', name)
        .formSelect('policy')
        .clickModalActionSubmitButton();
@ -336,7 +336,7 @@ Looking at the structure and style of the elements through the page, I found tha

    ```javascript
    it('successfully create by file', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formRadioChoose('type', 1)
        .formInput('name', nameByFile)
        .formAttachFile('public_key', filename)
@ -356,7 +356,7 @@ Looking at the structure and style of the elements through the page, I found tha

    ```javascript
    it('successfully create by file', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formRadioChoose('type', 1)
        .formInput('name', nameByFile)
        .formAttachFile('public_key', filename)
@ -372,7 +372,7 @@ Looking at the structure and style of the elements through the page, I found tha

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .url()
        .should('include', `${listUrl}/create`)
        .formInput('name', name)
@ -420,7 +420,7 @@ Looking at the structure and style of the elements through the page, I found tha

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .wait(2000)
        .formInput('name', name)
        .formText('description', name)
--- a/docs/en/test/3-2-E2E-table-operation.md
+++ b/docs/en/test/3-2-E2E-table-operation.md
@ -126,7 +126,7 @@ Mainly include: waiting for the list to load
    const volumeJson = {
      name: volumeName,
    };
-    cy.clickHeaderButton(1, 2000)
+    cy.clickHeaderActionButton(0, 2000)
      .formAttachFile('content', contentFile)
      .formAttachFile('params', paramFile)
      .clickStepActionNextButton()
@ -210,7 +210,7 @@ Mainly include: waiting for the list to load
        .tableSearchText(name)
        .checkColumnValue(6, 'Shutoff')
        .selectFirst()
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000);
    });
    ```
@ -237,7 +237,7 @@ Mainly include: waiting for the list to load
        .tableSearchText(name)
        .checkColumnValue(6, 'Shutoff')
        .selectFirst()
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000);
    });
    ```
@ -260,7 +260,7 @@ Mainly include: waiting for the list to load
      const volumeJson = {
        name: volumeName,
      };
-      cy.clickHeaderButton(1, 2000)
+      cy.clickHeaderActionButton(0, 2000)
        .formAttachFile('content', contentFile)
        .formAttachFile('params', paramFile)
        .clickStepActionNextButton()
@ -290,7 +290,7 @@ Mainly contains

 The buttons above the table generally include: refresh, create, batch operation button, configure table list items, download

- `clickHeaderButton`
+- `clickHeaderActionButton`

  - Click the button above the table,
  - Parameter `buttonIndex`, the subscript of the button above the table
@ -300,7 +300,7 @@ The buttons above the table generally include: refresh, create, batch operation

  ```javascript
  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .clickModalActionSubmitButton()
      .wait(5000);
@ -309,7 +309,7 @@ The buttons above the table generally include: refresh, create, batch operation

  ![header-btn-index](images/e2e/table/header-btn-index.png)

- `clickHeaderButtonByTitle`
+- `clickHeaderActionButtonByTitle`

  - Click the button above the table by name, generally used for batch operation button clicks

@ -326,7 +326,7 @@ The buttons above the table generally include: refresh, create, batch operation
        .tableSearchText(name)
        .checkColumnValue(6, 'Shutoff')
        .selectFirst()
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000);
    });
    ```
@ -573,11 +573,11 @@ The buttons above the table generally include: refresh, create, batch operation
        .wait(10000);
      cy.tableSearchText(name)
        .selectFirst()
-        .clickHeaderButtonByTitle('Start')
+        .clickHeaderActionButtonByTitle('Start')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Reboot')
+        .clickHeaderActionButtonByTitle('Reboot')
        .checkDisableAction(2000);
    });
    ```
--- a/docs/zh/test/3-1-E2E-form-operation.md
+++ b/docs/zh/test/3-1-E2E-form-operation.md
@ -48,11 +48,11 @@
        .wait(10000);
      cy.tableSearchText(name)
        .selectFirst()
-        .clickHeaderButtonByTitle('Start')
+        .clickHeaderActionButtonByTitle('Start')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Reboot')
+        .clickHeaderActionButtonByTitle('Reboot')
        .checkDisableAction(2000);
    });
    ```
@ -66,7 +66,7 @@

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .url()
        .should('include', `${listUrl}/create`)
        .wait(5000)
@ -149,7 +149,7 @@
      const volumeJson = {
        name: volumeName,
      };
-      cy.clickHeaderButton(1, 2000)
+      cy.clickHeaderActionButton(0, 2000)
        .formAttachFile('content', contentFile)
        .formAttachFile('params', paramFile)
        .clickStepActionNextButton()
@ -280,14 +280,14 @@

    ```javascript
    it('successfully create full backup', () => {
-      cy.clickHeaderButton(1, 5000)
+      cy.clickHeaderActionButton(0, 5000)
        .formInput('name', name)
        .formTableSelectBySearch('volume', volumeName)
        .clickModalActionSubmitButton()
        .wait(5000)
        .waitTableLoading();

-      cy.clickHeaderButton(1, 5000)
+      cy.clickHeaderActionButton(0, 5000)
        .formInput('name', nameIns)
        .formTableSelectBySearchOption('volume', 'Status', 'In-use')
        .clickModalActionSubmitButton();
@ -306,7 +306,7 @@

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('name', name)
        .formSelect('policy')
        .clickModalActionSubmitButton();
@ -336,7 +336,7 @@

    ```javascript
    it('successfully create by file', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formRadioChoose('type', 1)
        .formInput('name', nameByFile)
        .formAttachFile('public_key', filename)
@ -356,7 +356,7 @@

    ```javascript
    it('successfully create by file', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formRadioChoose('type', 1)
        .formInput('name', nameByFile)
        .formAttachFile('public_key', filename)
@ -372,7 +372,7 @@

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .url()
        .should('include', `${listUrl}/create`)
        .formInput('name', name)
@ -420,7 +420,7 @@

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .wait(2000)
        .formInput('name', name)
        .formText('description', name)
--- a/docs/zh/test/3-2-E2E-table-operation.md
+++ b/docs/zh/test/3-2-E2E-table-operation.md
@ -117,7 +117,7 @@
      const volumeJson = {
        name: volumeName,
      };
-      cy.clickHeaderButton(1, 2000)
+      cy.clickHeaderActionButton(0, 2000)
        .formAttachFile('content', contentFile)
        .formAttachFile('params', paramFile)
        .clickStepActionNextButton()
@ -197,7 +197,7 @@
        .tableSearchText(name)
        .checkColumnValue(6, 'Shutoff')
        .selectFirst()
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000);
    });
    ```
@ -222,7 +222,7 @@
        .tableSearchText(name)
        .checkColumnValue(6, 'Shutoff')
        .selectFirst()
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000);
    });
    ```
@ -243,7 +243,7 @@
      const volumeJson = {
        name: volumeName,
      };
-      cy.clickHeaderButton(1, 2000)
+      cy.clickHeaderActionButton(0, 2000)
        .formAttachFile('content', contentFile)
        .formAttachFile('params', paramFile)
        .clickStepActionNextButton()
@ -270,7 +270,7 @@
 ### 表单上方按钮的操作

 表格上方的按钮一般包含：刷新、创建、批量操作按钮、配置表格列表项、下载
- `clickHeaderButton`
+- `clickHeaderActionButton`
  - 点击表格上方的按钮，
  - 参数`buttonIndex`，表格上方按钮的下标
  - 参数`waitTime`，点击后的等待时间，默认为 2 秒
@ -279,7 +279,7 @@

    ```javascript
    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('name', name)
        .clickModalActionSubmitButton()
        .wait(5000);
@ -288,7 +288,7 @@

    ![header-btn-index](images/e2e/table/header-btn-index.png)

- `clickHeaderButtonByTitle`
+- `clickHeaderActionButtonByTitle`
  - 通过名称点击表格上方的按钮，一般用于批量操作按钮的点击
  - 参数`title`，表格上方按钮上的文字
  - 参数`waitTime`，点击后的等待时间，默认为 2 秒
@ -303,7 +303,7 @@
        .tableSearchText(name)
        .checkColumnValue(6, 'Shutoff')
        .selectFirst()
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000);
    });
    ```
@ -532,11 +532,11 @@
        .wait(10000);
      cy.tableSearchText(name)
        .selectFirst()
-        .clickHeaderButtonByTitle('Start')
+        .clickHeaderActionButtonByTitle('Start')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000)
-        .clickHeaderButtonByTitle('Reboot')
+        .clickHeaderActionButtonByTitle('Reboot')
        .checkDisableAction(2000);
    });
    ```
--- a/releasenotes/notes/Update-Table-Header-e279ab2ff792cbb6.yaml
+++ b/releasenotes/notes/Update-Table-Header-e279ab2ff792cbb6.yaml
@ -0,0 +1,8 @@
+---
+features:
+  - |
+    Update table header:
+
+    * Move all common table buttons to the right top of the table, such as refresh button, download button, custom button, auto-refresh button.
+
+    * Move the quick search of the MagicInput component from the behind the search input to the front.
--- a/src/components/MagicInput/index.jsx
+++ b/src/components/MagicInput/index.jsx
@ -560,6 +560,7 @@ class MagicInput extends PureComponent {
          'magic-input-outer-wrapper'
        )}
      >
+        {this.renderChecks()}
        <Row
          className={classnames(
            'magic-input-wrapper',
@ -593,7 +594,6 @@ class MagicInput extends PureComponent {
          </Col>
          {this.renderClose()}
        </Row>
-        {this.renderChecks()}
      </div>
    );
  }
--- a/src/components/MagicInput/index.less
+++ b/src/components/MagicInput/index.less
@ -166,7 +166,12 @@
 }

 .magic-input-checks {
-  min-width: 158px;
  margin-left: 8px;
  line-height: 32px;
+
+  :global {
+    .ant-checkbox + span {
+      text-wrap: nowrap;
+    }
+  }
 }
--- a/src/components/Tables/Base/index.jsx
+++ b/src/components/Tables/Base/index.jsx
@ -786,6 +786,19 @@ export class BaseTable extends React.Component {
  renderNormalTitle() {
    return (
      <div className={styles['table-header']} id="sl-table-header-search">
+        <div
+          className={classnames(
+            styles['table-header-action-btns'],
+            'table-header-action-btns'
+          )}
+        >
+          {this.renderActions()}
+          {this.renderBatchActions()}
+        </div>
+        {this.renderTimeFilter()}
+        {this.renderMiddleInHeader()}
+        <div className={styles['table-header-right']}>
+          {this.renderSearch()}
          <div
            className={classnames(
              styles['table-header-btns'],
@ -793,15 +806,11 @@ export class BaseTable extends React.Component {
            )}
          >
            {this.renderRefresh()}
-          {this.renderActions()}
-          {this.renderBatchActions()}
-          {this.renderCustomButton()}
            {this.renderDownload()}
+            {this.renderCustomButton()}
            {this.renderRefreshAuto()}
          </div>
-        {this.renderTimeFilter()}
-        {this.renderMiddleInHeader()}
-        {this.renderSearch()}
+        </div>
      </div>
    );
  }
--- a/src/components/Tables/Base/index.less
+++ b/src/components/Tables/Base/index.less
@ -66,7 +66,8 @@
  justify-content: space-between;
 }

-.table-header-btns {
+.table-header-btns,
+.table-header-action-btns {
  position: relative;
  display: inline-block;
  margin-bottom: calc(@body-padding - 4px);
@ -84,7 +85,6 @@
 }

 .search-row {
-  float: right;
  min-width: 350px;
 }

@ -92,3 +92,23 @@
  width: 288px;
  height: 32px;
 }
+
+// .table-header-action-btns {
+//   flex-grow: 0;
+//   flex-shrink: 0;
+// }
+
+.table-header-right {
+  display: flex;
+}
+
+.table-header-btns {
+  margin-right: 0;
+  margin-left: 10px;
+
+  :global {
+    button:last-child {
+      margin-right: 0;
+    }
+  }
+}
--- a/test/e2e/integration/pages/compute/aggregate.spec.js
+++ b/test/e2e/integration/pages/compute/aggregate.spec.js
@ -26,7 +26,7 @@ describe('The Aggregate Page', () => {
  });

  it('successfully create aggregate', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .clickModalActionSubmitButton();
  });
--- a/test/e2e/integration/pages/compute/baremetal.spec.js
+++ b/test/e2e/integration/pages/compute/baremetal.spec.js
@ -58,7 +58,7 @@ describe('The Bare Metal Page', () => {
    });

    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .wait(2000)
        .formInput('name', name)
        .formSelect('driver')
--- a/test/e2e/integration/pages/compute/flavor.spec.js
+++ b/test/e2e/integration/pages/compute/flavor.spec.js
@ -31,7 +31,7 @@ describe('The Flavor Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .wait(2000)
      .formRadioChoose('architecture', 1)
      .formRadioChoose('category', 0)
--- a/test/e2e/integration/pages/compute/image.spec.js
+++ b/test/e2e/integration/pages/compute/image.spec.js
@ -52,7 +52,7 @@ describe('The Image Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .url()
      .should('include', `${listUrl}/create`)
      .formInput('name', name)
@ -74,7 +74,7 @@ describe('The Image Page', () => {
  it('successfully create shared image by admin', () => {
    cy.loginAdmin(imageListUrlAdmin)
      .wait(2000)
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .wait(5000)
      .formInput('name', sharedImage)
      .formTableSelectBySearch('owner', projectName)
--- a/test/e2e/integration/pages/compute/instance.spec.js
+++ b/test/e2e/integration/pages/compute/instance.spec.js
@ -39,7 +39,7 @@ describe('The Instance Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .url()
      .should('include', `${listUrl}/create`)
      .wait(5000)
@ -87,11 +87,11 @@ describe('The Instance Page', () => {
      .wait(10000);
    cy.tableSearchText(name)
      .selectFirst()
-      .clickHeaderButtonByTitle('Start')
+      .clickHeaderActionButtonByTitle('Start')
      .checkDisableAction(2000)
-      .clickHeaderButtonByTitle('Stop')
+      .clickHeaderActionButtonByTitle('Stop')
      .checkDisableAction(2000)
-      .clickHeaderButtonByTitle('Reboot')
+      .clickHeaderActionButtonByTitle('Reboot')
      .checkDisableAction(2000);
  });

@ -114,7 +114,7 @@ describe('The Instance Page', () => {
      .waitStatusActive()
      .checkColumnValue(6, 'Active')
      .selectFirst()
-      .clickHeaderButtonByTitle('Start')
+      .clickHeaderActionButtonByTitle('Start')
      .checkDisableAction(2000);
  });

--- a/test/e2e/integration/pages/compute/ironic.spec.js
+++ b/test/e2e/integration/pages/compute/ironic.spec.js
@ -53,7 +53,7 @@ onlyOn(ironicServiceEnabled, () => {
    });

    it('successfully create', () => {
-      cy.clickHeaderButton(2)
+      cy.clickHeaderActionButton(2)
        .wait(5000)
        .formTableSelect('flavor')
        .formRadioChooseByLabel('image', imageType)
@ -107,7 +107,7 @@ onlyOn(ironicServiceEnabled, () => {
        .tableSearchText(name)
        .checkColumnValue(6, 'Shutoff')
        .selectFirst()
-        .clickHeaderButtonByTitle('Stop')
+        .clickHeaderActionButtonByTitle('Stop')
        .checkDisableAction(2000);
    });

@ -117,7 +117,7 @@ onlyOn(ironicServiceEnabled, () => {
        .waitStatusActive()
        .checkColumnValue(6, 'Active')
        .selectFirst()
-        .clickHeaderButtonByTitle('Start')
+        .clickHeaderActionButtonByTitle('Start')
        .checkDisableAction(2000);
    });

--- a/test/e2e/integration/pages/compute/keypair.spec.js
+++ b/test/e2e/integration/pages/compute/keypair.spec.js
@ -26,14 +26,14 @@ describe('The Keypair Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .clickModalActionSubmitButton()
      .wait(5000);
  });

  it('successfully create by file', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formRadioChoose('type', 1)
      .formInput('name', nameByFile)
      .formAttachFile('public_key', filename)
--- a/test/e2e/integration/pages/compute/server-group.spec.js
+++ b/test/e2e/integration/pages/compute/server-group.spec.js
@ -32,7 +32,7 @@ describe('The Server Group Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .formSelect('policy')
      .clickModalActionSubmitButton();
@ -50,7 +50,7 @@ describe('The Server Group Page', () => {
    const password = 'passW0rd_1';
    cy.tableSearchText(name)
      .goToDetail()
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formTableSelect('flavor')
      .formRadioChooseByLabel('image', imageType)
      .formTableSelectBySearch('image', imageName)
--- a/test/e2e/integration/pages/configuration/metadata.spec.js
+++ b/test/e2e/integration/pages/configuration/metadata.spec.js
@ -24,7 +24,7 @@ describe('The Metadata Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formAttachFile('metadata', filename)
      .clickModalActionSubmitButton();
  });
--- a/test/e2e/integration/pages/configuration/system.spec.js
+++ b/test/e2e/integration/pages/configuration/system.spec.js
@ -119,7 +119,7 @@ describe('The System Info Page', () => {
  //     .tableSearchText('l3')
  //     .goToDetail(0)
  //     .clickDetailTab('Router')
-  //     .clickHeaderButton(1)
+  //     .clickHeaderActionButton(0)
  //     .wait(10000)
  //     .formTableSelectBySearch('router', routerName)
  //     .clickModalActionSubmitButton();
@ -147,7 +147,7 @@ describe('The System Info Page', () => {
      .tableSearchText('dhcp')
      .goToDetail(0)
      .clickDetailTab('Networks')
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .wait(5000)
      .formTableSelectBySearch('network', networkName)
      .clickModalActionSubmitButton();
--- a/test/e2e/integration/pages/heat/stack.spec.js
+++ b/test/e2e/integration/pages/heat/stack.spec.js
@ -43,7 +43,7 @@ onlyOn(heatServiceEnabled, () => {
      const volumeJson = {
        name: volumeName,
      };
-      cy.clickHeaderButton(1, 2000)
+      cy.clickHeaderActionButton(0, 2000)
        .formAttachFile('content', contentFile)
        .formAttachFile('params', paramFile)
        .clickStepActionNextButton()
@ -105,7 +105,7 @@ onlyOn(heatServiceEnabled, () => {
      const volumeJson = {
        name: volumeNameAbandon,
      };
-      cy.clickHeaderButton(1, 2000)
+      cy.clickHeaderActionButton(0, 2000)
        .formAttachFile('content', contentFile)
        .formAttachFile('params', paramFile)
        .clickStepActionNextButton()
--- a/test/e2e/integration/pages/identity/project.spec.js
+++ b/test/e2e/integration/pages/identity/project.spec.js
@ -32,7 +32,7 @@ describe('The Project Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .clickModalActionSubmitButton()
      .waitTableLoading();
--- a/test/e2e/integration/pages/identity/user-group.spec.js
+++ b/test/e2e/integration/pages/identity/user-group.spec.js
@ -30,7 +30,7 @@ describe('The User Group Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .clickModalActionSubmitButton();
  });
--- a/test/e2e/integration/pages/identity/user.spec.js
+++ b/test/e2e/integration/pages/identity/user.spec.js
@ -41,7 +41,7 @@ describe('The User Page', () => {
  it('successfully create', () => {
    const creatUrl = `${listUrl}/create`;

-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .url()
      .should('include', creatUrl)
      .formInput('name', name)
--- a/test/e2e/integration/pages/manila/share-type.spec.js
+++ b/test/e2e/integration/pages/manila/share-type.spec.js
@ -38,7 +38,7 @@ onlyOn(manilaServiceEnabled, () => {
    });

    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('name', name)
        .formText('description', 'create')
        .formSelect('driver_handles_share_servers')
@ -60,7 +60,7 @@ onlyOn(manilaServiceEnabled, () => {
        .goToDetail()
        .clickDetailTab('Extra Specs')
        .wait(5000)
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .formInput('keyName', extraKeyName)
        .formInput('value', 1000)
        .clickModalActionSubmitButton();
--- a/test/e2e/integration/pages/network/floatingip.spec.js
+++ b/test/e2e/integration/pages/network/floatingip.spec.js
@ -45,7 +45,7 @@ describe('The Floating IP Page', () => {
  it('successfully create', () => {
    cy.wait(2000);
    cy.intercept('GET', '/networks').as('networks');
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .wait('@networks')
      .formSelect('floating_network_id')
      .clickModalActionSubmitButton();
@ -54,7 +54,7 @@ describe('The Floating IP Page', () => {
  it('successfully batch create', () => {
    cy.wait(2000);
    cy.intercept('GET', '/networks').as('networks');
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .wait('@networks')
      .formSelect('floating_network_id')
      .formCheckboxClick('batch_allocate')
--- a/test/e2e/integration/pages/network/lb.spec.js
+++ b/test/e2e/integration/pages/network/lb.spec.js
@ -51,7 +51,7 @@ onlyOn(lbServiceEnabled, () => {
    });

    it('successfully create lb', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .wait(5000)
        .formInput('name', name)
        .formText('description', name)
@ -117,7 +117,7 @@ onlyOn(lbServiceEnabled, () => {
    it('successfully create listener', () => {
      cy.tableSearchText(name)
        .goToDetail(1, 2000)
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .formInput('name', listener2)
        .formText('description', listener2)
        .formSelect('protocol')
@ -193,7 +193,7 @@ onlyOn(lbServiceEnabled, () => {
        .tableSearchText(listener)
        .goToDetail(0, 2000)
        .clickDetailTab('Members')
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .formButtonClick('extMembers')
        .get('.ant-form-item')
        .eq(1)
--- a/test/e2e/integration/pages/network/network.spec.js
+++ b/test/e2e/integration/pages/network/network.spec.js
@ -35,7 +35,7 @@ describe('The Network Page', () => {
  });

  it('successfully create with subnet', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .formText('description', name)
      .formSelect('availableZone')
--- a/test/e2e/integration/pages/network/port.spec.js
+++ b/test/e2e/integration/pages/network/port.spec.js
@ -48,7 +48,7 @@ describe('The Port Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .formText('description', name)
      .formTableSelectBySearch('network_id', networkName, 5000)
@ -75,7 +75,7 @@ describe('The Port Page', () => {
    cy.tableSearchText(name)
      .goToDetail()
      .clickDetailTab('Allowed Address Pairs')
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formSelect('ip_version')
      .formInput('ip_address', '10.10.10.1/24')
      .formSelect('mac_address')
@ -158,7 +158,7 @@ describe('The Port Page', () => {
    cy.tableSearchText(name)
      .goToDetail()
      .clickDetailTab('Fixed IPs')
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formButtonClick('fixed_ips')
      .formSelect('fixed_ips')
      .clickModalActionSubmitButton();
--- a/test/e2e/integration/pages/network/qos-policy.spec.js
+++ b/test/e2e/integration/pages/network/qos-policy.spec.js
@ -36,7 +36,7 @@ onlyOn(qosServiceEnabled, () => {
    });

    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .wait(2000)
        .formInput('name', name)
        .formText('description', name)
--- a/test/e2e/integration/pages/network/router.spec.js
+++ b/test/e2e/integration/pages/network/router.spec.js
@ -30,7 +30,7 @@ describe('The Router Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1, 5000)
+    cy.clickHeaderActionButton(0, 5000)
      .formInput('name', name)
      .formText('description', name)
      .formTableSelect('hints')
--- a/test/e2e/integration/pages/network/security-group.spec.js
+++ b/test/e2e/integration/pages/network/security-group.spec.js
@ -24,7 +24,7 @@ describe('The Security Group Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .formText('description', name)
      .clickModalActionSubmitButton();
@ -39,7 +39,7 @@ describe('The Security Group Page', () => {
    cy.tableSearchText(name)
      .goToDetail()
      .wait(5000)
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formSelect('ethertype')
      .formInput('sourcePort', 80)
      .formInput('remote_ip_prefix', '192.168.0.0/24')
--- a/test/e2e/integration/pages/network/vpn.spec.js
+++ b/test/e2e/integration/pages/network/vpn.spec.js
@ -51,7 +51,7 @@ onlyOn(vpnServiceEnabled, () => {
    });

    it('successfully create gateway', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('name', gateway)
        .formText('description', gateway)
        .formTableSelectBySearch('router_id', routerName)
@ -60,7 +60,7 @@ onlyOn(vpnServiceEnabled, () => {

    it('successfully create local endpoint', () => {
      cy.clickTab('VPN EndPoint Groups', 'vpn_endpoint_groups')
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .wait(5000)
        .formInput('name', endpointLocal)
        .formText('description', endpointLocal)
@ -73,7 +73,7 @@ onlyOn(vpnServiceEnabled, () => {

    it('successfully create peer endpoint', () => {
      cy.clickTab('VPN EndPoint Groups', 'vpn_endpoint_groups')
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .formInput('name', endpointPeer)
        .formText('description', endpointPeer)
        .formSelect('type', 'Peer')
@ -84,7 +84,7 @@ onlyOn(vpnServiceEnabled, () => {

    it('successfully create ike policy', () => {
      cy.clickTab('IKE Policies', 'ike_policy')
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .formInput('name', ikePolicy)
        .formText('description', ikePolicy)
        .clickModalActionSubmitButton();
@ -92,7 +92,7 @@ onlyOn(vpnServiceEnabled, () => {

    it('successfully create ipsec policy', () => {
      cy.clickTab('IPsec Policies', 'ipsec_policy')
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .formInput('name', ipsecPolicy)
        .formText('description', ipsecPolicy)
        .clickModalActionSubmitButton();
@ -100,7 +100,7 @@ onlyOn(vpnServiceEnabled, () => {

    it('successfully create ipsec site connection', () => {
      cy.clickTab('IPsec Site Connections', 'ipsec_site_connections')
-        .clickHeaderButton(1)
+        .clickHeaderActionButton(0)
        .wait(5000)
        .formInput('name', ipsecSiteConnection)
        .formText('description', ipsecSiteConnection)
--- a/test/e2e/integration/pages/storage/backup.spec.js
+++ b/test/e2e/integration/pages/storage/backup.spec.js
@ -44,7 +44,7 @@ onlyOn(backupServiceEnabled, () => {
    });

    it('successfully create full backup', () => {
-      cy.clickHeaderButton(1, 5000)
+      cy.clickHeaderActionButton(0, 5000)
        .formInput('name', name)
        .formTableSelectBySearch('volume', volumeName)
        .clickModalActionSubmitButton()
@ -54,7 +54,7 @@ onlyOn(backupServiceEnabled, () => {
    });

    it('successfully create increment backup', () => {
-      cy.clickHeaderButton(1, 5000)
+      cy.clickHeaderActionButton(0, 5000)
        .formInput('name', nameInc)
        .formRadioChoose('incremental', 1)
        .formTableSelectBySearch('volume', volumeName)
--- a/test/e2e/integration/pages/storage/qos.spec.js
+++ b/test/e2e/integration/pages/storage/qos.spec.js
@ -23,7 +23,7 @@ describe('The Qos Specs Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .formSelect('consumer')
      .clickModalActionSubmitButton()
@ -39,7 +39,7 @@ describe('The Qos Specs Page', () => {
    cy.tableSearchText(name)
      .goToDetail()
      .wait(5000)
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formInput('value', 1000)
      .clickModalActionSubmitButton();
  });
--- a/test/e2e/integration/pages/storage/swift.spec.js
+++ b/test/e2e/integration/pages/storage/swift.spec.js
@ -39,11 +39,11 @@ onlyOn(swiftEnabled, () => {
    });

    it('successfully create container', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('name', name)
        .clickModalActionSubmitButton();

-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('name', name2)
        .clickModalActionSubmitButton();
    });
@ -58,10 +58,10 @@ onlyOn(swiftEnabled, () => {

    it('successfully create folder', () => {
      cy.tableSearchText(name).goToContainerDetail();
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('folder_name', folderName)
        .clickModalActionSubmitButton();
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formInput('folder_name', folderName2)
        .clickModalActionSubmitButton();
    });
@ -69,7 +69,7 @@ onlyOn(swiftEnabled, () => {
    it('successfully upload file in container', () => {
      cy.tableSearchText(name)
        .goToContainerDetail()
-        .clickHeaderButton(2)
+        .clickHeaderActionButton(2)
        .formAttachFile('file', filename)
        .clickModalActionSubmitButton();
    });
--- a/test/e2e/integration/pages/storage/volume-type.spec.js
+++ b/test/e2e/integration/pages/storage/volume-type.spec.js
@ -28,7 +28,7 @@ describe('The Volume Type Page', () => {

  it('successfully prepare resource', () => {
    cy.clickTab('QoS Specs')
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formInput('name', qosName)
      .formSelect('consumer')
      .clickModalActionSubmitButton()
@ -36,7 +36,7 @@ describe('The Volume Type Page', () => {
  });

  it('successfully create', () => {
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .formInput('name', name)
      .formText('description', 'create')
      .clickModalActionSubmitButton()
@ -53,7 +53,7 @@ describe('The Volume Type Page', () => {
      .goToDetail()
      .clickDetailTab('Extra Specs')
      .wait(5000)
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formInput('keyname', extraKeyName)
      .formInput('value', 1000)
      .clickModalActionSubmitButton();
--- a/test/e2e/integration/pages/storage/volume.spec.js
+++ b/test/e2e/integration/pages/storage/volume.spec.js
@ -48,7 +48,7 @@ describe('The Volume Page', () => {

  it('successfully prepare resource by admin', () => {
    cy.loginAdmin(volumeTypeListUrl)
-      .clickHeaderButton(1)
+      .clickHeaderActionButton(0)
      .formInput('name', volumeTypeName)
      .clickModalActionSubmitButton()
      .waitTableLoading();
@ -61,7 +61,7 @@ describe('The Volume Page', () => {

  it('successfully create', () => {
    const creatUrl = `${listUrl}/create`;
-    cy.clickHeaderButton(1)
+    cy.clickHeaderActionButton(0)
      .url()
      .should('include', creatUrl)
      .wait(5000)
--- a/test/e2e/integration/pages/zun/capsule.spec.js
+++ b/test/e2e/integration/pages/zun/capsule.spec.js
@ -20,7 +20,7 @@ onlyOn(zunServiceEnabled, () => {
    });

    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .formAttachFile('template_file', filename)
        .clickModalActionSubmitButton();
    });
--- a/test/e2e/integration/pages/zun/container.spec.js
+++ b/test/e2e/integration/pages/zun/container.spec.js
@ -20,7 +20,7 @@ onlyOn(zunServiceEnabled, () => {
    });

    it('successfully create', () => {
-      cy.clickHeaderButton(1)
+      cy.clickHeaderActionButton(0)
        .url()
        .should('include', `${listUrl}/create`)
        .wait(5000)
--- a/test/e2e/support/resource-commands.js
+++ b/test/e2e/support/resource-commands.js
@ -34,7 +34,7 @@ Cypress.Commands.add('createInstance', ({ name, networkName }) => {
  const imageName = Cypress.env('imageName');
  const imageType = Cypress.env('imageType');
  cy.visitPage(instanceListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .wait(8000)
    .formTableSelect('flavor')
    .formRadioChooseByLabel('image', imageType)
@ -64,7 +64,7 @@ Cypress.Commands.add('createInstance', ({ name, networkName }) => {
 Cypress.Commands.add('createNetwork', ({ name }) => {
  const cidr = `10.10.${Cypress._.random(50, 100)}.0/24`;
  cy.visitPage(networkListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .wait(2000)
    .formInput('name', name)
    .formSelect('availableZone')
@ -77,7 +77,7 @@ Cypress.Commands.add('createNetwork', ({ name }) => {

 Cypress.Commands.add('createNetworkPolicy', ({ name }) => {
  cy.visitPage(policyListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .formInput('name', name)
    .formText('description', name)
    // .formSelect('project_id', 'admin')
@ -87,7 +87,7 @@ Cypress.Commands.add('createNetworkPolicy', ({ name }) => {

 Cypress.Commands.add('createRouter', ({ name, network }) => {
  cy.visitPage(routerListUrl)
-    .clickHeaderButton(1, 5000)
+    .clickHeaderActionButton(0, 5000)
    .formInput('name', name)
    .formCheckboxClick('openExternalNetwork')
    .wait(2000)
@ -183,7 +183,7 @@ Cypress.Commands.add('createVolume', (name) => {

 Cypress.Commands.add('createSecurityGroup', ({ name }) => {
  cy.visitPage(securityGroupListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .formInput('name', name)
    .clickModalActionSubmitButton();
 });
@ -192,7 +192,7 @@ Cypress.Commands.add('createFip', () => {
  cy.intercept('GET', '/networks').as('networks');
  cy.visitPage(fipListUrl)
    .wait(2000)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .wait('@networks')
    .formSelect('floating_network_id')
    .clickModalActionSubmitButton();
@ -200,7 +200,7 @@ Cypress.Commands.add('createFip', () => {

 Cypress.Commands.add('createUserGroup', ({ name }) => {
  cy.visitPage(userGroupListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .formInput('name', name)
    .clickModalActionSubmitButton();
 });
@ -211,7 +211,7 @@ Cypress.Commands.add('createUser', ({ name }) => {
  const phone = '18500000000';
  const password = 'passW0rd_';
  cy.visitPage(userListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .wait(2000)
    .formInput('name', name)
    .formInput('email', email)
@ -227,7 +227,7 @@ Cypress.Commands.add('createUser', ({ name }) => {

 Cypress.Commands.add('createProject', ({ name }) => {
  cy.visitPage(projectListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .formInput('name', name)
    .clickModalActionSubmitButton();
 });
@ -249,7 +249,7 @@ Cypress.Commands.add('createIronicFlavor', (name) => {
  cy.setAllFlavorType();
  cy.visitPage(flavorListUrl)
    .clickTab('Bare Metal', 'bare_metal')
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .formRadioChoose('category', 0)
    .formInput('name', name)
    .clickStepActionNextButton()
@ -260,7 +260,7 @@ Cypress.Commands.add('createIronicFlavor', (name) => {
 Cypress.Commands.add('createIronicImage', ({ name }) => {
  const filename = 'cirros-0.4.0-x86_64-disk.qcow2';
  cy.visitPage(imageListUrl)
-    .clickHeaderButton(1)
+    .clickHeaderActionButton(0)
    .formInput('name', name)
    .formAttachFile('file', filename)
    .formSelect('disk_format', 'QCOW2 - QEMU Emulator')
--- a/test/e2e/support/table-commands.js
+++ b/test/e2e/support/table-commands.js
@ -18,28 +18,45 @@ Cypress.Commands.add('waitTableLoading', () => {
  cy.get('.ant-spin-dot-spin', { timeout: 120000 }).should('not.exist');
 });

-Cypress.Commands.add('clickHeaderButton', (buttonIndex, waitTime = 2000) => {
+Cypress.Commands.add(
+  'clickHeaderTableButton',
+  (buttonIndex, waitTime = 2000) => {
    cy.get('.table-header-btns')
      .find('button')
      .eq(buttonIndex)
      .click({ force: true });
    cy.wait(waitTime);
-});
+  }
+);

-Cypress.Commands.add('clickHeaderButtonByTitle', (title, waitTime = 2000) => {
+Cypress.Commands.add(
+  'clickHeaderActionButton',
+  (buttonIndex, waitTime = 2000) => {
+    cy.get('.table-header-action-btns')
+      .find('button')
+      .eq(buttonIndex)
+      .click({ force: true });
+    cy.wait(waitTime);
+  }
+);
+
+Cypress.Commands.add(
+  'clickHeaderActionButtonByTitle',
+  (title, waitTime = 2000) => {
    const realTitle = getTitle(title);
-  cy.get('.table-header-btns')
+    cy.get('.table-header-action-btns')
      .find('button')
      .contains(realTitle)
      .click({ force: true });
    cy.wait(waitTime);
-});
+  }
+);

 Cypress.Commands.add(
  'clickHeaderConfirmButtonByTitle',
  (title, waitTime = 2000) => {
    const realTitle = getTitle(title);
-    cy.get('.table-header-btns')
+    cy.get('.table-header-action-btns')
      .find('button')
      .contains(realTitle)
      .click({ force: true });
@ -49,11 +66,11 @@ Cypress.Commands.add(
 );

 Cypress.Commands.add(
-  'clickHeaderButtonInMoreByTitle',
+  'clickHeaderActionButtonInMoreByTitle',
  (title, waitTime = 2000) => {
    const realTitle = getTitle(title);
    const moreTitle = getTitle('More Actions');
-    cy.get('.table-header-btns')
+    cy.get('.table-action-header-btns')
      .find('.ant-dropdown-trigger')
      .contains(moreTitle)
      .trigger('mouseover', { force: true });
@ -320,7 +337,7 @@ Cypress.Commands.add('waitStatusTextByFresh', (text) => {
  const noLengthCallback = () => {
    // eslint-disable-next-line no-console
    console.log('not contain', index);
-    cy.freshTable();
+    cy.refreshTable();
    index += 1;
    cy.wait(5000);
  };
@ -368,7 +385,7 @@ Cypress.Commands.add('waitStatusActiveByRefresh', () => {
  const noLengthCallback = () => {
    // eslint-disable-next-line no-console
    console.log('not active', index);
-    cy.freshTable();
+    cy.refreshTable();
    index += 1;
    cy.wait(5000);
    cy.getStatusLength(
@ -422,10 +439,10 @@ Cypress.Commands.add('waitStatusGreen', (index) => {
  }
 });

-Cypress.Commands.add('freshTable', () => {
+Cypress.Commands.add('refreshTable', () => {
  // eslint-disable-next-line no-console
  console.log('fresh table');
-  cy.clickHeaderButton(0).waitTableLoading();
+  cy.clickHeaderTableButton(0).waitTableLoading();
 });

 Cypress.Commands.add('collapseItemClick', (name) => {