mwa(front): Update the use of SnackBarService

frontend/COMMIT

@@ -1 +1 @@
-8dcfe792c
+046c6d3c8

frontend/src/app/app.module.ts

@@ -7,6 +7,19 @@ import { IndexModule } from './pages/index/index.module';
 import { KubeflowModule } from 'kubeflow';
 import { ServerInfoModule } from './pages/server-info/server-info.module';
 import { SubmitFormModule } from './pages/submit-form/submit-form.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 MwaSnackBarConfig: MatSnackBarConfig = {
+  duration: 5000,
+};
 
 @NgModule({
   declarations: [AppComponent],
@@ -18,7 +31,9 @@ import { SubmitFormModule } from './pages/submit-form/submit-form.module';
     ServerInfoModule,
     SubmitFormModule,
   ],
-  providers: [],
+  providers: [
+    { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: MwaSnackBarConfig },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

frontend/src/app/pages/index/index.component.ts

@@ -17,6 +17,7 @@ import {
   SnackType,
   DashboardState,
   ToolbarButton,
+  SnackBarConfig,
 } from 'kubeflow';
 import { Subscription } from 'rxjs';
 import { isEqual } from 'lodash';
@@ -115,7 +116,13 @@ export class IndexComponent implements OnInit, OnDestroy {
       case 'copy-link':
         console.log(`Copied to clipboard: ${svc.status.url}`);
         this.clipboard.copy(svc.status.url);
-        this.snack.open(`Copied: ${svc.status.url}`, SnackType.Info, 4000);
+        const config: SnackBarConfig = {
+          data: {
+            msg: `Copied: ${svc.status.url}`,
+            snackType: SnackType.Info,
+          },
+        };
+        this.snack.open(config);
         break;
       case 'name:link':
         /*
@@ -125,11 +132,13 @@ export class IndexComponent implements OnInit, OnDestroy {
         if (svc.ui.status.phase === STATUS_TYPE.TERMINATING) {
           a.event.stopPropagation();
           a.event.preventDefault();
-          this.snack.open(
-            $localize`Endpoint is being deleted, cannot show details.`,
-            SnackType.Info,
-            4000,
-          );
+          const config: SnackBarConfig = {
+            data: {
+              msg: $localize`Endpoint is being deleted, cannot show details.`,
+              snackType: SnackType.Info,
+            },
+          };
+          this.snack.open(config);
           return;
         }
         break;

frontend/src/app/pages/server-info/server-info.component.ts

@@ -23,6 +23,7 @@ import {
   DIALOG_RESP,
   SnackBarService,
   SnackType,
+  SnackBarConfig,
 } from 'kubeflow';
 import { MWABackendService } from 'src/app/services/backend.service';
 import { isEqual } from 'lodash';
@@ -173,11 +174,13 @@ export class ServerInfoComponent implements OnInit, OnDestroy {
             this.pollingSub.unsubscribe();
 
             // const name = `${svc.metadata.namespace}/${svc.metadata.name}`;
-            this.snack.open(
-              $localize`$Delete request was sent.`,
-              SnackType.Info,
-              5000,
-            );
+            const config: SnackBarConfig = {
+              data: {
+                msg: $localize`$Delete request was sent.`,
+                snackType: SnackType.Info,
+              },
+            };
+            this.snack.open(config);
 
             this.router.navigate(['']);
           },

frontend/src/app/pages/submit-form/submit-form.component.ts

@@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { NamespaceService, SnackBarService, SnackType } from 'kubeflow';
+import {
+  NamespaceService,
+  SnackBarConfig,
+  SnackBarService,
+  SnackType,
+} from 'kubeflow';
 import { load, YAMLException } from 'js-yaml';
 import { InferenceServiceK8s } from 'src/app/types/kfserving/v1beta1';
 import { MWABackendService } from 'src/app/services/backend.service';
@@ -44,18 +49,27 @@ export class SubmitFormComponent implements OnInit {
       if (e.mark && e.mark.line) {
         msg = 'Error parsing the provided YAML in line: ' + e.mark.line;
       }
-
-      this.snack.open(msg, SnackType.Error, 16000);
+      const config: SnackBarConfig = {
+        data: {
+          msg,
+          snackType: SnackType.Error,
+        },
+        duration: 16000,
+      };
+      this.snack.open(config);
       this.applying = false;
       return;
     }
 
     if (!cr.metadata) {
-      this.snack.open(
-        'InferenceService must have a metadata field.',
-        SnackType.Error,
-        8000,
-      );
+      const config: SnackBarConfig = {
+        data: {
+          msg: 'InferenceService must have a metadata field.',
+          snackType: SnackType.Error,
+        },
+        duration: 8000,
+      };
+      this.snack.open(config);
 
       this.applying = false;
       return;