Bugfix/artesca 12109 empty bucket

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) => {

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,
+      ),
     );
   };
 

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) {

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"

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}

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,
 ) => {

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 {