🚧 [#4908] Add form variable options to form variable select component

open-formulieren · Dec 19, 2024 · 588d883 · 588d883
1 parent 0e9c9e2
commit 588d883
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {FormContext} from 'components/admin/form_design/Context';
 import Fieldset from 'components/admin/forms/Fieldset';
 import ModalOptionsConfiguration from 'components/admin/forms/ModalOptionsConfiguration';
 import {
@@ -22,11 +23,16 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => {
   const validationErrors = useContext(ValidationErrorContext);
   const relevantErrors = filterErrors(name, validationErrors);
 
-  const formVariableOptions = [
-    {value: "1", label: "One"},
-    {value: "2", label: "Two"},
-    {value: "3", label: "Three"},
-  ]
+  // Get form variables
+  const formContext = useContext(FormContext)
+  const formVariables = formContext.formVariables ?? [];
+  const staticVariables = formContext.staticVariables ?? [];
+  const allFormVariables = staticVariables.concat(formVariables);
+
+  const formVariableOptions = [];
+  for (const formVariable of allFormVariables) {
+    formVariableOptions.push({value: formVariable.key, label: formVariable.name})
+  }
 
   return (
     <ModalOptionsConfiguration
@@ -39,7 +45,7 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => {
           defaultMessage="Plugin configuration: JSON"
         />
       }
-      initialFormData={{relativeApiEndpoint: '', ...formData}}
+      initialFormData={{...formData}}
       onSubmit={values => onChange({formData: values})}
       modalSize="small"
     >
@@ -59,6 +65,8 @@ JSONOptionsForm.propTypes = {
   label: PropTypes.node.isRequired,
   formData: PropTypes.shape({
     relativeApiEndpoint: PropTypes.string,
+    // TODO-4098: might need to rename this to selectedFormVariables to avoid confusion or even
+    //  naming conflicts
     formVariables: PropTypes.arrayOf(PropTypes.string),
   }),
   onChange: PropTypes.func.isRequired,

diff --git a/...penforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js b/...penforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js
@@ -6,11 +6,11 @@ import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
 import ReactSelect from 'components/admin/forms/ReactSelect';
 
+// TODO-4908: where to add already selected form variables from the variables table?
 const FormVariablesSelect = ({options}) => {
   const [fieldProps, , fieldHelpers] = useField('formVariables');
   const {setValue} = fieldHelpers;
 
-  // TODO-4098: what does this do?
   const values = [];
   if (fieldProps.value && fieldProps.value.length) {
     fieldProps.value.forEach(item => {
@@ -38,7 +38,6 @@ const FormVariablesSelect = ({options}) => {
           isMulti
           required
           value={values}
-          // TODO-4098: what does this do?
           onChange={newValue => {
             setValue(newValue.map(item => item.value));
           }}