Upstream sync

Merge upstream main into fork main

Author: SergioLangaritaBenitez

src/components/Topbar/index.tsx

@@ -1,8 +1,8 @@
 import UserInfo from "@/components/UserInfo";
 import OscarColors, { OscarStyles } from "@/styles";
-import { RefreshCcwIcon } from "lucide-react";
 import { useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
+import AnimatedRefreshCw from "../ui/animatedRefreshCw";
 
 interface GenericTopbarProps {
     customHeader?: React.ReactNode;
@@ -39,10 +39,7 @@ function GenericTopbar({ customHeader, defaultHeader, refresher, children, secon
           <Link to="#"
             onClick={() => refresher()}
           >
-            <RefreshCcwIcon size={16} 
-              onMouseEnter={(e) => {e.currentTarget.style.transform = 'rotate(90deg)'}}
-              onMouseLeave={(e) => {e.currentTarget.style.transform = 'rotate(0deg)'}}
-            />
+            <AnimatedRefreshCw size={16} />
           </Link>)
           }
         </div>

src/components/ui/animatedRefreshCw.tsx

@@ -0,0 +1,18 @@
+import { RefreshCw } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface AnimatedRefreshCwProps {
+  size?: number;
+  className?: string;
+}
+
+function AnimatedRefreshCw({ size = 16, className }: AnimatedRefreshCwProps) {
+  return (
+    <RefreshCw
+      size={size}
+      className={cn("transition-transform duration-500 hover:rotate-180", className)}
+    />
+  );
+}
+
+export default AnimatedRefreshCw;

src/contexts/Minio/MinioContext.tsx

@@ -72,6 +72,8 @@ export type MinioProviderData = {
   createBucket: (bucketName: Bucket_oscar) => Promise<void>;
   updateBucketsVisibilityControl: (bucketName: Bucket_oscar) => Promise<void>; 
   updateBuckets: () => Promise<void>;
+  refreshBucketItems: boolean;
+  setRefreshBucketItems: (value: boolean) => void;
   getBucketItems: (
     bucketName: string,
     path: string
@@ -110,6 +112,7 @@ export const MinioProvider = ({ children }: { children: React.ReactNode }) => {
   const [bucketsAreLoading, setBucketsAreLoading] = useState<boolean>(false);
   const [uploadProgress, setUploadProgress] = useState<UploadBatchProgress | null>(null);
   const [bucketsLoadingError, setBucketsLoadingError] = useState<boolean>(false);
+  const [refreshBucketItems, setRefreshBucketItems] = useState<boolean>(false);
 
   const [bucketsFilter, setBucketsFilter] = useState<BucketsFilterProps>({
     myBuckets: false,
@@ -534,6 +537,8 @@ export const MinioProvider = ({ children }: { children: React.ReactNode }) => {
         createFolder,
         updateBuckets,
         updateBucketsVisibilityControl,
+        setRefreshBucketItems,
+        refreshBucketItems,
         getBucketItems,
         deleteBucket,
         uploadFiles,

src/pages/ui/minio/components/BucketContent/index.tsx

@@ -10,6 +10,7 @@ import {
   Trash,
   Download,
   DownloadIcon,
+  LoaderPinwheel,
 } from "lucide-react";
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 import OscarColors from "@/styles";
@@ -44,9 +45,11 @@ export type BucketItem =
 
 export default function BucketContent() {
   const { name: bucketName, path } = useSelectedBucket();
+  const [isLoading, setIsLoading] = useState(true);
 
   const {
     getBucketItems,
+    refreshBucketItems,
     downloadAndZipFolders,
     buckets,
     uploadFiles,
@@ -64,6 +67,7 @@ export default function BucketContent() {
 
   useEffect(() => {
     if (bucketName) {
+      setIsLoading(true);
       getBucketItems(bucketName, path).then(({ items, folders }) => {
         const combinedItems = [
           ...(folders?.map((folder) => {
@@ -87,10 +91,11 @@ export default function BucketContent() {
             return res;
           }) || []),
         ];
+        setIsLoading(false);
         setItems(combinedItems);
       });
     }
-  }, [bucketName, getBucketItems, buckets, path]);
+  }, [bucketName, getBucketItems, buckets, path, refreshBucketItems]);
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -232,6 +237,11 @@ export default function BucketContent() {
           }}
           itemNames={itemsToDelete.map((item) => item.Name)}
         />
+        {isLoading ? 
+          <div className="flex items-center justify-center h-full w-full">
+            <LoaderPinwheel className="animate-spin" size={60} color={OscarColors.Green3} />
+          </div>
+        :
         <GenericTable
           data={items.map((item) => {
             return {
@@ -365,6 +375,7 @@ export default function BucketContent() {
             },
           ]}
         />
+        }
         <UploadFileDialog
           progress={uploadProgress}
           onClose={clearUploadProgress}

src/pages/ui/minio/components/Topbar.tsx

@@ -21,11 +21,12 @@ import { Button } from "@/components/ui/button";
 import { useAuth } from "@/contexts/AuthContext";
 import { shortenFullname } from "@/lib/utils";
 import GenPresignedURLPopover from "./GenPresignedURLPopover";
+import AnimatedRefreshCw from "@/components/ui/animatedRefreshCw";
 
 
 function MinioTopbar() {
   const { name, path } = useSelectedBucket();
-  const { updateBuckets, bucketsOSCAR, bucketsFilter, setBucketsFilter } = useMinio();
+  const { updateBuckets, bucketsOSCAR, bucketsFilter, setBucketsFilter, refreshBucketItems, setRefreshBucketItems } = useMinio();
   const pathSegments = path ? path.split("/").filter(Boolean) : [];
   const [serviceAssociate, setServiceAssociate] = useState<boolean>(true)
   const {authData} = useAuth();
@@ -110,7 +111,7 @@ function MinioTopbar() {
     secondaryRow={ 
       !isOnRoot ? ( 
         <div className="flex flex-col w-full ">
-          <nav className="grid grid-cols-[auto_1fr] my-[6px] mx-1 items-center text-sm gap-0 border rounded-lg border-gray-300 bg-gray-50 shadow-sm overflow-hidden" aria-label="Breadcrumb">
+          <nav className="grid grid-cols-[auto_1fr_auto] my-[6px] mx-1 items-center text-sm gap-0 border rounded-lg border-gray-300 bg-gray-50 shadow-sm overflow-hidden" aria-label="Breadcrumb">
             <Link
               to={`/ui/minio/${name}`}
               className="font-bold no-underline hover:text-gray-900 hover:bg-gray-100 px-0 py-2 transition-all duration-200 border-r border-gray-300 bg-white"
@@ -126,6 +127,9 @@ function MinioTopbar() {
                 {breadcrumbs.length > 0 && breadcrumbs ? breadcrumbs : <Slash size={12} className="pt-[2px] text-gray-400" aria-hidden="true" />}
               </div>
             </div>
+            <Button variant="outline" size="sm" onClick={() => setRefreshBucketItems(!refreshBucketItems)} title="Refresh" className="group text-gray-600 hover:text-gray-800 hover:bg-gray-200 border-y-0 border-r-0 border-l border-l-gray-300 rounded-none" >
+              <AnimatedRefreshCw size={16} className="group-hover:rotate-180"/>
+            </Button>
           </nav>
         </div>
       )