Migrate sites, workers, device-users, users, security-groups, and email-recipients to actions menu pattern

eform-client/cypress/e2e/DeviceUsers.page.ts

@@ -156,7 +156,9 @@ class DeviceUsersPage extends PageWithNavbarPage{
     name = '',
     surname = ''
   ): void {
-    deviceUser.editBtn().should('be.visible').click();
+    const index = deviceUser.index - 1;
+    deviceUser.openRowMenu();
+    cy.get(`#editDeviceUserBtn${index}`).should('be.visible').click();
     // @ts-ignore
     cy.get('#firstName').should('be.visible');
     if (name !== '') {
@@ -178,6 +180,7 @@ const deviceUsersPage = new DeviceUsersPage();
 export default deviceUsersPage;
 
 export class DeviceUsersRowObject {
+  index: number;
   siteId: number;
   firstName: string;
   lastName: string;
@@ -187,6 +190,7 @@ export class DeviceUsersRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum: number) {
+    this.index = rowNum;
     // @ts-ignore
     if (cy.get('#deviceUserId').eq(rowNum - 1).should('exist')) {
       // @ts-ignore
@@ -203,8 +207,16 @@ export class DeviceUsersRowObject {
     return this;
   }
 
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
+
   delete() {
-    this.deleteBtn.should('be.visible').click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#deleteDeviceUserBtn${index}`).should('be.visible').click();
     deviceUsersPage.saveDeleteBtn().should('be.visible').click();
     // @ts-ignore
     cy.get('#spinner-animation').should('not.exist', { timeout: 40000 });

eform-client/cypress/e2e/Sites.page.ts

@@ -125,6 +125,7 @@ export default sitesPage;
 export class SitesRowObject {
   constructor() {}
 
+  index: number;
   element: Cypress.Chainable<JQuery<HTMLElement>>;
   siteId: number;
   units: string;
@@ -134,6 +135,7 @@ export class SitesRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum): Promise<SitesRowObject> {
+    this.index = rowNum;
     this.element = cy.get('tbody > tr').eq(rowNum - 1);
     if (this.element) {
       this.siteId = +(this.element.find('#siteUUId').invoke('text'));
@@ -146,6 +148,13 @@ export class SitesRowObject {
     }
     return this;
   }
+
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
+
   closeEditModal(clickCancel = false) {
     if (clickCancel) {
       sitesPage.siteEditCancelBtn().click();
@@ -156,22 +165,10 @@ export class SitesRowObject {
     sitesPage.sitesManageTagsBtn().should('be.visible', { timeout: 40000 });
   }
 
-  getRow(rowNum): Promise<SitesRowObject> {
-    this.element = Cypress.$$('tbody > tr').eq(rowNum - 1);
-    if (this.element) {
-      this.siteId = +this.element.find('#siteUUId').text();
-      this.units = this.element.find('#units').text();
-      this.siteName = this.element.find('#siteName').text();
-      const list = this.element.find('mat-chip-list mat-chip > span');
-      this.tags = Promise.all(list.map((_, element) => Cypress.$(element).text()));
-      this.editBtn = this.element.find('#editSiteBtn');
-      this.deleteBtn = this.element.find('#deleteSiteBtn');
-    }
-    return this;
-  }
-
   openEditModal(site?: { name?: string; tags?: string[] }) {
-    this.editBtn.click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#editSiteBtn${index}`).should('be.visible').click();
     cy.wait(500);
     sitesPage.siteEditCancelBtn().should('be.visible', {timeout: 40000});
     if (site) {
@@ -196,7 +193,9 @@ export class SitesRowObject {
   }
 
   openDeleteModal() {
-    this.deleteBtn.click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#deleteSiteBtn${index}`).should('be.visible').click();
     cy.wait(500);
     sitesPage.siteDeleteCancelBtn().should('be.visible', {timeout: 40000}).click();
   }

eform-client/cypress/e2e/UserAdministration.page.ts

@@ -170,6 +170,7 @@ const userAdministrationPage = new UserAdministrationPage();
 export default userAdministrationPage;
 
 export class UserAdministrationRowObject {
+  index: number;
   id: number;
   email: string;
   fullName: string;
@@ -178,6 +179,7 @@ export class UserAdministrationRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum: number) {
+    this.index = rowNum;
     const index = rowNum - 1;
 
     cy.get(`#userAdministrationId-${index}`).invoke('text').then(text => {
@@ -199,8 +201,16 @@ export class UserAdministrationRowObject {
     return this;
   }
 
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
+
   edit(user: UserAdministrationObject, clickCancel = false) {
-    this.editBtn.should('be.visible').click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#userAdministrationEditBtn-${index}`).should('be.visible').click();
     cy.get('#editFirstName').should('be.visible');
 
     if (user.firstName) {
@@ -257,7 +267,9 @@ export class UserAdministrationRowObject {
   }
 
   delete(clickCancel = false) {
-    this.deleteBtn.should('be.visible').click();
+    const index = this.index - 1;
+    this.openRowMenu();
+    cy.get(`#userAdministrationDeleteBtn-${index}`).should('be.visible').click();
     cy.get('#userDeleteCancelBtn').should('be.visible');
 
     if (clickCancel) {

eform-client/cypress/e2e/Workers.page.ts

@@ -127,7 +127,9 @@ class WorkersPage extends PageWithNavbarPage {
     firstName = '',
     lastName = ''
   ): void {
-    worker.editBtn().should('be.visible').click();
+    const index = worker.index - 1;
+    worker.openRowMenu();
+    cy.get(`#workerEditBtn${index}`).should('be.visible').click();
     // @ts-ignore
     cy.get('#firstNameEdit').should('be.visible');
     if (firstName !== '') {
@@ -152,6 +154,7 @@ const workersPage = new WorkersPage();
 export default workersPage;
 
 export class WorkersRowObject {
+  index: number;
   siteId: number;
   firstName: string;
   lastName: string;
@@ -161,6 +164,7 @@ export class WorkersRowObject {
   deleteBtn: Cypress.Chainable<JQuery<HTMLElement>>;
 
   getRow(rowNum: number) {
+    this.index = rowNum;
     // @ts-ignore
     if (cy.get('#workerUID').eq(rowNum - 1).should('exist')) {
       // @ts-ignore
@@ -176,4 +180,10 @@ export class WorkersRowObject {
     }
     return this;
   }
+
+  openRowMenu() {
+    const index = this.index - 1;
+    cy.get(`#action-items-${index} #actionMenu`).should('be.visible').click();
+    cy.wait(200);
+  }
 }

eform-client/e2e/Page objects/DeviceUsers.page.ts

@@ -139,7 +139,12 @@ class DeviceUsersPage extends PageWithNavbarPage {
     name = '',
     surname = ''
   ) {
-    deviceUser.editBtn.click();
+    await deviceUser.openRowMenu();
+    const index = deviceUser.index - 1;
+    const editBtn = await $(`#editDeviceUserBtn${index}`);
+    await editBtn.waitForDisplayed({ timeout: 5000 });
+    await editBtn.waitForClickable({ timeout: 5000 });
+    await editBtn.click();
     // browser.pause(5000);
     await (await $('#firstName')).waitForDisplayed({ timeout: 40000 });
     if (name != null) {
@@ -164,13 +169,15 @@ export default deviceUsersPage;
 export class DeviceUsersRowObject {
   constructor() {}
 
+  index: number;
   siteId: number;
   firstName: string;
   lastName: string;
   editBtn;
   deleteBtn;
 
   async getRow(rowNum: number) {
+    this.index = rowNum;
     if ((await $$('#deviceUserId'))[rowNum - 1]) {
       this.siteId = +(await (await $$('#deviceUserId')[rowNum - 1]).getText());
       try {
@@ -189,9 +196,23 @@ export class DeviceUsersRowObject {
     return this;
   }
 
+  async openRowMenu() {
+    const index = this.index - 1;
+    const menuBtn = await $(`#action-items-${index} #actionMenu`);
+    await menuBtn.waitForDisplayed({ timeout: 5000 });
+    await menuBtn.waitForClickable({ timeout: 5000 });
+    await menuBtn.scrollIntoView();
+    await menuBtn.click();
+    await browser.pause(200);
+  }
+
   async delete() {
-    this.deleteBtn.waitForClickable({ timeout: 40000 });
-    this.deleteBtn.click();
+    const index = this.index - 1;
+    await this.openRowMenu();
+    const deleteBtn = await $(`#deleteDeviceUserBtn${index}`);
+    await deleteBtn.waitForDisplayed({ timeout: 5000 });
+    await deleteBtn.waitForClickable({ timeout: 5000 });
+    await deleteBtn.click();
     await (await deviceUsersPage.saveDeleteBtn()).waitForClickable({
       timeout: 40000,
     });

eform-client/e2e/Page objects/Sites.page.ts

@@ -139,6 +139,7 @@ export default sitesPage;
 export class SitesRowObject {
   constructor() {}
 
+  index: number;
   element: WebdriverIO.Element;
   siteId: number;
   units: string;
@@ -148,6 +149,7 @@ export class SitesRowObject {
   deleteBtn: WebdriverIO.Element;
 
   async getRow(rowNum): Promise<SitesRowObject> {
+    this.index = rowNum;
     this.element = (await $$('tbody > tr'))[rowNum - 1];
     if (this.element) {
       this.siteId = +(await this.element.$('#siteUUId')).getText();
@@ -173,8 +175,23 @@ export class SitesRowObject {
     return this;
   }
 
+  async openRowMenu() {
+    const index = this.index - 1;
+    const menuBtn = await $(`#action-items-${index} #actionMenu`);
+    await menuBtn.waitForDisplayed({ timeout: 5000 });
+    await menuBtn.waitForClickable({ timeout: 5000 });
+    await menuBtn.scrollIntoView();
+    await menuBtn.click();
+    await browser.pause(200);
+  }
+
   async openEditModal(site?: { name?: string; tags?: string[] }) {
-    this.editBtn.click();
+    await this.openRowMenu();
+    const index = this.index - 1;
+    const editBtn = await $(`#editSiteBtn${index}`);
+    await editBtn.waitForDisplayed({ timeout: 5000 });
+    await editBtn.waitForClickable({ timeout: 5000 });
+    await editBtn.click();
     await browser.pause(500);
     await (await sitesPage.siteEditCancelBtn()).waitForDisplayed({ timeout: 40000 });
     if (site) {
@@ -209,7 +226,12 @@ export class SitesRowObject {
   }
 
   async openDeleteModal() {
-    await this.deleteBtn.click();
+    await this.openRowMenu();
+    const index = this.index - 1;
+    const deleteBtn = await $(`#deleteSiteBtn${index}`);
+    await deleteBtn.waitForDisplayed({ timeout: 5000 });
+    await deleteBtn.waitForClickable({ timeout: 5000 });
+    await deleteBtn.click();
     await browser.pause(500);
     await (await sitesPage.siteDeleteCancelBtn()).waitForClickable({ timeout: 40000 });
   }

eform-client/e2e/Page objects/UserAdministration.page.ts

@@ -196,6 +196,7 @@ export default userAdministration;
 export class UserAdministrationRowObject {
   constructor() {}
 
+  index: number;
   element;
   id: number;
   email: string;
@@ -205,6 +206,7 @@ export class UserAdministrationRowObject {
   deleteBtn;
 
   async getRow(rowNum: number): Promise<UserAdministrationRowObject> {
+    this.index = rowNum;
     rowNum = rowNum - 1;
     this.id = +await (await $('#userAdministrationId-'+rowNum)).getText();
     this.email = await (await $('#userAdministrationEmail-'+rowNum)).getText();
@@ -215,8 +217,23 @@ export class UserAdministrationRowObject {
     return this;
   }
 
+  async openRowMenu() {
+    const index = this.index - 1;
+    const menuBtn = await $(`#action-items-${index} #actionMenu`);
+    await menuBtn.waitForDisplayed({ timeout: 5000 });
+    await menuBtn.waitForClickable({ timeout: 5000 });
+    await menuBtn.scrollIntoView();
+    await menuBtn.click();
+    await browser.pause(200);
+  }
+
   public async openEdit(user: UserAdministrationObject) {
-    await this.editBtn.click();
+    await this.openRowMenu();
+    const index = this.index - 1;
+    const editBtn = await $(`#userAdministrationEditBtn-${index}`);
+    await editBtn.waitForDisplayed({ timeout: 5000 });
+    await editBtn.waitForClickable({ timeout: 5000 });
+    await editBtn.click();
     await (await userAdministration.editFirstName()).waitForDisplayed({ timeout: 40000 });
     if (user.firstName) {
       await (await userAdministration.editFirstName()).clearValue();
@@ -278,7 +295,12 @@ export class UserAdministrationRowObject {
   }
 
   public async openDelete() {
-    await this.deleteBtn.click();
+    await this.openRowMenu();
+    const index = this.index - 1;
+    const deleteBtn = await $(`#userAdministrationDeleteBtn-${index}`);
+    await deleteBtn.waitForDisplayed({ timeout: 5000 });
+    await deleteBtn.waitForClickable({ timeout: 5000 });
+    await deleteBtn.click();
     await (await userAdministration.userDeleteCancelBtn()).waitForDisplayed({ timeout: 40000 });
   }