From 42e6422a98ef639f2a5a5d109fe6806785731661 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Tue, 3 Sep 2024 15:49:56 +0200
Subject: [PATCH 1/4] remove query after folder creation or file upload to
 avoid cache issue

---
 src/react/actions/s3object.ts                  | 10 +++++++++-
 src/react/databrowser/objects/FolderCreate.tsx | 10 +++++++++-
 src/react/databrowser/objects/ObjectUpload.tsx |  6 +++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/react/actions/s3object.ts b/src/react/actions/s3object.ts
index edf5ff1aa..9b047b750 100644
--- a/src/react/actions/s3object.ts
+++ b/src/react/actions/s3object.ts
@@ -40,6 +40,7 @@ import { LIST_OBJECT_VERSIONS_S3_TYPE } from '../utils/s3';
 import { Marker, ZenkoClient } from '../../types/zenko';
 import { getClients } from '../utils/actions';
 import { newSearchListing } from '.';
+import { QueryClient } from 'react-query';
 
 export const UPLOADING_OBJECT = 'Uploading object(s)';
 export function listObjectsSuccess(
@@ -178,17 +179,22 @@ export function resetObjectMetadata(): ResetObjectMetadataAction {
     type: 'RESET_OBJECT_METADATA',
   };
 }
+
 export function createFolder(
   bucketName: string,
   prefixWithSlash: string,
   folderName: string,
+  queryClient: QueryClient,
 ): ThunkStatePromisedAction {
   return (dispatch, getState) => {
     const { zenkoClient } = getClients(getState());
     dispatch(networkStart('Creating folder'));
     return zenkoClient
       .createFolder(bucketName, prefixWithSlash, folderName)
-      .then(() => dispatch(listObjects(bucketName, prefixWithSlash)))
+      .then(() => {
+        queryClient.removeQueries(['objectVersions', bucketName]);
+        dispatch(listObjects(bucketName, prefixWithSlash));
+      })
       .catch((error) => dispatch(handleAWSClientError(error)))
       .catch((error) => dispatch(handleAWSError(error, 'byComponent')))
       .finally(() => {
@@ -447,6 +453,7 @@ export function uploadFiles(
   bucketName: string,
   prefixWithSlash: string,
   files: Array<File>,
+  queryClient: QueryClient,
 ): ThunkStatePromisedAction {
   return (dispatch, getState) => {
     const { zenkoClient } = getClients(getState());
@@ -455,6 +462,7 @@ export function uploadFiles(
     return zenkoClient
       .uploadObject(bucketName, prefixWithSlash, files)
       .then(() => {
+        queryClient.removeQueries(['objectVersions', bucketName]);
         dispatch(listObjects(bucketName, prefixWithSlash));
       })
       .catch((error) => {
diff --git a/src/react/databrowser/objects/FolderCreate.tsx b/src/react/databrowser/objects/FolderCreate.tsx
index 65363810f..cae60e20f 100644
--- a/src/react/databrowser/objects/FolderCreate.tsx
+++ b/src/react/databrowser/objects/FolderCreate.tsx
@@ -8,6 +8,7 @@ import { AppState } from '../../../types/state';
 import { closeFolderCreateModal, createFolder } from '../../actions';
 import { CustomModal as Modal } from '../../ui-elements/Modal';
 import { addTrailingSlash } from '../../utils';
+import { useQueryClient } from 'react-query';
 export const Description = styled.div`
   margin-top: ${spacing.sp16};
   width: 20.5rem;
@@ -28,6 +29,8 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => {
   );
   const dispatch = useDispatch();
 
+  const queryClient = useQueryClient();
+
   if (!show) {
     return null;
   }
@@ -44,7 +47,12 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => {
 
     setFolderName('');
     dispatch(
-      createFolder(bucketName, prefixWithSlash, addTrailingSlash(folderName)),
+      createFolder(
+        bucketName,
+        prefixWithSlash,
+        addTrailingSlash(folderName),
+        queryClient,
+      ),
     );
   };
 
diff --git a/src/react/databrowser/objects/ObjectUpload.tsx b/src/react/databrowser/objects/ObjectUpload.tsx
index c10d9022f..929dc8ef4 100644
--- a/src/react/databrowser/objects/ObjectUpload.tsx
+++ b/src/react/databrowser/objects/ObjectUpload.tsx
@@ -12,6 +12,7 @@ import { CustomModal as Modal } from '../../ui-elements/Modal';
 import Table, * as T from '../../ui-elements/Table';
 import { maybePluralize } from '../../utils';
 import { usePrefixWithSlash } from '../../utils/hooks';
+import { useQueryClient } from 'react-query';
 const DropZone = styled.div`
   flex: 1;
   display: flex;
@@ -116,6 +117,7 @@ const ObjectUpload = ({ bucketName }: Props) => {
   );
   const dispatch = useDispatch();
   const prefixWithSlash = usePrefixWithSlash();
+  const queryClient = useQueryClient();
 
   const onDrop = (accepted, rejections) => {
     if (accepted.length > 0) {
@@ -154,7 +156,9 @@ const ObjectUpload = ({ bucketName }: Props) => {
 
   const upload = () => {
     cleanFiles();
-    dispatch(uploadFiles(bucketName, prefixWithSlash, acceptedFiles));
+    dispatch(
+      uploadFiles(bucketName, prefixWithSlash, acceptedFiles, queryClient),
+    );
   };
 
   if (!show) {

From 0404044d204d1dad044c7682a4e5bd36fefaa2b2 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Tue, 3 Sep 2024 15:53:29 +0200
Subject: [PATCH 2/4] fix isBucketEmpty condition (was returning false when
 object.lenght = 0)

---
 src/react/ui-elements/DeleteBucket/index.tsx | 4 ++--
 src/react/utils/hooks.ts                     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/react/ui-elements/DeleteBucket/index.tsx b/src/react/ui-elements/DeleteBucket/index.tsx
index 22b6fdbea..119fe2698 100644
--- a/src/react/ui-elements/DeleteBucket/index.tsx
+++ b/src/react/ui-elements/DeleteBucket/index.tsx
@@ -38,12 +38,12 @@ export const DeleteBucket = ({ bucketName }: DeleteBucketProps) => {
             : 'Bucket is not empty'
         }
         overlayStyle={{
-          display: isBucketEmpty ? undefined : 'none',
+          display: isBucketEmpty ? 'none' : undefined,
         }}
       >
         <Button
           icon={<Icon name="Delete" />}
-          disabled={isBucketEmpty}
+          disabled={!isBucketEmpty}
           variant="danger"
           onClick={handleDeleteClick}
           label="Delete Bucket"
diff --git a/src/react/utils/hooks.ts b/src/react/utils/hooks.ts
index 5a0a4086b..a5867292e 100644
--- a/src/react/utils/hooks.ts
+++ b/src/react/utils/hooks.ts
@@ -295,7 +295,7 @@ export const useCheckIfBucketEmpty = (bucketName: string) => {
   );
 
   const isBucketEmpty = object
-    ? Boolean(
+    ? !Boolean(
         [
           ...(object.Versions ? object.Versions : []),
           ...(object.DeleteMarkers ? object.DeleteMarkers : []),

From f7e7e337f8a1ad4e72ccff61d88717e84c06752d Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Tue, 3 Sep 2024 15:59:51 +0200
Subject: [PATCH 3/4] add a parameter to query options to update the ref use to
 ensure Accesstoken is valid and then use in queryFn of useQuery. The ref was
 only update when the token change, and was not update when the selected
 bucket changes causing the query to be potentially called for the wrong
 bucket

---
 src/react/ui-elements/EmptyBucket/index.tsx | 5 +++--
 src/react/utils/IAMhooks.ts                 | 9 +++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/react/ui-elements/EmptyBucket/index.tsx b/src/react/ui-elements/EmptyBucket/index.tsx
index d1ec3892f..c5d756f99 100644
--- a/src/react/ui-elements/EmptyBucket/index.tsx
+++ b/src/react/ui-elements/EmptyBucket/index.tsx
@@ -147,6 +147,7 @@ export const EmptyBucket = ({ bucketName }: EmptyBucketProps) => {
       refetchOnWindowFocus: false,
       refetchOnMount: true,
       refetchOnReconnect: false,
+      additionalDepsToUpdateQueryFn: [bucketName],
     },
     (data) => createDeleteObjectsData(data.DeleteMarkers, data.Versions),
   );
@@ -209,12 +210,12 @@ export const EmptyBucket = ({ bucketName }: EmptyBucketProps) => {
         }
         overlayStyle={{
           width: '9rem',
-          display: isBucketEmpty ? 'none' : undefined,
+          display: isBucketEmpty ? undefined : 'none',
         }}
       >
         <Button
           icon={<Icon name="Eraser" />}
-          disabled={!isBucketEmpty}
+          disabled={isBucketEmpty}
           variant="danger"
           onClick={handleEmptyClick}
           label={EMPTY_CONFIRMATION_MODAL_TITLE}
diff --git a/src/react/utils/IAMhooks.ts b/src/react/utils/IAMhooks.ts
index 1fe4fabbd..d0e9918e7 100644
--- a/src/react/utils/IAMhooks.ts
+++ b/src/react/utils/IAMhooks.ts
@@ -53,7 +53,7 @@ export const useAwsPaginatedEntities = <
     ENTITY,
     TError,
     MARKER_TYPE
-  >,
+  > & { additionalDepsToUpdateQueryFn?: unknown[] },
   getEntitiesFromResult: (data: API_RESPONSE) => ENTITY[],
   preventNextPagesRetrieval = false,
 ): AWS_PAGINATED_ENTITIES<ENTITY> => {
@@ -96,7 +96,7 @@ export const useAwsPaginatedEntities = <
     >();
   useEffect(() => {
     ref.current = reactQueryOptions?.queryFn;
-  }, [token]);
+  }, [token, ...(reactQueryOptions.additionalDepsToUpdateQueryFn || [])]);
   //--------------------------------------------------------------------
 
   const {
@@ -116,16 +116,19 @@ export const useAwsPaginatedEntities = <
       return ref.current?.(ctx, ctx.pageParam);
     },
   });
+
   const pageIndex = data?.pageParams?.length || 0;
   const entities =
     data &&
     data.pages &&
     data.pages.flatMap((page) => getEntitiesFromResult(page));
+
   useMemo(() => {
     if (pageIndex === 0 || (pageIndex === 1 && internalStatus === 'success')) {
       setFirstPageStatus(internalStatus);
     }
   }, [internalStatus, pageIndex]);
+
   useMemo(() => {
     if (
       internalStatus === 'idle' ||
@@ -165,11 +168,13 @@ export const useAwsPaginatedEntities = <
     firstPageStatus,
   } as AWS_PAGINATED_ENTITIES<ENTITY>;
 };
+
 type AccessKeyObject = {
   accessKey: string;
   createdOn: string;
   status: string;
 };
+
 export const useAccessKeyOutdatedStatus = (
   accessKeyObject: AccessKeyObject,
 ) => {

From 2358cffde5a0d183b908e91c514d9743fa7d010c Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Tue, 3 Sep 2024 16:20:12 +0200
Subject: [PATCH 4/4] fix redundant boolean error

---
 src/react/utils/hooks.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/react/utils/hooks.ts b/src/react/utils/hooks.ts
index a5867292e..1c64c9e16 100644
--- a/src/react/utils/hooks.ts
+++ b/src/react/utils/hooks.ts
@@ -295,12 +295,10 @@ export const useCheckIfBucketEmpty = (bucketName: string) => {
   );
 
   const isBucketEmpty = object
-    ? !Boolean(
-        [
-          ...(object.Versions ? object.Versions : []),
-          ...(object.DeleteMarkers ? object.DeleteMarkers : []),
-        ].length,
-      )
+    ? ![
+        ...(object.Versions ? object.Versions : []),
+        ...(object.DeleteMarkers ? object.DeleteMarkers : []),
+      ].length
     : true;
 
   return {