Show toast on save of plugin data

Summary: Just to give the user a bit of useful feedback

Test Plan:
Try editing and saving plugin configs. Save. Should see a toast.
If the network request fails (try forcing it in `plugin-gql.ts`), that shows a toast too.

Reviewers: michelle, vihang

Reviewed By: michelle
Signed-off-by: Nick Lanam <nlanam@pixielabs.ai>

Differential Revision: https://phab.corp.pixielabs.ai/D11262

GitOrigin-RevId: cb19542a860826d57ea24e0966b58bb48e1abbef

src/ui/src/containers/admin/plugins/plugin-config.tsx

@@ -20,21 +20,20 @@ import * as React from 'react';
 
 import { Box, Button, Divider, FormControlLabel, Skeleton, Stack, Switch, TextField, Tooltip } from '@mui/material';
 
+import { useSnackbar } from 'app/components';
 import { GQLEditablePluginConfigs, GQLPlugin } from 'app/types/schema';
 
 import { usePluginConfig, usePluginConfigMutation } from './plugin-gql';
 
 export const PluginConfig = React.memo<{ plugin: GQLPlugin }>(({ plugin }) => {
   const { loading, schema, values } = usePluginConfig(plugin);
+  const showSnackbar = useSnackbar();
 
   const [pendingValues, setPendingValues] = React.useState<GQLEditablePluginConfigs>({
     configs: [],
   });
 
   const [saving, setSaving] = React.useState(false);
-  const setDone = React.useCallback(() => {
-    setSaving(false);
-  }, []);
   const pushPluginConfig = usePluginConfigMutation(plugin);
 
   // TODO(nick,PC-1436): Race condition technically possible in save effect; make them cancellable
@@ -46,23 +45,36 @@ export const PluginConfig = React.memo<{ plugin: GQLPlugin }>(({ plugin }) => {
       configs: [...pendingValues.configs],
       customExportURL: schema?.allowCustomExportURL ? pendingValues.customExportURL : undefined,
       insecureTLS: schema?.allowInsecureTLS ? pendingValues.insecureTLS : undefined,
-    }).then(setDone).catch(setDone);
+    }).then((success) => {
+      setSaving(false);
+      if (success) {
+        showSnackbar({ message: 'Changes saved', dismissible: true });
+      } else {
+        showSnackbar({ message: 'Failed to save changes!', dismissible: true });
+      }
+    }).catch((err) => {
+      setSaving(false);
+      showSnackbar({ message: 'Failed to save changes!', dismissible: true });
+      console.error(`Failed to save changes for plugin ${plugin.name}:`, err);
+    });
   }, [
+    plugin.name,
     pushPluginConfig,
     schema?.allowCustomExportURL,
     schema?.allowInsecureTLS,
     pendingValues.configs,
     pendingValues.customExportURL,
     pendingValues.insecureTLS,
-    setDone,
+    showSnackbar,
   ]);
 
   React.useEffect(() => {
     if (!values) return;
-    setPendingValues((prev) => ({
-      ...prev,
+    setPendingValues({
       configs: values.configs.map(({ name, value }) => ({ name, value })),
-    }));
+      customExportURL: values.customExportURL,
+      insecureTLS: values.insecureTLS,
+    });
   }, [values]);
 
   const insecureWarning = React.useMemo(() => (