build: Update angular material

DSD-DBS · Jan 9, 2024 · 0eb617e · 0eb617e
1 parent c272d34
commit 0eb617e
Show file tree

Hide file tree

Showing 58 changed files with 1,022 additions and 1,005 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,12 +14,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~17.0.6",
-    "@angular/cdk": "^16.2.10",
+    "@angular/cdk": "^17.0.1",
     "@angular/common": "~17.0.6",
     "@angular/compiler": "~17.0.6",
     "@angular/core": "~17.0.6",
     "@angular/forms": "~17.0.6",
-    "@angular/material": "^16.2.10",
+    "@angular/material": "^17.0.1",
     "@angular/platform-browser": "~17.0.6",
     "@angular/platform-browser-dynamic": "~17.0.6",
     "@angular/router": "~17.0.6",

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -11,35 +11,35 @@ import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRippleModule } from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
-import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSortModule } from '@angular/material/sort';
 import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

diff --git a/frontend/src/app/events/events.component.html b/frontend/src/app/events/events.component.html
@@ -4,7 +4,7 @@
  -->
 
 <div>
-  <mat-card class="wider">
+  <div class="collab-card w-full">
     <table mat-table matSort [dataSource]="historyEventDataSource">
       <ng-container matColumnDef="eventType">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>Event Type</th>
@@ -55,5 +55,5 @@
       aria-label="Select page of periodic elements"
     >
     </mat-paginator>
-  </mat-card>
+  </div>
 </div>
diff --git a/frontend/src/app/events/events.component.ts b/frontend/src/app/events/events.component.ts
@@ -4,9 +4,9 @@
  */
 
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
 import { EventsService, HistoryEvent } from './service/events.service';
 
 @Component({

diff --git a/frontend/src/app/general/auth/auth/auth.component.html b/frontend/src/app/general/auth/auth/auth.component.html
@@ -10,7 +10,7 @@ <h1>Capella Collaboration Manager</h1>
     This service enables co-working on Capella MBSE projects. <br />
     To continue to the service you need an invite from an existing user. <br />
   </div>
-  <mat-card *ngIf="params.has('error')" id="oauth-error">
+  <div *ngIf="params.has('error')" id="oauth-error" class="collab-card">
     <p>
       The OAuth2 server raised the following error:<br />
       <b>{{ params.get("error") }}</b>
@@ -22,7 +22,7 @@ <h1>Capella Collaboration Manager</h1>
       More informations:
       <a href="{{ params.get('error_uri') }}">{{ params.get("error_uri") }}</a>
     </p>
-  </mat-card>
+  </div>
   <div id="oauth-login">
     <button mat-flat-button color="primary" (click)="webSSO()">
       Login with

diff --git a/frontend/src/app/general/header/header.component.html b/frontend/src/app/general/header/header.component.html
@@ -21,85 +21,97 @@
     </div>
 
     <div class="hidden gap-2 xl:flex">
-      <div *ngFor="let item of navBarService.navBarItems">
-        <ng-container *ngIf="userService.validateUserRole(item.requiredRole)">
-          <ng-container *ngIf="item.href; else router">
+      @for (item of navBarService.navBarItems; track item.name) {
+        @if (userService.validateUserRole(item.requiredRole)) {
+          @if (item.href) {
             <a
               mat-raised-button
               color="primary"
               [attr.href]="item.href"
               [attr.target]="item.target"
+              class="text-xs"
             >
               {{ item.name }}
               <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
             </a>
-          </ng-container>
-          <ng-template #router>
-            <a mat-raised-button color="primary" [routerLink]="item.routerLink">
+          } @else {
+            <a
+              mat-raised-button
+              color="primary"
+              [routerLink]="item.routerLink"
+              class="text-xs"
+            >
               {{ item.name }}
             </a>
-          </ng-template>
-        </ng-container>
-      </div>
+          }
+        }
+      }
     </div>
-    <div>
-      <div class="hidden gap-2 xl:flex">
-        <div>
-          <a
-            mat-raised-button
-            color="primary"
-            href="https://github.com/DSD-DBS/capella-collab-manager/issues"
-            target="_blank"
-            >Open Issue on Github <mat-icon>open_in_new</mat-icon>
-          </a>
-        </div>
-        <mat-menu #profileMenu="matMenu">
-          <a
-            class="profileMenuButton"
-            mat-menu-item
-            [routerLink]="['user', userService.user?.id]"
-          >
-            Profile <mat-icon>account_circle</mat-icon>
-          </a>
-          <a
-            *ngIf="userService.user?.role === 'administrator'"
-            class="profileMenuButton"
-            mat-menu-item
-            routerLink="settings"
-          >
-            Settings <mat-icon>settings</mat-icon>
-          </a>
-          <a
-            *ngIf="userService.user?.role === 'administrator'"
-            class="profileMenuButton"
-            mat-menu-item
-            routerLink="events"
-          >
-            Events <mat-icon>event_note</mat-icon>
-          </a>
-          <a class="profileMenuButton" mat-menu-item routerLink="tokens">
-            Tokens <mat-icon>key</mat-icon>
-          </a>
-          <a
-            class="profileMenuButton"
-            mat-menu-item
-            routerLink="logout/redirect"
-            [queryParams]="{ reason: 'logout' }"
-            *ngIf="authService.isLoggedIn()"
-          >
-            Log out <mat-icon>logout</mat-icon>
-          </a>
-        </mat-menu>
+    <div class="hidden items-center gap-2 xl:flex">
+      <a
+        mat-raised-button
+        color="primary"
+        href="https://github.com/DSD-DBS/capella-collab-manager/issues"
+        target="_blank"
+        class="text-xs"
+        >Open Issue on Github <mat-icon>open_in_new</mat-icon>
+      </a>
 
-        <button
-          class="!mx-5"
-          color="primary"
-          mat-raised-button
-          [matMenuTriggerFor]="profileMenu"
+      <mat-menu #profileMenu="matMenu">
+        <a
+          class="profileMenuButton"
+          mat-menu-item
+          [routerLink]="['user', userService.user?.id]"
+        >
+          Profile <mat-icon>account_circle</mat-icon>
+        </a>
+        <a
+          *ngIf="userService.user?.role === 'administrator'"
+          class="profileMenuButton"
+          mat-menu-item
+          routerLink="settings"
+          class="text-xs"
         >
-          Menu <mat-icon>menu</mat-icon>
-        </button>
-      </div>
+          Settings <mat-icon>settings</mat-icon>
+        </a>
+        <a
+          *ngIf="userService.user?.role === 'administrator'"
+          class="profileMenuButton"
+          mat-menu-item
+          routerLink="events"
+          class="text-xs"
+        >
+          Events <mat-icon>event_note</mat-icon>
+        </a>
+
+        <a
+          class="profileMenuButton"
+          mat-menu-item
+          routerLink="tokens"
+          class="text-xs"
+        >
+          Tokens <mat-icon>key</mat-icon>
+        </a>
+        <a
+          class="profileMenuButton"
+          mat-menu-item
+          routerLink="logout/redirect"
+          [queryParams]="{ reason: 'logout' }"
+          *ngIf="authService.isLoggedIn()"
+          class="text-xs"
+        >
+          Log out <mat-icon>logout</mat-icon>
+        </a>
+      </mat-menu>
+
+      <button
+        class="!mx-5 text-xs"
+        color="primary"
+        mat-raised-button
+        [matMenuTriggerFor]="profileMenu"
+      >
+        Menu <mat-icon>menu</mat-icon>
+      </button>
     </div>
   </div>
 

diff --git a/frontend/src/app/general/notice/notice.component.css b/frontend/src/app/general/notice/notice.component.css
@@ -3,11 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-mat-card {
-  margin: 10px;
-  width: inherit;
-}
-
 p {
   margin: 0px;
   padding: 0px;

diff --git a/frontend/src/app/general/notice/notice.component.html b/frontend/src/app/general/notice/notice.component.html
@@ -4,8 +4,8 @@
  -->
 
 <div *ngFor="let notice of noticeService.notices">
-  <mat-card [class]="notice.level">
+  <div [class]="notice.level" class="collab-card" style="width: inherit">
     <h3 [innerHTML]="notice.title"></h3>
     <p [innerHTML]="notice.message"></p>
-  </mat-card>
+  </div>
 </div>
diff --git a/frontend/src/app/projects/create-project/create-project.component.html b/frontend/src/app/projects/create-project/create-project.component.html
@@ -15,7 +15,7 @@
       </ng-template>
       <h3 class="flex justify-center sm:hidden">Create new project</h3>
       <div class="flex justify-center">
-        <mat-card class="w-[350px] sm:min-w-[420px]">
+        <div class="collab-card w-[350px] sm:min-w-[420px]">
           <form [formGroup]="form">
             <div>
               <mat-form-field appearance="fill" class="form-field-default">
@@ -84,7 +84,7 @@ <h3 class="flex justify-center sm:hidden">Create new project</h3>
               </div>
             </div>
           </form>
-        </mat-card>
+        </div>
       </div>
     </mat-step>
 

diff --git a/frontend/src/app/projects/create-project/create-project.component.spec.ts b/frontend/src/app/projects/create-project/create-project.component.spec.ts
@@ -12,9 +12,9 @@ import {
   ReactiveFormsModule,
   ValidationErrors,
 } from '@angular/forms';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatStepperModule } from '@angular/material/stepper';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

diff --git a/frontend/src/app/projects/models/backup-settings/create-backup/create-backup.component.html b/frontend/src/app/projects/models/backup-settings/create-backup/create-backup.component.html
@@ -7,7 +7,7 @@
   <h1>Create a new backup pipeline</h1>
   <form [formGroup]="createBackupForm" *ngIf="t4cAndGitModelExists">
     <div class="flex flex-row flex-wrap items-center">
-      <mat-card>
+      <div class="collab-card">
         Please select a T4C model:
         <mat-selection-list formControlName="t4cmodel" [multiple]="false">
           <mat-list-option
@@ -22,9 +22,9 @@ <h1>Create a new backup pipeline</h1>
             </div>
           </mat-list-option>
         </mat-selection-list>
-      </mat-card>
+      </div>
       <mat-icon>arrow_right_alt</mat-icon>
-      <mat-card>
+      <div class="collab-card">
         Please select a Git model:
         <mat-selection-list formControlName="gitmodel" [multiple]="false">
           <mat-list-option
@@ -37,7 +37,7 @@ <h1>Create a new backup pipeline</h1>
             </div>
           </mat-list-option>
         </mat-selection-list>
-      </mat-card>
+      </div>
     </div>
     <hr />
     <div>Please specify the configuration for your backup job:</div>

diff --git a/.../src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.component.html b/.../src/app/projects/models/backup-settings/trigger-pipeline/trigger-pipeline.component.html
@@ -15,11 +15,11 @@
     </div>
     <div class="pipelines">
       <div *ngFor="let pipeline of this.pipelineService.pipelines$ | async">
-        <mat-card
+        <div
           matRipple
           *ngIf="!selectedPipeline || selectedPipeline.id === pipeline.id"
           (click)="selectPipeline(pipeline)"
-          class="pipeline-card"
+          class="pipeline-card collab-card"
         >
           <span class="text-center"><b>Backup</b> (ID: {{ pipeline.id }})</span>
           <br />
@@ -54,7 +54,7 @@
               <i>{{ pipeline.git_model.entrypoint }}</i>
             </span>
           </div>
-        </mat-card>
+        </div>
       </div>
     </div>
     <div