From 8741e78e0df383dc594608e4599dfc0b0920c874 Mon Sep 17 00:00:00 2001
From: prakashsvmx <prakash@minio.io>
Date: Tue, 22 Oct 2024 15:45:30 +0530
Subject: [PATCH] error handling in bucket creation ui

---
 .../Buckets/ListBuckets/AddBucket/AddBucket.tsx   |  7 +++++++
 .../ListBuckets/AddBucket/addBucketThunks.ts      |  7 +++++--
 .../ListBuckets/AddBucket/addBucketsSlice.ts      | 15 +++++++++++----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx b/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
index 2be848aa98..23860a8c92 100644
--- a/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
+++ b/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
@@ -128,6 +128,7 @@ const AddBucket = () => {
     (state: AppState) => state.addBucket.retentionValidity,
   );
   const addLoading = useSelector((state: AppState) => state.addBucket.loading);
+  const addError = useSelector((state: AppState) => state.addBucket.error);
   const invalidFields = useSelector(
     (state: AppState) => state.addBucket.invalidFields,
   );
@@ -155,6 +156,12 @@ const AddBucket = () => {
     IAM_SCOPES.S3_PUT_ACTIONS,
   ]);
 
+  useEffect(() => {
+    if (addError) {
+      dispatch(setErrorSnackMessage(errorToHandler(addError)));
+    }
+  }, [addError, dispatch]);
+
   useEffect(() => {
     const bucketNameErrors = [
       !(isDirty && (bucketName.length < 3 || bucketName.length > 63)),
diff --git a/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketThunks.ts b/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketThunks.ts
index ee199d01c9..3277a64628 100644
--- a/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketThunks.ts
+++ b/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketThunks.ts
@@ -81,7 +81,10 @@ export const addBucketAsync = createAsyncThunk(
         };
       }
     }
-
-    return api.buckets.makeBucket(request);
+    try {
+      return await api.buckets.makeBucket(request);
+    } catch (err: any) {
+      return rejectWithValue(err.error);
+    }
   },
 );
diff --git a/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketsSlice.ts b/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketsSlice.ts
index 0135f4ccb2..143bee2a77 100644
--- a/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketsSlice.ts
+++ b/web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketsSlice.ts
@@ -36,6 +36,7 @@ interface AddBucketState {
   navigateTo: string;
   excludeFolders: boolean;
   excludedPrefixes: string;
+  error: any;
 }
 
 const initialState: AddBucketState = {
@@ -56,6 +57,7 @@ const initialState: AddBucketState = {
   navigateTo: "",
   excludeFolders: false,
   excludedPrefixes: "",
+  error: null,
 };
 
 const addBucketsSlice = createSlice({
@@ -180,15 +182,20 @@ const addBucketsSlice = createSlice({
     builder
       .addCase(addBucketAsync.pending, (state) => {
         state.loading = true;
+        state.error = null;
       })
-      .addCase(addBucketAsync.rejected, (state) => {
+      .addCase(addBucketAsync.rejected, (state, action) => {
         state.loading = false;
+        state.error = action.payload;
       })
       .addCase(addBucketAsync.fulfilled, (state, action) => {
         state.loading = false;
-        state.navigateTo = action.payload.data.bucketName
-          ? "/buckets"
-          : `/buckets/${action.payload.data.bucketName}/admin`;
+        state.error = null;
+        if (action.payload) {
+          state.navigateTo = action.payload.data.bucketName
+            ? "/buckets"
+            : `/buckets/${action.payload.data.bucketName}/admin`;
+        }
       });
   },
 });