feat: udpate table header

1. update table header's buttons postion
2. update e2e command to adjust the change

Change-Id: I50379428eaad9ba3b4571987b2478e6f05d25caa

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)

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);
     });
     ```

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)

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);
     });
     ```

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.

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>
     );
   }

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;
+    }
+  }
 }

src/components/Tables/Base/index.jsx

@@ -788,20 +788,29 @@ export class BaseTable extends React.Component {
       <div className={styles['table-header']} id="sl-table-header-search">
         <div
           className={classnames(
-            styles['table-header-btns'],
+            styles['table-header-action-btns'],
-            'table-header-btns'
+            'table-header-action-btns'
           )}
         >
-          {this.renderRefresh()}
           {this.renderActions()}
           {this.renderBatchActions()}
-          {this.renderCustomButton()}
-          {this.renderDownload()}
-          {this.renderRefreshAuto()}
         </div>
         {this.renderTimeFilter()}
         {this.renderMiddleInHeader()}
-        {this.renderSearch()}
+        <div className={styles['table-header-right']}>
+          {this.renderSearch()}
+          <div
+            className={classnames(
+              styles['table-header-btns'],
+              'table-header-btns'
+            )}
+          >
+            {this.renderRefresh()}
+            {this.renderDownload()}
+            {this.renderCustomButton()}
+            {this.renderRefreshAuto()}
+          </div>
+        </div>
       </div>
     );
   }

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;
+    }
+  }
+}

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();
   });

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')

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)

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)

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);
   });
 

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);
     });
 

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)

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)

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();
   });

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();

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()

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();

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();
   });

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)

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();

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')

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)

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')

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();

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)

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')

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')

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)

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)

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();
   });

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();
     });

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();

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)

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();
     });

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)

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')

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