Merge remote-tracking branch 'origin/migrate-angular-mui-mdc-componen…

…ts-updated' into angular-18-upgrade-rebase with Material Design Components for Web (MDC) focused changes, and old (December 2023) code changes removed to avoid regression.
kendraio · Oct 22, 2024 · 40b688b · 40b688b
2 parents 128d6aa + 64bfcdc
commit 40b688b
Show file tree

Hide file tree

Showing 82 changed files with 385 additions and 392 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/base/base.component.ts b/src/app/_shared/base/base.component.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { RouteData } from 'src/app/_models/classes/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PageTitleService } from 'src/app/services/page-title.service';
-import { MatDialog } from '@angular/material/dialog';
+import {MatDialog} from '@angular/material/dialog';
 
 import { TestDataService } from 'src/app/services/test-data.service';
 import { GridOptions } from 'ag-grid-community';
@@ -25,14 +25,14 @@ export abstract class BaseComponent {
     protected help: HelpTextService,
     protected config: AppConfigService,
     protected translate: TranslateService
-  ) {
+  ) { 
     // this.router.events.pipe(
     //   filter(event => event instanceof NavigationEnd),
     //   distinctUntilChanged(),
     //   map(event => console.log(this.route))
     // );
     this.routeData = this.route.snapshot.data;
-    this.pageTitle.setTitle(this.routeData.pageTitle[this.config.locale]);
+    this.pageTitle.setTitle(this.routeData.pageTitle[this.config.locale]);   
   //  this.pageHelp = this.help.getHelpTextForSection('assets');
 
 

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/shared.module.ts b/src/app/_shared/shared.module.ts
@@ -27,23 +27,26 @@ export function minlengthValidationMessage(err: any, field: { templateOptions: {
 }
 
 @NgModule({ declarations: [
-        matComponents.MatInputComponent,
-        matComponents.MatButtonComponent,
-        BreadcrumbComponent,
-        HelpTextBtnDirective,
-        PasswordInputComponent,
-    ],
-    exports: [
-        FormsModule,
-        ReactiveFormsModule,
-        FlexModule,
-        FlexLayoutModule,
-        BreadcrumbComponent,
-        MatTreeModule,
-        HelpTextBtnDirective,
-        UiFormModule,
-        NgSelectModule,
-        TranslateModule
+    matComponents.MatInputComponent,
+    matComponents.MatButtonComponent,
+    BreadcrumbComponent,
+    HelpTextBtnDirective,
+    PasswordInputComponent,
+  ],
+  exports: [
+  MatMenuModule,
+  FormsModule,
+  ReactiveFormsModule,
+  FlexModule,
+  FlexLayoutModule,
+  MatListModule,
+  BreadcrumbComponent,
+
+  MatTreeModule,
+  HelpTextBtnDirective,
+  UiFormModule,
+  NgSelectModule,
+TranslateModule
     ], imports: [CommonModule,
         ReactiveFormsModule,
         FormsModule,
@@ -57,11 +60,11 @@ export function minlengthValidationMessage(err: any, field: { templateOptions: {
         UiFormModule,
         NgSelectModule,
         FormlyModule.forChild(), MatCardModule, MatInputModule], providers: [
-        DatePipe,
-        LowerCasePipe,
-        HelpTextService,
-        { provide: NG_VALIDATORS, useValue: PasswordStrength2, multi: true },
-        { provide: NG_VALIDATORS, useValue: matchPasswords, multi: true },
+    DatePipe,
+    LowerCasePipe,
+    HelpTextService,
+    {provide: NG_VALIDATORS , useValue: PasswordStrength2, multi: true},
+    {provide: NG_VALIDATORS , useValue: matchPasswords, multi: true},
         provideHttpClient(withInterceptorsFromDi()),
     ] })
 export class SharedModule {}
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/_shared/ui-form/ui-form.module.ts b/src/app/_shared/ui-form/ui-form.module.ts
@@ -1,22 +1,26 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
 
 import {CheckBoxWrapperComponent, PanelWrapperComponent,} from './wrappers';
 
 import * as types from './types/';
 
 import {ErrorStateMatcher, MatNativeDateModule, ShowOnDirtyErrorStateMatcher} from '@angular/material/core';
-import {NgSelectModule} from '@ng-select/ng-select';
-import {FormlyMatDatepickerModule} from '@ngx-formly/material/datepicker';
 
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatIconModule} from '@angular/material/icon';
-import {FormlyMaterialModule} from '@ngx-formly/material';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormlyMatDatepickerModule } from '@ngx-formly/material/datepicker';
+
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+
+import { MatIconModule } from '@angular/material/icon';
+import { FormlyMaterialModule } from '@ngx-formly/material';
 import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
-import {FlexLayoutModule} from '@angular/flex-layout';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import {FormlyFieldFileComponent} from './types/file-type.component';
 import {FormlyModule} from '@ngx-formly/core';
+
 import {MatCardModule} from '@angular/material/card';
 import {MatInputModule} from '@angular/material/input';
 import {MaskitoDirective} from '@maskito/angular';

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,26 +56,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>
 
@@ -86,12 +74,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/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {APP_INITIALIZER, ErrorHandler, NgModule} from '@angular/core';
+
 import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor-v2';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -48,19 +49,22 @@ import {MessagesModule} from './messages/messages.module';
 import {AppSettingsService} from './services/app-settings.service';
 import {DebugOnlyDirective} from './directives/debug-only.directive';
 
+
 import {YoutubePageComponent} from './pages/youtube-page/youtube-page.component';
 import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {YoutubeUploadComponent} from './components/youtube-upload/youtube-upload.component';
 import {BloomenSearchPageComponent} from './pages/bloomen-search-page/bloomen-search-page.component';
 import {HttpErrorInterceptor} from './_shared/404.interceptor';
+import {FormlyModule} from '@ngx-formly/core';
 import {UserIpnFormComponent} from './forms/user-ipn-form/user-ipn-form.component';
 import {GenericFormComponent} from './forms/generic-form/generic-form.component';
 import {FormTestPageComponent} from './pages/form-test-page/form-test-page.component';
 import {OrderKeysPipe} from './pipes/order-keys.pipe';
 import {ShowShareLinkDialogComponent} from './dialogs/show-share-link-dialog/show-share-link-dialog.component';
 import {FormlyImageInputComponent} from './form-controls/formly-image-input/formly-image-input.component';
 import {FormlyAudioInputComponent} from './form-controls/formly-audio-input/formly-audio-input.component';
+import {MonacoEditorModule} from 'ngx-monaco-editor';
 import {FormBuilderPageComponent} from './pages/form-builder-page/form-builder-page.component';
 import {FormSelectDialogComponent} from './dialogs/form-select-dialog/form-select-dialog.component';
 import {FormDataSelectDialogComponent} from './dialogs/form-data-select-dialog/form-data-select-dialog.component';
@@ -198,7 +202,7 @@ const monacoConfig: NgxMonacoEditorConfig = {
   monacoRequire: (window as any).monacoRequire
 };
 
-@NgModule({ 
+@NgModule({
     declarations: [
         AppComponent,
         LayoutComponent,
@@ -374,6 +378,10 @@ const monacoConfig: NgxMonacoEditorConfig = {
         FormsModule,
         NgxTaggerModule,
         MessagesModule,
+        AgGridModule.withComponents([
+            WorkflowCellRendererComponent,
+            ConnectionStatusRendererComponent
+        ]),
         DragDropModule,
         LeafletModule,
         LeafletMarkerClusterModule,
@@ -383,8 +391,17 @@ const monacoConfig: NgxMonacoEditorConfig = {
         MatAutocompleteModule,
         AgGridModule,
         MatChipsModule
-    ], 
+    ],
     providers: [
+        // This service is from old legacy code and no longer used,
+        // so I'm commenting out the init() function and the whole thing
+        // can be removed once confirmed nothing is still using it.
+        // {
+        //   provide: APP_INITIALIZER,
+        //   multi: true,
+        //   useFactory: (schemaRepo: SchemaRepositoryService) => () => schemaRepo.init(),
+        //   deps: [SchemaRepositoryService]
+        // },
         {
             provide: APP_INITIALIZER,
             multi: true,