feat(angular-material): construct form field appearance standard as d…

…eprecated in Material v16, used mat-label instead of placeholder TODO(mdc-migration) upgrade angular-material to 16 FIX: TODO(mdc-migration) BREAKING CHANGE: ⛵upgrade angular-material to 16
kubernetes · Oct 17, 2023 · 052e0d2 · 052e0d2
1 parent f0196b3
commit 052e0d2
Show file tree

Hide file tree

Showing 22 changed files with 145 additions and 119 deletions.
diff --git a/modules/web/src/_theming.scss b/modules/web/src/_theming.scss
@@ -46,6 +46,43 @@
     }
   }
 
+  .kd-standard-form-field {
+    @include mat.form-field-density(-4);
+    font-family: $font-family-sans;
+    font-size: $subhead-font-size-base;
+
+    mat-form-field {
+      width: 100%;
+
+      .mdc-text-field {
+        padding: unset !important;
+      }
+
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading {
+          display: none !important;
+        }
+        .mdc-notched-outline__notch {
+          border-radius: 0 !important;
+          border-top: none !important;
+          .mdc-floating-label {
+            left: 0 !important;
+          }
+        }
+        .mdc-notched-outline__trailing {
+          border-radius: 0 !important;
+          border-right: none !important;
+          border-top: none !important;
+        }
+      }
+
+      .mat-mdc-form-field-hint-wrapper,
+      .mat-mdc-form-field-error-wrapper {
+        padding: unset !important;
+      }
+    }
+  }
+
   mat-card-title,
   mat-card-footer {
     color: map.get($foreground-palette, text);

diff --git a/modules/web/src/chrome/search/component.ts b/modules/web/src/chrome/search/component.ts
@@ -18,16 +18,13 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {SEARCH_QUERY_STATE_PARAM} from '@common/params/params';
 import {ParamsService} from '@common/services/global/params';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from "@angular/material/form-field";
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 
 @Component({
   selector: 'kd-search',
   templateUrl: './template.html',
   styleUrls: ['./style.scss'],
-  providers: [
-    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: { appearance: 'outline', subscriptSizing: 'dynamic'}}
-  ]
+  providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'dynamic'}}],
 })
 export class SearchComponent implements OnInit {
   query: string;

diff --git a/modules/web/src/common/components/chips/component.ts b/modules/web/src/common/components/chips/component.ts
@@ -19,7 +19,7 @@ import {
   Input,
   OnChanges,
   OnInit,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {StringMap} from '@api/root.shared';
@@ -54,7 +54,7 @@ const MAX_CHIP_VALUE_LENGTH = 63;
 @Component({
   selector: 'kd-chips',
   templateUrl: './template.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsComponent implements OnInit, OnChanges {
   @Input() map: StringMap | string[] | number[];

diff --git a/modules/web/src/common/components/namespace/component.ts b/modules/web/src/common/components/namespace/component.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {MAT_SELECT_CONFIG, MatSelect} from '@angular/material/select';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
@@ -33,20 +33,16 @@ import {ResourceService} from '../../services/resource/resource';
 import {NamespaceChangeDialog} from './changedialog/dialog';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
-import {FormControl} from "@angular/forms";
+import {FormControl} from '@angular/forms';
 
 @Component({
   selector: 'kd-namespace-selector',
   templateUrl: './template.html',
   styleUrls: ['style.scss'],
   providers: [
-    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: { appearance: 'outline', subscriptSizing: 'dynamic'}
-    },
-    { provide: MAT_SELECT_CONFIG,
-      useValue: {overlayPanelClass: "kd-namespace-selection"}
-    }
- ]
+    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'dynamic'}},
+    {provide: MAT_SELECT_CONFIG, useValue: {overlayPanelClass: 'kd-namespace-selection'}},
+  ],
 })
 export class NamespaceSelectorComponent implements OnInit {
   namespaces: string[] = [];
@@ -90,7 +86,7 @@ export class NamespaceSelectorComponent implements OnInit {
 
       this.namespaceService_.setCurrent(namespace);
       this.namespaceService_.onNamespaceChangeEvent.emit(namespace);
-      this.selectedNamespace.setValue(namespace)
+      this.selectedNamespace.setValue(namespace);
     });
 
     this.resourceNamespaceParam = this._getCurrentResourceNamespaceParam();
@@ -203,7 +199,7 @@ export class NamespaceSelectorComponent implements OnInit {
     this.dialog_
       .open(NamespaceChangeDialog, {
         data: {
-          namespace:  this.selectedNamespace.value,
+          namespace: this.selectedNamespace.value,
           newNamespace: this._getCurrentResourceNamespaceParam(),
         },
       })
@@ -276,5 +272,4 @@ export class NamespaceSelectorComponent implements OnInit {
       this.namespaceInputEl_.nativeElement.focus();
     }, 150);
   }
-
 }
diff --git a/modules/web/src/create/component.ts b/modules/web/src/create/component.ts
@@ -17,21 +17,21 @@ import {ICanDeactivate} from '@common/interfaces/candeactivate';
 import {CreateFromFileComponent} from './from/file/component';
 import {CreateFromFormComponent} from './from/form/component';
 import {CreateFromInputComponent} from './from/input/component';
-import {MAT_TABS_CONFIG} from "@angular/material/tabs";
+import {MAT_TABS_CONFIG} from '@angular/material/tabs';
 
 @Component({
   selector: 'kd-create',
   templateUrl: './template.html',
   styleUrls: ['./style.scss'],
-  providers: [{
+  providers: [
+    {
       provide: MAT_TABS_CONFIG,
-      useValue:
-        {
-          animationDuration: '0ms',
-          stretchTabs: false,
-        }
-      }
-  ]
+      useValue: {
+        animationDuration: '0ms',
+        stretchTabs: false,
+      },
+    },
+  ],
 })
 export class CreateComponent extends ICanDeactivate {
   @ViewChild(CreateFromInputComponent) fromInput: CreateFromInputComponent;

diff --git a/modules/web/src/create/from/form/component.ts b/modules/web/src/create/from/form/component.ts
@@ -41,7 +41,7 @@ import {validateUniqueName} from './validator/uniquename.validator';
 import {FormValidators} from './validator/validators';
 import {CreateSecretDialog} from './createsecret/dialog';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from "@angular/material/form-field";
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 
 // Label keys for predefined labels
 const APP_LABEL_KEY = 'k8s-app';
@@ -50,11 +50,7 @@ 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'}
-    }
-  ]
+  providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'fixed'}}],
 })
 export class CreateFromFormComponent extends ICanDeactivate implements OnInit {
   showMoreOptions_ = false;

diff --git a/modules/web/src/create/from/form/createsecret/dialog.ts b/modules/web/src/create/from/form/createsecret/dialog.ts
@@ -21,6 +21,7 @@ import {switchMap} from 'rxjs/operators';
 import {AlertDialog, AlertDialogConfig} from '@common/dialogs/alert/dialog';
 import {CsrfTokenService} from '@common/services/global/csrftoken';
 import {CONFIG_DI_TOKEN} from '../../../../index.config';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 
 export interface CreateSecretDialogMeta {
   namespace: string;
@@ -29,6 +30,7 @@ export interface CreateSecretDialogMeta {
 @Component({
   selector: 'kd-create-secret-dialog',
   templateUrl: 'template.html',
+  providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'fixed'}}],
 })
 export class CreateSecretDialog implements OnInit {
   form: UntypedFormGroup;

diff --git a/modules/web/src/create/from/form/createsecret/template.html b/modules/web/src/create/from/form/createsecret/template.html
@@ -21,12 +21,13 @@
     <div i18n>The new secret will be added to the cluster</div>
     <div>
       <form [formGroup]="form">
-        <kd-help-section>
+        <kd-help-section class="kd-standard-form-field">
           <mat-form-field>
+            <mat-label
+              label="Secret name"
+              i18n-label>Secret name</mat-label>
             <input matInput
                    type="text"
-                   i18n-placeholder
-                   placeholder="Secret name"
                    name="secretName"
                    formControlName="secretName"
                    required />
@@ -54,11 +55,11 @@
           </kd-user-help>
         </kd-help-section>
 
-        <kd-help-section>
+        <kd-help-section class="kd-standard-form-field">
           <mat-form-field>
+            <mat-label>Image pull secret data</mat-label>
             <input matInput
                    type="text"
-                   placeholder="Image pull secret data"
                    name="data"
                    formControlName="data"
                    required />

diff --git a/modules/web/src/create/from/form/deploylabel/component.ts b/modules/web/src/create/from/form/deploylabel/component.ts
@@ -26,6 +26,7 @@ import {
 } from '@angular/forms';
 import {FormValidators} from '../validator/validators';
 import {DeployLabel} from './deploylabel';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 
 interface DeployLabelI {
   value: string;
@@ -46,6 +47,7 @@ interface DeployLabelI {
       useExisting: forwardRef(() => DeployLabelComponent),
       multi: true,
     },
+    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'fixed'}},
   ],
 })
 export class DeployLabelComponent implements ControlValueAccessor {

diff --git a/modules/web/src/create/from/form/deploylabel/template.html b/modules/web/src/create/from/form/deploylabel/template.html
@@ -17,17 +17,17 @@
 <ng-container [formGroup]="labelForm">
   <div formArrayName="labels">
     <div *ngFor="let label of labels.controls; let i = index"
-         [formGroupName]="i">
-      <mat-form-field md-no-float
-                      class="kd-deploy-input-row"
+         [formGroupName]="i" class="kd-standard-form-field">
+      <mat-form-field class="kd-deploy-input-row"
                       fxFlex="45">
+        <mat-label
+          label="key"
+          i18n-label>key</mat-label>
         <input matInput
                name="key"
                formControlName="key"
                (keyup)="check(i)"
-               [readonly]="!label.get('editable').value"
-               i18n-placeholder
-               placeholder="key" />
+               [readonly]="!label.get('editable').value"/>
         <mat-error *ngIf="label.get('key').errors?.unique"
                    i18n> {{ label.get('key').value }} is not unique </mat-error>
         <mat-error *ngIf="label.get('key').errors?.kdValidLabelKeyPrefixPattern"
@@ -49,16 +49,16 @@
         </mat-error>
       </mat-form-field>
       <p fxFlex="5"></p>
-      <mat-form-field md-no-float
-                      class="kd-deploy-input-row"
+      <mat-form-field class="kd-deploy-input-row"
                       fxFlex="40">
+        <mat-label
+          label="value"
+          i18n-label>value</mat-label>
         <input matInput
                name="value"
                formControlName="value"
                (keyup)="check(i)"
-               [readonly]="!label.get('editable').value"
-               i18n-placeholder
-               placeholder="value" />
+               [readonly]="!label.get('editable').value"/>
         <mat-hint align="end">{{ label.get('value').value?.length }} / 253</mat-hint>
         <mat-error *ngIf="label.get('value').errors?.kdValidLabelValuePattern"
                    i18n>

diff --git a/modules/web/src/create/from/form/environmentvariables/template.html b/modules/web/src/create/from/form/environmentvariables/template.html
@@ -20,13 +20,14 @@
   <ng-container [formGroup]="form">
     <ng-container formArrayName="variables">
       <div *ngFor="let variable of variables.controls; let i = index"
-           [formGroupName]="i">
+           [formGroupName]="i" class="kd-standard-form-field">
         <mat-form-field fxFlex="auto">
+          <mat-label
+            label="Name"
+            i18n-label>Name</mat-label>
           <input matInput
                  name="name"
                  formControlName="name"
-                 i18n-placeholder
-                 placeholder="Name"
                  (change)="addVariableIfNeeed(i)" />
           <mat-error *ngIf="variable.get('name').errors?.pattern"
                      i18n>
@@ -37,11 +38,12 @@
         <div fxFlex="5"></div>
 
         <mat-form-field fxFlex="auto">
+          <mat-label
+            label="Value"
+            i18n-label>Value</mat-label>
           <input matInput
                  name="value"
-                 formControlName="value"
-                 i18n-placeholder
-                 placeholder="Value" />
+                 formControlName="value"/>
         </mat-form-field>
 
         <div fxFlex="10">

diff --git a/modules/web/src/create/from/form/portmappings/component.ts b/modules/web/src/create/from/form/portmappings/component.ts
@@ -30,7 +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";
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 
 const i18n = {
   MSG_PORT_MAPPINGS_SERVICE_TYPE_NONE_LABEL: 'None',
@@ -73,9 +73,7 @@ const EXT_SERVICE: ServiceType = {
       useExisting: forwardRef(() => PortMappingsComponent),
       multi: true,
     },
-    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: { appearance: 'outline', subscriptSizing: 'fixed', floatLabel: 'always'}
-    },
+    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'fixed'}},
   ],
 })
 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,8 +16,8 @@
 
 <div fxLayout="column"
      [formGroup]="portMappingForm">
-  <div fxLayout="row" class="kd-form-field">
-    <mat-form-field class="mat-block kd-deploy-input-row">
+  <div fxLayout="row" class="kd-standard-form-field">
+    <mat-form-field class="kd-deploy-input-row">
       <mat-label
         label="Service"
         i18n-label>Service</mat-label>
@@ -36,8 +36,8 @@
     <ng-container formArrayName="portMappings">
       <div fxLayout="row"
            *ngFor="let portMapping of portMappings.controls; let i = index"
-           [formGroupName]="i" class="kd-form-field">
-        <mat-form-field class="kd-deploy-input-row kd-port-form-field"
+           [formGroupName]="i" class="kd-standard-form-field">
+        <mat-form-field class="kd-deploy-input-row"
                         fxFlex="30">
           <mat-label
             label="Port"
@@ -60,7 +60,7 @@
 
         <p fxFlex="5"></p>
 
-        <mat-form-field class="kd-deploy-input-row kd-port-form-field"
+        <mat-form-field class="kd-deploy-input-row kd-standard-form-field"
                         fxFlex="30">
           <mat-label
             label="Target port"
@@ -93,7 +93,7 @@
 
         <p fxFlex="5"></p>
 
-        <mat-form-field class="kd-deploy-input-row kd-port-form-field"
+        <mat-form-field class="kd-deploy-input-row kd-standard-form-field"
                         fxFlex="20">
           <mat-label
             label="Protocol"