feat(angular-material): review TODO(mdc-migration)

upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16
kubernetes · Oct 15, 2023 · 443ee7c · 443ee7c
1 parent 8014a1b
commit 443ee7c
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 101 deletions.
diff --git a/modules/web/src/_theming.scss b/modules/web/src/_theming.scss
@@ -279,14 +279,6 @@
   .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;
-  }
 
   .kd-user-help {
     color: $muted;
@@ -312,16 +304,16 @@
 
   /* MDC MAT Form Field -- utility */
 
-  //.mat-mdc-text-field-wrapper {
+  // .mat-mdc-text-field-wrapper {
   //  background-color: transparent !important;
-  //}
+  // }
 
   /*initial background color*/
-  //.mdc-text-field--filled:not(.mdc-text-field--disabled) {
+  // .mdc-text-field--filled:not(.mdc-text-field--disabled) {
   //  background-color: transparent !important;
   //  padding: unset;
   //  color: theming.mat-color($foreground-palette, text) !important;// #fff;
-  //}
+  // }
 
    /*background color on hover and focus*/
   //.mat-mdc-form-field-focus-overlay {

diff --git a/modules/web/src/common/components/namespace/component.ts b/modules/web/src/common/components/namespace/component.ts
@@ -40,13 +40,11 @@ import {FormControl} from "@angular/forms";
   styleUrls: ['style.scss'],
   providers: [
     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue:
-        { appearance: 'outline', subscriptSizing: 'dynamic'}
+      useValue: { appearance: 'outline', subscriptSizing: 'dynamic'}
     },
     { provide: MAT_SELECT_CONFIG,
-      useValue:
-        {overlayPanelClass: "kd-namespace-selection",}
-    },
+      useValue: {overlayPanelClass: "kd-namespace-selection"}
+    }
  ]
 })
 export class NamespaceSelectorComponent implements OnInit, OnDestroy {

diff --git a/modules/web/src/common/dialogs/download/style.scss b/modules/web/src/common/dialogs/download/style.scss
@@ -18,9 +18,4 @@
 .kd-download-progress-bar {
   margin-bottom: 2.5 * $baseline-grid;
   margin-top: 2.5 * $baseline-grid;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version.*/
-mat-dialog-actions {
-  margin-top: $baseline-grid;
-}
+}
diff --git a/modules/web/src/create/from/form/component.ts b/modules/web/src/create/from/form/component.ts
@@ -41,6 +41,8 @@ import {validateUniqueName} from './validator/uniquename.validator';
 import {FormValidators} from './validator/validators';
 import {CreateSecretDialog} from './createsecret/dialog';
 import {Subject} from 'rxjs';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from "@angular/material/form-field";
+import {MAT_SELECT_CONFIG} from "@angular/material/select";
 
 // Label keys for predefined labels
 const APP_LABEL_KEY = 'k8s-app';
@@ -49,6 +51,11 @@ const APP_LABEL_KEY = 'k8s-app';
   selector: 'kd-create-from-form',
   templateUrl: './template.html',
   styleUrls: ['./style.scss'],
+  providers: [
+    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: { appearance: 'outline', subscriptSizing: 'fixed', floatLabel: 'always'}
+    }
+  ]
 })
 export class CreateFromFormComponent extends ICanDeactivate implements OnInit, OnDestroy {
   showMoreOptions_ = false;

diff --git a/modules/web/src/create/from/form/portmappings/component.ts b/modules/web/src/create/from/form/portmappings/component.ts
@@ -30,6 +30,7 @@ import {Observable} from 'rxjs';
 import {filter, map, startWith, take} from 'rxjs/operators';
 import {FormValidators} from '../validator/validators';
 import {validateProtocol} from '../validator/validprotocol.validator';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from "@angular/material/form-field";
 
 const i18n = {
   MSG_PORT_MAPPINGS_SERVICE_TYPE_NONE_LABEL: 'None',
@@ -72,6 +73,9 @@ const EXT_SERVICE: ServiceType = {
       useExisting: forwardRef(() => PortMappingsComponent),
       multi: true,
     },
+    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: { appearance: 'outline', subscriptSizing: 'fixed', floatLabel: 'always'}
+    },
   ],
 })
 export class PortMappingsComponent implements OnInit, ControlValueAccessor {

diff --git a/modules/web/src/create/from/form/portmappings/template.html b/modules/web/src/create/from/form/portmappings/template.html
@@ -16,13 +16,13 @@
 
 <div fxLayout="column"
      [formGroup]="portMappingForm">
-  <div fxLayout="row">
-    <mat-form-field class="mat-block kd-deploy-input-row"
-                    style="width: 100%">
+  <div fxLayout="row" class="kd-form-field">
+    <mat-form-field class="mat-block kd-deploy-input-row">
+      <mat-label
+        label="Service"
+        i18n-label>Service</mat-label>
       <mat-select namespace="serviceType"
                   formControlName="serviceType"
-                  i18n-placeholder
-                  placeholder="Service"
                   required>
         <mat-option *ngFor="let serviceType of serviceTypes"
                     [value]="serviceType">
@@ -36,16 +36,16 @@
     <ng-container formArrayName="portMappings">
       <div fxLayout="row"
            *ngFor="let portMapping of portMappings.controls; let i = index"
-           [formGroupName]="i">
-        <mat-form-field md-no-float
-                        class="kd-deploy-input-row kd-port-form-field"
+           [formGroupName]="i" class="kd-form-field">
+        <mat-form-field class="kd-deploy-input-row kd-port-form-field"
                         fxFlex="30">
+          <mat-label
+            label="Port"
+            i18n-label>Port</mat-label>
           <input matInput
                  type="number"
                  name="port"
                  formControlName="port"
-                 i18n-placeholder
-                 placeholder="Port"
                  (change)="checkPortMapping(i)"
                  [required]="isFirst(i)" />
           <mat-error *ngIf="portMapping.get('port').errors?.kdValidInteger"
@@ -60,15 +60,15 @@
 
         <p fxFlex="5"></p>
 
-        <mat-form-field md-no-float
-                        class="kd-deploy-input-row kd-port-form-field"
+        <mat-form-field class="kd-deploy-input-row kd-port-form-field"
                         fxFlex="30">
+          <mat-label
+            label="Target port"
+            i18n-label>Target port</mat-label>
           <input matInput
                  type="number"
                  name="targetPort"
                  formControlName="targetPort"
-                 i18n-placeholder
-                 placeholder="Target port"
                  min="1"
                  max="65535"
                  (change)="checkPortMapping(i)"
@@ -93,13 +93,13 @@
 
         <p fxFlex="5"></p>
 
-        <mat-form-field md-no-float
-                        class="kd-deploy-input-row kd-port-form-field"
+        <mat-form-field class="kd-deploy-input-row kd-port-form-field"
                         fxFlex="20">
+          <mat-label
+            label="Protocol"
+            i18n-label>Protocol</mat-label>
           <mat-select name="protocol"
                       formControlName="protocol"
-                      i18n-placeholder
-                      placeholder="Protocol"
                       kdValidProtocol
                       [isExternal]="isExternal"
                       required>

diff --git a/modules/web/src/create/from/form/template.html b/modules/web/src/create/from/form/template.html
@@ -16,12 +16,13 @@
 
 <form [formGroup]="form"
       novalidate>
-  <kd-help-section>
+  <kd-help-section class="kd-form-field">
     <mat-form-field>
+      <mat-label
+        label="App name"
+        i18n-label>App name</mat-label>
       <input matInput
              formControlName="name"
-             placeholder="App name"
-             i18n-placeholder
              [maxlength]="nameMaxLength"
              [namespace]="namespace.value"
              kdUniqueName
@@ -56,12 +57,13 @@
     </kd-user-help>
   </kd-help-section>
 
-  <kd-help-section>
+  <kd-help-section class="kd-form-field">
     <mat-form-field>
+      <mat-label
+        label="Container image"
+        i18n-label>Container image</mat-label>
       <input matInput
              formControlName="containerImage"
-             placeholder="Container image"
-             i18n-placeholder
              kdValidImageReference
              required />
       <mat-error *ngIf="containerImage.errors?.required"
@@ -85,13 +87,14 @@
     </kd-user-help>
   </kd-help-section>
 
-  <kd-help-section>
+  <kd-help-section class="kd-form-field">
     <mat-form-field>
+      <mat-label
+        label="Number of pods"
+        i18n-label>Number of pods</mat-label>
       <input matInput
              type="number"
              formControlName="replicas"
-             placeholder="Number of pods"
-             i18n-placeholder
              min="1"
              kdWarnThreshold="100"
              required />
@@ -138,12 +141,13 @@
     </kd-user-help>
   </kd-help-section>
 
-  <kd-help-section>
+  <kd-help-section class="kd-form-field">
     <mat-form-field>
+      <mat-label
+        label="Namespace"
+        i18n-label>Namespace</mat-label>
       <mat-select formControlName="namespace"
                   (click)="resetImagePullSecret()"
-                  placeholder="Namespace"
-                  i18n-placeholder
                   required>
         <mat-option *ngFor="let namespace of namespaces"
                     [value]="namespace"> {{ namespace }} </mat-option>

diff --git a/modules/web/src/index.scss b/modules/web/src/index.scss
@@ -129,7 +129,9 @@ code {
     }
   }
 
-  &:first-child,
+  &:first-child {
+    padding: 0;
+  }
   &:last-child {
     padding: 0;
     align-items: center;
@@ -169,8 +171,7 @@ code {
   padding-right: 3 * $baseline-grid !important;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
-.mat-button-toggle-group {
+.mat-button-toggle-group { 
   border-bottom: 0 !important;
   box-shadow: none !important;
 }

diff --git a/modules/web/src/logs/component.ts b/modules/web/src/logs/component.ts
@@ -37,8 +37,7 @@ const i18n = {
   styleUrls: ['./style.scss'],
   providers: [
     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue:
-        { appearance: 'fill', subscriptSizing: 'dynamic'}
+      useValue: { appearance: 'fill', subscriptSizing: 'dynamic'}
     }
  ]
 })

diff --git a/modules/web/src/settings/global/component.ts b/modules/web/src/settings/global/component.ts
@@ -46,11 +46,8 @@ enum Controls {
   styleUrls: ['style.scss'],
   providers: [
     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue:
-        {
-          appearance: 'fill',
-          subscriptSizing: 'dynamic'
-        }
+      useValue: { appearance: 'outline', subscriptSizing: 'dynamic', floatLabel: 'always'}
+      //useValue: {appearance: 'fill', subscriptSizing: 'dynamic'}
     }
   ]
 })

diff --git a/modules/web/src/settings/global/namespace/adddialog/template.html b/modules/web/src/settings/global/namespace/adddialog/template.html
@@ -19,7 +19,7 @@
   <h2 mat-dialog-title
       i18n>Add Namespace</h2>
   <mat-dialog-content fxLayout="column"
-                      class="kd-dialog-text">
+                      class="kd-form-field kd-dialog-text">
     <div i18n>Provide a namespace name that should be added to the namespace fallback list</div>
 
     <mat-form-field fxFlex>

diff --git a/modules/web/src/settings/global/namespace/component.ts b/modules/web/src/settings/global/namespace/component.ts
@@ -59,11 +59,8 @@ interface NamespaceSettings {
       multi: true,
     },
     { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue:
-        {
-          appearance: 'fill',
-          subscriptSizing: 'dynamic'
-        }
+      //useValue: {appearance: 'fill', subscriptSizing: 'dynamic'}
+      useValue: { appearance: 'outline', subscriptSizing: 'dynamic', floatLabel: 'always'}
     }
   ],
 })

diff --git a/modules/web/src/settings/global/namespace/template.html b/modules/web/src/settings/global/namespace/template.html
@@ -20,6 +20,9 @@
                      desc="Namespace that should be selected by default after logging in."
                      i18n-desc>
     <mat-form-field fxFlex>
+      <mat-label
+        label="Namespace"
+        i18n-label>Namespace</mat-label>
       <input #namespaceInput
              formControlName="defaultNamespace"
              name="defaultNamespace"

diff --git a/modules/web/src/settings/global/template.html b/modules/web/src/settings/global/template.html
@@ -28,6 +28,9 @@
                          desc="Cluster name appears in the browser window title if it is set."
                          i18n-desc>
         <mat-form-field fxFlex>
+          <mat-label
+            label="Cluster name"
+            i18n-label>Cluster name</mat-label>
           <input [formControlName]="Controls.ClusterName"
                  name="clusterName"
                  i18n-placeholder
@@ -44,7 +47,6 @@
                          desc="Max number of items that can be displayed on every list view."
                          i18n-desc>
           <mat-slider color="primary"
-                      showTickMarks
                       min="5"
                       max="50"
                       step="5"
@@ -59,7 +61,6 @@
                          desc="Max number of labels that are displayed by default on most views."
                          i18n-desc>
           <mat-slider color="primary"
-                      showTickMarks
                       min="1"
                       max="10"
                       step="1"
@@ -74,7 +75,6 @@
                          desc="Number of seconds between every auto-refresh of logs."
                          i18n-desc>
           <mat-slider color="primary"
-                      showTickMarks
                       min="1"
                       max="10"
                       step="1"
@@ -91,7 +91,6 @@
                          desc="Number of seconds between every auto-refresh of every resource. Set 0 to disable."
                          i18n-desc>
           <mat-slider color="primary"
-                      showTickMarks
                       min="0"
                       max="60"
                       step="5"

diff --git a/modules/web/src/settings/local/component.ts b/modules/web/src/settings/local/component.ts
@@ -25,8 +25,7 @@ import {CONFIG_DI_TOKEN} from '../../index.config';
 
 @Component({
   selector: 'kd-local-settings',
-  templateUrl: './template.html',
-  styleUrls: ['./style.scss'],
+  templateUrl: './template.html'
 })
 export class LocalSettingsComponent implements OnInit {
   settings: LocalSettings = {} as LocalSettings;