feat: error handling mechanism (MAPCO-11618, MAPCO-11199)

src/common/components/grid/grid.tsx

@@ -234,7 +234,7 @@ export const GridComponent: React.FC<GridComponentProps> = (props) => {
     if (!row) {
       handleFocusError?.({
         code: 'warning.row-not-found',
-        message: '',
+        errText: '',
         level: 'warning',
       });
       setIsRowFound?.(false);

src/discrete-layer/components/catalog-tree/catalog-tree.tsx

@@ -16,10 +16,7 @@ import { Loading } from '../../../common/components/tree/statuses/loading';
 import { getTextStyle, isUnpublished } from '../../../common/helpers/style';
 import { isValidLayerMetadata } from '../../../common/helpers/layer-url';
 import { LinkType } from '../../../common/models/link-type.enum';
-import {
-  getResponseErrorMesssage,
-  getResponseErrorURL,
-} from '../../../common/helpers/server-error';
+import { getResponseErrorMesssage, getResponseErrorURL } from '../helpers/errorUtils';
 import {
   CRUDAction,
   getActionsWithDisable,

src/discrete-layer/components/dialogs/file-picker.dialog.tsx

@@ -6,7 +6,6 @@ import { observer } from 'mobx-react';
 import { DialogContent } from '@material-ui/core';
 import { Button, Dialog, DialogActions, DialogTitle, IconButton } from '@map-colonies/react-core';
 import { Box, FileActionData, FileData, FilePickerActions } from '@map-colonies/react-components';
-import { GraphQLError } from '../../../common/components/error/graphql.error-presentor';
 import {
   FilePickerComponent,
   FilePickerComponentHandle,
@@ -22,6 +21,8 @@ import {
   useStore,
 } from '../../models';
 import { isMultiSelection } from '../layer-details/utils';
+import { formatError, IGraphqlError } from '../helpers/errorUtils';
+import { ErrorPresentor } from '../error/error-presentor';
 
 import './file-picker.dialog.css';
 
@@ -60,7 +61,7 @@ export const FilePickerDialog: React.FC<FilePickerDialogProps> = observer(
     const [path, setPath] = useState<string>(
       getSuffixFromFolderChain(currentSelection.folderChain)
     );
-    const [graphQLError, setGraphQLError] = useState<Record<string, unknown> | null>(null);
+    const [graphQLError, setGraphQLError] = useState<IGraphqlError | null>(null);
     const [selection, setSelection] = useState<Selection>(currentSelection);
     const store = useStore();
     const queryDirectory = useCallback(() => useQuery<{ getDirectory: FileModelType[] }>(), [])();
@@ -211,7 +212,7 @@ export const FilePickerDialog: React.FC<FilePickerDialogProps> = observer(
           </DialogContent>
           <DialogActions>
             <Box className="messages">
-              <GraphQLError error={graphQLError ?? {}} />
+              <ErrorPresentor errors={formatError(intl, graphQLError, 'error')} />
             </Box>
             <Box className="buttons">
               <Button

src/common/components/error/error-presentor.css → src/discrete-layer/components/error/error-presentor.css

@@ -1,5 +1,4 @@
 .errorContainer {
-  flex-grow: 1;
   display: flex;
   color: var(--mdc-theme-gc-error-high);
   align-items: flex-start;
@@ -13,6 +12,7 @@
 .errorsList {
   list-style: circle;
   margin: 0;
+  padding-left: 32px;
   height: 60px;
   min-width: 264px;
   overflow-y: auto;
@@ -25,3 +25,7 @@ body[dir='rtl'] .errorsList {
 body[dir='rtl'] .errorContainer {
   flex-direction: row-reverse;
 }
+
+.errorsList li {
+  text-align: start;
+}