Add UI popup messages for CRUD operations

Author: prakhar10

webapp/src/components/cluster.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import styles from './cluster.module.scss';
 import Locale from "../locales";
 import { backendDeleteApi, backendSaveApi, backendUpdateApi, backendsApi } from "../api/webapp/cluster";
-import { Button, ButtonGroup, Card, Form, Modal, Popconfirm, Switch, Table, Tag, Typography } from "@douyinfe/semi-ui";
+import { Button, ButtonGroup, Card, Form, Modal, Popconfirm, Switch, Table, Tag, Toast, Typography } from "@douyinfe/semi-ui";
 import Column from "@douyinfe/semi-ui/lib/es/table/Column";
 import { FormApi } from "@douyinfe/semi-ui/lib/es/form";
 import { Role, useAccessStore } from "../store";
@@ -55,7 +55,8 @@ export function Cluster() {
             backendDeleteApi({ name: record.name })
               .then(() => {
                 list();
-              }).catch(() => { });
+                Toast.success(Locale.Cluster.Delete);
+              }).catch(() => { Toast.error(Locale.Cluster.ErrorDelete) });
           }}
         >
           <Button>{Locale.UI.Delete}</Button>
@@ -142,14 +143,16 @@ export function Cluster() {
               backendSaveApi(values)
                 .then(() => {
                   list();
+                  Toast.success(Locale.Cluster.Create);
                   setVisibleForm(false);
-                }).catch(() => { });
+                }).catch(() => { Toast.error(Locale.Cluster.ErrorCreate) });
             } else {
               backendUpdateApi(values)
                 .then(() => {
                   list();
+                  Toast.success(Locale.Cluster.Update);
                   setVisibleForm(false);
-                }).catch(() => { });
+                }).catch(() => { Toast.error(Locale.Cluster.ErrorUpdate) });
             }
           }}
           getFormApi={setFormApi}

webapp/src/components/resource-group.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import styles from './resource-group.module.scss';
 import Locale from "../locales";
-import { Button, ButtonGroup, Card, Form, Modal, Popconfirm, Table } from "@douyinfe/semi-ui";
+import { Button, ButtonGroup, Card, Form, Modal, Popconfirm, Table, Toast } from "@douyinfe/semi-ui";
 import Column from "@douyinfe/semi-ui/lib/es/table/Column";
 import { FormApi } from "@douyinfe/semi-ui/lib/es/form";
 import { resourceGroupDeleteApi, resourceGroupSaveApi, resourceGroupUpdateApi, resourceGroupsApi } from "../api/webapp/resource-group";
@@ -46,7 +46,8 @@ export function ResourceGroup() {
               }
             }).then(() => {
               list();
-            }).catch(() => { });
+              Toast.success(Locale.ResourceGroup.Delete);
+            }).catch(() => { Toast.error(Locale.ResourceGroup.ErrorDelete) });
           }}
         >
           <Button>{Locale.UI.Delete}</Button>
@@ -118,16 +119,18 @@ export function ResourceGroup() {
                 data: values
               }).then(() => {
                 list();
+                Toast.success(Locale.ResourceGroup.Create);
                 setVisibleForm(false);
-              }).catch(() => { });
+              }).catch(() => { Toast.error(Locale.ResourceGroup.ErrorCreate) });
             } else {
               resourceGroupUpdateApi({
                 useSchema: useSchema,
                 data: values
               }).then(() => {
                 list();
+                Toast.success(Locale.ResourceGroup.Update);
                 setVisibleForm(false);
-              }).catch(() => { });
+              }).catch(() => { Toast.error(Locale.ResourceGroup.ErrorUpdate) });
             }
           }}
           getFormApi={setFormApi}

webapp/src/components/routing-rules.tsx

@@ -1,9 +1,10 @@
-import {useEffect, useState} from "react";
-import {routingRulesApi, updateRoutingRulesApi} from "../api/webapp/routing-rules.ts";
-import {RoutingRulesData} from "../types/routing-rules";
-import {Button, Card, Form, Toast} from "@douyinfe/semi-ui";
-import {FormApi} from "@douyinfe/semi-ui/lib/es/form";
-import {Role, useAccessStore} from "../store";
+import { useEffect, useState } from "react";
+import { routingRulesApi, updateRoutingRulesApi } from "../api/webapp/routing-rules.ts";
+import { RoutingRulesData } from "../types/routing-rules";
+import { Button, Card, Form, Toast } from "@douyinfe/semi-ui";
+import { FormApi } from "@douyinfe/semi-ui/lib/es/form";
+import { Role, useAccessStore } from "../store";
+import Locale from "../locales";
 
 export function RoutingRules() {
     const [rules, setRules] = useState<RoutingRulesData[]>([]);
@@ -22,7 +23,7 @@ export function RoutingRules() {
                     setEditingStates(new Array(data.length).fill(false));
                     setFormApis(new Array(data.length).fill(null));
                 }).catch(() => {
-            Toast.error("Failed to fetch routing rules");
+            Toast.error(Locale.RoutingRules.ErrorFetch);
         });
     };
 
@@ -63,9 +64,9 @@ export function RoutingRules() {
                     return newRules;
                 });
 
-                Toast.success("Routing rule updated successfully");
+                Toast.success(Locale.RoutingRules.Update);
             } catch (error) {
-                Toast.error("Failed to update routing rule");
+                Toast.error(Locale.RoutingRules.ErrorUpdate);
             }
         }
     };

webapp/src/components/selector.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import styles from './selector.module.scss';
 import Locale from "../locales";
-import { Button, ButtonGroup, Card, Form, Modal, Popconfirm, Table } from "@douyinfe/semi-ui";
+import { Button, ButtonGroup, Card, Form, Modal, Popconfirm, Table, Toast } from "@douyinfe/semi-ui";
 import Column from "@douyinfe/semi-ui/lib/es/table/Column";
 import { FormApi } from "@douyinfe/semi-ui/lib/es/form";
 import { selectorDeleteApi, selectorSaveApi, selectorUpdateApi, selectorsApi } from "../api/webapp/selector";
@@ -44,7 +44,8 @@ export function Selector() {
               data: record
             }).then(() => {
               list();
-            }).catch(() => { });
+              Toast.success(Locale.Selector.Delete);
+            }).catch(() => { Toast.error(Locale.Selector.ErrorDelete) });
           }}
         >
           <Button>{Locale.UI.Delete}</Button>
@@ -110,17 +111,19 @@ export function Selector() {
                 data: values
               }).then(() => {
                 list();
+                Toast.success(Locale.Selector.Create);
                 setVisibleForm(false);
-              }).catch(() => { });
+              }).catch(() => { Toast.error(Locale.Selector.ErrorCreate) });
             } else {
               selectorUpdateApi({
                 useSchema: useSchema,
                 data: values,
                 oldData: form
               }).then(() => {
                 list();
+                Toast.success(Locale.Selector.Update);
                 setVisibleForm(false);
-              }).catch(() => { });
+              }).catch(() => { Toast.error(Locale.Selector.ErrorUpdate) });
             }
           }}
           getFormApi={setFormApi}

webapp/src/locales/en_US.ts

@@ -68,6 +68,35 @@ const en_US = {
     DeleteContent: "Once deleted, it cannot be recovered",
     Query: "Query",
   },
+  Cluster: {
+      Create: "Cluster created successfully",
+      Update: "Cluster updated successfully",
+      Delete: "Cluster deleted successfully",
+      ErrorCreate: "Failed to create cluster",
+      ErrorUpdate: "Failed to update cluster",
+      ErrorDelete: "Failed to delete cluster",
+  },
+  ResourceGroup: {
+      Create: "Resource group created successfully",
+      Update: "Resource group updated successfully",
+      Delete: "Resource group deleted successfully",
+      ErrorCreate: "Failed to create resource group",
+      ErrorUpdate: "Failed to update resource group",
+      ErrorDelete: "Failed to delete resource group",
+  },
+  Selector: {
+      Create: "Selector created successfully",
+      Update: "Selector updated successfully",
+      Delete: "Selector deleted successfully",
+      ErrorCreate: "Failed to create selector",
+      ErrorUpdate: "Failed to update selector",
+      ErrorDelete: "Failed to delete selector",
+  },
+  RoutingRules: {
+      Update: "Routing rule updated successfully",
+      ErrorUpdate: "Failed to update routing rule",
+      ErrorFetch: "Failed to fetch routing rules"
+  },
 };
 
 type DeepPartial<T> = T extends object