feat: rehauled console (#3525)

* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

Co-authored-by: Livio Amstutz <[email protected]>

console/src/app/modules/refresh-table/refresh-table.component.html

@@ -1,20 +1,31 @@
-<div class="table-header-row">
-    <div class="row" *ngIf="selection.hasValue()">
-        <div>
-        <span class="count">{{selection?.selected?.length}}</span>
-        <span class="desc" >{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
+<div class="refresh-table-header-row" [ngClass]="{'border-bottom': showBorder}">
+  <div class="refresh-table-row" *ngIf="selection.hasValue(); else leftActions">
+    <div>
+      <span class="count">{{selection?.selected?.length}}</span>
+      <span class="count-desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
     </div>
-        <span class="slash">|</span>
-        <a (click)="selection.clear()">{{'ORG_DETAIL.TABLE.CLEAR' | translate}}</a>
-    </div>
-    <span class="fill-space"></span>
-    <mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
-    <ng-content select="[actions]"></ng-content>
 
-    <button *ngIf="!hideRefresh" mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
-        <mat-icon class="icon">refresh</mat-icon>
-    </button>
+    <span class="count-slash">|</span>
+    <a mat-stroked-button [ngClass]="{'cnsl-action-button': showSelectionActionButton}" (click)="selection.clear()">
+      <span>{{'ORG_DETAIL.TABLE.CLEAR' | translate}}</span>
+      <cnsl-action-keys *ngIf="showSelectionActionButton" [doNotUseContrast]="true" [type]="ActionKeysType.CLEAR"
+        (actionTriggered)="selection.clear()">
+      </cnsl-action-keys>
+    </a>
+  </div>
+  <ng-template #leftActions>
+    <ng-content select="[leftActions]"></ng-content>
+  </ng-template>
+  <span class="fill-space"></span>
+  <mat-spinner class="refresh-table-spinner" *ngIf="loading" diameter="20"></mat-spinner>
+
+  <button *ngIf="!hideRefresh" mat-icon-button (click)="emitRefresh()" class="refresh-table-icon-button"
+    matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+    <mat-icon class="icon">refresh</mat-icon>
+  </button>
+
+  <ng-content select="[actions]"></ng-content>
 </div>
 <div class="table-wrapper">
-    <ng-content></ng-content>
+  <ng-content></ng-content>
 </div>

console/src/app/modules/refresh-table/refresh-table.component.scss

@@ -1,48 +1,53 @@
+@use '@angular/material' as mat;
 
-.table-header-row {
-  display: flex;
-  align-items: center;
+@mixin refresh-table-theme($theme) {
+  $foreground: map-get($theme, foreground);
 
-  .row {
+  .refresh-table-header-row {
     display: flex;
+    align-items: center;
+    padding-bottom: 0.5rem;
 
-    .count {
-      margin-right: .5rem;
-      color: var(--grey);
+    &.border-bottom {
+      padding-bottom: 0.5rem;
+      margin-bottom: 1rem;
+      border-bottom: 1px solid map-get($foreground, divider);
     }
 
-    .desc {
-      font-size: 14px;
-      color: var(--grey);
+    .refresh-table-row {
+      display: flex;
+      align-items: center;
+
+      .count {
+        margin-right: 0.5rem;
+      }
+
+      .count-desc {
+        font-size: 14px;
+      }
+
+      .count-slash {
+        margin: 0 0.5rem;
+        opacity: 0.8;
+      }
     }
 
-    .slash {
-      margin: 0 .5rem;
-      color: var(--grey);
-    }
-
-    a {
-      cursor: pointer;
-      font-size: 14px;
+    .refresh-table-spinner {
       margin-top: 2px;
+      margin-bottom: 1px;
+      margin-right: 1rem;
     }
-  }
 
-  .spinner {
-    margin-top: 2px;
-    margin-bottom: 1px;
-    margin-right: 1rem;
-  }
+    .fill-space {
+      flex: 1;
+    }
 
-  .fill-space {
-    flex: 1;
-  }
+    .refresh-table-icon-button {
+      margin-right: 0.5rem;
 
-  .icon-button {
-    margin-right: .5rem;
-
-    .icon {
-      font-size: 1.2rem;
+      .icon {
+        font-size: 1.2rem;
+      }
     }
   }
 }

console/src/app/modules/refresh-table/refresh-table.component.ts

@@ -4,6 +4,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { RefreshService } from 'src/app/services/refresh.service';
 
+import { ActionKeysType } from '../action-keys/action-keys.component';
+
 const rotate = animation([
   animate(
     '{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)',
@@ -21,11 +23,7 @@ const rotate = animation([
   selector: 'cnsl-refresh-table',
   templateUrl: './refresh-table.component.html',
   styleUrls: ['./refresh-table.component.scss'],
-  animations: [
-    trigger('rotate', [
-      transition('* => *', [useAnimation(rotate, { params: { time: '1s' } })]),
-    ]),
-  ],
+  animations: [trigger('rotate', [transition('* => *', [useAnimation(rotate, { params: { time: '1s' } })])])],
 })
 export class RefreshTableComponent implements OnInit {
   @Input() public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
@@ -36,8 +34,11 @@ export class RefreshTableComponent implements OnInit {
   @Input() public emitRefreshOnPreviousRoutes: string[] = [];
   @Output() public refreshed: EventEmitter<void> = new EventEmitter();
   @Input() public hideRefresh: boolean = false;
+  @Input() public showBorder: boolean = false;
+  @Input() public showSelectionActionButton: boolean = true;
 
-  constructor(private refreshService: RefreshService) { }
+  public ActionKeysType: any = ActionKeysType;
+  constructor(private refreshService: RefreshService) {}
 
   ngOnInit(): void {
     if (this.emitRefreshAfterTimeoutInMs) {
@@ -46,8 +47,10 @@ export class RefreshTableComponent implements OnInit {
       }, this.emitRefreshAfterTimeoutInMs);
     }
 
-    if (this.emitRefreshOnPreviousRoutes.length && this.refreshService.previousUrls
-      .some(url => this.emitRefreshOnPreviousRoutes.includes(url))) {
+    if (
+      this.emitRefreshOnPreviousRoutes.length &&
+      this.refreshService.previousUrls.some((url) => this.emitRefreshOnPreviousRoutes.includes(url))
+    ) {
       setTimeout(() => {
         this.emitRefresh();
       }, 1000);

console/src/app/modules/refresh-table/refresh-table.module.ts

@@ -10,24 +10,24 @@ import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
 
+import { ActionKeysModule } from '../action-keys/action-keys.module';
 import { RefreshTableComponent } from './refresh-table.component';
 
 @NgModule({
-    declarations: [RefreshTableComponent],
-    imports: [
-        CommonModule,
-        MatButtonModule,
-        MatIconModule,
-        TranslateModule,
-        FormsModule,
-        MatTooltipModule,
-        MatProgressSpinnerModule,
-        TimestampToDatePipeModule,
-        LocalizedDatePipeModule,
-        PaginatorModule,
-    ],
-    exports: [
-        RefreshTableComponent,
-    ],
+  declarations: [RefreshTableComponent],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    TranslateModule,
+    ActionKeysModule,
+    FormsModule,
+    MatTooltipModule,
+    MatProgressSpinnerModule,
+    TimestampToDatePipeModule,
+    LocalizedDatePipeModule,
+    PaginatorModule,
+  ],
+  exports: [RefreshTableComponent],
 })
-export class RefreshTableModule { }
+export class RefreshTableModule {}