Skip to content

Snackbar with error details #737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Snackbar with error details #737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
de9550d
first working version of extendable snackbar
benrejebmoh Sep 30, 2025
e2a88fd
close custom snackbar
benrejebmoh Sep 30, 2025
f21907e
manage snackbar content details by commons-ui
benrejebmoh Sep 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"dependencies": {
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@gridsuite/commons-ui": "0.128.0",
"@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.128.0.tgz",
"@hookform/resolvers": "^4.1.3",
"@mui/icons-material": "^5.18.0",
"@mui/lab": "5.0.0-alpha.175",
Expand Down
23 changes: 11 additions & 12 deletions src/components/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
UserManagerState,
useSnackMessage,
} from '@gridsuite/commons-ui';
import { FormattedMessage } from 'react-intl';
import { FormattedMessage, useIntl } from 'react-intl';
import { Box } from '@mui/material';
import { selectComputedLanguage, selectEnableDeveloperMode, selectLanguage, selectTheme } from '../redux/actions';
import { ConfigParameters, fetchIdpSettings } from '../utils/rest-api';
Expand All @@ -38,9 +38,11 @@ import DirectoryContent from './directory-content';
import DirectoryBreadcrumbs from './directory-breadcrumbs';
import { AppDispatch } from '../redux/store';
import { AppState } from '../redux/types';
import { snackErrorWithBackendFallback } from './utils/rest-errors';

export default function App() {
const { snackError } = useSnackMessage();
const intl = useIntl();

const user = useSelector((state: AppState) => state.user);

Expand Down Expand Up @@ -102,15 +104,14 @@ export default function App() {
if (eventData.headers?.parameterName) {
fetchConfigParameter(APP_NAME, eventData.headers.parameterName)
.then((param) => updateParams([param]))
.catch((error) =>
snackError({
messageTxt: error.message,
.catch((error: unknown) =>
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'paramsRetrievingError',
})
);
}
},
[updateParams, snackError]
[updateParams, snackError, intl]
);

useNotificationsListener(NotificationsUrlKeys.CONFIG, {
Expand Down Expand Up @@ -154,24 +155,22 @@ export default function App() {
if (user !== null) {
fetchConfigParameters(COMMON_APP_NAME)
.then((params) => updateParams(params))
.catch((error) =>
snackError({
messageTxt: error.message,
.catch((error: unknown) =>
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'paramsRetrievingError',
})
);

fetchConfigParameters(APP_NAME)
.then((params) => updateParams(params))
.catch((error) =>
snackError({
messageTxt: error.message,
.catch((error: unknown) =>
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'paramsRetrievingError',
})
);
}
return undefined;
}, [user, dispatch, updateParams, snackError]);
}, [user, dispatch, updateParams, snackError, intl]);

// We use <Box flex=.../> instead of <Grid/> because flex rules were too complexes or conflicts with MUI grid rules
return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/dialogs/commons/prefilled-name-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ export default function PrefilledNameInput({ label, name, elementType }: Readonl
shouldDirty: true,
});
})
.catch((error) => {
handleGenericTxtError(error.message, snackError);
.catch((error: unknown) => {
handleGenericTxtError(error instanceof Error ? error : String(error), snackError);
});
}
}
Expand Down
9 changes: 5 additions & 4 deletions src/components/dialogs/contingency-list/creation/contingency-list-creation-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
} from '@gridsuite/commons-ui';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useIntl } from 'react-intl';
import { createContingencyList } from '../../../../utils/rest-api';
import ContingencyListCreationForm from './contingency-list-creation-form';
import {
Expand All @@ -29,7 +30,7 @@ import { ContingencyListType } from '../../../../utils/elementType';
import { useParameterState } from '../../use-parameters-dialog';
import { AppState } from '../../../../redux/types';
import { getExplicitNamingSchema } from '../explicit-naming/explicit-naming-utils';
import { handleNotAllowedError } from '../../../utils/rest-errors';
import { CustomError, handleNotAllowedError, snackErrorWithBackendFallback } from '../../../utils/rest-errors';

const schema = yup.object().shape({
[FieldConstants.NAME]: yup.string().trim().required('nameEmpty'),
Expand Down Expand Up @@ -59,6 +60,7 @@ export default function ContingencyListCreationDialog({
}: Readonly<ContingencyListCreationDialogProps>) {
const activeDirectory = useSelector((state: AppState) => state.activeDirectory);
const { snackError } = useSnackMessage();
const intl = useIntl();

const [languageLocal] = useParameterState(PARAM_LANGUAGE);

Expand Down Expand Up @@ -91,12 +93,11 @@ export default function ContingencyListCreationDialog({
activeDirectory
)
.then(() => closeAndClear())
.catch((error) => {
.catch((error: CustomError) => {
if (handleNotAllowedError(error, snackError)) {
return;
}
snackError({
messageTxt: error.message,
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'contingencyListCreationError',
headerValues: { name: data[FieldConstants.NAME] },
});
Expand Down
13 changes: 7 additions & 6 deletions ...ponents/dialogs/contingency-list/edition/criteria-based/criteria-based-edition-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { getContingencyList, saveCriteriaBasedContingencyList } from 'utils/rest-api';
import { useDispatch, useSelector } from 'react-redux';
import { AppState } from '../../../../../redux/types';
Expand All @@ -29,6 +30,7 @@ import CriteriaBasedEditionForm from './criteria-based-edition-form';
import { setItemSelectionForCopy } from '../../../../../redux/actions';
import { useParameterState } from '../../../use-parameters-dialog';
import { CriteriaBasedEditionFormData } from '../../../../../utils/rest-api';
import { snackErrorWithBackendFallback } from '../../../../utils/rest-errors';

const schema = yup.object().shape({
[FieldConstants.NAME]: yup.string().trim().required('nameEmpty'),
Expand Down Expand Up @@ -61,6 +63,7 @@ export default function CriteriaBasedEditionDialog({
const [languageLocal] = useParameterState(PARAM_LANGUAGE);
const [isFetching, setIsFetching] = useState(!!contingencyListId);
const { snackError } = useSnackMessage();
const intl = useIntl();
const itemSelectionForCopy = useSelector((state: AppState) => state.itemSelectionForCopy);
const dispatch = useDispatch();
const methods = useForm<CriteriaBasedEditionFormData>({
Expand All @@ -87,14 +90,13 @@ export default function CriteriaBasedEditionDialog({
});
}
})
.catch((error) => {
snackError({
messageTxt: error.message,
.catch((error: unknown) => {
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'cannotRetrieveContingencyList',
});
})
.finally(() => setIsFetching(false));
}, [contingencyListId, contingencyListType, name, reset, snackError, description]);
}, [contingencyListId, contingencyListType, name, reset, snackError, description, intl]);

const closeAndClear = () => {
reset(getContingencyListEmptyFormData());
Expand All @@ -111,8 +113,7 @@ export default function CriteriaBasedEditionDialog({
closeAndClear();
})
.catch((errorMessage) => {
snackError({
messageTxt: errorMessage,
snackErrorWithBackendFallback(errorMessage, snackError, intl, {
headerId: 'contingencyListEditingError',
headerValues: { name },
});
Expand Down
13 changes: 7 additions & 6 deletions ...nents/dialogs/contingency-list/edition/explicit-naming/explicit-naming-edition-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { getContingencyList, saveExplicitNamingContingencyList } from 'utils/rest-api';
import { prepareContingencyListForBackend } from 'components/dialogs/contingency-list-helper';
import { useDispatch, useSelector } from 'react-redux';
Expand All @@ -27,6 +28,7 @@ import ExplicitNamingEditionForm from './explicit-naming-edition-form';
import { setItemSelectionForCopy } from '../../../../../redux/actions';
import { AppState } from '../../../../../redux/types';
import { getExplicitNamingEditSchema } from '../../explicit-naming/explicit-naming-utils';
import { snackErrorWithBackendFallback } from '../../../../utils/rest-errors';

interface ExplicitNamingEditionFormData {
[FieldConstants.NAME]: string;
Expand Down Expand Up @@ -70,6 +72,7 @@ export default function ExplicitNamingEditionDialog({
}: Readonly<ExplicitNamingEditionDialogProps>) {
const [isFetching, setIsFetching] = useState(!!contingencyListId);
const { snackError } = useSnackMessage();
const intl = useIntl();
const itemSelectionForCopy = useSelector((state: AppState) => state.itemSelectionForCopy);
const dispatch = useDispatch();
const methods = useForm({
Expand All @@ -93,14 +96,13 @@ export default function ExplicitNamingEditionDialog({
reset({ ...formData });
}
})
.catch((error) => {
snackError({
messageTxt: error.message,
.catch((error: unknown) => {
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'cannotRetrieveContingencyList',
});
})
.finally(() => setIsFetching(false));
}, [contingencyListId, contingencyListType, name, reset, snackError, description]);
}, [contingencyListId, contingencyListType, name, reset, snackError, description, intl]);

const closeAndClear = () => {
reset(emptyFormData());
Expand All @@ -126,8 +128,7 @@ export default function ExplicitNamingEditionDialog({
closeAndClear();
})
.catch((errorMessage) => {
snackError({
messageTxt: errorMessage,
snackErrorWithBackendFallback(errorMessage, snackError, intl, {
headerId: 'contingencyListEditingError',
headerValues: { name },
});
Expand Down
23 changes: 11 additions & 12 deletions ...components/dialogs/contingency-list/filter-based/contingency-list-filter-based-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useSelector } from 'react-redux';
import { useCallback, useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { UUID } from 'crypto';
import { ObjectSchema } from 'yup';
import ContingencyListFilterBasedForm from './contingency-list-filter-based-form';
Expand All @@ -26,7 +27,7 @@ import {
getContingencyList,
saveFilterBasedContingencyList,
} from '../../../../utils/rest-api';
import { handleNotAllowedError } from '../../../utils/rest-errors';
import { CustomError, handleNotAllowedError, snackErrorWithBackendFallback } from '../../../utils/rest-errors';
import { ContingencyListType } from '../../../../utils/elementType';
import { getFilterBasedFormDataFromFetchedElement } from '../contingency-list-utils';
import { FilterBasedContingencyList } from '../../../../utils/contingency-list.type';
Expand Down Expand Up @@ -71,6 +72,7 @@ export default function FilterBasedContingencyListDialog({
const activeDirectory = useSelector((state: AppState) => state.activeDirectory);
const { snackError } = useSnackMessage();
const [isFetching, setIsFetching] = useState(!!id);
const intl = useIntl();

const methods = useForm<ContingencyListFilterBasedFormData>({
defaultValues: emptyFormData(),
Expand All @@ -93,15 +95,14 @@ export default function FilterBasedContingencyListDialog({
);
reset({ ...formData });
})
.catch((error) => {
snackError({
messageTxt: error.message,
.catch((error: unknown) => {
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'cannotRetrieveContingencyList',
});
})
.finally(() => setIsFetching(false));
}
}, [id, name, reset, snackError, description]);
}, [id, name, reset, snackError, description, intl]);

const closeAndClear = useCallback(() => {
reset(emptyFormData());
Expand All @@ -126,12 +127,11 @@ export default function FilterBasedContingencyListDialog({
filterBaseContingencyList
)
.then(() => closeAndClear())
.catch((error) => {
.catch((error: CustomError) => {
if (handleNotAllowedError(error, snackError)) {
return;
}
snackError({
messageTxt: error.message,
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'contingencyListEditingError',
headerValues: { name: data[FieldConstants.NAME] },
});
Expand All @@ -144,19 +144,18 @@ export default function FilterBasedContingencyListDialog({
activeDirectory
)
.then(() => closeAndClear())
.catch((error) => {
.catch((error: CustomError) => {
if (handleNotAllowedError(error, snackError)) {
return;
}
snackError({
messageTxt: error.message,
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'contingencyListCreationError',
headerValues: { name: data[FieldConstants.NAME] },
});
});
}
},
[activeDirectory, closeAndClear, id, snackError]
[activeDirectory, closeAndClear, id, snackError, intl]
);

const nameError = errors[FieldConstants.NAME];
Expand Down
6 changes: 3 additions & 3 deletions src/components/dialogs/contingency-list/filter-based/contingency-list-filter-based-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
FilterAttributes,
IdentifiableAttributes,
} from '../../../../utils/contingency-list.type';
import { snackErrorWithBackendFallback } from '../../../utils/rest-errors';

const separator = '/';
const defaultDef: ColDef = {
Expand Down Expand Up @@ -131,9 +132,8 @@ export default function ContingencyListFilterBasedForm() {
}
setRowsData(attributes);
})
.catch((error) =>
snackError({
messageTxt: error.message,
.catch((error: unknown) =>
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'cannotComputeContingencyList',
})
)
Expand Down
12 changes: 8 additions & 4 deletions src/components/dialogs/create-study-dialog/create-study-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ import {
getCreateStudyDialogFormDefaultValues,
} from './create-study-dialog-utils';
import PrefilledNameInput from '../commons/prefilled-name-input';
import { handleMaxElementsExceededError, handleNotAllowedError } from '../../utils/rest-errors';
import {
CustomError,
handleMaxElementsExceededError,
handleNotAllowedError,
snackErrorWithBackendFallback,
} from '../../utils/rest-errors';
import { AppState, UploadingElement } from '../../../redux/types';

const STRING_LIST = 'STRING_LIST';
Expand Down Expand Up @@ -210,16 +215,15 @@ export default function CreateStudyDialog({ open, onClose, providedExistingCase
dispatch(setActiveDirectory(selectedDirectory?.elementUuid));
onClose();
})
.catch((error) => {
.catch((error: CustomError) => {
dispatch(removeUploadingElement(uploadingStudy));
if (handleMaxElementsExceededError(error, snackError)) {
return;
}
if (handleNotAllowedError(error, snackError)) {
return;
}
snackError({
messageTxt: error.message,
snackErrorWithBackendFallback(error, snackError, intl, {
headerId: 'studyCreationError',
headerValues: {
studyName,
Expand Down
Loading
Loading