feat(web): add confirm update env modal (#806)

Author: sulnong

web/public/locales/en/translation.json

@@ -137,7 +137,8 @@
     "Expire": "Expiration",
     "Setting": "Setting",
     "SystemSetting": "Application Settings",
-    "UserSetting": "User Settings"
+    "UserSetting": "User Settings",
+    "UpdateConfirm": "Update env will restart application, are you sure?"
   },
   "StoragePanel": {
     "All": "Total Capacity",
@@ -231,4 +232,4 @@
   "Bucket": {
     "StatusTip": "External access needs to set the bucket permission to readonly"
   }
-}
+}

web/public/locales/zh-CN/translation.json

@@ -125,7 +125,8 @@
     "AppEnv": "环境变量",
     "AddAppEnv": "新增环境变量",
     "Expire": "过期时间",
-    "UserSetting": "用户设置"
+    "UserSetting": "用户设置",
+    "UpdateConfirm": "更新环境变量将重新启动应用，是否继续？"
   },
   "StoragePanel": {
     "CreateBucket": "创建 Bucket",
@@ -232,4 +233,4 @@
   "Bucket": {
     "StatusTip": "外部访问需要将 bucket 权限设置为 readonly"
   }
-}
+}

web/public/locales/zh/translation.json

@@ -137,7 +137,8 @@
     "Expire": "过期时间",
     "Setting": "设置",
     "SystemSetting": "应用设置",
-    "UserSetting": "用户设置"
+    "UserSetting": "用户设置",
+    "UpdateConfirm": "更新环境变量将重新启动应用，是否继续？"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -231,4 +232,4 @@
   "Bucket": {
     "StatusTip": "外部访问需要将 bucket 权限设置为 readonly"
   }
-}
+}

web/src/components/ConfirmButton/index.tsx

@@ -17,11 +17,17 @@ interface ConfirmButtonProps {
   onSuccessAction: () => void;
   headerText: string;
   bodyText: string;
-
+  confirmButtonText?: string;
   children: React.ReactElement;
 }
 
-const ConfirmButton = ({ onSuccessAction, headerText, bodyText, children }: ConfirmButtonProps) => {
+const ConfirmButton = ({
+  onSuccessAction,
+  headerText,
+  bodyText,
+  confirmButtonText,
+  children,
+}: ConfirmButtonProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const cancelRef = React.useRef<any>();
 
@@ -52,7 +58,9 @@ const ConfirmButton = ({ onSuccessAction, headerText, bodyText, children }: Conf
 
           <AlertDialogFooter>
             <Button colorScheme={"red"} onClick={onSubmit}>
-              {t("Delete")}
+              {confirmButtonText && confirmButtonText.length !== 0
+                ? confirmButtonText
+                : t("Delete")}
             </Button>
           </AlertDialogFooter>
         </AlertDialogContent>

web/src/pages/app/setting/AppEnvList/index.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@chakra-ui/react";
 import { t } from "i18next";
 
+import ConfirmButton from "@/components/ConfirmButton";
 import EditableTable from "@/components/EditableTable";
 import { isExitInList } from "@/utils/format";
 
@@ -74,17 +75,17 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
           onDelete={(data) => delEnvironmentMutation.mutateAsync({ name: data })}
           onCreate={(data) => addEnvironmentMutation.mutateAsync(data)}
         />
-        <Button
-          className="w-28 h-8 self-end mt-4"
-          type="submit"
-          variant={"secondary"}
-          onClick={() => {
+        <ConfirmButton
+          onSuccessAction={() => {
             globalStore.restartCurrentApp();
             props.onClose && props.onClose();
           }}
+          headerText={String(t("Update"))}
+          bodyText={String(t("SettingPanel.UpdateConfirm"))}
+          confirmButtonText={String(t("Update"))}
         >
-          {t("Update")}
-        </Button>
+          <Button className="w-28 h-8 self-end mt-4">{t("Update")}</Button>
+        </ConfirmButton>
       </div>
     </>
   );