Migrate angular MUI to MDC components (#454)

* migrate with ng generate, fix card style * adjust dialogs * fix block comment textarea UI * clean up main.scss * fix connect to user link * update test script with develop, fix datagrid disable test
kendraio · Aug 29, 2024 · 36e31d0 · 36e31d0
1 parent 5645a0a
commit 36e31d0
Show file tree

Hide file tree

Showing 66 changed files with 342 additions and 432 deletions.
diff --git a/cypress/e2e/context_and_state.ts b/cypress/e2e/context_and_state.ts
@@ -234,7 +234,7 @@ describe('Kendraio context and state', () => {
     loadFlowCode([
       {
         "type": "context-save",
-        "valueGetter": "`true`",
+        "valueGetter": "`false`",
         "contextKey": "state.global.disabled",
       },
       {

diff --git a/src/app/_shared/components/material/mat-input.component.ts b/src/app/_shared/components/material/mat-input.component.ts
@@ -5,9 +5,9 @@ import { ICellEditorAngularComp } from 'ag-grid-angular';
 @Component({
     selector: "input-cell",
     template: `
-        <mat-card>
+        <mat-card appearance="outlined">
         <form class="container" tabindex="0" (keydown)="onKeyDown($event)">
-            <mat-form-field class="example-full-width">            
+            <mat-form-field class="block-comment-container">            
                 <input #input matInput [(ngModel)]="Title" placeholder="Title"
                        [ngModelOptions]="{standalone: true}">
             </mat-form-field>
@@ -16,10 +16,10 @@ import { ICellEditorAngularComp } from 'ag-grid-angular';
     `,
     styles: [
         `
-            .container {
-                width: 350px;
-            }
-        `
+                    .container {
+                        width: 350px;
+                    }
+                `
     ]
 })
 export class MatInputComponent implements ICellEditorAngularComp {

diff --git a/src/app/_shared/ui-form/types/array.type.html b/src/app/_shared/ui-form/types/array.type.html
@@ -1,4 +1,4 @@
-<mat-card>
+<mat-card appearance="outlined">
   <div class="mat-typography">
     <h2 *ngIf="to.label">{{ to.label }}</h2>
     <p *ngIf="to.description">{{ to.description }}</p>
@@ -8,7 +8,7 @@ <h2 *ngIf="to.label">{{ to.label }}</h2>
     <formly-validation-message [field]="field"></formly-validation-message>
   </div>
 
-  <mat-card *ngFor="let field of field.fieldGroup;let i = index;">
+  <mat-card appearance="outlined" *ngFor="let field of field.fieldGroup;let i = index;">
     <formly-field [field]="field"></formly-field>
     <div>
       <button mat-raised-button color="warn" type="button" (click)="remove(i)">Remove</button>

diff --git a/src/app/_shared/ui-form/types/array.type.scss b/src/app/_shared/ui-form/types/array.type.scss
@@ -2,6 +2,3 @@
   display: block;
   margin-bottom: 1em;
 }
-mat-card {
-  margin-bottom: 1em;
-}
diff --git a/src/app/_shared/ui-form/types/image-viewer.type.ts b/src/app/_shared/ui-form/types/image-viewer.type.ts
@@ -6,7 +6,7 @@ import { FieldType } from '@ngx-formly/core';
   selector: 'app-thumbnail-viewer',
   template: `
 
-  <mat-card *ngIf="formControl.value" style="float:left;margin-right:32px" >
+  <mat-card appearance="outlined" *ngIf="formControl.value" style="float:left;margin-right:32px" >
   <mat-card-header>
     <mat-label>{{to.label}}</mat-label>
   </mat-card-header>

diff --git a/src/app/_shared/ui-form/types/money.component.ts b/src/app/_shared/ui-form/types/money.component.ts
@@ -6,7 +6,7 @@ import createNumberMask from 'text-mask-addons/dist/createNumberMask';
   selector: 'formly-field-input-money',
   template: `
 
-     <mat-form-field appearance="standard" style="width:100%">
+     <mat-form-field style="width:100%">
      <mat-label>  {{ to.label }} </mat-label>
      <input matInput type="text"
      [maskito]="{mask: numberMask}"

diff --git a/src/app/_shared/ui-form/types/percentage.component.ts b/src/app/_shared/ui-form/types/percentage.component.ts
@@ -4,7 +4,7 @@ import { FieldType } from '@ngx-formly/core';
 @Component({
   selector: 'formly-field-input-percentage',
   template: `
-  <mat-form-field appearance="standard">
+  <mat-form-field>
   <mat-label>  {{ to.label }} </mat-label>
      <input matInput type="text"  [maskito]="{mask: limitToHundred}" [formControl]="formControl" [formlyAttributes]="field">
      <mat-error></mat-error>

diff --git a/src/app/_shared/ui-form/types/playlists.component.html b/src/app/_shared/ui-form/types/playlists.component.html
@@ -1,7 +1,7 @@
 <div class="popup-container mt-5">
 
 
-  <mat-card @enterAnimateUpDwn style="max-width: 50%" [formGroup]="myform">
+  <mat-card appearance="outlined" @enterAnimateUpDwn style="max-width: 50%" [formGroup]="myform">
     <mat-card-header>
       <label>{{to.label}}-{{formControl.value | json}}</label></mat-card-header>
 

diff --git a/src/app/_shared/ui-form/types/textarea.type.ts b/src/app/_shared/ui-form/types/textarea.type.ts
@@ -19,7 +19,7 @@ import { MatInput } from '@angular/material/input';
 
 
 
-  <mat-form-field  class="example-full-width">
+  <mat-form-field  class="block-comment-container">
 
                   <textarea matInput
                             [id]="id"

diff --git a/src/app/_shared/ui-form/types/video-viewer.component.ts b/src/app/_shared/ui-form/types/video-viewer.component.ts
@@ -7,7 +7,7 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse
   selector: 'formly-field-video-viewer',
   template: `
 
-  <mat-card>
+  <mat-card appearance="outlined">
   <mat-card-header>
     <mat-label>{{to.label}}</mat-label>
   </mat-card-header>

diff --git a/src/app/_shared/ui-form/types/video-viewer2.component.ts b/src/app/_shared/ui-form/types/video-viewer2.component.ts
@@ -7,7 +7,7 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse
   selector: 'formly-field-video-viewer2',
   template: `
 
-  <mat-card>
+  <mat-card appearance="outlined">
   <mat-card-header>
     <mat-label>{{to.label}}</mat-label>
   </mat-card-header>

diff --git a/src/app/_shared/ui-form/types/video-viewerDM.component.ts b/src/app/_shared/ui-form/types/video-viewerDM.component.ts
@@ -7,7 +7,7 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse
   selector: 'formly-field-video-viewer2',
   template: `
 
-  <mat-card>
+  <mat-card appearance="outlined">
   <mat-card-header>
     <mat-label>{{to.label}}   ({{to.uiSchema.adapter}} Video Player)</mat-label>
   </mat-card-header>

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -21,18 +21,18 @@
   </button>
 
   <ng-container *ngIf="pageTitle$ | async as pageTitleData">
-        <span>
-          {{ pageTitleData.title | translate }}
-        </span>
-<!--    <app-bookmark-button *ngIf="pageTitleData.isWorkflow"></app-bookmark-button>-->
+      <span>
+        {{ pageTitleData.title | translate }}
+      </span>
+    <!--<app-bookmark-button *ngIf="pageTitleData.isWorkflow"></app-bookmark-button>-->
     <button *ngIf="pageTitleData.isWorkflow" mat-icon-button (click)="onRefresh()">
       <mat-icon style="color: #999999;">refresh</mat-icon>
     </button>
   </ng-container>
   <span class="spacer"></span>
 
   <button mat-icon-button routerLink="/workflowCloud/listWorkflows"><mat-icon>list</mat-icon></button>
-<!--  <button mat-icon-button routerLink="/core/collection"><mat-icon>collections_bookmark</mat-icon></button>-->
+  <!--<button mat-icon-button routerLink="/core/collection"><mat-icon>collections_bookmark</mat-icon></button>-->
 
   <button mat-icon-button routerLink="/connect"><mat-icon>person</mat-icon> </button>
   <button mat-icon-button routerLink="/notifications"><mat-icon [matBadge]="notificationCount">notifications</mat-icon></button>
@@ -54,26 +54,14 @@
 </mat-toolbar>
 
 <mat-sidenav-container class="app-container" style="height:100vh">
-
   <mat-sidenav #sidenav mode="side" (keydown.escape)="sidenav.close()" style="width: 260px;">
-
     <app-main-menu></app-main-menu>
-
   </mat-sidenav>
 
   <mat-sidenav-content>
 
-
-
-
     <div class="page-content" style="margin-bottom: 4rem;">
-
-
-
-
-
-
-<!--      <app-breadcrumb [locale]="locale"></app-breadcrumb>-->
+    <!--<app-breadcrumb [locale]="locale"></app-breadcrumb>-->
       <router-outlet name="popup"></router-outlet>
       <router-outlet></router-outlet>
 
@@ -84,12 +72,8 @@
 
   </mat-sidenav-content>
 
-
-
   <mat-sidenav #blocksSidePane position="end" mode="side">
     <app-workflow-sidenav (closeSidenav)="blocksSidePane.close()"></app-workflow-sidenav>
   </mat-sidenav>
 
-
-
 </mat-sidenav-container>
diff --git a/src/app/blocks/card-block/card-block.component.html b/src/app/blocks/card-block/card-block.component.html
@@ -1,3 +1,3 @@
-<mat-card>
+<mat-card appearance="outlined">
   <app-blocks-workflow [blocks]="blocks" [models]="[model]" [context]="context" (workflowComplete)="onWorkflowComplete($event)"></app-blocks-workflow>
 </mat-card>
diff --git a/src/app/blocks/card-block/card-block.component.scss b/src/app/blocks/card-block/card-block.component.scss
@@ -1,7 +0,0 @@
-mat-card {
-  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  display: block;
-  position: relative;
-  padding: 1em;
-  margin-bottom: 1em;
-}

diff --git a/src/app/blocks/image-block/image-block.component.scss b/src/app/blocks/image-block/image-block.component.scss
@@ -1,3 +0,0 @@
-mat-card {
-  margin-bottom: 1em;
-}

diff --git a/src/app/components/block-builder-box/block-builder-box.component.html b/src/app/components/block-builder-box/block-builder-box.component.html
@@ -5,7 +5,7 @@
                      [(ngModel)]="blockModel" (onInit)="initEditor()"></ngx-monaco-editor>
 </ng-container>
 
-<mat-form-field class="example-full-width">
-  <textarea type="textarea" rows="3" placeholder="Block Comment" aria-label="Block Comment" matInput
+<mat-form-field class="block-comment-container">
+  <textarea type="textarea" rows="2" placeholder="Block Comment" aria-label="Block Comment" matInput
     [formControl]="blockCommentFormControl" ></textarea>
 </mat-form-field>
diff --git a/src/app/components/block-comparison-builder-box/block-comparison-builder-box.component.html b/src/app/components/block-comparison-builder-box/block-comparison-builder-box.component.html
@@ -1,5 +1,5 @@
 <div class="example-container" [formGroup]="form">
-    <mat-form-field class="example-full-width">
+    <mat-form-field class="block-comment-container">
         <mat-label>Value source (jmespath)</mat-label>
         <input type="text" placeholder="valueGetter" aria-label="valueGetter" matInput formControlName="valueGetter">
     </mat-form-field>

diff --git a/src/app/components/block-gosub-builder-box/block-gosub-builder-box.component.html b/src/app/components/block-gosub-builder-box/block-gosub-builder-box.component.html
@@ -1,4 +1,4 @@
-<mat-form-field class="example-full-width">
+<mat-form-field class="block-comment-container">
   <input type="text" placeholder="Adapter" aria-label="Adapter" matInput [formControl]="adapterNameFormControl"
     [matAutocomplete]="autoAdapter">
   <mat-autocomplete #autoAdapter="matAutocomplete">
@@ -8,7 +8,7 @@
   </mat-autocomplete>
 </mat-form-field>
 
-<mat-form-field class="example-full-width">
+<mat-form-field class="block-comment-container">
   <input type="text" placeholder="Workflow" aria-label="Workflow" matInput [formControl]="workflowIdFormControl"
     [matAutocomplete]="autoWorkflow">
   <mat-autocomplete #autoWorkflow="matAutocomplete">
@@ -19,7 +19,7 @@
 </mat-form-field>
 
 
-<mat-form-field class="example-full-width">
+<mat-form-field class="block-comment-container">
   <textarea type="textarea" rows="3" placeholder="Block Comment" aria-label="Block Comment" matInput
     [formControl]="blockCommentFormControl" ></textarea>
 </mat-form-field>
diff --git a/src/app/components/block-mapping-builder-box/block-mapping-builder-box.component.html b/src/app/components/block-mapping-builder-box/block-mapping-builder-box.component.html
@@ -1,5 +1,5 @@
 <ngx-monaco-editor [options]="editorOptions" style="height: 240px;" [(ngModel)]="mappingModel"></ngx-monaco-editor>
-<mat-form-field class="example-full-width">
+<mat-form-field class="block-comment-container">
   <textarea type="textarea" rows="3" placeholder="Block Comment" aria-label="Block Comment" matInput
     [formControl]="blockCommentFormControl" ></textarea>
 </mat-form-field>
diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html
@@ -1,13 +1,8 @@
-<mat-sidenav-container  class="app-container">
+<mat-sidenav-container class="app-container">
 
   <mat-sidenav #sidenav mode="side" opened (keydown.escape)="sidenav.close()">
     <mat-nav-list>
 
-
-
-
-
-
         <mat-list-item (click)="gotoPage('/assets', sidenav)"  >
             <mat-icon mat-list-icon [matMenuTriggerFor]="menu">favorite</mat-icon>
             <a matLine [matMenuTriggerFor]="menu">Assets</a>
@@ -19,13 +14,11 @@
             </mat-menu>
           </mat-list-item>
 
-
       <mat-list-item *ngFor="let link of links" (click)="gotoPage(link.href, sidenav)">
         <mat-icon mat-list-icon>{{ link.icon }}</mat-icon>
         <a matLine>{{ link.title }}</a>
       </mat-list-item>
 
-
     </mat-nav-list>
   </mat-sidenav>
 
@@ -44,18 +37,13 @@
       </span>
       <span class="spacer"></span>
 
-
-
-
       <button mat-icon-button (click)="gotoPage('/user', sidenav)">
         <mat-icon>person</mat-icon>
       </button>
     </mat-toolbar>
 
-
-
     <div class="page-content">
-<!--        <app-breadcrumb></app-breadcrumb>-->
+      <!--<app-breadcrumb></app-breadcrumb>-->
       <router-outlet></router-outlet>
     </div>
   </mat-sidenav-content>

diff --git a/src/app/components/layout/layout.component.scss b/src/app/components/layout/layout.component.scss
@@ -1,14 +1,15 @@
 .spacer {
   flex: 1 1 auto;
 }
+
 .page-content {
   margin: 1em;
 }
 
 .app-container {
-   position: absolute;
-   top: 0;
-   bottom: 0;
-   left: 0;
-   right: 0;
- }
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts
@@ -1,9 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { MatMenu } from '@angular/material/menu';
 import { MatSidenav } from '@angular/material/sidenav';
 import { Observable } from 'rxjs';
-import {SharedModule} from '../../_shared/shared.module';
 import { PageTitleService } from '../../services/page-title.service';
 
 @Component({

diff --git a/src/app/components/workflow-sidenav/workflow-sidenav.component.html b/src/app/components/workflow-sidenav/workflow-sidenav.component.html
@@ -7,7 +7,7 @@
       <button type="button" mat-icon-button (click)="workflow.clearBlocks()" matTooltip="Clear workflow">
         <mat-icon>delete_forever</mat-icon>
       </button>
-<!--      <button type="button" mat-icon-button (click)="workflow.clearWorkflowData()" matTooltip="Clear workflow data">-->
+<!--     = <button type="button" mat-icon-button (click)="workflow.clearWorkflowData()" matTooltip="Clear workflow data">-->
 <!--        <app-kendraio-icon icon="fa-eraser"></app-kendraio-icon>-->
 <!--      </button>-->
       <button type="button" mat-icon-button (click)="workflow.shareConfig()" matTooltip="Share">
@@ -37,17 +37,17 @@
       </button>
     </div>
 
-    <mat-card class="adapter-metadata">
-      <div class="metadata-edit">
+    <mat-card appearance="outlined" class="adapter-metadata">
+      <div class="adapter-metadata-edit">
+        <p class="adapter-metadata-edit-text">
+          Title: {{ workflow.title }}<br>
+          Adapter: {{ workflow.getAdapterName() }}<br>
+          Workflow ID: {{ workflow.id }}<br>
+          Tags: {{ workflow.tags.join(', ') }}
+        </p>
         <button type="button" mat-icon-button (click)="workflow.editMetadata()" matTooltip="Edit metadata">
           <mat-icon>edit</mat-icon>
         </button>
-      </div>
-      <p>
-        Title: {{ workflow.title }}<br>
-        Adapter: {{ workflow.getAdapterName() }}<br>
-        Flow ID: {{ workflow.id || 'Flow ID' }}<br>
-        Tags: {{ workflow.tags.join(', ') }}
-      </p>
+    </div>
     </mat-card>
     <app-blocks-editor [blocks]="workflow.blocks" (blockUpdate)="workflow.onBlocksUpdate($event)"></app-blocks-editor>
diff --git a/src/app/components/workflow-sidenav/workflow-sidenav.component.scss b/src/app/components/workflow-sidenav/workflow-sidenav.component.scss
@@ -12,9 +12,15 @@
 .adapter-metadata {
   margin-bottom: 1em;
 }
-.metadata-edit {
-  float: right;
+
+.adapter-metadata-edit{
+  display: flex;
+}
+
+.adapter-metadata-edit-text {
+  flex: 1;
 }
+
 app-blocks-editor {
   display: block;
   margin-bottom: 4rem;