error handling in bucket creation ui (#3455)

This commit is contained in:
Prakash Senthil Vel
2024-10-28 23:46:01 +05:30
committed by GitHub
parent 3d74e9762c
commit 854a0c16b3
3 changed files with 24 additions and 7 deletions

View File

@@ -128,6 +128,7 @@ const AddBucket = () => {
(state: AppState) => state.addBucket.retentionValidity, (state: AppState) => state.addBucket.retentionValidity,
); );
const addLoading = useSelector((state: AppState) => state.addBucket.loading); const addLoading = useSelector((state: AppState) => state.addBucket.loading);
const addError = useSelector((state: AppState) => state.addBucket.error);
const invalidFields = useSelector( const invalidFields = useSelector(
(state: AppState) => state.addBucket.invalidFields, (state: AppState) => state.addBucket.invalidFields,
); );
@@ -155,6 +156,12 @@ const AddBucket = () => {
IAM_SCOPES.S3_PUT_ACTIONS, IAM_SCOPES.S3_PUT_ACTIONS,
]); ]);
useEffect(() => {
if (addError) {
dispatch(setErrorSnackMessage(errorToHandler(addError)));
}
}, [addError, dispatch]);
useEffect(() => { useEffect(() => {
const bucketNameErrors = [ const bucketNameErrors = [
!(isDirty && (bucketName.length < 3 || bucketName.length > 63)), !(isDirty && (bucketName.length < 3 || bucketName.length > 63)),

View File

@@ -81,7 +81,10 @@ export const addBucketAsync = createAsyncThunk(
}; };
} }
} }
try {
return api.buckets.makeBucket(request); return await api.buckets.makeBucket(request);
} catch (err: any) {
return rejectWithValue(err.error);
}
}, },
); );

View File

@@ -16,7 +16,7 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { addBucketAsync } from "./addBucketThunks"; import { addBucketAsync } from "./addBucketThunks";
import { ObjectRetentionMode } from "api/consoleApi"; import { ApiError, ObjectRetentionMode } from "api/consoleApi";
interface AddBucketState { interface AddBucketState {
loading: boolean; loading: boolean;
@@ -36,6 +36,7 @@ interface AddBucketState {
navigateTo: string; navigateTo: string;
excludeFolders: boolean; excludeFolders: boolean;
excludedPrefixes: string; excludedPrefixes: string;
error: ApiError | null;
} }
const initialState: AddBucketState = { const initialState: AddBucketState = {
@@ -56,6 +57,7 @@ const initialState: AddBucketState = {
navigateTo: "", navigateTo: "",
excludeFolders: false, excludeFolders: false,
excludedPrefixes: "", excludedPrefixes: "",
error: null,
}; };
const addBucketsSlice = createSlice({ const addBucketsSlice = createSlice({
@@ -180,15 +182,20 @@ const addBucketsSlice = createSlice({
builder builder
.addCase(addBucketAsync.pending, (state) => { .addCase(addBucketAsync.pending, (state) => {
state.loading = true; state.loading = true;
state.error = null;
}) })
.addCase(addBucketAsync.rejected, (state) => { .addCase(addBucketAsync.rejected, (state, action) => {
state.loading = false; state.loading = false;
state.error = action.payload as ApiError;
}) })
.addCase(addBucketAsync.fulfilled, (state, action) => { .addCase(addBucketAsync.fulfilled, (state, action) => {
state.loading = false; state.loading = false;
state.navigateTo = action.payload.data.bucketName state.error = null;
? "/buckets" if (action.payload) {
: `/buckets/${action.payload.data.bucketName}/admin`; state.navigateTo = action.payload.data.bucketName
? "/buckets"
: `/buckets/${action.payload.data.bucketName}/admin`;
}
}); });
}, },
}); });