Revert "Migrate angular MUI to MDC components (#454)"

This reverts commit 36e31d0, since the commit was found to have an old parent that was introducing unrelated regressions.
kendraio · Nov 7, 2024 · 9ae64a4 · 9ae64a4
1 parent 2fd31e9
commit 9ae64a4
Show file tree

Hide file tree

Showing 66 changed files with 494 additions and 418 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": "`false`",
+        "valueGetter": "`true`",
         "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,10 +5,9 @@ import { ICellEditorAngularComp } from 'ag-grid-angular';
 @Component({
     selector: "input-cell",
     template: `
-        <mat-card appearance="outlined">
+        <mat-card>
         <form class="container" tabindex="0" (keydown)="onKeyDown($event)">
-            <mat-form-field class="block-comment-container">
-                <mat-label>Title</mat-label>            
+            <mat-form-field class="example-full-width">            
                 <input #input matInput [(ngModel)]="Title" placeholder="Title"
                        [ngModelOptions]="{standalone: true}">
             </mat-form-field>
@@ -17,10 +16,10 @@ import { ICellEditorAngularComp } from 'ag-grid-angular';
     `,
     styles: [
         `
-                    .container {
-                        width: 350px;
-                    }
-                `
+            .container {
+                width: 350px;
+            }
+        `
     ]
 })
 export class MatInputComponent implements ICellEditorAngularComp {
@@ -95,4 +94,4 @@ export class MatInputComponent implements ICellEditorAngularComp {
         event.preventDefault();
         event.stopPropagation();
     }
-}
+}
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 appearance="outlined">
+<mat-card>
   <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 appearance="outlined" *ngFor="let field of field.fieldGroup;let i = index;">
+  <mat-card *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,3 +2,6 @@
   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 appearance="outlined" *ngIf="formControl.value" style="float:left;margin-right:32px" >
+  <mat-card *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 style="width:100%">
+     <mat-form-field appearance="standard" 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>
+  <mat-form-field appearance="standard">
   <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 appearance="outlined" @enterAnimateUpDwn style="max-width: 50%" [formGroup]="myform">
+  <mat-card @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="block-comment-container">
+  <mat-form-field  class="example-full-width">
 
                   <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 appearance="outlined">
+  <mat-card>
   <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 appearance="outlined">
+  <mat-card>
   <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 appearance="outlined">
+  <mat-card>
   <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>
@@ -56,14 +56,26 @@
 </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>
 
@@ -74,8 +86,12 @@
 
   </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 appearance="outlined">
+<mat-card>
   <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
@@ -0,0 +1,7 @@
+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
@@ -0,0 +1,3 @@
+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="block-comment-container">
-  <textarea type="textarea" rows="2" placeholder="Block Comment" aria-label="Block Comment" matInput
+<mat-form-field class="example-full-width">
+  <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-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="block-comment-container">
+    <mat-form-field class="example-full-width">
         <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,5 +1,4 @@
-<mat-form-field class="block-comment-container">
-  <mat-label>Adapter</mat-label>
+<mat-form-field class="example-full-width">
   <input type="text" placeholder="Adapter" aria-label="Adapter" matInput [formControl]="adapterNameFormControl"
     [matAutocomplete]="autoAdapter">
   <mat-autocomplete #autoAdapter="matAutocomplete">
@@ -9,8 +8,7 @@
   </mat-autocomplete>
 </mat-form-field>
 
-<mat-form-field class="block-comment-container">
-  <mat-label>Workflow</mat-label>
+<mat-form-field class="example-full-width">
   <input type="text" placeholder="Workflow" aria-label="Workflow" matInput [formControl]="workflowIdFormControl"
     [matAutocomplete]="autoWorkflow">
   <mat-autocomplete #autoWorkflow="matAutocomplete">
@@ -21,7 +19,7 @@
 </mat-form-field>
 
 
-<mat-form-field class="block-comment-container">
+<mat-form-field class="example-full-width">
   <textarea type="textarea" rows="3" placeholder="Block Comment" aria-label="Block Comment" matInput
     [formControl]="blockCommentFormControl" ></textarea>
-</mat-form-field>
+</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="block-comment-container">
+<mat-form-field class="example-full-width">
   <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,8 +1,13 @@
-<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>
@@ -14,11 +19,13 @@
             </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>
 
@@ -37,13 +44,18 @@
       </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,15 +1,14 @@
 .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,7 +1,9 @@
 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" data-cy="sidenav-share-button">
@@ -37,17 +37,17 @@
       </button>
     </div>
 
-    <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>
+    <mat-card class="adapter-metadata">
+      <div class="metadata-edit">
         <button type="button" mat-icon-button (click)="workflow.editMetadata()" matTooltip="Edit metadata">
           <mat-icon>edit</mat-icon>
         </button>
-    </div>
+      </div>
+      <p>
+        Title: {{ workflow.title }}<br>
+        Adapter: {{ workflow.getAdapterName() }}<br>
+        Flow ID: {{ workflow.id || 'Flow ID' }}<br>
+        Tags: {{ workflow.tags.join(', ') }}
+      </p>
     </mat-card>
     <app-blocks-editor [blocks]="workflow.blocks" (blockUpdate)="workflow.onBlocksUpdate($event)"></app-blocks-editor>