From 0cc548e3f84f5ab6e4a47a1aa3371ea0146476be Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Fri, 22 Jul 2022 09:06:16 +0200
Subject: [PATCH] fix(console): asset path on signout route, stop event
 propagation in actions table (#4016)

fix: asset path, stop event propagation in actions table
---
 .../action-table/action-table.component.html  | 96 ++++++++++++-------
 .../pages/signedout/signedout.component.html  |  4 +-
 2 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/console/src/app/pages/actions/action-table/action-table.component.html b/console/src/app/pages/actions/action-table/action-table.component.html
index 1e8754f4a5..3846b8552f 100644
--- a/console/src/app/pages/actions/action-table/action-table.component.html
+++ b/console/src/app/pages/actions/action-table/action-table.component.html
@@ -1,22 +1,28 @@
-<cnsl-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="refreshPage()"
-  [dataSize]="dataSource?.data?.length ?? 0" [timestamp]="actionsResult?.details?.viewTimestamp"
-  [selection]="selection">
+<cnsl-refresh-table
+  [hideRefresh]="true"
+  [loading]="loading$ | async"
+  (refreshed)="refreshPage()"
+  [dataSize]="dataSource?.data?.length ?? 0"
+  [timestamp]="actionsResult?.details?.viewTimestamp"
+  [selection]="selection"
+>
   <div actions *ngIf="selection.isEmpty()">
     <a class="cnsl-action-button" color="primary" mat-raised-button (click)="openAddAction()">
       <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
     </a>
   </div>
   <div actions *ngIf="!selection.isEmpty()">
-    <button class="margin-right action-state-btn cnsl-action-button bg-state inactive" mat-raised-button
-      (click)="deactivateSelection()">
+    <button
+      class="margin-right action-state-btn cnsl-action-button bg-state inactive"
+      mat-raised-button
+      (click)="deactivateSelection()"
+    >
       <span>{{ 'ACTIONS.DEACTIVATE' | translate }}</span>
-      <cnsl-action-keys (actionTriggered)="deactivateSelection()" [type]="ActionKeysType.DEACTIVATE">
-      </cnsl-action-keys>
+      <cnsl-action-keys (actionTriggered)="deactivateSelection()" [type]="ActionKeysType.DEACTIVATE"> </cnsl-action-keys>
     </button>
     <button class="action-state-btn cnsl-action-button bg-state active" mat-raised-button (click)="activateSelection()">
       <span>{{ 'ACTIONS.REACTIVATE' | translate }}</span>
-      <cnsl-action-keys (actionTriggered)="activateSelection()" [type]="ActionKeysType.REACTIVATE">
-      </cnsl-action-keys>
+      <cnsl-action-keys (actionTriggered)="activateSelection()" [type]="ActionKeysType.REACTIVATE"> </cnsl-action-keys>
     </button>
   </div>
 
@@ -24,48 +30,61 @@
     <table class="table" mat-table [dataSource]="dataSource">
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef class="action-select-cell">
-          <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 mat-cell *matCellDef="let key" class="action-select-cell">
-          <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-            (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+          <mat-checkbox
+            color="primary"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(key) : null"
+            [checked]="selection.isSelected(key)"
+          >
           </mat-checkbox>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.ID' | translate }} </th>
-        <td mat-cell *matCellDef="let action" class="pointer"> {{ action?.id }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.ID' | translate }}</th>
+        <td mat-cell *matCellDef="let action" class="pointer">{{ action?.id }}</td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.NAME' | translate }} </th>
-        <td mat-cell *matCellDef="let action" class="pointer"> {{ action?.name }} </td>
+        <th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.NAME' | translate }}</th>
+        <td mat-cell *matCellDef="let action" class="pointer">{{ action?.name }}</td>
       </ng-container>
 
       <ng-container matColumnDef="state">
-        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.STATE' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.STATE' | translate }}</th>
         <td mat-cell *matCellDef="let action" class="pointer">
-          <span class="state"
-            [ngClass]="{'active': action.state === ActionState.ACTION_STATE_ACTIVE,'inactive': action.state === ActionState.ACTION_STATE_INACTIVE }">
-            {{'FLOWS.STATES.'+action.state | translate}}</span>
+          <span
+            class="state"
+            [ngClass]="{
+              active: action.state === ActionState.ACTION_STATE_ACTIVE,
+              inactive: action.state === ActionState.ACTION_STATE_INACTIVE
+            }"
+          >
+            {{ 'FLOWS.STATES.' + action.state | translate }}</span
+          >
         </td>
       </ng-container>
 
       <ng-container matColumnDef="timeout">
-        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.TIMEOUT' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.TIMEOUT' | translate }}</th>
         <td mat-cell *matCellDef="let key" class="pointer">
-          {{key.timeout | durationToSeconds}}
+          {{ key.timeout | durationToSeconds }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="allowedToFail">
-        <th mat-header-cell *matHeaderCellDef> {{ 'FLOWS.ALLOWEDTOFAIL' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef>{{ 'FLOWS.ALLOWEDTOFAIL' | translate }}</th>
         <td mat-cell *matCellDef="let action" class="pointer">
-          {{action.allowedToFail}}
+          {{ action.allowedToFail }}
         </td>
       </ng-container>
 
@@ -73,8 +92,14 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let action" class="pointer">
           <cnsl-table-actions>
-            <button [disabled]="(['action.write'] | hasRole | async) === false" actions
-              matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" (click)="deleteAction(action)" mat-icon-button>
+            <button
+              [disabled]="(['action.write'] | hasRole | async) === false"
+              actions
+              matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
+              color="warn"
+              (click)="$event.stopPropagation(); deleteAction(action)"
+              mat-icon-button
+            >
               <i class="las la-trash"></i>
             </button>
           </cnsl-table-actions>
@@ -82,12 +107,17 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr class="highlight" mat-row *matRowDef="let action; columns: displayedColumns;" (click)="openDialog(action)">
-      </tr>
+      <tr class="highlight" mat-row *matRowDef="let action; columns: displayedColumns" (click)="openDialog(action)"></tr>
     </table>
   </div>
 
-  <cnsl-paginator #paginator class="paginator" [timestamp]="actionsResult?.details?.viewTimestamp"
-    [length]="actionsResult?.details?.totalResult || 0" [pageSize]="20" [pageSizeOptions]="[10, 20, 50, 100]"
-    (page)="changePage($event)"></cnsl-paginator>
-</cnsl-refresh-table>
\ No newline at end of file
+  <cnsl-paginator
+    #paginator
+    class="paginator"
+    [timestamp]="actionsResult?.details?.viewTimestamp"
+    [length]="actionsResult?.details?.totalResult || 0"
+    [pageSize]="20"
+    [pageSizeOptions]="[10, 20, 50, 100]"
+    (page)="changePage($event)"
+  ></cnsl-paginator>
+</cnsl-refresh-table>
diff --git a/console/src/app/pages/signedout/signedout.component.html b/console/src/app/pages/signedout/signedout.component.html
index c05e784caa..89313532e5 100644
--- a/console/src/app/pages/signedout/signedout.component.html
+++ b/console/src/app/pages/signedout/signedout.component.html
@@ -1,9 +1,9 @@
 <div class="signed-out-wrap">
   <div class="block">
     <div class="signed-out-header">
-      <img alt="zitadel logo" *ngIf="dark; else lighttheme" src="../../../assets/images/zitadel-logo-light.svg" />
+      <img alt="zitadel logo" *ngIf="dark; else lighttheme" src="./assets/images/zitadel-logo-light.svg" />
       <ng-template #lighttheme>
-        <img alt="zitadel logo" src="../../../assets/images/zitadel-logo-dark.svg" />
+        <img alt="zitadel logo" src="./assets/images/zitadel-logo-dark.svg" />
       </ng-template>
       <p class="cnsl-secondary-text">{{ 'USER.SIGNEDOUT' | translate }}</p>