feat(os): add refresh button on objects

ref: #DATATR-2633

Signed-off-by: Lionel Bueno <lionel.bueno.ext@ovhcloud.com>

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 {
+  onRefresh: () => void;
+  isRefetching: boolean;
+}
+
+export default function RefreshButton({
+  onRefresh,
+  isRefetching,
+}: RefreshButtonProps) {
+  return (
+    <Button
+      mode="outline"
+      className="h-10 px-4"
+      onClick={onRefresh}
+      disabled={isRefetching}
+    >
+      <RefreshCw className={`size-4 ${isRefetching ? 'animate-spin' : ''}`} />
+    </Button>
+  );
+}

packages/manager/apps/pci-object-storage/src/configuration/polling.constants.ts

@@ -4,6 +4,7 @@ export const POLLING = {
   S3: 30_000,
   OBJECT: 45_000,
   USER_CREATION: 2500,
+  OBJECTS_REFRESH: 10_000,
 };
 
 export const USER_INACTIVITY_TIMEOUT = 5 * 60_000; // inactivity after 5 minutes

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

@@ -17,6 +17,8 @@ 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';
+import { POLLING } from '@/configuration/polling.constants';
 
 const Objects = () => {
   const { projectId } = useParams();
@@ -32,6 +34,9 @@ const Objects = () => {
     region: s3.region,
     name: s3.name,
     withVersions: withVersion,
+    options: {
+      refetchInterval: POLLING.OBJECTS_REFRESH,
+    },
   });
   const navigate = useNavigate();
 
@@ -75,23 +80,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

@@ -5,6 +5,7 @@ import { useS3Data } from '../../../S3.context';
 import DataTable from '@/components/data-table';
 import S3ObjectVersionList from './_components/S3VersionObjectListTable.component';
 import { useGetS3ObjectVersions } from '@/data/hooks/s3-storage/useGetS3ObjectVersions.hook';
+import { POLLING } from '@/configuration/polling.constants';
 
 const Versions = () => {
   const { t } = useTranslation('pci-object-storage/storages/s3/objects');
@@ -18,6 +19,9 @@ const Versions = () => {
     region: s3.region,
     name: s3.name,
     key: objectKey,
+    options: {
+      refetchInterval: POLLING.OBJECTS_REFRESH,
+    },
   });
 
   if (objectVersionQuery.isLoading) {
@@ -41,7 +45,11 @@ const Versions = () => {
   return (
     <>
       <h2>{t('versionsTitle')}</h2>
-      <S3ObjectVersionList objects={objectVersionQuery.data} />
+      <S3ObjectVersionList
+        objects={objectVersionQuery.data}
+        onRefresh={() => objectVersionQuery.refetch()}
+        isRefetching={objectVersionQuery.isFetching}
+      />
       <Outlet />
     </>
   );

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

@@ -14,12 +14,19 @@ 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[];
+  onRefresh: () => void;
+  isRefetching: boolean;
 }
 
-export default function S3ObjectVersionList({ objects }: ObjectsListProps) {
+export default function S3ObjectVersionList({
+  objects,
+  onRefresh,
+  isRefetching,
+}: ObjectsListProps) {
   const { projectId } = useParams();
   const { s3 } = useS3Data();
   const [objectName, setObjectName] = useState<string>('');
@@ -78,10 +85,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 onRefresh={onRefresh} isRefetching={isRefetching} />
+          <DataTable.SearchBar />
+          <DataTable.FiltersButton />
+        </div>
+      </div>
       <DataTable.FiltersList />
       <DataTable.Table />
       <DataTable.Pagination />

packages/manager/apps/pci-object-storage/src/pages/object-storage/storage/swiftId/Swift.context.tsx

@@ -2,18 +2,23 @@ import { UseQueryResult } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import storages from '@/types/Storages';
 import { useGetSwift } from '@/data/hooks/swift-storage/useGetSwift.hook';
+import { OptionsFor } from '@/hooks/useImmediateRefetch';
+import { getSwiftStorage } from '@/data/api/storage/swiftStorage.api';
 
 // Share data with the child routes
 export type SwiftLayoutContext = {
   swift: storages.ContainerDetail;
   swiftQuery: UseQueryResult<storages.ContainerDetail, Error>;
 };
-export const useSwiftData = () => {
+export const useSwiftData = (
+  queryOptions?: OptionsFor<typeof getSwiftStorage>,
+) => {
   const { projectId, swiftId } = useParams();
   const swiftQuery = useGetSwift({
     projectId,
     containerId: swiftId,
     noObjects: false,
+    options: queryOptions,
   });
   return { projectId, swift: swiftQuery.data, swiftQuery };
 };

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

@@ -6,10 +6,14 @@ 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';
+import { POLLING } from '@/configuration/polling.constants';
 
 const SwiftObjectsPage = () => {
   const { t } = useTranslation('pci-object-storage/storages/swift/objects');
-  const { swiftQuery } = useSwiftData();
+  const { swiftQuery } = useSwiftData({
+    refetchInterval: POLLING.OBJECTS_REFRESH,
+  });
   const navigate = useNavigate();
 
   if (swiftQuery.isLoading) return <Skeleton className="h-96 w-full" />;
@@ -24,10 +28,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 />