styles(objectstorage): fix styles

labring · Aug 21, 2024 · baedcb1 · baedcb1
1 parent eb83860
commit baedcb1
Show file tree

Hide file tree

Showing 37 changed files with 696 additions and 307 deletions.
diff --git a/frontend/packages/ui/src/components/Select/index.tsx b/frontend/packages/ui/src/components/Select/index.tsx
@@ -7,7 +7,8 @@ import {
   Button,
   useDisclosure,
   useOutsideClick,
-  MenuButton
+  MenuButton,
+  Flex
 } from '@chakra-ui/react';
 import type { ButtonProps } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@chakra-ui/icons';
@@ -93,15 +94,7 @@ const MySelect = (
               })}
           {...props}
         >
-          {activeMenu ? (
-            <>
-              <Box>{activeMenu.label}</Box>
-            </>
-          ) : (
-            <>
-              <Box>{placeholder}</Box>
-            </>
-          )}
+          <Flex justifyContent={'flex-start'}>{activeMenu ? activeMenu.label : placeholder}</Flex>
         </MenuButton>
 
         <MenuList

diff --git a/frontend/providers/dbprovider/next-i18next.config.js b/frontend/providers/dbprovider/next-i18next.config.js
@@ -10,4 +10,4 @@ module.exports = {
     localeDetection: false
   },
   reloadOnPrerender: process.env.NODE_ENV === 'development'
-}
+};
diff --git a/frontend/providers/objectstorage/.vscode/settings.json b/frontend/providers/objectstorage/.vscode/settings.json
@@ -2,5 +2,6 @@
 	"typescript.tsdk": "..\\node_modules\\typescript\\lib",
 	"i18n-ally.localesPaths": [
 		"public/locales"
-	]
+	],
+	"i18n-ally.keystyle": "nested"
 }
diff --git a/frontend/providers/objectstorage/public/locales/en/bucket.json b/frontend/providers/objectstorage/public/locales/en/bucket.json
@@ -10,5 +10,6 @@
   "confirmDeleteBucket": "Are you sure you want to delete this bucket? This action will delete all data in the bucket.",
   "enterBucketNameConfirmation": "Please enter bucket name {{bucketName}} confirmation",
   "enterValidBucketName": "Please enter a valid bucket name",
-  "initializing": "Initializing"
+  "initializing": "Initializing",
+	"reset_user_sk_title": "Confirm Reset Secret Key"
 }
diff --git a/frontend/providers/objectstorage/public/locales/en/common.json b/frontend/providers/objectstorage/public/locales/en/common.json
@@ -21,5 +21,10 @@
   "Custom Domain": "Custom Domain",
   "Disable Hosting": "Disable Hosting",
   "Effective": "Effective",
-  "Unable to Access": "Unable to Access"
+  "name": "Name",
+  "confirm": "Confirm",
+  "reset": "Reset",
+  "cancel": "Cancel",
+  "Unable to Access": "Unable to Access",
+  "reset_error": "Reset Error"
 }
diff --git a/frontend/providers/objectstorage/public/locales/zh/bucket.json b/frontend/providers/objectstorage/public/locales/zh/bucket.json
@@ -11,5 +11,6 @@
   "confirmDeleteBucket": "如果确认要删除这个存储桶吗？如果执行此操作，将删除该存储桶的所有数据。",
   "enterBucketNameConfirmation": "请输入存储桶名字 {{bucketName}} 确认",
   "enterValidBucketName": "请输入正确的存储桶名字",
-  "initializing": "正在初始化中"
+  "initializing": "正在初始化中",
+	"reset_user_sk_title": "确认重置 Secret Key"
 }
diff --git a/frontend/providers/objectstorage/public/locales/zh/common.json b/frontend/providers/objectstorage/public/locales/zh/common.json
@@ -2,7 +2,7 @@
   "application": "应用",
   "export": "导出",
   "configForm": "配置表单",
-  "yamlFile": "yaml 文件",
+  "yamlFile": "YAML 文件",
   "edit": "编辑",
   "delete": "删除",
   "totalObjects": "总对象数量",
@@ -20,5 +20,10 @@
   "Disable Hosting": "关闭托管",
   "Enable Hosting": "打开托管",
   "Effective": "已生效",
-  "Unable to Access": "无法访问"
-}
+  "name": "名称",
+  "reset": "重置",
+  "confirm": "确认",
+  "cancel": "取消",
+  "Unable to Access": "无法访问",
+  "reset_error": "重置错误"
+}
diff --git a/frontend/providers/objectstorage/src/api/bucket.ts b/frontend/providers/objectstorage/src/api/bucket.ts
@@ -27,7 +27,9 @@ export const _initUser = (request: AxiosInstance) => () =>
     }
   >('/api/user/init');
 export const initUser = _initUser(request);
-
+export const _updateSecret = (request: AxiosInstance) => () =>
+  request.post<any, ApiResp<null>>('/api/user/updateSecretKey');
+export const updateSecret = _updateSecret(request);
 export const _getHostStatus = (request: AxiosInstance) => (data: { bucket: string }) =>
   request.post<any, any[]>('/api/site/status', data);
 export const getHostStatus = _getHostStatus(request);

diff --git a/frontend/providers/objectstorage/src/components/BucketContainer/BucketHeader.tsx b/frontend/providers/objectstorage/src/components/BucketContainer/BucketHeader.tsx
@@ -18,7 +18,7 @@ export default function BucketHeader({ ...styles }: StackProps) {
           {bucket.name}
         </Text>
       </HStack>
-      <ButtonGroup variant={'secondary'} spacing={'16px'}>
+      <ButtonGroup variant={'outline'} spacing={'16px'}>
         <Button
           gap="8px"
           px="24px"
@@ -33,7 +33,7 @@ export default function BucketHeader({ ...styles }: StackProps) {
             router.push('/bucketConfig?' + params.toString());
           }}
         >
-          <EditIcon boxSize={'16px'} color="grayModern.400" />
+          <EditIcon boxSize={'16px'} fill={'currentcolor'} />
           <Text>{t('edit')}</Text>
         </Button>
         <DeleteBucketModal bucketName={bucket.name} />

diff --git a/frontend/providers/objectstorage/src/components/BucketContainer/FileManager.tsx b/frontend/providers/objectstorage/src/components/BucketContainer/FileManager.tsx
@@ -82,11 +82,10 @@ export default function FileManager({ ...styles }: FlexProps) {
   const { t } = useTranslation('file');
   const { t: commonT } = useTranslation('common');
   const { t: toolsT } = useTranslation('tools');
-  const bucket = useOssStore((s) => s.currentBucket);
-  const s3client = useOssStore((s) => s.client);
   const session = useSessionStore((s) => s.session);
+
+  const { isUpdating, prefix, client: s3client, currentBucket: bucket, secret } = useOssStore();
   const Bucket = bucket?.name || '';
-  const prefix = useOssStore((s) => s.prefix);
   const Prefix = prefix.length === 0 ? '' : [...prefix, ''].join('/');
   const [pageStack, setpageStack] = useState<string[]>([]);
   const [ContinuationToken, setContinuationToken] = useState<string | undefined>(undefined);
@@ -107,7 +106,7 @@ export default function FileManager({ ...styles }: FlexProps) {
   const objectsQuery = useQuery({
     queryKey: [
       QueryKey.minioFileList,
-      { Bucket, Prefix, MaxKeys, ContinuationToken, s3client, session }
+      { Bucket, Prefix, MaxKeys, ContinuationToken, s3client, session, secret }
     ],
     queryFn: () =>
       listObjects(s3client!)({ Bucket, Prefix, Delimiter: '/', ContinuationToken, MaxKeys }),
@@ -116,6 +115,7 @@ export default function FileManager({ ...styles }: FlexProps) {
     },
     enabled: !!s3client && !!Bucket
   });
+
   useEffect(() => {
     if (objectsQuery.isError) {
       // @ts-ignore
@@ -509,7 +509,7 @@ export default function FileManager({ ...styles }: FlexProps) {
     <Flex direction={'column'} {...styles}>
       <HStack w="full" my="16px" mb="25px">
         <PathLink />
-        <InputGroup variant={'secondary'} alignItems={'center'} size={'sm'}>
+        <InputGroup variant={'outline'} alignItems={'center'} size={'sm'}>
           <InputLeftElement>
             <SearchIcon boxSize={'16px'} color="grayModern.600" />
           </InputLeftElement>

diff --git a/frontend/providers/objectstorage/src/components/Icons/EditIcon.tsx b/frontend/providers/objectstorage/src/components/Icons/EditIcon.tsx
@@ -5,18 +5,9 @@ const EditIcon = createIcon({
   viewBox: '0 0 16 16',
   path: (
     <g>
-      <path
-        d="M13.1919 1.56602C13.3704 1.3875 13.6599 1.3875 13.8384 1.56602L14.8588 2.58645C15.0373 2.76497 15.0373 3.05442 14.8588 3.23294L13.966 4.12579C13.7874 4.30431 13.498 4.30431 13.3195 4.12579L12.2991 3.10536C12.1205 2.92684 12.1205 2.63739 12.2991 2.45887L13.1919 1.56602Z"
-        fill="#5A646E"
-      />
-      <path
-        d="M11.4845 3.88819C11.306 3.70966 11.0165 3.70966 10.838 3.88819L5.98289 8.7433C5.92479 8.8014 5.8856 8.87124 5.86532 8.94519C5.84798 8.9862 5.8384 9.03128 5.8384 9.0786V10.2042C5.8384 10.3936 5.9919 10.5471 6.18125 10.5471H7.30434C7.32207 10.5471 7.3395 10.5457 7.35651 10.5431C7.46333 10.5362 7.56817 10.4919 7.64981 10.4102L12.5049 5.55511C12.6834 5.37659 12.6834 5.08714 12.5049 4.90861L11.4845 3.88819Z"
-        fill="#5A646E"
-      />
-      <path
-        d="M2.94761 2.22845H10.7597L9.38064 3.60751H3.14799V13.2256H12.7661V7.0298L14.1452 5.65073V13.426C14.1452 14.077 13.6175 14.6047 12.9665 14.6047H2.94761C2.29664 14.6047 1.76892 14.077 1.76892 13.426V3.40714C1.76892 2.75616 2.29664 2.22845 2.94761 2.22845Z"
-        fill="#5A646E"
-      />
+      <path d="M13.1919 1.56602C13.3704 1.3875 13.6599 1.3875 13.8384 1.56602L14.8588 2.58645C15.0373 2.76497 15.0373 3.05442 14.8588 3.23294L13.966 4.12579C13.7874 4.30431 13.498 4.30431 13.3195 4.12579L12.2991 3.10536C12.1205 2.92684 12.1205 2.63739 12.2991 2.45887L13.1919 1.56602Z" />
+      <path d="M11.4845 3.88819C11.306 3.70966 11.0165 3.70966 10.838 3.88819L5.98289 8.7433C5.92479 8.8014 5.8856 8.87124 5.86532 8.94519C5.84798 8.9862 5.8384 9.03128 5.8384 9.0786V10.2042C5.8384 10.3936 5.9919 10.5471 6.18125 10.5471H7.30434C7.32207 10.5471 7.3395 10.5457 7.35651 10.5431C7.46333 10.5362 7.56817 10.4919 7.64981 10.4102L12.5049 5.55511C12.6834 5.37659 12.6834 5.08714 12.5049 4.90861L11.4845 3.88819Z" />
+      <path d="M2.94761 2.22845H10.7597L9.38064 3.60751H3.14799V13.2256H12.7661V7.0298L14.1452 5.65073V13.426C14.1452 14.077 13.6175 14.6047 12.9665 14.6047H2.94761C2.29664 14.6047 1.76892 14.077 1.76892 13.426V3.40714C1.76892 2.75616 2.29664 2.22845 2.94761 2.22845Z" />
     </g>
   )
 });

diff --git a/frontend/providers/objectstorage/src/components/Icons/ListIcon.tsx b/frontend/providers/objectstorage/src/components/Icons/ListIcon.tsx
@@ -3,6 +3,6 @@ import { createIcon } from '@chakra-ui/react';
 const ListIcon = createIcon({
   displayName: 'ListIcon',
   viewBox: '0 0 17 16',
-  d: 'M1.83333 5.83317C1.83333 5.65636 1.90357 5.48679 2.02859 5.36177C2.15361 5.23674 2.32318 5.1665 2.49999 5.1665H14.5C14.6768 5.1665 14.8464 5.23674 14.9714 5.36177C15.0964 5.48679 15.1667 5.65636 15.1667 5.83317C15.1667 6.00998 15.0964 6.17955 14.9714 6.30457C14.8464 6.4296 14.6768 6.49984 14.5 6.49984H2.49999C2.32318 6.49984 2.15361 6.4296 2.02859 6.30457C1.90357 6.17955 1.83333 6.00998 1.83333 5.83317ZM1.83333 8.49984C1.83333 8.32303 1.90357 8.15346 2.02859 8.02843C2.15361 7.90341 2.32318 7.83317 2.49999 7.83317H14.5C14.6768 7.83317 14.8464 7.90341 14.9714 8.02843C15.0964 8.15346 15.1667 8.32303 15.1667 8.49984C15.1667 8.67665 15.0964 8.84622 14.9714 8.97124C14.8464 9.09627 14.6768 9.1665 14.5 9.1665H2.49999C2.32318 9.1665 2.15361 9.09627 2.02859 8.97124C1.90357 8.84622 1.83333 8.67665 1.83333 8.49984ZM2.49999 10.4998C2.32318 10.4998 2.15361 10.5701 2.02859 10.6951C1.90357 10.8201 1.83333 10.9897 1.83333 11.1665C1.83333 11.3433 1.90357 11.5129 2.02859 11.6379C2.15361 11.7629 2.32318 11.8332 2.49999 11.8332H10.5C10.6768 11.8332 10.8464 11.7629 10.9714 11.6379C11.0964 11.5129 11.1667 11.3433 11.1667 11.1665C11.1667 10.9897 11.0964 10.8201 10.9714 10.6951C10.8464 10.5701 10.6768 10.4998 10.5 10.4998H2.49999Z'
+  d: 'M1.19885 4.05802C1.19885 3.68983 1.51614 3.39136 1.90752 3.39136H14.0924C14.4838 3.39136 14.8011 3.68983 14.8011 4.05802C14.8011 4.42621 14.4838 4.72469 14.0924 4.72469H1.90752C1.51614 4.72469 1.19885 4.42621 1.19885 4.05802ZM1.19885 7.95852C1.19885 7.59033 1.51614 7.29185 1.90752 7.29185H14.0924C14.4838 7.29185 14.8011 7.59033 14.8011 7.95852C14.8011 8.32671 14.4838 8.62518 14.0924 8.62518H1.90752C1.51614 8.62518 1.19885 8.32671 1.19885 7.95852ZM1.19885 11.942C1.19885 11.5738 1.51614 11.2753 1.90752 11.2753H9.71358C10.105 11.2753 10.4222 11.5738 10.4222 11.942C10.4222 12.3102 10.105 12.6087 9.71358 12.6087H1.90752C1.51614 12.6087 1.19885 12.3102 1.19885 11.942Z'
 });
 export default ListIcon;
diff --git a/frontend/providers/objectstorage/src/components/Icons/WarnTriangle.tsx b/frontend/providers/objectstorage/src/components/Icons/WarnTriangle.tsx
@@ -0,0 +1,8 @@
+import { createIcon } from '@chakra-ui/react';
+
+const WarnTriangleIcon = createIcon({
+  displayName: 'WarnTriangleIcon',
+  viewBox: '0 0 20 20',
+  d: 'M8.77336 1.94531C9.14777 1.73452 9.57018 1.62378 9.99985 1.62378C10.4295 1.62378 10.8519 1.73452 11.2263 1.94531C11.6008 2.15611 11.9145 2.45984 12.1374 2.82721L12.1398 2.83117L19.1981 14.6145L19.2048 14.626C19.4231 15.004 19.5386 15.4326 19.5399 15.8692C19.5411 16.3057 19.428 16.7349 19.2118 17.1142C18.9956 17.4934 18.6839 17.8095 18.3077 18.0308C17.9315 18.2522 17.5038 18.3712 17.0673 18.376L17.0582 18.3761L2.93236 18.3761C2.49586 18.3713 2.06822 18.2522 1.692 18.0308C1.31577 17.8095 1.00406 17.4934 0.787896 17.1142C0.571726 16.7349 0.458626 16.3057 0.459849 15.8692C0.461071 15.4326 0.576573 15.004 0.794863 14.626L0.801632 14.6145L7.86234 2.8272C8.08518 2.45984 8.39895 2.15611 8.77336 1.94531ZM9.99985 3.29045C9.85663 3.29045 9.71583 3.32736 9.59102 3.39762C9.46678 3.46757 9.36258 3.56822 9.28836 3.68993L2.23543 15.4643C2.16445 15.5891 2.12691 15.7302 2.12651 15.8738C2.1261 16.0193 2.1638 16.1624 2.23586 16.2888C2.30791 16.4152 2.41182 16.5206 2.53722 16.5944C2.66154 16.6675 2.80268 16.7072 2.94685 16.7094H17.0529C17.197 16.7072 17.3382 16.6675 17.4625 16.5944C17.5879 16.5206 17.6918 16.4152 17.7638 16.2888C17.8359 16.1624 17.8736 16.0193 17.8732 15.8738C17.8728 15.7302 17.8353 15.5891 17.7643 15.4643L10.7124 3.69159C10.712 3.69104 10.7117 3.69048 10.7113 3.68993C10.6371 3.56822 10.5329 3.46757 10.4087 3.39762C10.2839 3.32736 10.1431 3.29045 9.99985 3.29045ZM9.99985 6.7094C10.4601 6.7094 10.8332 7.0825 10.8332 7.54273V10.8761C10.8332 11.3363 10.4601 11.7094 9.99985 11.7094C9.53962 11.7094 9.16652 11.3363 9.16652 10.8761V7.54273C9.16652 7.0825 9.53962 6.7094 9.99985 6.7094ZM9.16652 14.2094C9.16652 13.7492 9.53962 13.3761 9.99985 13.3761H10.0082C10.4684 13.3761 10.8415 13.7492 10.8415 14.2094C10.8415 14.6696 10.4684 15.0427 10.0082 15.0427H9.99985C9.53962 15.0427 9.16652 14.6696 9.16652 14.2094Z'
+});
+export default WarnTriangleIcon;
diff --git a/frontend/providers/objectstorage/src/components/SideBar/index.tsx b/frontend/providers/objectstorage/src/components/SideBar/index.tsx
@@ -16,7 +16,7 @@ import {
 import RefreshIcon from '@/components/Icons/RefreshIcon';
 import BucketIcon from '@/components/Icons/BucketIcon';
 import MoreIcon from '@/components/Icons/MoreIcon';
-import { ReactNode, useEffect, useMemo } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
 import ParamterModal from '@/components/common/modal/ParamterModal';
 import CreateBucketModal from '@/components/common/modal/CreateBucketModal';
 import EditIcon from '../Icons/EditIcon';
@@ -34,19 +34,28 @@ import useSessionStore from '@/store/session';
 function MoreMenu({ bucket }: { bucket: TBucket }) {
   const router = useRouter();
   const { t } = useTranslation(['common', 'bucket']);
+  const [hoverIdx, setHoverIdx] = useState(-1);
   return (
     <Menu>
       <MenuButton
         as={IconButton}
         variant={'white-bg-icon'}
-        icon={<MoreIcon w="16px" h="16px" color="grayIron.600" />}
+        icon={<MoreIcon w="16px" h="16px" color="grayModern.500" />}
         p="4px"
         onClick={(e) => e.stopPropagation()}
       ></MenuButton>
-      <MenuList p="6px" minW={'85px'} fontSize={'12px'} onClick={(e) => e.stopPropagation()}>
+      <MenuList
+        p="6px"
+        minW={'85px'}
+        fontSize={'12px'}
+        onClick={(e) => e.stopPropagation()}
+        boxShadow={'0px 0px 1px 0px #13336B1A, 0px 4px 10px 0px #13336B1A'}
+      >
         <MenuItem
           px="4px"
           py="6px"
+          display={'flex'}
+          gap={'8px'}
           onClick={() => {
             const _params: bucketConfigQueryParam = {
               bucketName: bucket.crName,
@@ -55,9 +64,14 @@ function MoreMenu({ bucket }: { bucket: TBucket }) {
             const params = new URLSearchParams(_params);
             router.push('/bucketConfig?' + params.toString());
           }}
+          fill={'grayModern.600'}
+          color={'grayModern.600'}
+          alignItems={'center'}
         >
-          <EditIcon w="16px" h="16px" color={'grayModern.600'} mr="8px" />
-          <Text color={'grayModern.700'}>{t('edit')}</Text>
+          <EditIcon w="16px" h="16px" fill={'inherit'} />
+          <Text fontSize={'12px'} fontWeight={500}>
+            {t('edit')}
+          </Text>
         </MenuItem>
         <MenuItem p="0">
           <DeleteBucketModal layout="sm" bucketName={bucket.name} />
@@ -76,16 +90,16 @@ function BucketListItem({
       alignItems={'center'}
       bgColor={isSelected ? '#9699B41A' : ''}
       fontWeight={'500'}
+      p="4px"
+      borderRadius={'4px'}
       pl="12px"
-      pr="4px"
-      py="6px"
       cursor={'pointer'}
       {...props}
       justifyContent={'space-between'}
     >
       <Flex gap={'6px'} align={'center'}>
-        <BucketIcon w="16px" h="16px" color={isSelected ? 'brightBlue.600' : 'grayModern.700'} />
-        <Text fontSize={'12px'} color={isSelected ? 'brightBlue.700' : 'grayModern.700'}>
+        <BucketIcon w="16px" h="16px" color={'brightBlue.600'} />
+        <Text fontSize={'12px'} color={'brightBlue.700'}>
           {bucket.name}
         </Text>
       </Flex>
@@ -225,7 +239,7 @@ export default function SideBar() {
         <Text color={'grayModern.900'} fontSize={'16px'} fontWeight={'500'}>
           {t('bucketList')}
         </Text>
-        <Flex color={'#219BF4'}>
+        <Flex color={'brightBlue.500'}>
           <IconButton
             icon={<RefreshIcon boxSize="18px" />}
             p="5px"

diff --git a/frontend/providers/objectstorage/src/components/buckConfig/BasicConfigHookForm.tsx b/frontend/providers/objectstorage/src/components/buckConfig/BasicConfigHookForm.tsx
@@ -9,15 +9,15 @@ import {
   FormHelperText,
   Text
 } from '@chakra-ui/react';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import ExpanMoreIcon from '../Icons/ExpandMoreIcon';
 import InfoCircleIcon from '../Icons/InfoCircleIcon';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
-
+import { MySelect } from '@sealos/ui';
 const BasicConfigHookForm = () => {
-  const { register, getFieldState, control } = useFormContext<FormSchema>();
+  const { register, getFieldState, control, getValues, setValue } = useFormContext<FormSchema>();
   const { t } = useTranslation(['common', 'bucket']);
   const authorityTips = useMemo(
     () => ({
@@ -28,6 +28,20 @@ const BasicConfigHookForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
+  const authorityList = [
+    {
+      label: Authority.private,
+      value: Authority.private
+    },
+    {
+      value: Authority.readonly,
+      label: Authority.readonly
+    },
+    {
+      value: Authority.readwrite,
+      label: Authority.readwrite
+    }
+  ];
   const selectedAuthority = useWatch<FormSchema, 'bucketAuthority'>({
     name: 'bucketAuthority',
     defaultValue: Authority.private,
@@ -45,9 +59,9 @@ const BasicConfigHookForm = () => {
           {t('bucket:bucketName')}
         </FormLabel>
         <Input
-          variant={'secondary'}
+          variant={'outline'}
           h="32px"
-          w="auto"
+          w="300px"
           autoFocus={true}
           isDisabled={!!router.query.bucketName}
           {...register('bucketName', {
@@ -61,32 +75,28 @@ const BasicConfigHookForm = () => {
           <FormLabel w="100px" mr="30px">
             {t('bucket:bucketPermission')}
           </FormLabel>
-          <Select
-            {...register('bucketAuthority', {})}
-            variant={'secondary'}
-            w="auto"
-            h="32px"
-            mr="30px"
-            icon={<ExpanMoreIcon />}
-            iconSize="16px"
-          >
-            <option value={Authority.private}>{Authority.private}</option>
-            <option value={Authority.readonly}>{Authority.readonly}</option>
-            <option value={Authority.readwrite}>{Authority.readwrite}</option>
-          </Select>
+          <MySelect
+            list={authorityList}
+            width="300px"
+            value={getValues('bucketAuthority')}
+            onchange={(v) => {
+              setValue('bucketAuthority', v as any);
+            }}
+          ></MySelect>
         </Flex>
         <FormHelperText
           w="auto"
           display={'inline-flex'}
-          py="7px"
-          px="11px"
-          bgColor={'blue.100'}
-          fontSize={'12px'}
+          py="6px"
+          px="12px"
+          borderRadius={'6px'}
+          bgColor={'brightBlue.50'}
+          fontSize={'11px'}
           alignItems={'center'}
           gap="4px"
         >
-          <InfoCircleIcon color="brightBlue.600" fontSize={'16px'} />
-          <Text color="brightBlue.700">{authorityTips[selectedAuthority]}</Text>
+          <InfoCircleIcon color="brightBlue.600" boxSize={'14px'} />
+          <Text color="brightBlue.600">{authorityTips[selectedAuthority]}</Text>
         </FormHelperText>
       </FormControl>
     </Stack>

diff --git a/frontend/providers/objectstorage/src/components/buckConfig/ConfigFormContainer.tsx b/frontend/providers/objectstorage/src/components/buckConfig/ConfigFormContainer.tsx
@@ -11,6 +11,8 @@ const ConfigFormContainer = ({
     alignSelf={'self-start'}
     overflow={'hidden'}
     gap="0"
+    h="full"
+    maxH={'500px'}
     borderRadius={'4px'}
     border={'1px solid'}
     borderColor={'grayModern.200'}
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,4 @@ module.exports = { @@
         localeDetection: false
       },
       reloadOnPrerender: process.env.NODE_ENV === 'development'
-    }
+    };