🥅 [#3855] Catch errors when DMN plugin is not working

open-formulieren · Feb 21, 2024 · 212a06b · 212a06b
1 parent e34a127
commit 212a06b
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 38 deletions.
diff --git a/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.js b/src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.js
@@ -11,6 +11,7 @@ import {
 } from 'components/admin/form_design/constants';
 import Field from 'components/admin/forms/Field';
 import Select from 'components/admin/forms/Select';
+import ErrorBoundary from 'components/errors/ErrorBoundary';
 import {get} from 'utils/fetch';
 
 import VariableMapping from './VariableMapping';
@@ -28,7 +29,7 @@ const DecisionDefinitionIdField = () => {
   const [field] = useField('decisionDefinitionId');
   const [decisionDefinitions, setDecisionDefinitions] = useState([]);
 
-  useAsync(async () => {
+  const {error} = useAsync(async () => {
     if (!values.pluginId) {
       setFieldValue('decisionDefinitionId', '');
       setDecisionDefinitions([]);
@@ -51,6 +52,8 @@ const DecisionDefinitionIdField = () => {
     }
   }, [values.pluginId, setFieldValue]);
 
+  if (error) throw error;
+
   return (
     <Field
       name="decisionDefinitionId"
@@ -79,14 +82,14 @@ const DecisionDefinitionIdField = () => {
 
 const DecisionDefinitionVersionField = () => {
   const {
-    values: {pluginId, decisionDefinitionId},
+    values: {pluginId, decisionDefinitionId, decisionDefinitionVersion},
     setFieldValue,
     getFieldProps,
   } = useFormikContext();
   const [field] = useField('decisionDefinitionVersion');
   const [decisionDefinitionVersions, setDecisionDefinitionVersions] = useState([]);
 
-  useAsync(async () => {
+  const {error} = useAsync(async () => {
     if (!pluginId || !decisionDefinitionId) {
       setFieldValue('decisionDefinitionVersion', '');
       setDecisionDefinitionVersions([]);
@@ -104,13 +107,15 @@ const DecisionDefinitionVersionField = () => {
     // If decisionDefinitionId has changed, reset the value of the definition version if the new decision definition
     // does not have that version
     if (
-      values.decisionDefinitionVersion !== '' &&
-      !versionChoices.find(item => item[0] === values.decisionDefinitionVersion)
+      decisionDefinitionVersion !== '' &&
+      !versionChoices.find(item => item[0] === decisionDefinitionVersion)
     ) {
       setFieldValue('decisionDefinitionVersion', '');
     }
   }, [pluginId, decisionDefinitionId, setFieldValue]);
 
+  if (error) throw error;
+
   return (
     <Field
       name="decisionDefinitionVersion"
@@ -155,7 +160,7 @@ const DMNActionConfig = ({initialValues, onSave}) => {
         {formik => (
           <Form>
             <fieldset className="aligned">
-              <div className="form-row">
+              <div className="form-row form-row--no-bottom-line">
                 <Field
                   name="pluginId"
                   htmlFor="pluginId"
@@ -177,43 +182,54 @@ const DMNActionConfig = ({initialValues, onSave}) => {
                   />
                 </Field>
               </div>
-              <div className="form-row">
-                <DecisionDefinitionIdField />
-              </div>
-              <div className="form-row">
-                <DecisionDefinitionVersionField />
-              </div>
             </fieldset>
 
-            <div className="mappings">
-              <div className="mappings__mapping">
-                <h3 className="react-modal__title">
-                  <FormattedMessage
-                    defaultMessage="Input mapping"
-                    description="Input mapping title"
-                  />
-                </h3>
-                <VariableMapping
-                  mappingName="inputMapping"
-                  values={formik.values}
-                  formVariables={formVariables}
+            <ErrorBoundary
+              errorMessage={
+                <FormattedMessage
+                  description="Admin error for API error when configuring Camunda actions"
+                  defaultMessage="Could not retrieve the decision definitions IDs/versions. Is the selected DMN plugin running and properly configured?"
                 />
-              </div>
-              <div className="mappings__mapping">
-                <h3 className="react-modal__title">
-                  <FormattedMessage
-                    defaultMessage="Output mapping"
-                    description="Output mapping title"
+              }
+            >
+              <fieldset className="aligned">
+                <div className="form-row">
+                  <DecisionDefinitionIdField />
+                </div>
+                <div className="form-row">
+                  <DecisionDefinitionVersionField />
+                </div>
+              </fieldset>
+
+              <div className="mappings">
+                <div className="mappings__mapping">
+                  <h3 className="react-modal__title">
+                    <FormattedMessage
+                      defaultMessage="Input mapping"
+                      description="Input mapping title"
+                    />
+                  </h3>
+                  <VariableMapping
+                    mappingName="inputMapping"
+                    values={formik.values}
+                    formVariables={formVariables}
                   />
-                </h3>
-                <VariableMapping
-                  mappingName="outputMapping"
-                  values={formik.values}
-                  formVariables={formVariables}
-                />
+                </div>
+                <div className="mappings__mapping">
+                  <h3 className="react-modal__title">
+                    <FormattedMessage
+                      defaultMessage="Output mapping"
+                      description="Output mapping title"
+                    />
+                  </h3>
+                  <VariableMapping
+                    mappingName="outputMapping"
+                    values={formik.values}
+                    formVariables={formVariables}
+                  />
+                </div>
               </div>
-            </div>
-
+            </ErrorBoundary>
             <div className="submit-row">
               <input type="submit" name="_save" value="Save" />
             </div>

diff --git a/src/openforms/scss/components/builder/_builder.scss b/src/openforms/scss/components/builder/_builder.scss
@@ -1,3 +1,5 @@
+@use 'microscope-sass/lib/bem';
+
 @import '@fortawesome/fontawesome-free/scss/fontawesome';
 @import '@fortawesome/fontawesome-free/scss/v4-shims.scss';
 @import '@fortawesome/fontawesome-free/scss/brands';
@@ -267,4 +269,8 @@ div.flatpickr-calendar.open {
   .form-builder__container {
     color: var(--body-fg);
   }
+
+  @include bem.modifier('no-bottom-line') {
+    border-bottom: 0;
+  }
 }