refactor(web): cloud storage use ak/sk instead of sts (labring#1581)

* refactor(web): cloud storage use ak/sk instead of sts * refactor(web): direct update env & add appid when create bucket * fix(web): fix create bucket need name message
HUAHUAI23 · Oct 19, 2023 · 7f468fe · 7f468fe
1 parent 91ad4aa
commit 7f468fe
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 34 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -272,7 +272,8 @@
     "parsing": "parsing",
     "DomainUpdateSuccess": "Domain Update Success",
     "DomainDeleteSuccess": "Domain Delete Success",
-    "CustomApplicationDomain": "Custom Application Domain"
+    "CustomApplicationDomain": "Custom Application Domain",
+    "BucketNameisRequired": "Bucket name is required"
   },
   "TriggerPanel": {
     "AddTrigger": "Add Trigger",
@@ -658,6 +659,5 @@
   "SavedSuccessfully": "Saved Successfully",
   "Bind": "Bind",
   "UnBind": "Unbind",
-  "UnBindSuccess": "Unbind Successfully",
-  "SavedSuccessfully": "Saved Successfully"
-}
+  "UnBindSuccess": "Unbind Successfully"
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -272,7 +272,8 @@
     "RemoveHost": "取消静态托管",
     "DomainUpdateSuccess": "域名修改成功",
     "DomainDeleteSuccess": "域名删除成功",
-    "CustomApplicationDomain": "自定义应用域名"
+    "CustomApplicationDomain": "自定义应用域名",
+    "BucketNameisRequired": "请输入 Bucket 名称"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",
@@ -659,4 +660,4 @@
   "UnBind": "解绑",
   "UnBindSuccess": "解绑成功",
   "SavedSuccessfully": "保存成功"
-}
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -272,7 +272,8 @@
     "RemoveHost": "取消静态托管",
     "DomainUpdateSuccess": "域名修改成功",
     "DomainDeleteSuccess": "域名删除成功",
-    "CustomApplicationDomain": "自定义应用域名"
+    "CustomApplicationDomain": "自定义应用域名",
+    "BucketNameisRequired": "请输入 Bucket 名称"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",
@@ -659,4 +660,4 @@
   "UnBind": "解绑",
   "UnBindSuccess": "解绑成功",
   "SavedSuccessfully": "保存成功"
-}
+}
diff --git a/web/src/hooks/useAwsS3.ts b/web/src/hooks/useAwsS3.ts
@@ -2,13 +2,12 @@ import useGlobalStore from "@/pages/globalStore";
 
 function useAwsS3() {
   const currentApp = useGlobalStore((state) => state.currentApp);
-  const credentials = currentApp?.storage?.credentials;
+  const storage = currentApp?.storage;
 
   const s3 = new (window as any).AWS.S3({
-    accessKeyId: credentials?.accessKeyId,
-    secretAccessKey: credentials?.secretAccessKey,
-    sessionToken: credentials?.sessionToken,
-    endpoint: credentials?.endpoint,
+    accessKeyId: storage.accessKey,
+    secretAccessKey: storage.secretKey,
+    endpoint: storage.endpoint,
     s3ForcePathStyle: true,
     signatureVersion: "v4",
   });

diff --git a/web/src/pages/app/setting/SysSetting/AppEnvList/index.tsx b/web/src/pages/app/setting/SysSetting/AppEnvList/index.tsx
@@ -4,7 +4,6 @@ import clsx from "clsx";
 import dotenv from "dotenv";
 import { t } from "i18next";
 
-import ConfirmButton from "@/components/ConfirmButton";
 import ENVEditor from "@/components/Editor/ENVEditor";
 import { COLOR_MODE } from "@/constants";
 
@@ -42,8 +41,9 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
             }}
           />
         </div>
-        <ConfirmButton
-          onSuccessAction={async () => {
+        <Button
+          className="mt-4 h-8 w-28 self-end"
+          onClick={async () => {
             const obj = dotenv.parse(envValue.current || "");
             // convert obj to [{ name: '', value: ''}]
             const arr = Object.keys(obj).map((key) => {
@@ -54,12 +54,9 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
               props.onClose && props.onClose();
             }
           }}
-          headerText={String(t("Update"))}
-          bodyText={String(t("SettingPanel.UpdateConfirm"))}
-          confirmButtonText={String(t("Confirm"))}
         >
-          <Button className="mt-4 h-8 w-28 self-end">{t("Update")}</Button>
-        </ConfirmButton>
+          {t("Update")}
+        </Button>
       </div>
     </>
   );

diff --git a/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx b/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx
@@ -6,6 +6,8 @@ import {
   FormErrorMessage,
   FormLabel,
   Input,
+  InputAddon,
+  InputGroup,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -14,9 +16,11 @@ import {
   ModalHeader,
   ModalOverlay,
   Select,
+  useColorMode,
   useDisclosure,
   VStack,
 } from "@chakra-ui/react";
+import clsx from "clsx";
 import { t } from "i18next";
 
 import { BUCKET_POLICY_TYPE } from "@/constants";
@@ -35,6 +39,8 @@ function CreateBucketModal(props: { storage?: TBucket; children: React.ReactElem
   const bucketCreateMutation = useBucketCreateMutation();
   const bucketUpdateMutation = useBucketUpdateMutation();
 
+  const darkMode = useColorMode().colorMode === "dark";
+
   const defaultValues = {
     name: storage?.name,
     policy: storage?.policy,
@@ -53,7 +59,7 @@ function CreateBucketModal(props: { storage?: TBucket; children: React.ReactElem
     defaultValues,
   });
 
-  const { showSuccess } = useGlobalStore();
+  const { showSuccess, currentApp } = useGlobalStore();
 
   const isEdit = !!storage;
 
@@ -102,18 +108,27 @@ function CreateBucketModal(props: { storage?: TBucket; children: React.ReactElem
             <VStack spacing={6} align="flex-start">
               <FormControl isInvalid={!!errors?.name}>
                 <FormLabel htmlFor="name"> {t("StoragePanel.BucketName")}</FormLabel>
-                <Input
-                  {...register("name", {
-                    required: true,
-                    pattern: {
-                      value: /^[a-z0-9][a-z0-9-]{1,30}[a-z0-9]$/,
-                      message: t("StoragePanel.BucketNameRule"),
-                    },
-                  })}
-                  placeholder={String(t("StoragePanel.BucketNamePlaceholder"))}
-                  variant="filled"
-                  disabled={isEdit}
-                />
+                <InputGroup>
+                  <InputAddon className="!mr-0 !rounded-r-none !pr-0">
+                    {currentApp.appid + "-"}
+                  </InputAddon>
+                  <Input
+                    {...register("name", {
+                      required: t("StoragePanel.BucketNameisRequired").toString(),
+                      pattern: {
+                        value: /^[a-z0-9][a-z0-9-]{1,30}[a-z0-9]$/,
+                        message: t("StoragePanel.BucketNameRule"),
+                      },
+                    })}
+                    variant="filled"
+                    placeholder={String(t("StoragePanel.BucketNamePlaceholder"))}
+                    disabled={isEdit}
+                    className={clsx(
+                      "!ml-0 !rounded-l-none !border-none !pl-0",
+                      darkMode ? "!bg-[#FFFFFF0A]" : "!bg-lafWhite-600",
+                    )}
+                  />
+                </InputGroup>
                 <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
               </FormControl>