From b8e1060313a43dec70df7f4817b363cff12ff346 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Tue, 31 Dec 2024 16:42:23 +0100 Subject: [PATCH] :children_crossing: [#4969] Organize configuration fields on base tab in fieldsets In an attempt to declutter, related fields are now grouped in fieldsets and especially fields that are optional are collapsed by default. The fieldsets report a status where relevant to get a quick overview, e.g. showing that no auth is configured or that the form is indeed currently active (without being in maintenance mode). --- src/openforms/js/compiled-lang/en.json | 72 ++ src/openforms/js/compiled-lang/nl.json | 72 ++ .../admin/form_design/AuthPluginField.js | 1 - .../form_design/FormConfigurationFields.js | 679 +++++++++++------- src/openforms/js/lang/en.json | 30 + src/openforms/js/lang/nl.json | 30 + 6 files changed, 634 insertions(+), 250 deletions(-) diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json index 3198e88035..a70a26ba2e 100644 --- a/src/openforms/js/compiled-lang/en.json +++ b/src/openforms/js/compiled-lang/en.json @@ -2939,6 +2939,12 @@ "value": "Number of years. Empty values are ignored." } ], + "PtFAWx": [ + { + "type": 0, + "value": "Presentation / appearance" + } + ], "PtZ96W": [ { "type": 0, @@ -3395,6 +3401,30 @@ "value": "Variables Mapping" } ], + "U3g0MU": [ + { + "type": 0, + "value": "Authentication " + }, + { + "options": { + "false": { + "value": [ + { + "type": 0, + "value": "(status: none configured)" + } + ] + }, + "other": { + "value": [ + ] + } + }, + "type": 5, + "value": "hasAuth" + } + ], "UCGSib": [ { "type": 0, @@ -3623,6 +3653,12 @@ "value": "Date/time" } ], + "WHxJpx": [ + { + "type": 0, + "value": "The configuration options here control if the user can submit the form on the overview page and what the requirements are to do so." + } + ], "WNPDeM": [ { "type": 0, @@ -4523,6 +4559,12 @@ "value": "Advanced options" } ], + "eNSJ0f": [ + { + "type": 0, + "value": "Features" + } + ], "eO6MNT": [ { "type": 0, @@ -5177,6 +5219,30 @@ "value": "Folder path" } ], + "jtJACV": [ + { + "type": 0, + "value": "Availability " + }, + { + "options": { + "other": { + "value": [ + ] + }, + "true": { + "value": [ + { + "type": 0, + "value": "(status: publicly available)" + } + ] + } + }, + "type": 5, + "value": "isAvailable" + } + ], "jtWzSW": [ { "type": 0, @@ -6785,6 +6851,12 @@ "value": "Plugin configuration: Ogone legacy" } ], + "zqnTBZ": [ + { + "type": 0, + "value": "Submission settings" + } + ], "zwOwrD": [ { "type": 0, diff --git a/src/openforms/js/compiled-lang/nl.json b/src/openforms/js/compiled-lang/nl.json index 14d5410c16..a9bf200d70 100644 --- a/src/openforms/js/compiled-lang/nl.json +++ b/src/openforms/js/compiled-lang/nl.json @@ -2956,6 +2956,12 @@ "value": "Aantal jaren. Lege waarden worden genegeerd." } ], + "PtFAWx": [ + { + "type": 0, + "value": "Weergave/layout" + } + ], "PtZ96W": [ { "type": 0, @@ -3408,6 +3414,30 @@ "value": "Variabelekoppelingen" } ], + "U3g0MU": [ + { + "type": 0, + "value": "Inloggen " + }, + { + "options": { + "false": { + "value": [ + { + "type": 0, + "value": "(status: geen methoden ingesteld)" + } + ] + }, + "other": { + "value": [ + ] + } + }, + "type": 5, + "value": "hasAuth" + } + ], "UCGSib": [ { "type": 0, @@ -3636,6 +3666,12 @@ "value": "Datum/tijd" } ], + "WHxJpx": [ + { + "type": 0, + "value": "Deze instellingen bepalen of een gebruiker op de overzichtspagina de inzending kan bevestigen en wat ervoor nodig is om dit te kunnen doen." + } + ], "WNPDeM": [ { "type": 0, @@ -4541,6 +4577,12 @@ "value": "Geavanceerde opties" } ], + "eNSJ0f": [ + { + "type": 0, + "value": "Functionaliteiten" + } + ], "eO6MNT": [ { "type": 0, @@ -5195,6 +5237,30 @@ "value": "Maplocatie" } ], + "jtJACV": [ + { + "type": 0, + "value": "Beschikbaarheid " + }, + { + "options": { + "other": { + "value": [ + ] + }, + "true": { + "value": [ + { + "type": 0, + "value": "(status: publiek benaderbaar)" + } + ] + } + }, + "type": 5, + "value": "isAvailable" + } + ], "jtWzSW": [ { "type": 0, @@ -6803,6 +6869,12 @@ "value": "Plugin-instellingen: Ogone legacy" } ], + "zqnTBZ": [ + { + "type": 0, + "value": "Inzending-instellingen" + } + ], "zwOwrD": [ { "type": 0, diff --git a/src/openforms/js/components/admin/form_design/AuthPluginField.js b/src/openforms/js/components/admin/form_design/AuthPluginField.js index 99b454a13b..d772152b76 100644 --- a/src/openforms/js/components/admin/form_design/AuthPluginField.js +++ b/src/openforms/js/components/admin/form_design/AuthPluginField.js @@ -49,7 +49,6 @@ const AuthPluginField = ({availableAuthPlugins, selectedAuthPlugins, onChange, e /> } errors={errors} - required >
{authCheckboxes}
diff --git a/src/openforms/js/components/admin/form_design/FormConfigurationFields.js b/src/openforms/js/components/admin/form_design/FormConfigurationFields.js index 221600dbae..69cfb8e1fe 100644 --- a/src/openforms/js/components/admin/form_design/FormConfigurationFields.js +++ b/src/openforms/js/components/admin/form_design/FormConfigurationFields.js @@ -80,127 +80,200 @@ const getThemeChoices = available => { return choices; }; -/** - * Component to render the metadata admin form for an Open Forms form. - */ -const FormConfigurationFields = ({ - form, - onChange, - availableAuthPlugins, - availableThemes, - selectedAuthPlugins, - onAuthPluginChange, - availableCategories, -}) => { - const { - uuid, - internalName, - slug, - showProgressIndicator, - showSummaryProgress, - active, - category, - theme, - isDeleted, - activateOn, - deactivateOn, - maintenanceMode, - translationEnabled, - submissionAllowed, - suspensionAllowed, - askPrivacyConsent, - askStatementOfTruth, - appointmentOptions, - } = form; - - const intl = useIntl(); - +const AvailabilityFields = ({active, activateOn, deactivateOn, maintenanceMode, onChange}) => { const onCheckboxChange = (event, currentValue) => { const { target: {name}, } = event; onChange({target: {name, value: !currentValue}}); }; - - const isAppointment = appointmentOptions?.isAppointment ?? false; - return (
} + collapsible + initialCollapsed={active} > - } + } helpText={ } - required - > - - + checked={active} + onChange={event => onCheckboxChange(event, active)} + /> + } helpText={ } > - + } + name="form.deactivateOn" + label={ + + } helpText={ } - required > - + - - + } helpText={ } - > - + + + )} } helpText={ } > - + - - - } - helpText={ - - } - checked={isDeleted} - onChange={event => onCheckboxChange(event, isDeleted)} +
+ ); +}; + +const FeatureFields = ({isAppointment, translationEnabled, suspensionAllowed, onChange}) => { + const onCheckboxChange = (event, currentValue) => { + const { + target: {name}, + } = event; + onChange({target: {name, value: !currentValue}}); + }; + return ( +
- + } + > } helpText={ } - checked={maintenanceMode} - onChange={event => onCheckboxChange(event, maintenanceMode)} + checked={isAppointment} + onChange={event => onCheckboxChange(event, isAppointment)} /> + onCheckboxChange(event, translationEnabled)} /> - - - } - helpText={ - - } - > - { + const { + uuid, + internalName, + slug, + showProgressIndicator, + showSummaryProgress, + active, + category, + theme, + isDeleted, + activateOn, + deactivateOn, + maintenanceMode, + translationEnabled, + submissionAllowed, + suspensionAllowed, + askPrivacyConsent, + askStatementOfTruth, + appointmentOptions, + } = form; + + const onCheckboxChange = (event, currentValue) => { + const { + target: {name}, + } = event; + onChange({target: {name, value: !currentValue}}); + }; + + const isAppointment = appointmentOptions?.isAppointment ?? false; + + return ( + <> +
- - - - - } - helpText={ - + + } + helpText={ + + } + required + > + + + + + + } + helpText={ + + } + > + + + + + } + helpText={ + + } + required + > + + + + + + + } + helpText={ + + } + > + + + + + + } + helpText={ + + } + checked={isDeleted} + onChange={event => onCheckboxChange(event, isDeleted)} /> - - + +
- - - } - helpText={ - - } - checked={isAppointment} - onChange={event => onCheckboxChange(event, appointmentOptions?.isAppointment)} + + + {!isAppointment && ( + - -
+ )} + + + + + + + ); }; diff --git a/src/openforms/js/lang/en.json b/src/openforms/js/lang/en.json index e19407ac3d..a8f65d70c0 100644 --- a/src/openforms/js/lang/en.json +++ b/src/openforms/js/lang/en.json @@ -1444,6 +1444,11 @@ "description": "StUF-ZDS registration options modal title", "originalDefault": "Plugin configuration: StUF-ZDS" }, + "PtFAWx": { + "defaultMessage": "Presentation / appearance", + "description": "Form presentation fieldset title", + "originalDefault": "Presentation / appearance" + }, "PtZ96W": { "defaultMessage": "Alias", "description": "Manage process vars alias column title", @@ -1664,6 +1669,11 @@ "description": "Objects API registration backend options 'Variables Mapping' tab label", "originalDefault": "Variables Mapping" }, + "U3g0MU": { + "defaultMessage": "Authentication {hasAuth, select, false {(status: none configured)} other {}}", + "description": "Form authentication fieldset title", + "originalDefault": "Authentication {hasAuth, select, false {(status: none configured)} other {}}" + }, "UKTqb8": { "defaultMessage": "All Submissions Removal Limit", "description": "All Submissions Removal Limit field label", @@ -1719,6 +1729,11 @@ "description": "Date/time column header", "originalDefault": "Date/time" }, + "WHxJpx": { + "defaultMessage": "The configuration options here control if the user can submit the form on the overview page and what the requirements are to do so.", + "description": "Form submission settings description", + "originalDefault": "The configuration options here control if the user can submit the form on the overview page and what the requirements are to do so." + }, "WNPDeM": { "defaultMessage": "Catalogue", "description": "ZGW APIs registration options 'catalogue' label", @@ -2114,6 +2129,11 @@ "description": "Logic rule advanced options icon title", "originalDefault": "Advanced options" }, + "eNSJ0f": { + "defaultMessage": "Features", + "description": "Form feature fields fieldset title", + "originalDefault": "Features" + }, "eO6MNT": { "defaultMessage": "Zds zaaktype status code", "description": "StUF-ZDS registration options 'zdsZaaktypeStatusCode' label", @@ -2444,6 +2464,11 @@ "description": "MS Graph registration options 'folderPath' label", "originalDefault": "Folder path" }, + "jtJACV": { + "defaultMessage": "Availability {isAvailable, select, true {(status: publicly available)} other {}}", + "description": "Form availability fieldset title", + "originalDefault": "Availability {isAvailable, select, true {(status: publicly available)} other {}}" + }, "jy1jTd": { "defaultMessage": "{numErrors, plural, one {There is a validation error.} other {There are {numErrors} validation errors.} }", "description": "Registration validation errors icon next to button to configure options", @@ -3154,6 +3179,11 @@ "description": "Ogone legacy options modal title", "originalDefault": "Plugin configuration: Ogone legacy" }, + "zqnTBZ": { + "defaultMessage": "Submission settings", + "description": "Form submission settings fieldset title", + "originalDefault": "Submission settings" + }, "zwOwrD": { "defaultMessage": "Select a property from the object type", "description": "Prefill / Objects API: accessible label for object type property selection", diff --git a/src/openforms/js/lang/nl.json b/src/openforms/js/lang/nl.json index a8c242c2b6..5367350b5e 100644 --- a/src/openforms/js/lang/nl.json +++ b/src/openforms/js/lang/nl.json @@ -1458,6 +1458,11 @@ "description": "StUF-ZDS registration options modal title", "originalDefault": "Plugin configuration: StUF-ZDS" }, + "PtFAWx": { + "defaultMessage": "Weergave/layout", + "description": "Form presentation fieldset title", + "originalDefault": "Presentation / appearance" + }, "PtZ96W": { "defaultMessage": "Alias", "description": "Manage process vars alias column title", @@ -1679,6 +1684,11 @@ "description": "Objects API registration backend options 'Variables Mapping' tab label", "originalDefault": "Variables Mapping" }, + "U3g0MU": { + "defaultMessage": "Inloggen {hasAuth, select, false {(status: geen methoden ingesteld)} other {}}", + "description": "Form authentication fieldset title", + "originalDefault": "Authentication {hasAuth, select, false {(status: none configured)} other {}}" + }, "UKTqb8": { "defaultMessage": "Bewaartermijn van inzendingen", "description": "All Submissions Removal Limit field label", @@ -1735,6 +1745,11 @@ "description": "Date/time column header", "originalDefault": "Date/time" }, + "WHxJpx": { + "defaultMessage": "Deze instellingen bepalen of een gebruiker op de overzichtspagina de inzending kan bevestigen en wat ervoor nodig is om dit te kunnen doen.", + "description": "Form submission settings description", + "originalDefault": "The configuration options here control if the user can submit the form on the overview page and what the requirements are to do so." + }, "WNPDeM": { "defaultMessage": "Catalogus", "description": "ZGW APIs registration options 'catalogue' label", @@ -2134,6 +2149,11 @@ "description": "Logic rule advanced options icon title", "originalDefault": "Advanced options" }, + "eNSJ0f": { + "defaultMessage": "Functionaliteiten", + "description": "Form feature fields fieldset title", + "originalDefault": "Features" + }, "eO6MNT": { "defaultMessage": "Zaakstatuscode", "description": "StUF-ZDS registration options 'zdsZaaktypeStatusCode' label", @@ -2465,6 +2485,11 @@ "description": "MS Graph registration options 'folderPath' label", "originalDefault": "Folder path" }, + "jtJACV": { + "defaultMessage": "Beschikbaarheid {isAvailable, select, true {(status: publiek benaderbaar)} other {}}", + "description": "Form availability fieldset title", + "originalDefault": "Availability {isAvailable, select, true {(status: publicly available)} other {}}" + }, "jy1jTd": { "defaultMessage": "{numErrors, plural, one {Er is een validatiefout.} other {Er zijn {numErrors} validatefouten.} }", "description": "Registration validation errors icon next to button to configure options", @@ -3176,6 +3201,11 @@ "description": "Ogone legacy options modal title", "originalDefault": "Plugin configuration: Ogone legacy" }, + "zqnTBZ": { + "defaultMessage": "Inzending-instellingen", + "description": "Form submission settings fieldset title", + "originalDefault": "Submission settings" + }, "zwOwrD": { "defaultMessage": "Selecteer een attribuut uit het objecttype", "description": "Prefill / Objects API: accessible label for object type property selection",