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/table-actions/table-actions.component.html

@@ -0,0 +1,14 @@
+<div class="cnsl-table-action-wrapper">
+  <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
+      [matMenuTriggerFor]="actions">
+      <mat-icon>more_horiz</mat-icon>
+    </button>
+
+    <mat-menu #actions="matMenu" xPosition="before" class="table-actions-menu">
+      <ng-content select="[menuActions]"></ng-content>
+    </mat-menu>
+  </div>
+</div>

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

@@ -0,0 +1,47 @@
+@use '@angular/material' as mat;
+
+@mixin table-actions-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+  $card-background-color: mat.get-color-from-palette($background, cards);
+  $border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
+
+  .cnsl-table-action-wrapper {
+    position: relative;
+    height: 36px;
+
+    .cnsl-table-action {
+      position: absolute;
+      right: 0;
+      display: flex;
+      background-color: $card-background-color;
+      transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      border: 1px solid $border-color;
+      box-sizing: border-box;
+      border-radius: 0.5rem;
+      outline: none;
+      box-shadow: 0 0 3px #0000001a;
+      height: 36px;
+      align-items: center;
+
+      button {
+        height: 36px;
+        width: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [hoveractions] {
+        display: none;
+      }
+
+      &:hover {
+        [hoveractions] {
+          display: flex;
+        }
+      }
+    }
+  }
+}

console/src/app/modules/table-actions/table-actions.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableActionsComponent } from './table-actions.component';
+
+describe('TableActionsComponent', () => {
+  let component: TableActionsComponent;
+  let fixture: ComponentFixture<TableActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableActionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'cnsl-table-actions',
+  templateUrl: './table-actions.component.html',
+  styleUrls: ['./table-actions.component.scss'],
+})
+export class TableActionsComponent {
+  @Input() hasActions: boolean = false;
+  constructor() {}
+}

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

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { TableActionsComponent } from './table-actions.component';
+
+@NgModule({
+  declarations: [TableActionsComponent],
+  imports: [CommonModule, MatIconModule, MatButtonModule, MatMenuModule, MatTooltipModule, TranslateModule],
+  exports: [TableActionsComponent, MatMenuModule],
+})
+export class TableActionsModule {}