error handling in bucket creation ui (#3455)

Author: prakashsvmx

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

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

web-app/src/screens/Console/Buckets/ListBuckets/AddBucket/addBucketsSlice.ts

@@ -16,7 +16,7 @@
 
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { addBucketAsync } from "./addBucketThunks";
-import { ObjectRetentionMode } from "api/consoleApi";
+import { ApiError, ObjectRetentionMode } from "api/consoleApi";
 
 interface AddBucketState {
   loading: boolean;
@@ -36,6 +36,7 @@ interface AddBucketState {
   navigateTo: string;
   excludeFolders: boolean;
   excludedPrefixes: string;
+  error: ApiError | null;
 }
 
 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 as ApiError;
       })
       .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`;
+        }
       });
   },
 });