fix(console, e2e): static data-e2e attributes, consistent naming (#4188)

* fix(console, e2e): static data-e2e attributes, consistent naming * quote cypress attribute selectors * Update console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html Co-authored-by: Elio Bischof <eliobischof@gmail.com> * Update console/src/app/modules/project-roles-table/project-roles-table.component.html Co-authored-by: Elio Bischof <eliobischof@gmail.com> * fix , Co-authored-by: Elio Bischof <eliobischof@gmail.com>
2025-08-11 13:19:21 +00:00 · 2022-08-16 14:02:59 +02:00
parent dcac08b1d5
commit 44fc2efbb7
27 changed files with 375 additions and 247 deletions
--- a/console/src/app/modules/action-keys/action-keys.component.html
+++ b/console/src/app/modules/action-keys/action-keys.component.html
@@ -1,12 +1,16 @@
-<div *ngIf="type !== ActionKeysType.ORGSWITCHER && (isHandset$ | async) === false" class="action-keys-wrapper"
-  [ngSwitch]="type" [ngClass]="{'without-margin': withoutMargin, 'no-contrast-mode': doNotUseContrast}">
+<div
+  *ngIf="type !== ActionKeysType.ORGSWITCHER && (isHandset$ | async) === false"
+  class="action-keys-wrapper"
+  [ngSwitch]="type"
+  [ngClass]="{ 'without-margin': withoutMargin, 'no-contrast-mode': doNotUseContrast }"
+>
  <div *ngSwitchCase="ActionKeysType.CLEAR" class="action-keys-row">
    <div class="action-key esc">
      <div class="key-overlay"></div>
      <span>ESC</span>
    </div>
  </div>
-  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row" [attr.data-e2e]="'action-key-add'">
+  <div *ngSwitchCase="ActionKeysType.ADD" class="action-keys-row" data-e2e="action-key-add">
    <div class="action-key">
      <div class="key-overlay"></div>
      <span>N</span>
@@ -38,7 +42,6 @@
    <div class="action-key">
      <div class="key-overlay"></div>
      <span *ngIf="isMacLike || isIOS; else otherOS">⌘</span>
-
    </div>
    +
    <div class="action-key">
@@ -56,4 +59,4 @@

 <ng-template #otherOS>
  <span>crtl</span>
-</ng-template>
+</ng-template>
--- a/console/src/app/modules/card/card.component.html
+++ b/console/src/app/modules/card/card.component.html
@@ -1,18 +1,17 @@
-<div class="card" [ngClass]="{'nomargin': nomargin, 'stretch': stretch, 'warn': warn}" [attr.data-e2e]="'app-card'">
-  <div *ngIf="title || description" class="header" [ngClass]="{'bottom-margin': expanded}">
+<div class="card" [ngClass]="{ nomargin: nomargin, stretch: stretch, warn: warn }" data-e2e="app-card">
+  <div *ngIf="title || description" class="header" [ngClass]="{ 'bottom-margin': expanded }">
    <div *ngIf="title" class="row">
-      <h2 class="title" [attr.data-e2e]="'app-card-title'">{{title}}</h2>
+      <h2 class="title" data-e2e="app-card-title">{{ title }}</h2>
      <span class="fill-space"></span>
      <ng-content select="[card-actions]"></ng-content>
-      <button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button
-        (click)="expanded = !expanded">
+      <button class="button" type="button" matTooltip="Expand or collapse" mat-icon-button (click)="expanded = !expanded">
        <mat-icon *ngIf="!expanded">keyboard_arrow_down</mat-icon>
        <mat-icon *ngIf="expanded">keyboard_arrow_up</mat-icon>
      </button>
    </div>
-    <p *ngIf="description" class="desc cnsl-secondary-text">{{description}}</p>
+    <p *ngIf="description" class="desc cnsl-secondary-text">{{ description }}</p>
  </div>
  <div class="card-content" *ngIf="expanded" [@openClose]="animate">
    <ng-content></ng-content>
  </div>
-</div>
+</div>
--- a/console/src/app/modules/paginator/paginator.component.html
+++ b/console/src/app/modules/paginator/paginator.component.html
@@ -3,7 +3,7 @@
    <p class="length">
      <span>{{ length }} </span>{{ 'PAGINATOR.COUNT' | translate }}
    </p>
-    <p class="ts cnsl-secondary-text" *ngIf="timestamp" [attr.data-e2e]="'timestamp'">
+    <p class="ts cnsl-secondary-text" *ngIf="timestamp" data-e2e="timestamp">
      {{ timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm' }}
    </p>
  </div>
--- a/console/src/app/modules/policies/private-labeling-policy/color/color.component.html
+++ b/console/src/app/modules/policies/private-labeling-policy/color/color.component.html
@@ -1,4 +1,4 @@
-<div [attr.data-e2e]="'color'">
+<div data-e2e="color">
  <p class="name cnsl-secondary-text">{{ name }}</p>

  <div class="wrapper">
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
@@ -101,7 +101,7 @@
  <div *ngIf="previewData && data" class="lab-policy-content">
    <mat-accordion class="settings">
      <mat-expansion-panel class="expansion">
-        <mat-expansion-panel-header [attr.data-e2e]="'policy-category'">
+        <mat-expansion-panel-header data-e2e="policy-category">
          <mat-panel-title>
            <div class="panel-title">
              <i class="icon las la-image"></i>
@@ -127,7 +127,7 @@
            {{ 'POLICY.PRIVATELABELING.EMAILNOSVG' | translate }}
          </cnsl-info-section>

-          <div class="logo-view" [attr.data-e2e]="'image-part-logo'">
+          <div class="logo-view" data-e2e="image-part-logo">
            <span class="label cnsl-secondary-text">Logo</span>
            <div class="img-wrapper">
              <ng-container
@@ -198,7 +198,7 @@
            </div>
          </div>

-          <div class="logo-view" [attr.data-e2e]="'image-part-icon'">
+          <div class="logo-view" data-e2e="image-part-icon">
            <span class="label cnsl-secondary-text">Icon</span>
            <div class="img-wrapper icon">
              <ng-container
@@ -478,7 +478,7 @@
      </mat-expansion-panel>

      <mat-expansion-panel class="expansion">
-        <mat-expansion-panel-header class="header" [attr.data-e2e]="'policy-category'">
+        <mat-expansion-panel-header class="header" data-e2e="policy-category">
          <mat-panel-title>
            <div class="panel-title">
              <i class="icon las la-font"></i>
--- a/console/src/app/modules/project-roles-table/project-roles-table.component.html
+++ b/console/src/app/modules/project-roles-table/project-roles-table.component.html
@@ -1,15 +1,25 @@
-<cnsl-refresh-table [showSelectionActionButton]="showSelectionActionButton" *ngIf="projectId"
-  (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult ?? 0"
-  [emitRefreshOnPreviousRoutes]="['/projects/'+projectId+'/roles/create']" [selection]="selection"
-  [loading]="dataSource?.loading$ | async" [timestamp]="dataSource?.viewTimestamp">
-
+<cnsl-refresh-table
+  [showSelectionActionButton]="showSelectionActionButton"
+  *ngIf="projectId"
+  (refreshed)="refreshPage()"
+  [dataSize]="dataSource?.totalResult ?? 0"
+  [emitRefreshOnPreviousRoutes]="['/projects/' + projectId + '/roles/create']"
+  [selection]="selection"
+  [loading]="dataSource?.loading$ | async"
+  [timestamp]="dataSource?.viewTimestamp"
+>
  <ng-template cnslHasRole [hasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
-    <a *ngIf="actionsVisible" [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'roles', 'create']"
-      color="primary" class="cnsl-action-button" mat-raised-button>
-      <mat-icon [attr.data-e2e]="'add-new-role'" class="icon">add</mat-icon>
+    <a
+      *ngIf="actionsVisible"
+      [disabled]="disabled"
+      [routerLink]="['/projects', projectId, 'roles', 'create']"
+      color="primary"
+      class="cnsl-action-button"
+      mat-raised-button
+    >
+      <mat-icon data-e2e="add-new-role" class="icon">add</mat-icon>
      <span>{{ 'ACTIONS.NEW' | translate }}</span>
-      <cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', projectId, 'roles', 'create'])">
-      </cnsl-action-keys>
+      <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', projectId, 'roles', 'create'])"> </cnsl-action-keys>
    </a>
  </ng-template>

@@ -17,55 +27,70 @@
    <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
      <ng-container matColumnDef="select">
        <th class="selection" mat-header-cell *matHeaderCellDef>
-          <mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
+          <mat-checkbox
+            [disabled]="disabled"
+            color="primary"
+            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()">
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
          </mat-checkbox>
        </th>
        <td class="selection" mat-cell *matCellDef="let row">
-          <mat-checkbox color="primary" [disabled]="disabled" (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+          <mat-checkbox
+            color="primary"
+            [disabled]="disabled"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="key">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.KEY' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.KEY' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
          <div class="role-key">
-            <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}
-            </cnsl-project-role-chip>
+            <cnsl-project-role-chip [roleName]="role.key">{{ role.key }}</cnsl-project-role-chip>
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="displayname">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }} </th>
-        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role"> {{role.displayName}} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</th>
+        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">{{ role.displayName }}</td>
      </ng-container>

      <ng-container matColumnDef="group">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.GROUP' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.GROUP' | translate }}</th>
        <td mat-cell *matCellDef="let role" class="pointer">
-          <span class="role state" [ngClass]="{'no-selection': !selectionAllowed}" *ngIf="role.group"
+          <span
+            class="role state"
+            [ngClass]="{ 'no-selection': !selectionAllowed }"
+            *ngIf="role.group"
            (click)="selectionAllowed ? selectAllOfGroup(role.group) : openDetailDialog(role)"
-            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null">{{role.group}}</span>
+            [matTooltip]="selectionAllowed ? ('PROJECT.ROLE.SELECTGROUPTOOLTIP' | translate: role) : null"
+            >{{ role.group }}</span
+          >
        </td>
      </ng-container>

      <ng-container matColumnDef="creationDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
-          <span *ngIf="role?.details?.creationDate">{{role.details.creationDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span *ngIf="role?.details?.creationDate">{{
+            role.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
        </td>
      </ng-container>

      <ng-container matColumnDef="changeDate">
-        <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CHANGEDATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
        <td class="pointer" (click)="openDetailDialog(role)" mat-cell *matCellDef="let role">
-          <span *ngIf="role?.details?.changeDate">{{role.details.changeDate | timestampToDate |
-            localizedDate: 'dd. MMM, HH:mm' }}</span>
+          <span *ngIf="role?.details?.changeDate">{{
+            role.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
+          }}</span>
        </td>
      </ng-container>

@@ -73,9 +98,16 @@
        <th mat-header-cell *matHeaderCellDef class="role-table-actions"></th>
        <td mat-cell *matCellDef="let role" class="role-table-actions">
          <cnsl-table-actions>
-            <button actions
-              [disabled]="disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false"
-              mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteRole(role)">
+            <button
+              actions
+              [disabled]="
+                disabled || (['project.role.delete', 'project.role.delete:' + projectId] | hasRole | async) === false
+              "
+              mat-icon-button
+              color="warn"
+              matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+              (click)="deleteRole(role)"
+            >
              <i class="las la-trash"></i>
            </button>
          </cnsl-table-actions>
@@ -83,17 +115,22 @@
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns;">
-      </tr>
+      <tr class="highlight" mat-row *matRowDef="let role; columns: displayedColumns"></tr>
    </table>
  </div>

  <div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row">
    <i class="las la-exclamation"></i>
-    <span>{{'PROJECT.ROLE.EMPTY' | translate}}</span>
+    <span>{{ 'PROJECT.ROLE.EMPTY' | translate }}</span>
  </div>

-  <cnsl-paginator #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult" [pageSize]="50"
-    (page)="changePage()" [pageSizeOptions]="[25, 50, 100, 250]">
+  <cnsl-paginator
+    #paginator
+    [timestamp]="dataSource?.viewTimestamp"
+    [length]="dataSource.totalResult"
+    [pageSize]="50"
+    (page)="changePage()"
+    [pageSizeOptions]="[25, 50, 100, 250]"
+  >
  </cnsl-paginator>
-</cnsl-refresh-table>
+</cnsl-refresh-table>
--- a/console/src/app/modules/settings-grid/settings-grid.component.html
+++ b/console/src/app/modules/settings-grid/settings-grid.component.html
@@ -14,7 +14,7 @@
          : []
      "
    >
-      <div class="p-item card" @policy [attr.data-e2e]="'policy-card'">
+      <div class="p-item card" @policy data-e2e="policy-card">
        <div class="avatar {{ setting.color }}">
          <mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon>
          <i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i>
--- a/console/src/app/modules/table-actions/table-actions.component.html
+++ b/console/src/app/modules/table-actions/table-actions.component.html
@@ -2,9 +2,14 @@
  <div class="cnsl-table-action">
    <ng-content select="[hoverActions]"></ng-content>
    <ng-content select="[actions]"></ng-content>
-    <button (click)="$event.stopPropagation()" *ngIf="hasActions" class="table-actions-trigger" mat-icon-button
+    <button
+      (click)="$event.stopPropagation()"
+      *ngIf="hasActions"
+      class="table-actions-trigger"
+      mat-icon-button
      [matMenuTriggerFor]="actions"
-      [attr.data-e2e]="'table-actions-button'">
+      data-e2e="table-actions-button"
+    >
      <mat-icon>more_horiz</mat-icon>
    </button>

@@ -12,4 +17,4 @@
      <ng-content select="[menuActions]"></ng-content>
    </mat-menu>
  </div>
-</div>
+</div>
--- a/console/src/app/modules/warn-dialog/warn-dialog.component.html
+++ b/console/src/app/modules/warn-dialog/warn-dialog.component.html
@@ -10,7 +10,7 @@
  }}</cnsl-info-section>
  <cnsl-form-field *ngIf="data.confirmation && data.confirmationKey" class="formfield">
    <cnsl-label>{{ data.confirmationKey | translate: { value: data.confirmation } }}</cnsl-label>
-    <input cnslInput [(ngModel)]="confirm" [attr.e2e-data]="'confirm-dialog-input'" />
+    <input cnslInput [(ngModel)]="confirm" data-e2e="confirm-dialog-input" />
  </cnsl-form-field>
 </div>
 <div mat-dialog-actions class="action">
@@ -24,7 +24,7 @@
    mat-raised-button
    class="ok-button"
    (click)="closeDialogWithSuccess()"
-    [attr.e2e-data]="'confirm-dialog-button'"
+    data-e2e="confirm-dialog-button"
  >
    {{ data.confirmKey | translate }}
  </button>
--- a/console/src/app/pages/projects/apps/app-create/app-create.component.html
+++ b/console/src/app/pages/projects/apps/app-create/app-create.component.html
@@ -40,7 +40,7 @@
            [disabled]="firstFormGroup.invalid"
            color="primary"
            matStepperNext
-            [attr.data-e2e]="'continue-button-nameandtype'"
+            data-e2e="continue-button-nameandtype"
          >
            {{ 'ACTIONS.CONTINUE' | translate }}
          </button>
@@ -72,7 +72,7 @@
            color="primary"
            [disabled]="secondFormGroup.invalid"
            matStepperNext
-            [attr.data-e2e]="'continue-button-authmethod'"
+            data-e2e="continue-button-authmethod"
          >
            {{ 'ACTIONS.CONTINUE' | translate }}
          </button>
@@ -130,7 +130,7 @@

      <div class="app-create-actions">
        <button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
-        <button mat-raised-button color="primary" matStepperNext [attr.data-e2e]="'continue-button-redirecturis'">
+        <button mat-raised-button color="primary" matStepperNext data-e2e="continue-button-redirecturis">
          {{ 'ACTIONS.CONTINUE' | translate }}
        </button>
      </div>
@@ -234,13 +234,7 @@

      <div class="app-create-actions">
        <button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
-        <button
-          mat-raised-button
-          class="create-button"
-          color="primary"
-          (click)="createApp()"
-          [attr.data-e2e]="'create-button'"
-        >
+        <button mat-raised-button class="create-button" color="primary" (click)="createApp()" data-e2e="create-button">
          {{ 'ACTIONS.CREATE' | translate }}
        </button>
      </div>
@@ -248,7 +242,7 @@
  </mat-horizontal-stepper>

  <div *ngIf="devmode" class="dev">
-    <form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'">
+    <form [formGroup]="form" (ngSubmit)="createApp()" data-e2e="create-app-wizzard-3">
      <div class="content">
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
--- a/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
+++ b/console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
@@ -46,7 +46,7 @@
    mat-raised-button
    class="ok-button"
    (click)="closeDialog()"
-    [attr.data-e2e]="'close-dialog'"
+    data-e2e="close-dialog"
  >
    {{ 'ACTIONS.CLOSE' | translate }}
  </button>
--- a/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html
+++ b/console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.html
@@ -1,4 +1,4 @@
-<form class="redirect-uris-form" (ngSubmit)="add(redInput)" [attr.data-e2e]="'redirect-uris'">
+<form class="redirect-uris-form" (ngSubmit)="add(redInput)" data-e2e="redirect-uris">
  <cnsl-form-field class="formfield">
    <cnsl-label>{{ title }}</cnsl-label>

--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
@@ -12,7 +12,7 @@

  <div
    [routerLink]="['/projects', projectId, 'apps', app.id]"
-    [attr.data-e2e]="'app-card'"
+    data-e2e="app-card"
    class="app-wrap"
    *ngFor="let app of appsSubject | async"
    matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
@@ -37,7 +37,7 @@
    <div
      class="app-wrap"
      *ngIf="!disabled"
-      [attr.data-e2e]="'app-card-add'"
+      data-e2e="app-card-add"
      [routerLink]="['/projects', projectId, 'apps', 'create']"
    >
      <cnsl-app-card class="grid-card" matRipple [type]="OIDCAppType.ADD">
--- a/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
+++ b/console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
@@ -46,7 +46,7 @@
      class="continue-button"
      [disabled]="formArray.invalid"
      type="submit"
-      [attr.data-e2e]="'save-button'"
+      data-e2e="save-button"
    >
      {{ 'ACTIONS.SAVE' | translate }}
    </button>
--- a/console/src/app/pages/projects/project-create/project-create.component.html
+++ b/console/src/app/pages/projects/project-create/project-create.component.html
@@ -20,7 +20,7 @@
      [disabled]="!project.name"
      cdkFocusInitial
      type="submit"
-      [attr.data-e2e]="'continue-button'"
+      data-e2e="continue-button"
    >
      {{ 'ACTIONS.CONTINUE' | translate }}
    </button>
--- a/console/src/app/pages/projects/project-grid/project-grid.component.html
+++ b/console/src/app/pages/projects/project-grid/project-grid.component.html
@@ -47,7 +47,7 @@
      *ngFor="let item of notPinned; index as i"
      (click)="navigateToProject(type, $any(item), $event)"
      [ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE }"
-      [attr.data-e2e]="'grid-card'"
+      data-e2e="grid-card"
    >
      <div class="text-part">
        <span *ngIf="item.details && item.details.changeDate" class="top cnsl-secondary-text"
@@ -106,7 +106,7 @@
    (click)="deleteProject($event, key)"
    class="delete-button"
    mat-icon-button
-    [attr.data-e2e]="'delete-project-button'"
+    data-e2e="delete-project-button"
  >
    <i class="las la-trash"></i>
  </button>
--- a/console/src/app/pages/projects/project-list/project-list.component.html
+++ b/console/src/app/pages/projects/project-list/project-list.component.html
@@ -1,81 +1,136 @@
 <div class="projects-table-wrapper" *ngIf="projectType$ | async as type">
-  <cnsl-refresh-table [hideRefresh]="true" (refreshed)="refreshPage(type)" [dataSize]="totalResult"
-    [timestamp]="viewTimestamp" [selection]="selection" [loading]="loading$ | async">
-
-    <cnsl-filter-project actions *ngIf="!selection.hasValue()" (filterChanged)="applySearchQuery(type, $any($event))"
-      (filterOpen)="filterOpen = $event"></cnsl-filter-project>
+  <cnsl-refresh-table
+    [hideRefresh]="true"
+    (refreshed)="refreshPage(type)"
+    [dataSize]="totalResult"
+    [timestamp]="viewTimestamp"
+    [selection]="selection"
+    [loading]="loading$ | async"
+  >
+    <cnsl-filter-project
+      actions
+      *ngIf="!selection.hasValue()"
+      (filterChanged)="applySearchQuery(type, $any($event))"
+      (filterOpen)="filterOpen = $event"
+    ></cnsl-filter-project>

    <ng-template actions cnslHasRole [hasRole]="['project.create']">
-      <a *ngIf="type === ProjectType.PROJECTTYPE_OWNED" [routerLink]="[ '/projects', 'create']" color="primary"
-        mat-raised-button class="cnsl-action-button">
+      <a
+        *ngIf="type === ProjectType.PROJECTTYPE_OWNED"
+        [routerLink]="['/projects', 'create']"
+        color="primary"
+        mat-raised-button
+        class="cnsl-action-button"
+      >
        <mat-icon class="icon">add</mat-icon>
        <span>{{ 'ACTIONS.NEW' | translate }}</span>
-        <cnsl-action-keys (actionTriggered)="gotoRouterLink([ '/projects', 'create'])">
-        </cnsl-action-keys>
+        <cnsl-action-keys (actionTriggered)="gotoRouterLink(['/projects', 'create'])"> </cnsl-action-keys>
      </a>
    </ng-template>
    <div class="table-wrapper">
      <table class="table" mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="select">
          <th class="selection" mat-header-cell *matHeaderCellDef>
-            <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+            <mat-checkbox
+              color="primary"
+              (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
-              [indeterminate]="selection.hasValue() && !isAllSelected()">
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+            >
            </mat-checkbox>
          </th>
          <td class="selection" mat-cell *matCellDef="let row">
-            <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-              (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+            <mat-checkbox
+              color="primary"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+            >
            </mat-checkbox>
          </td>
        </ng-container>

        <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span *ngIf="project.name">{{project.name}}</span>
-            <span *ngIf="project.projectName">{{project.projectName}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.NAME' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span *ngIf="project.name">{{ project.name }}</span>
+            <span *ngIf="project.projectName">{{ project.projectName }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="projectOwnerName">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }} </th>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.RESOURCEOWNER' | translate }}</th>
          <td class="pointer" mat-cell *matCellDef="let project">
-            {{project.projectOwnerName}} </td>
+            {{ project.projectOwnerName }}
+          </td>
        </ng-container>

        <ng-container matColumnDef="state">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span class="state"
-              [ngClass]="{'active': project.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECT_STATE_INACTIVE}"
-              *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.STATE' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span
+              class="state"
+              [ngClass]="{
+                active: project.state === ProjectState.PROJECT_STATE_ACTIVE,
+                inactive: project.state === ProjectState.PROJECT_STATE_INACTIVE
+              }"
+              *ngIf="project.state"
+              >{{ 'PROJECT.STATE.' + project.state | translate }}</span
+            >
          </td>
        </ng-container>

-
        <ng-container matColumnDef="creationDate">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span *ngIf="project.details.creationDate">{{project.details.creationDate | timestampToDate |
-              localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CREATIONDATE' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span *ngIf="project.details.creationDate">{{
+              project.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
+            }}</span>
          </td>
        </ng-container>

-
        <ng-container matColumnDef="changeDate">
-          <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
-          <td class="pointer"
-            [routerLink]="type === ProjectType.PROJECTTYPE_OWNED ? ['/projects', project.id] : ['/granted-projects', project.projectId, 'grant', project.grantId]"
-            mat-cell *matCellDef="let project">
-            <span *ngIf="project.details.changeDate">{{project.details.changeDate | timestampToDate |
-              localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
+          <th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.TABLE.CHANGEDATE' | translate }}</th>
+          <td
+            class="pointer"
+            [routerLink]="
+              type === ProjectType.PROJECTTYPE_OWNED
+                ? ['/projects', project.id]
+                : ['/granted-projects', project.projectId, 'grant', project.grantId]
+            "
+            mat-cell
+            *matCellDef="let project"
+          >
+            <span *ngIf="project.details.changeDate">{{
+              project.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
+            }}</span>
          </td>
        </ng-container>

@@ -83,9 +138,15 @@
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let project">
            <cnsl-table-actions>
-              <button actions *ngIf="project.id !== zitadelProjectId" color="warn" mat-icon-button
-                matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.id, project.name)"
-                [attr.data-e2e]="'delete-project-button'">
+              <button
+                actions
+                *ngIf="project.id !== zitadelProjectId"
+                color="warn"
+                mat-icon-button
+                matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
+                (click)="deleteProject(project.id, project.name)"
+                data-e2e="delete-project-button"
+              >
                <i class="las la-trash"></i>
              </button>
            </cnsl-table-actions>
@@ -93,15 +154,21 @@
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>

    <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
      <i class="las la-exclamation"></i>
-      <span>{{'PROJECT.TABLE.EMPTY' | translate}}</span>
+      <span>{{ 'PROJECT.TABLE.EMPTY' | translate }}</span>
    </div>
-    <cnsl-paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult" [pageSize]="20"
-      [pageSizeOptions]="[10, 20, 50, 100]" (page)="changePage(type)"></cnsl-paginator>
+    <cnsl-paginator
+      class="paginator"
+      [timestamp]="viewTimestamp"
+      [length]="totalResult"
+      [pageSize]="20"
+      [pageSizeOptions]="[10, 20, 50, 100]"
+      (page)="changePage(type)"
+    ></cnsl-paginator>
  </cnsl-refresh-table>
-</div>
+</div>
--- a/console/src/app/pages/projects/projects.component.html
+++ b/console/src/app/pages/projects/projects.component.html
@@ -25,7 +25,7 @@
      </div>

      <span class="fill-space"></span>
-      <button class="grid-btn" (click)="grid = !grid" mat-icon-button [attr.data-e2e]="'toggle-grid'">
+      <button class="grid-btn" (click)="grid = !grid" mat-icon-button data-e2e="toggle-grid">
        <i *ngIf="grid" class="show list view las la-th-list"></i>
        <i *ngIf="!grid" class="las la-border-all"></i>
      </button>
--- a/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
+++ b/console/src/app/pages/users/user-create-machine/user-create-machine.component.html
@@ -32,13 +32,7 @@
        </cnsl-form-field>
      </div>
      <div class="machine-btn-container">
-        <button
-          color="primary"
-          [attr.data-e2e]="'create-button'"
-          [disabled]="userForm.invalid"
-          type="submit"
-          mat-raised-button
-        >
+        <button color="primary" data-e2e="create-button" [disabled]="userForm.invalid" type="submit" mat-raised-button>
          {{ 'ACTIONS.CREATE' | translate }}
        </button>
      </div>
--- a/console/src/app/pages/users/user-create/user-create.component.html
+++ b/console/src/app/pages/users/user-create/user-create.component.html
@@ -149,7 +149,7 @@
      </div>
      <div class="user-create-btn-container">
        <button
-          [attr.data-e2e]="'create-button'"
+          data-e2e="create-button"
          color="primary"
          [disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
          type="submit"
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -13,13 +13,13 @@
      label="{{ 'USER.TABLE.TYPES.HUMAN' | translate }}"
      (clicked)="setType(Type.TYPE_HUMAN)"
      [active]="type === Type.TYPE_HUMAN"
-      [attr.data-e2e]="'list-humans'"
+      data-e2e="list-humans"
    ></cnsl-nav-toggle>
    <cnsl-nav-toggle
      label="{{ 'USER.TABLE.TYPES.MACHINE' | translate }}"
      (clicked)="setType(Type.TYPE_MACHINE)"
      [active]="type === Type.TYPE_MACHINE"
-      [attr.data-e2e]="'list-machines'"
+      data-e2e="list-machines"
    ></cnsl-nav-toggle>
  </div>

@@ -58,7 +58,7 @@
      mat-raised-button
      [disabled]="!canWrite"
      class="cnsl-action-button"
-      [attr.data-e2e]="'create-user-button'"
+      data-e2e="create-user-button"
    >
      <mat-icon class="icon">add</mat-icon>
      <span>{{ 'ACTIONS.NEW' | translate }}</span>
@@ -197,7 +197,7 @@
              color="warn"
              (click)="deleteUser(user)"
              [disabled]="!canWrite || !canDelete"
-              [attr.e2e-data]="!canWrite || !canDelete ? 'disabled-delete-button' : 'enabled-delete-button'"
+              [attr.data-e2e]="!canWrite || !canDelete ? 'disabled-delete-button' : 'enabled-delete-button'"
              mat-icon-button
            >
              <i class="las la-trash"></i>
--- a/e2e/cypress/e2e/humans/humans.cy.ts
+++ b/e2e/cypress/e2e/humans/humans.cy.ts
@@ -1,57 +1,68 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureHumanUserExists, ensureUserDoesntExist } from '../../support/api/users';
-import { loginname } from '../../support/login/users';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureHumanUserExists,
+  ensureUserDoesntExist,
+} from "../../support/api/users";
+import { loginname } from "../../support/login/users";

-describe.skip('humans', () => {
+describe.skip("humans", () => {
  const humansPath = `/ui/console/users?type=human`;
-  const testHumanUserNameAdd = 'e2ehumanusernameadd';
-  const testHumanUserNameRemove = 'e2ehumanusernameremove';
+  const testHumanUserNameAdd = "e2ehumanusernameadd";
+  const testHumanUserNameRemove = "e2ehumanusernameremove";

-  describe('add', () => {
+  describe("add", () => {
    before(`ensure it doesn't exist already`, () => {
      apiAuth().then((apiCallProperties) => {
-        ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(()=>{
-          cy.visit(humansPath);
-        });
+        ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(
+          () => {
+            cy.visit(humansPath);
+          }
+        );
      });
    });

-    it('should add a user', () => {
-      cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click();
-      cy.url().should('contain', 'users/create');
-      cy.get('[formcontrolname="email"]').type(loginname('e2ehuman'));
+    it("should add a user", () => {
+      cy.get('[data-e2e="action-key-add"]')
+        .parents('[data-e2e="create-user-button"]')
+        .click();
+      cy.url().should("contain", "users/create");
+      cy.get('[formcontrolname="email"]').type(loginname("e2ehuman"));
      //force needed due to the prefilled username prefix
-      cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, { force: true });
-      cy.get('[formcontrolname="firstName"]').type('e2ehumanfirstname');
-      cy.get('[formcontrolname="lastName"]').type('e2ehumanlastname');
-      cy.get('[formcontrolname="phone"]').type('+41 123456789');
+      cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, {
+        force: true,
+      });
+      cy.get('[formcontrolname="firstName"]').type("e2ehumanfirstname");
+      cy.get('[formcontrolname="lastName"]').type("e2ehumanlastname");
+      cy.get('[formcontrolname="phone"]').type("+41 123456789");
      cy.get('[data-e2e="create-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
      cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
    });
  });

-  describe('remove', () => {
-    before('ensure it exists', () => {
+  describe("remove", () => {
+    before("ensure it exists", () => {
      apiAuth().then((api) => {
-        ensureHumanUserExists(api, testHumanUserNameRemove).then(()=>{
+        ensureHumanUserExists(api, testHumanUserNameRemove).then(() => {
          cy.visit(humansPath);
        });
      });
    });

-    it('should delete a human user', () => {
-      cy.contains('tr', testHumanUserNameRemove)
+    it("should delete a human user", () => {
+      cy.contains("tr", testHumanUserNameRemove)
        // doesn't work, need to force click.
        // .trigger('mouseover')
-        .find('[e2e-data="enabled-delete-button"]')
-        .click({force: true});
-      cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testHumanUserNameRemove, Cypress.env('org')));
-      cy.get('[e2e-data="confirm-dialog-button"]').click();
-      cy.get('.data-e2e-success');
+        .find('[data-e2e="enabled-delete-button"]')
+        .click({ force: true });
+      cy.get('[data-e2e="confirm-dialog-input"]')
+        .click()
+        .type(loginname(testHumanUserNameRemove, Cypress.env("org")));
+      cy.get('[data-e2e="confirm-dialog-button"]').click();
+      cy.get(".data-e2e-success");
      cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
    });
  });
-});
+});
--- a/e2e/cypress/e2e/machines/machines.cy.ts
+++ b/e2e/cypress/e2e/machines/machines.cy.ts
@@ -1,55 +1,66 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureMachineUserExists, ensureUserDoesntExist } from '../../support/api/users';
-import { loginname } from '../../support/login/users';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureMachineUserExists,
+  ensureUserDoesntExist,
+} from "../../support/api/users";
+import { loginname } from "../../support/login/users";

-describe.skip('machines', () => {
+describe.skip("machines", () => {
  const machinesPath = `/ui/console/users?type=machine`;
-  const testMachineUserNameAdd = 'e2emachineusernameadd';
-  const testMachineUserNameRemove = 'e2emachineusernameremove';
+  const testMachineUserNameAdd = "e2emachineusernameadd";
+  const testMachineUserNameRemove = "e2emachineusernameremove";

-  describe('add', () => {
+  describe("add", () => {
    before(`ensure it doesn't exist already`, () => {
      apiAuth().then((apiCallProperties) => {
-        ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(()=>{
-          cy.visit(machinesPath);
-        });
+        ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(
+          () => {
+            cy.visit(machinesPath);
+          }
+        );
      });
    });

-    it('should add a machine', () => {
-      cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click();
-      cy.url().should('contain', 'users/create-machine');
+    it("should add a machine", () => {
+      cy.get('[data-e2e="action-key-add"]')
+        .parents('[data-e2e="create-user-button"]')
+        .click();
+      cy.url().should("contain", "users/create-machine");
      //force needed due to the prefilled username prefix
-      cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, { force: true });
-      cy.get('[formcontrolname="name"]').type('e2emachinename');
-      cy.get('[formcontrolname="description"]').type('e2emachinedescription');
+      cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, {
+        force: true,
+      });
+      cy.get('[formcontrolname="name"]').type("e2emachinename");
+      cy.get('[formcontrolname="description"]').type("e2emachinedescription");
      cy.get('[data-e2e="create-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
      cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
    });
  });

-  describe('remove', () => {
-    before('ensure it exists', () => {
+  describe("remove", () => {
+    before("ensure it exists", () => {
      apiAuth().then((api) => {
-        ensureMachineUserExists(api, testMachineUserNameRemove).then(()=>{
+        ensureMachineUserExists(api, testMachineUserNameRemove).then(() => {
          cy.visit(machinesPath);
        });
      });
    });

-    it('should delete a machine', () => {
-      cy.contains('tr', testMachineUserNameRemove, { timeout: 1000 })
+    it("should delete a machine", () => {
+      cy.contains("tr", testMachineUserNameRemove, { timeout: 1000 })
        // doesn't work, need to force click.
        // .trigger('mouseover')
-        .find('[e2e-data="enabled-delete-button"]')
-        .click({force: true});
-      cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testMachineUserNameRemove, Cypress.env('org')));
-      cy.get('[e2e-data="confirm-dialog-button"]').click();
-      cy.get('.data-e2e-success');
+        .find('[data-e2e="enabled-delete-button"]')
+        .click({ force: true });
+      cy.get('[data-e2e="confirm-dialog-input"]')
+        .click()
+        .type(loginname(testMachineUserNameRemove, Cypress.env("org")));
+      cy.get('[data-e2e="confirm-dialog-button"]').click();
+      cy.get(".data-e2e-success");
      cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
    });
  });
 });
--- a/e2e/cypress/e2e/projects/projects.cy.ts
+++ b/e2e/cypress/e2e/projects/projects.cy.ts
@@ -1,12 +1,15 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureProjectDoesntExist, ensureProjectExists } from '../../support/api/projects';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureProjectDoesntExist,
+  ensureProjectExists,
+} from "../../support/api/projects";

-describe('projects', () => {
-  const testProjectNameCreate = 'e2eprojectcreate';
-  const testProjectNameDeleteList = 'e2eprojectdeletelist';
-  const testProjectNameDeleteGrid = 'e2eprojectdeletegrid';
+describe("projects", () => {
+  const testProjectNameCreate = "e2eprojectcreate";
+  const testProjectNameDeleteList = "e2eprojectdeletelist";
+  const testProjectNameDeleteGrid = "e2eprojectdeletegrid";

-  describe('add project', () => {
+  describe("add project", () => {
    beforeEach(`ensure it doesn't exist already`, () => {
      apiAuth().then((api) => {
        ensureProjectDoesntExist(api, testProjectNameCreate);
@@ -14,57 +17,61 @@ describe('projects', () => {
      cy.visit(`/ui/console/projects`);
    });

-    it('should add a project', () => {
-      cy.get('.add-project-button').click({ force: true });
-      cy.get('input').type(testProjectNameCreate);
+    it("should add a project", () => {
+      cy.get(".add-project-button").click({ force: true });
+      cy.get("input").type(testProjectNameCreate);
      cy.get('[data-e2e="continue-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
      cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
    });
  });

-  describe.skip('remove project', () => {
-    describe('list view', () => {
-      beforeEach('ensure it exists', () => {
+  describe.skip("remove project", () => {
+    describe("list view", () => {
+      beforeEach("ensure it exists", () => {
        apiAuth().then((api) => {
          ensureProjectExists(api, testProjectNameDeleteList);
        });
        cy.visit(`/ui/console/projects`);
      });

-      it('removes the project', () => {
-        cy.get('[data-e2e=toggle-grid]').click();
-        cy.get('[data-e2e=timestamp]');
-        cy.contains('tr', testProjectNameDeleteList, { timeout: 1000 })
-          .find('[data-e2e=delete-project-button]')
-          .click({force: true});
-        cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteList);
-        cy.get('[e2e-data="confirm-dialog-button"]').click();
-        cy.get('.data-e2e-success');
+      it("removes the project", () => {
+        cy.get('[data-e2e="toggle-grid"]').click();
+        cy.get('[data-e2e="timestamp"]');
+        cy.contains("tr", testProjectNameDeleteList, { timeout: 1000 })
+          .find('[data-e2e="delete-project-button"]')
+          .click({ force: true });
+        cy.get('[data-e2e="confirm-dialog-input"]').type(
+          testProjectNameDeleteList
+        );
+        cy.get('[data-e2e="confirm-dialog-button"]').click();
+        cy.get(".data-e2e-success");
        cy.wait(200);
-        cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+        cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
      });
    });

-    describe('grid view', () => {
-      beforeEach('ensure it exists', () => {
+    describe("grid view", () => {
+      beforeEach("ensure it exists", () => {
        apiAuth().then((api) => {
          ensureProjectExists(api, testProjectNameDeleteGrid);
        });
        cy.visit(`/ui/console/projects`);
      });

-      it('removes the project', () => {
-        cy.contains('[data-e2e=grid-card]', testProjectNameDeleteGrid)
-          .find('[data-e2e=delete-project-button]')
-          .trigger('mouseover')
+      it("removes the project", () => {
+        cy.contains('[data-e2e="grid-card"]', testProjectNameDeleteGrid)
+          .find('[data-e2e="delete-project-button"]')
+          .trigger("mouseover")
          .click();
-        cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteGrid);
-        cy.get('[e2e-data="confirm-dialog-button"]').click();
-        cy.get('.data-e2e-success');
+        cy.get('[data-e2e="confirm-dialog-input"]').type(
+          testProjectNameDeleteGrid
+        );
+        cy.get('[data-e2e="confirm-dialog-button"]').click();
+        cy.get(".data-e2e-success");
        cy.wait(200);
-        cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+        cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
      });
    });
  });
--- a/e2e/cypress/e2e/settings/login-policy.cy.ts
+++ b/e2e/cypress/e2e/settings/login-policy.cy.ts
@@ -14,7 +14,7 @@ describe("login policy", ()=> {
                login(user)
                cy.visit(orgPath)
                // TODO: Why force?
-                cy.contains('[data-e2e=policy-card]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
+                cy.contains('[data-e2e="policy-card"]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
                apiAuth().then(api => {
                    ensureHumanUserExists(api, User.LoginPolicyUser)
                })
--- a/e2e/cypress/e2e/settings/password-complexity.cy.ts
+++ b/e2e/cypress/e2e/settings/password-complexity.cy.ts
@@ -13,7 +13,7 @@ describe("password complexity", ()=> {
                login(user)
                cy.visit(orgPath)
                // TODO: Why force?
-                cy.contains('[data-e2e=policy-card]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
+                cy.contains('[data-e2e="policy-card"]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
            })

            // TODO: fix saving password complexity policy bug
--- a/e2e/cypress/e2e/settings/private-labeling.cy.ts
+++ b/e2e/cypress/e2e/settings/private-labeling.cy.ts
@@ -13,7 +13,7 @@ describe('private labeling', () => {
        login(user);
        cy.visit(orgPath);
        // TODO: Why force?
-        cy.contains('[data-e2e=policy-card]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e
+        cy.contains('[data-e2e="policy-card"]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e
      });

      customize('white', user);
@@ -32,12 +32,12 @@ function customize(theme: string, user: User) {

    describe.skip('logo', () => {
      beforeEach('expand logo category', () => {
-        cy.contains('[data-e2e=policy-category]', 'Logo').click(); // TODO: select data-e2e
+        cy.contains('[data-e2e="policy-category"]', 'Logo').click(); // TODO: select data-e2e
        cy.fixture('logo.png').as('logo');
      });

      it('should update a logo', () => {
-        cy.get('[data-e2e=image-part-logo]')
+        cy.get('[data-e2e="image-part-logo"]')
          .find('input')
          .then(function (el) {
            const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png');
@@ -56,10 +56,10 @@ function customize(theme: string, user: User) {
    it('should update an icon');
    it('should delete an icon');
    it.skip('should update the background color', () => {
-      cy.contains('[data-e2e=color]', 'Background Color').find('button').click(); // TODO: select data-e2e
+      cy.contains('[data-e2e="color"]', 'Background Color').find('button').click(); // TODO: select data-e2e
      cy.get('color-editable-input').find('input').clear().type('#ae44dc');
-      cy.get('[data-e2e=save-colors-button]').click();
-      cy.get('[data-e2e=header-user-avatar]').click();
+      cy.get('[data-e2e="save-colors-button"]').click();
+      cy.get('[data-e2e="header-user-avatar"]').click();
      cy.contains('Logout All Users').click(); // TODO: select data-e2e
      login(User.LoginPolicyUser, undefined, true, null, () => {
        cy.pause();