Show errors 500 and 400 on preview

app/src/features/Preview/Preview.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 
 import { IResource } from "@ahryman40k/ts-fhir-types/lib/R4";
 import { Icon } from "@blueprintjs/core";
@@ -17,7 +17,9 @@ import {
   useMediaQuery,
 } from "@material-ui/core";
 import Alert, { Color } from "@material-ui/lab/Alert";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import clsx from "clsx";
+import { useSnackbar } from "notistack";
 import { useTranslation } from "react-i18next";
 import ReactJson from "react-json-view";
 import { useParams } from "react-router-dom";
@@ -29,6 +31,10 @@ import {
   useApiOwnersRetrieveQuery,
   useApiPreviewCreateMutation,
 } from "services/api/endpoints";
+import {
+  apiValidationErrorFromResponse,
+  ApiValidationError,
+} from "services/api/errors";
 import {
   ExplorationResponse,
   OperationOutcomeIssue,
@@ -136,6 +142,7 @@ const getAlertSeverityFromOperationOutcomeIssue = (
 const Preview = (): JSX.Element => {
   const classes = useStyles();
   const { t } = useTranslation();
+  const { enqueueSnackbar } = useSnackbar();
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
   const { mappingId } = useParams<{
     mappingId?: string;
@@ -144,20 +151,19 @@ const Preview = (): JSX.Element => {
   const [exploration, setExploration] = useState<
     ExplorationResponse | null | undefined
   >(undefined);
-
   const [alerts, setAlerts] = useState<
     AlertOperationOutcomeIssue[] | undefined
   >(undefined);
+
+  const [preview, setPreview] = useState<IResource | undefined>(undefined);
+
   const handleAlertClose = (index: number) => {
     if (alerts) {
       const newAlerts = [...alerts];
       newAlerts.splice(index, 1);
       setAlerts(newAlerts);
     }
   };
-
-  const [preview, setPreview] = useState<IResource | undefined>(undefined);
-
   const { data: mapping } = useApiResourcesRetrieveQuery(
     { id: mappingId ?? "" },
     { skip: !mappingId }
@@ -172,39 +178,59 @@ const Preview = (): JSX.Element => {
 
   const [apiExploreCreate] = useApiExploreCreateMutation();
 
-  useEffect(() => {
-    if (mappingId && owner && exploration === undefined) {
-      setExploration(null);
-
-      const explore = async () => {
-        try {
-          const exploration = await apiExploreCreate({
-            explorationRequestRequest: {
-              owner: owner?.name ?? "",
-              table: mapping?.primary_key_table ?? "",
-              resource_id: mappingId,
-            },
-          }).unwrap();
-          setExploration(exploration);
-        } catch (e) {
-          setAlerts([
+  const handleValidationError = useCallback(
+    (
+      errors: ApiValidationError<unknown> | undefined,
+      errorType: number | "FETCH_ERROR" | "PARSING_ERROR" | "CUSTOM_ERROR",
+      errorField: string
+    ) => {
+      if (errors) {
+        const errorEntries = Object.entries(errors);
+        errorEntries.forEach(([key, text]) => {
+          enqueueSnackbar(
+            t<string>("catchValidationErrorPrompt", {
+              query: errorField,
+              errorStatus: errorType,
+              errorKey: key,
+              errorText: text,
+            }),
             {
-              severity: "error",
-              diagnostics: e.error,
-              code: "internal",
-            },
-          ]);
-        }
-      };
-      explore();
-    }
-  }, [
-    apiExploreCreate,
-    exploration,
-    mapping?.primary_key_table,
-    mappingId,
-    owner,
-  ]);
+              variant: "error",
+            }
+          );
+        });
+      }
+    },
+    [enqueueSnackbar, t]
+  );
+
+  const handleError = useCallback(
+    (error: FetchBaseQueryError) => {
+      const typedError = error;
+      const validationError = apiValidationErrorFromResponse(typedError);
+      if (validationError)
+        handleValidationError(validationError, typedError.status, "Preview");
+      else if (typedError.status === "PARSING_ERROR") {
+        enqueueSnackbar(
+          t<string>("catchValidationErrorPrompt", {
+            query: typedError.status,
+            errorStatus: typedError.originalStatus.toString(),
+            errorText: typedError.error,
+          }),
+          { variant: "error" }
+        );
+      } else if (
+        (typedError.status === "FETCH_ERROR" ||
+          typedError.status === "CUSTOM_ERROR") &&
+        typedError.data
+      ) {
+        enqueueSnackbar(`${typedError.status} : ${typedError.data as string}`, {
+          variant: "error",
+        });
+      }
+    },
+    [enqueueSnackbar, handleValidationError, t]
+  );
 
   const [apiPreviewCreate] = useApiPreviewCreateMutation();
 
@@ -230,21 +256,46 @@ const Preview = (): JSX.Element => {
                   severity: getAlertSeverityFromOperationOutcomeIssue(error),
                 }))
               );
-          } catch (e) {
-            setAlerts([
-              {
-                severity: "error",
-                diagnostics: e.error,
-                code: "internal",
-              },
-            ]);
+          } catch (error) {
+            handleError(error as FetchBaseQueryError);
           }
         };
         previewCreate();
       }
     }
   };
 
+  // load the data for the table preview list
+  useEffect(() => {
+    if (mappingId && owner && exploration === undefined) {
+      setExploration(null);
+
+      const explore = async () => {
+        try {
+          const exploration = await apiExploreCreate({
+            explorationRequestRequest: {
+              owner: owner?.name ?? "",
+              table: mapping?.primary_key_table ?? "",
+              resource_id: mappingId,
+            },
+          }).unwrap();
+          setExploration(exploration);
+        } catch (error) {
+          handleError(error as FetchBaseQueryError);
+        }
+      };
+      explore();
+    }
+  }, [
+    apiExploreCreate,
+    exploration,
+    mapping?.primary_key_table,
+    mappingId,
+    owner,
+    handleError,
+    enqueueSnackbar,
+  ]);
+
   return (
     <Container className={classes.container} maxWidth="xl">
       <BackButton className={classes.button} />
@@ -300,7 +351,7 @@ const Preview = (): JSX.Element => {
           <Alert
             key={index}
             className={classes.alert}
-            severity={issue.severity}
+            severity={issue.severity as Color}
             onClose={() => handleAlertClose(index)}
           >
             {issue.diagnostics}
@@ -318,8 +369,8 @@ const Preview = (): JSX.Element => {
       ) : (
         <div className={classes.texts}>
           <Typography>
-            {t("clickOnAFireIcon")}{" "}
-            <Icon icon={IconNames.FLAME} className={classes.iconFlame} />{" "}
+            {t("clickOnAFireIcon")}
+            <Icon icon={IconNames.FLAME} className={classes.iconFlame} />
             {t("inOrderToPreview")}
           </Typography>
         </div>

app/src/locales/en.json

@@ -110,8 +110,8 @@
   "exportMapping": "Export mapping",
   "ETLDashboard": "ETL Dashboard",
   "newMapping": "New mapping",
-  "clickOnAFireIcon": "Click on a",
-  "inOrderToPreview": "icon in order to preview a line as a FHIR instance",
+  "clickOnAFireIcon": "Click on a ",
+  "inOrderToPreview": " icon in order to preview a line as a FHIR instance",
   "back": "Back",
   "useThisGroupIf": "Use this group if...",
   "resources": "Resources",
@@ -124,6 +124,7 @@
   "chooseExistingURI": "Choose existing URI",
   "selectSource": "Select a source",
   "selectMapping": "Select a mapping",
+  "catchErrorPrompt": "{{ query }} | Error Type : {{ errorStatus }} | {{errorKey}} : {{errorText}}",
   "second": "{{ count }} second",
   "second_plural": "{{ count }} seconds",
   "minute": "{{ count }} minute",
@@ -148,5 +149,6 @@
   "batchErrors": "⚠️ {{errors}} errors",
   "batchSuccess": "✅ Success",
   "batchCanceled": "🚫 Canceled",
-  "noAvailableResource": "No available resource"
+  "noAvailableResource": "No available resource",
+  "catchValidationErrorPrompt": "{{ query }} | Error Type : {{ errorStatus }} | {{errorKey}} {{errorText}}"
 }

app/src/services/api/generated/api.generated.ts

@@ -943,7 +943,7 @@ export type ApiConditionsDestroyApiArg = {
   id: string;
 };
 export type ApiCoreVersionRetrieveApiResponse = unknown;
-export type ApiCoreVersionRetrieveApiArg = {};
+export type ApiCoreVersionRetrieveApiArg = void;
 export type ApiCredentialsListApiResponse = /** status 200  */ Credential[];
 export type ApiCredentialsListApiArg = {
   /** Which field to use when ordering the results. */
@@ -1462,14 +1462,14 @@ export type PatchedOwnerRequest = {
   name?: string;
   credential?: string;
 };
-export type SeverityEnum = "fatal" | "error" | "warning" | "information";
 export type OperationOutcomeIssue = {
-  severity: SeverityEnum;
+  severity: string;
   code: string;
   diagnostics: string;
-  location: string[];
-  expression: string;
+  location?: string[];
+  expression?: string;
 };
+export type SeverityEnum = "fatal" | "error" | "warning" | "information";
 export type PreviewResponse = {
   instances: {
     [key: string]: any;

django/common/adapters/fhir_api.py

@@ -74,7 +74,6 @@ def create(self, resource_type: str, payload: dict, auth_token=None):
     def validate(self, resource_type: str, payload: dict, auth_token=None):
         """Calls the /<resource_type>/$validate endpoint of HAPI FHIR.
         Note that this function does not raise an exception if the status is not 2XX.
-
         Args:
             resource_type (str): the resource type
             payload (dict): the FHIR instance
@@ -93,7 +92,6 @@ def validate(self, resource_type: str, payload: dict, auth_token=None):
                 "resourceType": "OperationOutcome",
                 "issue": [{"severity": "error", "code": "", "diagnostics": response.text}],
             }
-
     def retrieve(self, resource_type, resource_id, auth_token=None):
         response = self._get(f"{self._url}/{resource_type}/{resource_id}", auth_token=auth_token)
         response.raise_for_status()

river-schema.yml

@@ -3433,6 +3433,27 @@ components:
       - id
       - name
       - schema
+    OperationOutcomeIssue:
+      type: object
+      properties:
+        severity:
+          type: string
+        code:
+          type: string
+        diagnostics:
+          type: string
+        location:
+          type: array
+          items:
+            type: string
+        expression:
+          type: string
+      required:
+      - code
+      - diagnostics
+      - expression
+      - location
+      - severity
     OwnerRequest:
       type: object
       properties:

tests/common/adapters/__snapshots__/test_fhir_api.ambr

@@ -0,0 +1,11 @@
+# name: test_inmemory_fhir_api_validate
+  <class 'dict'> {
+    'issue': <class 'list'> [
+    ],
+    'resourceType': 'OperationOutcome',
+    'text': <class 'dict'> {
+      'div': '<p> it went fine bro </p>',
+      'status': 'generated',
+    },
+  }
+---

tests/common/adapters/test_fhir_api.py

@@ -19,7 +19,6 @@ def test_inmemory_fhir_api_create():
     fhir_api.create("Patient", resource)
     assert len(fhir_api._db["Patient"]) == 2
 
-
 def test_inmemory_fhir_api_retrieve():
     resource = {"deceased": "not yet"}
 
@@ -50,7 +49,6 @@ def test_hapi_fhir_api_create_failure(status, auth_token):
     if auth_token:
         assert responses.calls[0].request.headers.get("Authorization") == f"Bearer {auth_token}"
 
-
 @responses.activate
 @pytest.mark.parametrize(
     "auth_token,response,status",

tests/river/unit/test_services.py

@@ -38,7 +38,6 @@ def test_abort(batch):
 def test_retry(batch):
     pass
 
-
 def test_preview(mimic_mapping, snapshot):
     # label: patient-resource-id
     resource_id = "cktlnp0f300300mmznmyqln70"