From be2e20f2e6432e54689134942559489d42e2b731 Mon Sep 17 00:00:00 2001
From: Steven Bal <steven@maykinmedia.nl>
Date: Tue, 27 Aug 2024 16:56:20 +0200
Subject: [PATCH] :sparkles: [#4608] More changes to bring into line with
 backend

---
 .../variables/VariablesEditor.stories.js      |  8 ++--
 .../prefill/PrefillConfigurationForm.js       | 39 ++++++++++---------
 .../variables/prefill/PrefillSummary.js       |  2 +-
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js b/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js
index 50296798fb..174088b6bf 100644
--- a/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js
+++ b/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js
@@ -72,7 +72,7 @@ const VARIABLES = [
     name: 'User defined',
     key: 'userDefined',
     source: 'user_defined',
-    prefillPlugin: 'objects',
+    prefillPlugin: 'objects_api',
     prefillAttribute: '',
     prefillIdentifierRole: 'main',
     dataType: 'array',
@@ -134,7 +134,7 @@ export default {
       {id: 'stuf-bg', label: 'StUF-BG'},
       {id: 'haalcentraal', label: 'BRP Personen (HaalCentraal)'},
       {
-        id: 'objects',
+        id: 'objects_api',
         label: 'Objects API',
         extra: {
           apiGroups: [
@@ -162,7 +162,7 @@ export default {
               {id: 'bsn', label: 'BSN'},
               {id: 'verblijfsAdres.postcode', label: 'Verblijfsadres > Postcode'},
             ],
-            objects: [
+            objects_api: [
               {id: 'street', label: 'Address > street'},
               {id: 'firstName', label: 'First name'},
               {id: 'lastName', label: 'Last name'},
@@ -584,7 +584,7 @@ export const ConfigurePrefillObjectsAPI = {
     const pluginDropdown = await screen.findByLabelText('Plugin');
     expect(pluginDropdown).toBeVisible();
 
-    await userEvent.selectOptions(pluginDropdown, 'objects');
+    await userEvent.selectOptions(pluginDropdown, 'objects_api');
 
     const variableSelect = await screen.findByLabelText('Formuliervariabele');
     await expect(variableSelect.value).toBe('formioComponent');
diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js
index ea31fedb8a..f824490e0b 100644
--- a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js
+++ b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js
@@ -2,6 +2,7 @@ import {Formik, useField, useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
 import React, {useContext, useEffect, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
+import useAsync from 'react-use/esm/useAsync';
 import useUpdateEffect from 'react-use/esm/useUpdateEffect';
 
 import {FormContext} from 'components/admin/form_design/Context';
@@ -33,26 +34,27 @@ const PrefillConfigurationForm = ({
   },
   errors,
 }) => {
-  const [choices, setChoices] = useState([]);
+  // const [choices, setChoices] = useState([]);
+
+  // Load the possible prefill attributes
+  // XXX: this would benefit from client-side caching
+  const {
+    loading,
+    value = [],
+    error,
+  } = useAsync(async () => {
+    if (!plugin) return [];
 
-  // XXX: we're not using formik's initialErrors yet because it doesn't support arrays of
-  // error messages, which our backend *can* produce.
-  // Taken from https://react.dev/reference/react/useEffect#fetching-data-with-effects
-  useEffect(() => {
-    let ignore = false;
-    setChoices(null);
     const endpoint = `/api/v2/prefill/plugins/${plugin}/attributes`;
     // XXX: clean up error handling here at some point...
-    get(endpoint).then(response => {
-      if (!response.ok) throw response.data;
-      if (!ignore) setChoices(response.data.map(attribute => [attribute.id, attribute.label]));
-    });
-    return () => {
-      ignore = true;
-    };
-  }, []);
+    const response = await get(endpoint);
+    if (!response.ok) throw response.data;
+    return response.data.map(attribute => [attribute.id, attribute.label]);
+  }, [plugin]);
 
-  const prefillAttributes = choices || LOADING_OPTION;
+  // throw errors to the nearest error boundary
+  if (error) throw error;
+  const prefillAttributes = loading ? LOADING_OPTION : value;
 
   return (
     <Formik
@@ -70,7 +72,7 @@ const PrefillConfigurationForm = ({
     >
       {({handleSubmit, values}) => (
         <>
-          {values.plugin === 'objects' ? (
+          {values.plugin === 'objects_api' ? (
             <ObjectsAPIPrefillFields
               prefillAttributes={prefillAttributes}
               values={values}
@@ -207,8 +209,9 @@ const ObjectsAPIPrefillFields = ({prefillAttributes, values, errors}) => {
     plugins: {availablePrefillPlugins},
   } = useContext(FormContext);
   const {setFieldValue} = useFormikContext();
-  const objectsPlugin = availablePrefillPlugins.find(elem => elem.id === 'objects');
+  const objectsPlugin = availablePrefillPlugins.find(elem => elem.id === 'objects_api');
   const apiGroups = objectsPlugin.extra.apiGroups;
+  console.log(values);
 
   const prefillAttributeLabel = intl.formatMessage({
     description: 'Accessible label for prefill attribute dropdown',
diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillSummary.js b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillSummary.js
index 792d11613b..9ed029eac8 100644
--- a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillSummary.js
+++ b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillSummary.js
@@ -14,7 +14,7 @@ const PrefillSummary = ({
   plugin = '',
   attribute = '',
   identifierRole = 'main',
-  prefillOptions = {},
+  prefillOptions = undefined,
   onChange = undefined,
   errors = {},
 }) => {