error handling in bucket creation ui

minio · Oct 22, 2024 · 8741e78 · 8741e78
1 parent 06af416
commit 8741e78
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 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
@@ -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
@@ -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
@@ -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`;
+        }
       });
   },
 });