From 19e6e2dbcf5a82314bebcc6e6121922654f59d10 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/5] 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 a227a1564..0d43a356a 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 type { 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 cb743c1da..7389a67eb 100644
--- a/src/react/databrowser/objects/FolderCreate.tsx
+++ b/src/react/databrowser/objects/FolderCreate.tsx
@@ -10,6 +10,7 @@ import type { 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;
@@ -30,6 +31,8 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => {
   );
   const dispatch: Dispatch<Action> = useDispatch();
 
+  const queryClient = useQueryClient();
+
   if (!show) {
     return null;
   }
@@ -46,7 +49,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 3a54064e1..3809e33ab 100644
--- a/src/react/databrowser/objects/ObjectUpload.tsx
+++ b/src/react/databrowser/objects/ObjectUpload.tsx
@@ -14,6 +14,7 @@ import { spacing } from '@scality/core-ui/dist/style/theme';
 import styled from 'styled-components';
 import { useDropzone } from 'react-dropzone';
 import { usePrefixWithSlash } from '../../utils/hooks';
+import { useQueryClient } from 'react-query';
 const DropZone = styled.div`
   flex: 1;
   display: flex;
@@ -118,6 +119,7 @@ const ObjectUpload = ({ bucketName }: Props) => {
   );
   const dispatch: Dispatch<Action> = useDispatch();
   const prefixWithSlash = usePrefixWithSlash();
+  const queryClient = useQueryClient();
 
   const onDrop = (accepted, rejections) => {
     if (accepted.length > 0) {
@@ -156,7 +158,9 @@ const ObjectUpload = ({ bucketName }: Props) => {
 
   const upload = () => {
     cleanFiles();
-    dispatch(uploadFiles(bucketName, prefixWithSlash, acceptedFiles));
+    dispatch(
+      uploadFiles(bucketName, prefixWithSlash, acceptedFiles, queryClient),
+    );
   };
 
   if (!show) {

From 93a003a7937dc695f78f028c3b275b1f009e28e4 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/5] fix isBucketEmpty condition (was returning false when
 object.lenght = 0)

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

diff --git a/src/react/ui-elements/DeleteBucket/index.tsx b/src/react/ui-elements/DeleteBucket/index.tsx
index 821540465..119fe2698 100644
--- a/src/react/ui-elements/DeleteBucket/index.tsx
+++ b/src/react/ui-elements/DeleteBucket/index.tsx
@@ -38,13 +38,12 @@ export const DeleteBucket = ({ bucketName }: DeleteBucketProps) => {
             : 'Bucket is not empty'
         }
         overlayStyle={{
-          width: '9rem',
-          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 94d50939eeb0d71a5b6cf5cb9710c5fac2262fa9 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/5] 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 7058df960..9aa35ebed 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 360bba0f0b41647484c5232e3f4d1684d0ab3cca Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Tue, 3 Sep 2024 16:01:39 +0200
Subject: [PATCH 4/5] add build_ts to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index f09033cf1..e84a980fa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,4 @@ coverage
 .DS_Store
 
 build
+build_ts
\ No newline at end of file

From 4b857d5cc2964fe4df49a0dfdf658bea28e7878c 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 5/5] 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 {