Merge pull request #175 from node-real/fix/ui-styles

feat(dcellar-web-ui): add refresh bucket
node-real · Aug 23, 2023 · 5c3a1a9 · 5c3a1a9
2 parents ec9b013 + 78348a5
commit 5c3a1a9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/apps/dcellar-web-ui/src/modules/bucket/components/ListEmpty.tsx b/apps/dcellar-web-ui/src/modules/bucket/components/ListEmpty.tsx
@@ -44,7 +44,7 @@ export const ListEmpty = memo<ListEmptyProps>(function ListEmpty({ empty }) {
               />
             </Flex>
 
-            <NewBucket />
+            <NewBucket showRefresh={false} />
           </Flex>
         )}
       </Content>

diff --git a/apps/dcellar-web-ui/src/modules/bucket/components/NewBucket.tsx b/apps/dcellar-web-ui/src/modules/bucket/components/NewBucket.tsx
@@ -1,16 +1,30 @@
 import { memo } from 'react';
 import { CreateBucketButton } from '@/modules/bucket/bucket.style';
 import { AddIcon } from '@totejs/icons';
-import { useAppDispatch } from '@/store';
-import { setEditCreate } from '@/store/slices/bucket';
+import { useAppDispatch, useAppSelector } from '@/store';
+import { setEditCreate, setupBuckets } from '@/store/slices/bucket';
+import { Flex } from '@totejs/uikit';
+import RefreshIcon from '@/public/images/icons/refresh.svg';
 
-interface NewBucketProps {}
+interface NewBucketProps {
+  showRefresh?: boolean;
+}
 
-export const NewBucket = memo<NewBucketProps>(function NewBucket() {
+export const NewBucket = memo<NewBucketProps>(function NewBucket({ showRefresh = true }) {
   const dispatch = useAppDispatch();
+  const { loginAccount } = useAppSelector((root) => root.persist);
+
+  const onRefresh = () => {
+    dispatch(setupBuckets(loginAccount, true));
+  };
 
   return (
-    <>
+    <Flex gap={12}>
+      {showRefresh && (
+        <Flex onClick={onRefresh} alignItems="center" height={40} mr={12} cursor="pointer">
+          <RefreshIcon />
+        </Flex>
+      )}
       <CreateBucketButton
         variant="dcPrimary"
         leftIcon={<AddIcon />}
@@ -19,6 +33,6 @@ export const NewBucket = memo<NewBucketProps>(function NewBucket() {
       >
         New Bucket
       </CreateBucketButton>
-    </>
+    </Flex>
   );
 });
diff --git a/apps/dcellar-web-ui/src/modules/object/index.tsx b/apps/dcellar-web-ui/src/modules/object/index.tsx
@@ -89,7 +89,7 @@ export const ObjectsPage = () => {
           <GoBack onClick={goBack}>
             <ForwardIcon />
           </GoBack>
-          <Flex flex={1}>
+          <Flex flex={1} minW={0}>
             {selected > 0 ? (
               <SelectedText>
                 {selected} File{selected > 1 && 's'} Selected
-Original file line number
+Diff line change
@@ Expand Up @@
                   />
                 </Flex>
-                <NewBucket />
+                <NewBucket showRefresh={false} />
               </Flex>
             )}
           </Content>
@@ Expand Down @@