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 <[email protected]> * Update console/src/app/modules/project-roles-table/project-roles-table.component.html Co-authored-by: Elio Bischof <[email protected]> * fix , Co-authored-by: Elio Bischof <[email protected]>
2026-11-10 08:05:12 +00:00 · 2022-08-16 14:02:59 +02:00
parent dcac08b1d5
commit 44fc2efbb7
27 changed files with 375 additions and 247 deletions
@@ -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>
@@ -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>
@@ -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>

@@ -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">
@@ -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>
@@ -20,7 +20,7 @@
      [disabled]="!project.name"
      cdkFocusInitial
      type="submit"
-      [attr.data-e2e]="'continue-button'"
+      data-e2e="continue-button"
    >
      {{ 'ACTIONS.CONTINUE' | translate }}
    </button>
@@ -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>
@@ -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>
@@ -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>