feat(os): add refresh button on objects

ref: #DATATR-2633

Signed-off-by: Lionel Bueno <[email protected]>

Author: lionel95200x

packages/manager/apps/pci-object-storage/src/components/refresh-button/RefreshButton.component.tsx

@@ -0,0 +1,23 @@
+import { Button } from '@datatr-ux/uxlib';
+import { RefreshCw } from 'lucide-react';
+
+interface RefreshButtonProps {
+  onClick: () => void;
+  isLoading: boolean;
+}
+
+export default function RefreshButton({
+  onClick,
+  isLoading,
+}: RefreshButtonProps) {
+  return (
+    <Button
+      mode="outline"
+      className="h-10 px-4"
+      onClick={onClick}
+      disabled={isLoading}
+    >
+      <RefreshCw className={`size-4 ${isLoading ? 'animate-spin' : ''}`} />
+    </Button>
+  );
+}

packages/manager/apps/pci-object-storage/src/pages/object-storage/storage/s3Id/objects/Objects.page.tsx

@@ -17,6 +17,7 @@ import S3ObjectBrowser from './_components/S3ObjectBrowser.component';
 import { useObjectStorageData } from '@/pages/object-storage/ObjectStorage.context';
 import { useIsLocaleZone } from '@/hooks/useIsLocalZone.hook';
 import SearchBar from './_components/SearchBar.component';
+import RefreshButton from '@/components/refresh-button/RefreshButton.component';
 
 const Objects = () => {
   const { projectId } = useParams();
@@ -75,23 +76,30 @@ const Objects = () => {
           <Plus className="size-6" />
           {t('addNewObject')}
         </Button>
-        {!isLocaleZone && (
-          <div className="flex items-center space-x-2">
-            <Switch
-              id="versions"
-              checked={withVersion}
-              onCheckedChange={setWithVersion}
-            />
-            <Label htmlFor="versions">{t('seeVersionsSwitchLabel')}</Label>
-            <SearchBar
-              searchQuery={searchQuery}
-              onSearchChange={setSearchQuery}
-              deferredSearchQuery={deferredSearchQuery}
-              filteredObjects={filteredObjects}
-              placeholder={t('searchPlaceholder') || 'Search...'}
-            />
-          </div>
-        )}
+        <div className="flex items-center space-x-2">
+        <RefreshButton
+            onRefresh={() => objectQuery.refetch()}
+            isRefetching={objectQuery.isFetching}
+          />
+          {!isLocaleZone && (
+            <>
+              <Switch
+                id="versions"
+                checked={withVersion}
+                onCheckedChange={setWithVersion}
+              />
+              <Label htmlFor="versions">{t('seeVersionsSwitchLabel')}</Label>
+              <SearchBar
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                deferredSearchQuery={deferredSearchQuery}
+                filteredObjects={filteredObjects}
+                placeholder={t('searchPlaceholder') || 'Search...'}
+              />
+            </>
+          )}
+     
+        </div>
       </div>
       <S3ObjectBrowser
         objects={objects}

packages/manager/apps/pci-object-storage/src/pages/object-storage/storage/s3Id/objects/object/versions/Versions.page.tsx

@@ -41,7 +41,11 @@ const Versions = () => {
   return (
     <>
       <h2>{t('versionsTitle')}</h2>
-      <S3ObjectVersionList objects={objectVersionQuery.data} />
+      <S3ObjectVersionList
+        objects={objectVersionQuery.data}
+        onRefreshClicked={objectVersionQuery.refetch}
+        isLoading={objectVersionQuery.isFetching}
+      />
       <Outlet />
     </>
   );

packages/manager/apps/pci-object-storage/src/pages/object-storage/storage/s3Id/objects/object/versions/_components/S3VersionObjectListTable.component.tsx

@@ -13,13 +13,19 @@ import useDownload from '@/hooks/useDownload';
 import { getObjectStoreApiErrorMessage } from '@/lib/apiHelper';
 import { useGetPresignUrlS3 } from '@/data/hooks/s3-storage/useGetPresignUrlS3.hook';
 import { useS3Data } from '../../../../S3.context';
-import Link from '@/components/links/Link.component';
+import RefreshButton from '@/components/refresh-button/RefreshButton.component';
 
 interface ObjectsListProps {
   objects: StorageObject[];
+  onRefreshClicked: () => void;
+  isLoading: boolean;
 }
 
-export default function S3ObjectVersionList({ objects }: ObjectsListProps) {
+export default function S3ObjectVersionList({
+  objects,
+  onRefreshClicked,
+  isLoading,
+}: ObjectsListProps) {
   const { projectId } = useParams();
   const { s3 } = useS3Data();
   const [objectName, setObjectName] = useState<string>('');
@@ -78,10 +84,13 @@ export default function S3ObjectVersionList({ objects }: ObjectsListProps) {
       pageSize={25}
       filtersDefinition={storagesFilters}
     >
-      <DataTable.Header>
-        <DataTable.SearchBar />
-        <DataTable.FiltersButton />
-      </DataTable.Header>
+      <div className="w-full flex flex-col sm:flex-row gap-2 pb-4">
+        <div className="flex ml-auto gap-2">
+          <RefreshButton onClick={onRefreshClicked} isLoading={isLoading} />
+          <DataTable.SearchBar />
+          <DataTable.FiltersButton />
+        </div>
+      </div>
       <DataTable.FiltersList />
       <DataTable.Table />
       <DataTable.Pagination />

packages/manager/apps/pci-object-storage/src/pages/object-storage/storage/swiftId/objects/Objects.page.tsx

@@ -6,6 +6,7 @@ import { useSwiftData } from '../Swift.context';
 import Guides from '@/components/guides/Guides.component';
 import RoadmapChangelog from '@/components/roadmap-changelog/RoadmapChangelog.component';
 import SwiftObjectBrowser from './_components/SwiftObjectBrowser.component';
+import RefreshButton from '@/components/refresh-button/RefreshButton.component';
 
 const SwiftObjectsPage = () => {
   const { t } = useTranslation('pci-object-storage/storages/swift/objects');
@@ -24,10 +25,17 @@ const SwiftObjectsPage = () => {
         </div>
       </div>
 
-      <Button onClick={() => navigate('./add-object')}>
-        <Plus className="size-6" />
-        {t('addNewObject')}
-      </Button>
+      <div className="flex items-center gap-2">
+      <RefreshButton
+          onRefresh={() => swiftQuery.refetch()}
+          isRefetching={swiftQuery.isFetching}
+        />
+        <Button onClick={() => navigate('./add-object')}>
+          <Plus className="size-6" />
+          {t('addNewObject')}
+        </Button>
+     
+      </div>
 
       <SwiftObjectBrowser objects={objects} />
       <Outlet />