feat(angular-material): Generate mdc-migration

upgrade angular-material to 16 TO FIX: TODO(mdc-migration) fixes: kubernetes#7800 BREAKING CHANGE: ⛵upgrade angular-material to 16 Signed-off-by: [email protected]
romdhanisam · Oct 5, 2023 · 7af192f · 7af192f
1 parent 82bd9fa
commit 7af192f
Show file tree

Hide file tree

Showing 69 changed files with 169 additions and 156 deletions.
diff --git a/modules/web/src/_theming.scss b/modules/web/src/_theming.scss
@@ -212,12 +212,12 @@
     }
   }
 
-  .mat-chip.mat-standard-chip {
+  .mat-mdc-chip.mat-mdc-standard-chip {
     background: $card-background-dark;
   }
 
   .mat-active,
-  .mat-selected {
+  .mat-mdc-selected {
     color: map.get($colors, primary) !important;
   }
 
@@ -229,10 +229,11 @@
     }
 
     .kd-namespace-select-input-container {
+      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
       .mat-form-field-underline {
         display: none;
       }
-
+      /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
       .mat-select-arrow {
         color: $muted-light !important;
       }
@@ -261,11 +262,11 @@
   .kd-cross-outline {
     stroke: $background;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
   .mat-button-toggle-group {
     border: 1px solid $border;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
   .mat-button-toggle-checked {
     background-color: $card-background-dark;
   }
@@ -282,7 +283,7 @@
     border-right: 0;
   }
 
-  .mat-icon-button:hover:not([disabled]) {
+  .mat-mdc-icon-button:hover:not([disabled]) {
     background-color: $border !important;
   }
 
@@ -293,13 +294,15 @@
   }
 
   .kd-secret-detail-text {
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-infix {
       border-top: 0;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-underline {
       background: none;
-
+      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
       .mat-form-field-ripple {
         background: none;
       }
@@ -319,7 +322,7 @@
     border: 1px solid $border;
   }
 
-  .mat-list {
+  .mat-mdc-list {
     border: 1px solid $border;
   }
 

diff --git a/modules/web/src/chrome/userpanel/component.ts b/modules/web/src/chrome/userpanel/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject, OnInit, ViewChild} from '@angular/core';
-import {MatLegacyMenuTrigger as MatMenuTrigger} from '@angular/material/legacy-menu';
+import {MatMenuTrigger} from '@angular/material/menu';
 import {LoginStatus} from '@api/root.api';
 import {IConfig} from '@api/root.ui';
 import {AuthService} from '@common/services/global/authentication';

diff --git a/modules/web/src/common/components/card/component.spec.ts b/modules/web/src/common/components/card/component.spec.ts
@@ -14,10 +14,10 @@
 
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MESSAGES, MESSAGES_DI_TOKEN} from '../../../index.messages';

diff --git a/modules/web/src/common/components/card/style.scss b/modules/web/src/common/components/card/style.scss
@@ -34,15 +34,15 @@
     }
   }
 
-  .mat-card {
+  .mat-mdc-card {
     min-width: $min-content-width;
     padding: 0;
 
     &.kd-inner-content {
       height: auto;
       width: 100%;
 
-      .mat-card-content {
+      .mat-mdc-card-content {
         flex-grow: 1;
         overflow: auto;
         padding: 0;
@@ -53,7 +53,7 @@
       box-shadow: none;
       margin: 0;
 
-      .mat-card-content {
+      .mat-mdc-card-content {
         padding: 0;
       }
     }
@@ -63,11 +63,11 @@
     }
   }
 
-  .mat-card-title {
+  .mat-mdc-card-title {
     margin: 0;
   }
 
-  .mat-card-footer {
+  .mat-mdc-card-footer {
     display: inline;
     margin: 0;
   }

diff --git a/modules/web/src/common/components/card/template.html b/modules/web/src/common/components/card/template.html
@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 
-<mat-card [ngClass]="{
+<mat-card appearance="outlined" [ngClass]="{
     'kd-minimized-card': !expanded && !graphMode,
     'kd-graph': graphMode,
     'kd-inner-table': role === 'inner',

diff --git a/modules/web/src/common/components/chips/chipdialog/dialog.ts b/modules/web/src/common/components/chips/chipdialog/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Chip} from '../component';
 
 @Component({

diff --git a/modules/web/src/common/components/chips/component.ts b/modules/web/src/common/components/chips/component.ts
@@ -21,7 +21,7 @@ import {
   OnInit,
   SimpleChanges,
 } from '@angular/core';
-import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {StringMap} from '@api/root.shared';
 // @ts-ignore
 import cropUrl from 'crop-url';

diff --git a/modules/web/src/common/components/chips/style.scss b/modules/web/src/common/components/chips/style.scss
@@ -12,10 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
 .mat-chip-list {
   min-width: 80px;
 
-  .mat-chip {
+  .mat-mdc-chip {
     min-width: 80px;
   }
 }
diff --git a/modules/web/src/common/components/chips/template.html b/modules/web/src/common/components/chips/template.html
@@ -14,9 +14,9 @@
 limitations under the License.
 -->
 
-<mat-chip-list>
+<mat-chip-listbox>
   <ng-container *ngFor="let key of keys; let i = index">
-    <mat-chip *ngIf="isVisible(i)"
+    <mat-chip-option *ngIf="isVisible(i)"
               [disableRipple]="true">
       <ng-container *ngIf="isSerializedRef(map[key])">
         <span>{{ key }}:&nbsp;</span>
@@ -46,7 +46,7 @@
         </ng-container>
       </ng-container>
       <!-- beautify ignore:end -->
-    </mat-chip>
+    </mat-chip-option>
   </ng-container>
   <div *ngIf="isAnythingHidden()"
        (click)="toggleView()"
@@ -57,4 +57,4 @@
                   i18n>Show all</ng-container>
   </div>
   <ng-container *ngIf="keys.length === 0">-</ng-container>
-</mat-chip-list>
+</mat-chip-listbox>
diff --git a/modules/web/src/common/components/condition/component.ts b/modules/web/src/common/components/condition/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnInit} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {Condition} from 'typings/root.api';
 
 @Component({

diff --git a/modules/web/src/common/components/endpoint/cardlist/component.ts b/modules/web/src/common/components/endpoint/cardlist/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {Endpoint} from '@api/root.api';
 
 @Component({

diff --git a/modules/web/src/common/components/ingressrulelist/component.ts b/modules/web/src/common/components/ingressrulelist/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnChanges, OnInit, SimpleChange} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {IngressSpecRule, IngressSpecRuleHttpPath, IngressSpecTLS} from '@api/root.api';
 import {SupportedResources} from '@api/root.shared';
 import isArray from 'lodash-es/isArray';

diff --git a/modules/web/src/common/components/limits/component.ts b/modules/web/src/common/components/limits/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {LimitRange} from 'typings/root.api';
 
 @Component({

diff --git a/modules/web/src/common/components/module.ts b/modules/web/src/common/components/module.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {NgModule} from '@angular/core';
-import {MatLegacyTableModule as MatTableModule} from '@angular/material/legacy-table';
+import {MatTableModule} from '@angular/material/table';
 
 import {SharedModule} from '../../shared.module';
 import {DirectivesModule} from '../directives/module';

diff --git a/modules/web/src/common/components/namespace/changedialog/dialog.ts b/modules/web/src/common/components/namespace/changedialog/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 @Component({
   selector: 'kd-namespace-change-dialog',

diff --git a/modules/web/src/common/components/namespace/component.ts b/modules/web/src/common/components/namespace/component.ts
@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import {Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
-import {MatLegacySelect as MatSelect} from '@angular/material/legacy-select';
+import {MatDialog} from '@angular/material/dialog';
+import {MatSelect} from '@angular/material/select';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {NamespaceList} from '@api/root.api';
 import {IConfig} from '@api/root.ui';

diff --git a/modules/web/src/common/components/namespace/style.scss b/modules/web/src/common/components/namespace/style.scss
@@ -22,12 +22,13 @@
   padding-right: 3.5 * $baseline-grid;
 
   ::ng-deep {
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-infix {
       border: 0;
       padding: 0;
       width: 18 * $baseline-grid;
     }
-
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-wrapper {
       padding: 0;
     }

diff --git a/modules/web/src/common/components/objectmeta/component.spec.ts b/modules/web/src/common/components/objectmeta/component.spec.ts
@@ -15,12 +15,12 @@
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
-import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
+import {MatCardModule} from '@angular/material/card';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';

diff --git a/modules/web/src/common/components/policyrule/component.ts b/modules/web/src/common/components/policyrule/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnInit} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {PolicyRule} from 'typings/root.api';
 
 @Component({

diff --git a/modules/web/src/common/components/quotas/component.ts b/modules/web/src/common/components/quotas/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {ResourceQuotaDetail} from 'typings/root.api';
 
 @Component({

diff --git a/modules/web/src/common/components/resourcelist/crdversion/component.ts b/modules/web/src/common/components/resourcelist/crdversion/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {CRDVersion} from '@api/root.api';
 
 @Component({

diff --git a/modules/web/src/common/components/subject/component.ts b/modules/web/src/common/components/subject/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {Subject} from 'typings/root.api';
 import {KdStateService} from '../../services/global/state';
 import {Resource} from '../../services/resource/endpoint';

diff --git a/modules/web/src/common/components/uploadfile/component.ts b/modules/web/src/common/components/uploadfile/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {HTMLInputEvent, KdFile} from '@api/root.ui';
 import {AlertDialog, AlertDialogConfig} from 'common/dialogs/alert/dialog';
 

diff --git a/modules/web/src/common/components/volumemount/component.ts b/modules/web/src/common/components/volumemount/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
+import {MatTableDataSource} from '@angular/material/table';
 import {VolumeMounts} from '@api/root.api';
 import {SupportedResources} from '@api/root.shared';
 import {PersistentVolumeSource} from '@api/volume.api';

diff --git a/modules/web/src/common/components/workloadstatus/component.spec.ts b/modules/web/src/common/components/workloadstatus/component.spec.ts
@@ -16,10 +16,10 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {FlexLayoutModule} from '@angular/flex-layout';
-import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {AppConfig} from '@api/root.api';

diff --git a/modules/web/src/common/dialogs/alert/dialog.ts b/modules/web/src/common/dialogs/alert/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 export interface AlertDialogConfig {
   title: string;

diff --git a/modules/web/src/common/dialogs/config/dialog.ts b/modules/web/src/common/dialogs/config/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface ConfirmDialogConfig {
   title: string;

diff --git a/modules/web/src/common/dialogs/deleteresource/dialog.ts b/modules/web/src/common/dialogs/deleteresource/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {ResourceMeta} from '../../services/global/actionbar';
 
 @Component({