kwa(front): Update the use of SnackBarService

pkg/new-ui/v1beta1/frontend/COMMIT

@@ -1 +1 @@
-8dcfe792
+046c6d3c8

pkg/new-ui/v1beta1/frontend/src/app/app.module.ts

@@ -8,6 +8,19 @@ import { AppComponent } from './app.component';
 import { ExperimentsModule } from './pages/experiments/experiments.module';
 import { ExperimentDetailsModule } from './pages/experiment-details/experiment-details.module';
 import { ExperimentCreationModule } from './pages/experiment-creation/experiment-creation.module';
+import {
+  MatSnackBarConfig,
+  MAT_SNACK_BAR_DEFAULT_OPTIONS,
+} from '@angular/material/snack-bar';
+
+/**
+ * MAT_SNACK_BAR_DEFAULT_OPTIONS values can be found
+ * here
+ * https://github.com/angular/components/blob/main/src/material/snack-bar/snack-bar-config.ts#L25-L58
+ */
+const KwaSnackBarConfig: MatSnackBarConfig = {
+  duration: 4000,
+};
 
 @NgModule({
   declarations: [AppComponent],
@@ -20,7 +33,9 @@ import { ExperimentCreationModule } from './pages/experiment-creation/experiment
     ReactiveFormsModule,
     ExperimentCreationModule,
   ],
-  providers: [],
+  providers: [
+    { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: KwaSnackBarConfig },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/experiment-creation.component.ts

@@ -14,7 +14,12 @@ import {
   EXPERIMENT_KIND,
 } from 'src/app/models/experiment.k8s.model';
 import { KWABackendService } from 'src/app/services/backend.service';
-import { NamespaceService, SnackType, SnackBarService } from 'kubeflow';
+import {
+  NamespaceService,
+  SnackType,
+  SnackBarService,
+  SnackBarConfig,
+} from 'kubeflow';
 import { pipe } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { EarlyStoppingAlgorithmsEnum } from 'src/app/enumerations/algorithms.enum';
@@ -118,11 +123,14 @@ export class ExperimentCreationComponent implements OnInit {
 
         this.backend.createExperiment(exp).subscribe({
           next: () => {
-            this.snack.open(
-              'Experiment submitted successfully.',
-              SnackType.Success,
-              3000,
-            );
+            const config: SnackBarConfig = {
+              data: {
+                msg: 'Experiment submitted successfully.',
+                snackType: SnackType.Success,
+              },
+              duration: 3000,
+            };
+            this.snack.open(config);
             this.returnToExperiments();
           },
           error: err => {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-creation/yaml-modal/yaml-modal.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, Inject } from '@angular/core';
 import { load, dump } from 'js-yaml';
-import { SnackBarService, SnackType } from 'kubeflow';
+import { SnackBarConfig, SnackBarService, SnackType } from 'kubeflow';
 import {
   MatDialog,
   MatDialogRef,
@@ -27,7 +27,13 @@ export class YamlModalComponent {
     try {
       this.dialogRef.close(load(this.yaml));
     } catch (e) {
-      this.snack.open(`${e.reason}`, SnackType.Error, 4000);
+      const config: SnackBarConfig = {
+        data: {
+          msg: `${e.reason}`,
+          snackType: SnackType.Error,
+        },
+      };
+      this.snack.open(config);
     }
   }
 

pkg/new-ui/v1beta1/frontend/src/app/services/backend.service.ts

@@ -5,6 +5,7 @@ import { Observable, throwError } from 'rxjs';
 import {
   BackendService,
   K8sObject,
+  SnackBarConfig,
   SnackBarService,
   SnackType,
 } from 'kubeflow';
@@ -33,7 +34,14 @@ export class KWABackendService extends BackendService {
       }
     }
 
-    this.snack.open(msg, SnackType.Error, 8000);
+    const config: SnackBarConfig = {
+      data: {
+        msg,
+        snackType: SnackType.Error,
+      },
+      duration: 8000,
+    };
+    this.snack.open(config);
 
     return throwError(msg);
   }

pkg/new-ui/v1beta1/frontend/src/app/services/experiment-form.service.ts

@@ -5,7 +5,7 @@ import {
   EarlyStoppingAlgorithmsEnum,
 } from '../enumerations/algorithms.enum';
 import { createParameterGroup, createNasOperationGroup } from '../shared/utils';
-import { SnackBarService, SnackType } from 'kubeflow';
+import { SnackBarConfig, SnackBarService, SnackType } from 'kubeflow';
 import { load } from 'js-yaml';
 import {
   ObjectiveSpec,
@@ -398,11 +398,13 @@ export class ExperimentFormService {
       try {
         metrics.collector.customCollector = load(group.get('customYaml').value);
       } catch (e) {
-        this.snack.open(
-          'Metrics Colletor(Custom): ' + `${e.reason}`,
-          SnackType.Error,
-          4000,
-        );
+        const config: SnackBarConfig = {
+          data: {
+            msg: 'Metrics Colletor(Custom): ' + `${e.reason}`,
+            snackType: SnackType.Error,
+          },
+        };
+        this.snack.open(config);
       }
       return metrics;
     }
@@ -432,11 +434,13 @@ export class ExperimentFormService {
       try {
         trialTemplate.trialSpec = load(formValue.yaml);
       } catch (e) {
-        this.snack.open(
-          'Trial Template: ' + `${e.reason}`,
-          SnackType.Error,
-          4000,
-        );
+        const config: SnackBarConfig = {
+          data: {
+            msg: 'Trial Template: ' + `${e.reason}`,
+            snackType: SnackType.Error,
+          },
+        };
+        this.snack.open(config);
       }
 
       return trialTemplate;