build: Update angular material

DSD-DBS · Nov 21, 2023 · 9f4c805 · 9f4c805
1 parent 58b162a
commit 9f4c805
Show file tree

Hide file tree

Showing 14 changed files with 660 additions and 659 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.2",
-    "@angular/cdk": "^16.2.10",
+    "@angular/cdk": "^17.0.1",
     "@angular/common": "~17.0.2",
     "@angular/compiler": "~17.0.2",
     "@angular/core": "~17.0.2",
     "@angular/forms": "~17.0.2",
-    "@angular/material": "^16.2.10",
+    "@angular/material": "^17.0.1",
     "@angular/platform-browser": "~17.0.2",
     "@angular/platform-browser-dynamic": "~17.0.2",
     "@angular/router": "~17.0.2",

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.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/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/project-detail/model-overview/model-overview.component.html b/frontend/src/app/projects/project-detail/model-overview/model-overview.component.html
@@ -63,14 +63,20 @@ <h2>Models</h2>
         </div>
 
         <div class="mr-1 flex">
-          <mat-card class="mx-1 flex items-center bg-green-800 text-white">
+          <mat-card
+            class="mx-1 flex items-center bg-green-800 text-white"
+            style="background-color: rgb(22 101 52)"
+          >
             <div class="mx-2 text-center">
               <div class="text-xs">Nature</div>
               <div *ngIf="model.nature">{{ model.nature.name }}</div>
               <div *ngIf="!model.nature">Not specified</div>
             </div>
           </mat-card>
-          <mat-card class="mx-1 flex items-center bg-red-800 text-white">
+          <mat-card
+            class="mx-1 flex items-center bg-red-800 text-white"
+            style="background-color: rgb(153 27 27)"
+          >
             <div class="mx-2 text-center">
               <div class="text-xs">Working mode</div>
               {{ getPrimaryWorkingMode(model) }}
@@ -89,6 +95,7 @@ <h2>Models</h2>
         <div class="m-2.5">
           <a
             mat-mini-fab
+            color="primary"
             matTooltip="Configure model"
             class="!m-1.5"
             [routerLink]="['model', model.slug, 'metadata']"
@@ -98,6 +105,7 @@ <h2>Models</h2>
           </a>
           <a
             mat-mini-fab
+            color="primary"
             matTooltip="Model restrictions"
             class="!m-1.5"
             [routerLink]="['model', model.slug, 'restrictions']"
@@ -107,6 +115,7 @@ <h2>Models</h2>
           </a>
           <button
             mat-mini-fab
+            color="primary"
             matTooltip="Move model to different project"
             class="!m-1.5"
             (click)="openMoveToProjectDialog(model)"
@@ -116,6 +125,7 @@ <h2>Models</h2>
           </button>
           <a
             mat-mini-fab
+            color="primary"
             matTooltip="Configure model sources"
             class="!m-1.5"
             [routerLink]="['model', model.slug, 'modelsources']"
@@ -125,6 +135,7 @@ <h2>Models</h2>
           </a>
           <a
             mat-mini-fab
+            color="primary"
             matTooltip="Start synchronization"
             class="!m-1.5"
             (click)="openPipelineDialog(model)"
@@ -136,6 +147,7 @@ <h2>Models</h2>
           </a>
           <a
             mat-mini-fab
+            color="primary"
             matTooltip="Open git repository"
             class="!m-1.5"
             target="_blank"
@@ -147,6 +159,7 @@ <h2>Models</h2>
           </a>
           <a
             mat-mini-fab
+            color="primary"
             matTooltip="Request persistent session"
             class="!m-1.5"
             routerLink="/sessions"
@@ -161,6 +174,7 @@ <h2>Models</h2>
 
           <button
             mat-mini-fab
+            color="primary"
             matTooltip="Show diagrams of model"
             class="!m-1.5"
             [disabled]="!getPrimaryGitModelURL(model)"

diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
@@ -6,7 +6,7 @@
 <div *ngIf="!hasRoute('projects/create')" class="mr-2.5">
   <div class="ml-[20px] flex justify-between">
     <div>
-      <h2>Project members</h2>
+      <h2>Project Members</h2>
     </div>
     <div class="flex flex-wrap gap-2"></div>
   </div>
@@ -23,34 +23,32 @@ <h2>Project members</h2>
     </button>
   </div>
 
-  <h3>New members</h3>
-  <mat-divider [inset]="true"></mat-divider>
+  <h3 class="pl-1">New members</h3>
+  <mat-divider></mat-divider>
   <div class="my-[10px]">
     <button
       class="flex items-center justify-between"
       (click)="openAddUserDialog()"
       mat-stroked-button
     >
       <mat-icon>add</mat-icon>
-      <span> Add user </span>
+      <span> Add User </span>
     </button>
   </div>
 
-  <h3>Current members</h3>
-  <mat-divider [inset]="true"></mat-divider>
-  <mat-form-field class="mb-[-20px] mt-[10px] w-full pr-4" appearance="outline">
+  <h3 class="pl-1">Current members</h3>
+  <mat-divider></mat-divider>
+  <mat-form-field
+    class="mb-[-20px] mt-[10px] w-full pl-1 pr-4"
+    appearance="outline"
+  >
     <mat-label>Search</mat-label>
-    <input
-      [(ngModel)]="search"
-      autocomplete="off"
-      matInput
-      placeholder="Username"
-    />
+    <input [(ngModel)]="search" matInput placeholder="Username" class="mr-2" />
     <mat-icon matSuffix>search</mat-icon>
   </mat-form-field>
   <div class="max-h-[50vh] overflow-y-scroll">
     <div *ngFor="let role of ['manager', 'user', 'administrator']">
-      <div class="mt-2.5 text-lg font-bold text-gray-400">
+      <div class="mt-2.5 pl-1 text-lg font-bold text-gray-400">
         {{ capitalizeFirstLetter(role) }}
       </div>
       <div

diff --git a/frontend/src/app/sessions/session/session.component.ts b/frontend/src/app/sessions/session/session.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Component, HostListener, OnInit } from '@angular/core';
-import { MatLegacyCheckboxChange as MatCheckboxChange } from '@angular/material/legacy-checkbox';
+import { MatCheckboxChange } from '@angular/material/checkbox';
 import { DomSanitizer } from '@angular/platform-browser';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, take } from 'rxjs';

diff --git a/...nd/src/app/settings/core/tools-settings/tool-details/tool-nature/tool-nature.component.ts b/...nd/src/app/settings/core/tools-settings/tool-details/tool-nature/tool-nature.component.ts
@@ -12,7 +12,7 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import { MatLegacySelectionList as MatSelectionList } from '@angular/material/legacy-list';
+import { MatSelectionList } from '@angular/material/list';
 import { finalize, tap } from 'rxjs';
 import { Tool, ToolService, ToolNature } from '../../tool.service';
 

diff --git a/.../src/app/settings/core/tools-settings/tool-details/tool-version/tool-version.component.ts b/.../src/app/settings/core/tools-settings/tool-details/tool-version/tool-version.component.ts
@@ -12,7 +12,7 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import { MatLegacySelectionListChange as MatSelectionListChange } from '@angular/material/legacy-list';
+import { MatSelectionListChange } from '@angular/material/list';
 import { finalize, switchMap, tap } from 'rxjs';
 import {
   PatchToolVersion,

diff --git a/frontend/src/app/settings/core/user-settings/user-settings.component.ts b/frontend/src/app/settings/core/user-settings/user-settings.component.ts
@@ -13,8 +13,8 @@ import {
   Validators,
 } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-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 { MatTableDataSource } from '@angular/material/table';
 import { HistoryEvent } from 'src/app/events/service/events.service';
 import { ConfirmationDialogComponent } from 'src/app/helpers/confirmation-dialog/confirmation-dialog.component';
 import {

diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
@@ -5,17 +5,6 @@
 
 @use "@angular/material" as mat;
 
-// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
-//  The following line adds:
-//    1. Default typography styles for all components
-//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
-//  If you specify typography styles for the components you use elsewhere, you should delete this line.
-//  If you don't need the default component typographies but still want the hierarchy styles,
-//  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
-@include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
-
 $primary-palette: (
   50: #e8eaf6,
   100: #c5cbe9,
@@ -59,7 +48,6 @@ $theme: mat.define-light-theme(
   )
 );
 
-@include mat.all-legacy-component-themes($theme);
 
 /* width */
 .simple-scroll::-webkit-scrollbar {

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -21,8 +21,7 @@
       rel="stylesheet"
     />
   </head>
-  <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
-  <body class="mat-typography">
+  <body>
     <app-root></app-root>
   </body>
 </html>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -5,6 +5,8 @@
 
 /* You can add global styles to this file, and also import other style files */
 
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;