diff --git a/.storybook/main.js b/.storybook/main.js index cea634fe43..f4f05dbe48 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -12,6 +12,7 @@ const config = { {from: '../static/admin', to: 'static/admin'}, {from: '../static/fonts', to: 'static/fonts'}, {from: '../static/img', to: 'static/img'}, + {from: '../static/tinymce', to: 'static/tinymce'}, // required in dev mode due to style-loader usage {from: '../static/admin', to: 'admin'}, {from: '../static/fonts', to: 'fonts'}, @@ -83,6 +84,18 @@ const config = { }, }, ].filter(Boolean), + }, + // .ejs + { + test: /\.ejs$/, + exclude: /node_modules/, + loader: 'ejs-loader', + options: { + variable: 'ctx', + evaluate: /\{%([\s\S]+?)%\}/g, + interpolate: /\{\{([\s\S]+?)\}\}/g, + escape: /\{\{\{([\s\S]+?)\}\}\}/g, + }, } ); return config; diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html new file mode 100644 index 0000000000..9e93366a39 --- /dev/null +++ b/.storybook/preview-body.html @@ -0,0 +1,6 @@ + + + + + + diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 81c34046f4..cc84cefbb0 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -7,4 +7,7 @@ diff --git a/.storybook/preview.js b/.storybook/preview.js index 1e3b91a315..ed97046b98 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,7 @@ +import 'bootstrap/dist/css/bootstrap.css'; import '../src/openforms/scss/screen.scss'; import '../src/openforms/scss/admin/admin_overrides.scss'; -import {withModalDecorator, withReactSelectDecorator} from 'components/admin/form_design/story-decorators'; +import {withModalDecorator, withReactSelectDecorator, TinyMceDecorator} from 'components/admin/form_design/story-decorators'; import {initialize, mswLoader} from 'msw-storybook-addon'; import {reactIntl} from './reactIntl.js'; import ReactModal from 'react-modal'; @@ -15,7 +16,7 @@ initialize({ ReactModal.setAppElement(document.getElementById('storybook-root')); export default { - decorators: [withModalDecorator, withReactSelectDecorator], + decorators: [withModalDecorator, withReactSelectDecorator, TinyMceDecorator], parameters: { controls: { matchers: { diff --git a/package-lock.json b/package-lock.json index 6c2668bc57..9edf695afc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,6 +63,7 @@ "autoprefixer": "^10.2.4", "babel-loader": "^8.2.2", "babel-plugin-formatjs": "^10.5.1", + "bootstrap": "~4.6.0", "browserslist": "^4.21.5", "copy-webpack-plugin": "^6.4.1", "css-has-pseudo": "^6.0.1", @@ -8020,6 +8021,26 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "node_modules/bootstrap": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", + "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "jquery": "1.9.1 - 3", + "popper.js": "^1.16.1" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -25713,6 +25734,12 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bootstrap": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", + "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index ac2c6b996a..8b2150ad6f 100644 --- a/package.json +++ b/package.json @@ -100,6 +100,7 @@ "autoprefixer": "^10.2.4", "babel-loader": "^8.2.2", "babel-plugin-formatjs": "^10.5.1", + "bootstrap": "~4.6.0", "browserslist": "^4.21.5", "copy-webpack-plugin": "^6.4.1", "css-has-pseudo": "^6.0.1", diff --git a/src/openforms/forms/tests/e2e_tests/helpers.py b/src/openforms/forms/tests/e2e_tests/helpers.py index 847847f0fb..08810e6f18 100644 --- a/src/openforms/forms/tests/e2e_tests/helpers.py +++ b/src/openforms/forms/tests/e2e_tests/helpers.py @@ -13,6 +13,20 @@ def phase(desc: str): yield +async def open_fieldset(page: Page, title: str) -> None: + """ + Toggle a fieldset from collapsed to open state. + + :arg page: The playwright page to find elements in. + :arg title: The heading/title of the fieldset displayed on the page, without the + 'Show' string. + """ + toggle_link = page.get_by_role("heading", level=2, name=title).get_by_role( + "link", name="Show" + ) + await toggle_link.click() + + async def open_component_options_modal(page: Page, label: str, exact: bool = False): """ Find the component in the builder with the given label and click the edit icon diff --git a/src/openforms/forms/tests/e2e_tests/test_form_configuration.py b/src/openforms/forms/tests/e2e_tests/test_form_configuration.py index 75004ece92..025f8e3cfd 100644 --- a/src/openforms/forms/tests/e2e_tests/test_form_configuration.py +++ b/src/openforms/forms/tests/e2e_tests/test_form_configuration.py @@ -12,7 +12,7 @@ ) from ..factories import FormFactory -from .helpers import close_modal +from .helpers import close_modal, open_fieldset from .test_form_designer import drag_and_drop_component @@ -146,6 +146,7 @@ def setUpTestData(): # Check that there is no warning await expect(warning_node).not_to_be_visible() + await open_fieldset(page, "Authentication") await page.get_by_role("checkbox", name="DigiD", checked=True).click() # Check that the warning has appeared diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json index e95e181f36..9a63a2ca3e 100644 --- a/src/openforms/js/compiled-lang/en.json +++ b/src/openforms/js/compiled-lang/en.json @@ -909,6 +909,12 @@ "value": "The email addresses to which the payment status update will be sent (defaults to general registration addresses)" } ], + "7jY1U4": [ + { + "type": 0, + "value": "Fields" + } + ], "7qqbU9": [ { "type": 1, @@ -2897,6 +2903,12 @@ "value": "Zaaktype status code for newly created zaken in StUF-ZDS" } ], + "P7Wd+/": [ + { + "type": 0, + "value": "Content" + } + ], "PC7ICN": [ { "type": 0, @@ -2933,6 +2945,12 @@ "value": "Number of years. Empty values are ignored." } ], + "PtFAWx": [ + { + "type": 0, + "value": "Presentation / appearance" + } + ], "PtZ96W": [ { "type": 0, @@ -3239,12 +3257,24 @@ "value": "Static variables" } ], + "ShUATL": [ + { + "type": 0, + "value": "Explanation" + } + ], "SjbNyf": [ { "type": 0, "value": "Add variable" } ], + "SlvZKo": [ + { + "type": 0, + "value": "You can (optionally) configure an introduction page shown before the form start page. Leave the content field blank to disable this page - users will then immediately go to the start page." + } + ], "Su4nqf": [ { "type": 0, @@ -3377,6 +3407,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, @@ -3605,6 +3659,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, @@ -3863,12 +3923,6 @@ "value": "Content of the registration email message (as html)." } ], - "Z5lydZ": [ - { - "type": 0, - "value": "Introduction page" - } - ], "Z8f4hI": [ { "type": 0, @@ -4337,6 +4391,12 @@ "value": "Remove item" } ], + "d6q6wz": [ + { + "type": 0, + "value": "Introduction page" + } + ], "dD9O3Q": [ { "type": 0, @@ -4415,12 +4475,6 @@ "value": "When the form component" } ], - "ddR92A": [ - { - "type": 0, - "value": "Explanation template" - } - ], "deoN5r": [ { "type": 0, @@ -4511,6 +4565,12 @@ "value": "Advanced options" } ], + "eNSJ0f": [ + { + "type": 0, + "value": "Features" + } + ], "eO6MNT": [ { "type": 0, @@ -5081,12 +5141,6 @@ "value": "Submission report PDF informatieobjecttype" } ], - "jARYB7": [ - { - "type": 0, - "value": "Form definition" - } - ], "jLg5l6": [ { "type": 0, @@ -5165,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, @@ -6131,6 +6209,34 @@ "value": "option 1: € 10,99" } ], + "t+J++o": [ + { + "options": { + "other": { + "value": [ + { + "type": 0, + "value": "Step" + } + ] + }, + "true": { + "value": [ + { + "type": 0, + "value": "Reusable step" + } + ] + } + }, + "type": 5, + "value": "isReusable" + }, + { + "type": 0, + "value": " settings" + } + ], "t5fg/K": [ { "type": 0, @@ -6773,6 +6879,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 589bfa700a..acd1837413 100644 --- a/src/openforms/js/compiled-lang/nl.json +++ b/src/openforms/js/compiled-lang/nl.json @@ -913,6 +913,12 @@ "value": "De e-mailadressen waarnaar de update van de betalingsstatus wordt verzonden (standaard wordt het algemene e-mailadres gebruikt)." } ], + "7jY1U4": [ + { + "type": 0, + "value": "Velden" + } + ], "7qqbU9": [ { "type": 1, @@ -2914,6 +2920,12 @@ "value": "Zaakstatuscode voor de nieuw aan te maken zaak." } ], + "P7Wd+/": [ + { + "type": 0, + "value": "Inhoud" + } + ], "PC7ICN": [ { "type": 0, @@ -2950,6 +2962,12 @@ "value": "Aantal jaren. Lege waarden worden genegeerd." } ], + "PtFAWx": [ + { + "type": 0, + "value": "Weergave/layout" + } + ], "PtZ96W": [ { "type": 0, @@ -3252,12 +3270,24 @@ "value": "Vaste variabelen" } ], + "ShUATL": [ + { + "type": 0, + "value": "Toelichting" + } + ], "SjbNyf": [ { "type": 0, "value": "Variabele toevoegen" } ], + "SlvZKo": [ + { + "type": 0, + "value": "Je kan (optioneel) een extra introductiepagina instellen die vóór de startpagina getoond wordt. Laat de inhoud leeg om deze pagina uit te schakelen - gebruikers komen dan meteen op de startpagina uit." + } + ], "Su4nqf": [ { "type": 0, @@ -3390,6 +3420,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, @@ -3618,6 +3672,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, @@ -3876,12 +3936,6 @@ "value": "Inhoud van de registratiemail (HTML)." } ], - "Z5lydZ": [ - { - "type": 0, - "value": "Introductiepagina" - } - ], "Z8f4hI": [ { "type": 0, @@ -4355,6 +4409,12 @@ "value": "Item verwijderen" } ], + "d6q6wz": [ + { + "type": 0, + "value": "Introductiepagina" + } + ], "dD9O3Q": [ { "type": 0, @@ -4433,12 +4493,6 @@ "value": "Als de formuliercomponent" } ], - "ddR92A": [ - { - "type": 0, - "value": "Toelichtingssjabloon" - } - ], "deoN5r": [ { "type": 0, @@ -4529,6 +4583,12 @@ "value": "Geavanceerde opties" } ], + "eNSJ0f": [ + { + "type": 0, + "value": "Functionaliteiten" + } + ], "eO6MNT": [ { "type": 0, @@ -5099,12 +5159,6 @@ "value": "Informatieobjecttype inzendings-PDF" } ], - "jARYB7": [ - { - "type": 0, - "value": "(Herbruikbare) stapgegevens" - } - ], "jLg5l6": [ { "type": 0, @@ -5183,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, @@ -6149,6 +6227,30 @@ "value": "optie 1: € 10,99" } ], + "t+J++o": [ + { + "options": { + "other": { + "value": [ + { + "type": 0, + "value": "Stapinstellingen" + } + ] + }, + "true": { + "value": [ + { + "type": 0, + "value": "Herbruikbare stapinstellingen" + } + ] + } + }, + "type": 5, + "value": "isReusable" + } + ], "t5fg/K": [ { "type": 0, @@ -6791,6 +6893,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/components/admin/form_design/FormConfigurationFields.stories.js b/src/openforms/js/components/admin/form_design/FormConfigurationFields.stories.js new file mode 100644 index 0000000000..e1567e3f4a --- /dev/null +++ b/src/openforms/js/components/admin/form_design/FormConfigurationFields.stories.js @@ -0,0 +1,73 @@ +import {fn} from '@storybook/test'; + +import FormConfigurationFields from './FormConfigurationFields'; + +export default { + title: 'Form design / Tabs / Form / Configuration fields', + component: FormConfigurationFields, + args: { + form: { + uuid: '', + internalName: '', + slug: 'my-form', + showProgressIndicator: true, + showSummaryProgress: false, + active: true, + category: '', + theme: '', + isDeleted: false, + activateOn: null, + deactivateOn: null, + maintenanceMode: false, + translationEnabled: false, + submissionAllowed: 'yes', + suspensionAllowed: true, + askPrivacyConsent: 'global_setting', + askStatementOfTruth: 'global_setting', + appointmentOptions: { + isAppointment: false, + }, + authenticationBackendOptions: {}, + }, + onChange: fn(), + availableAuthPlugins: [ + { + id: 'digid', + label: 'DigiD', + providesAuth: 'bsn', + }, + { + id: 'eherkenning', + label: 'eHerkenning', + providesAuth: 'kvk', + }, + ], + availableThemes: [ + { + url: '/api/v2/themes/1', + name: 'Open Forms', + }, + ], + selectedAuthPlugins: [], + onAuthPluginChange: fn(), + availableCategories: [ + { + name: 'Parent', + url: '/apiv/2/categories/1', + ancestors: [], + }, + { + name: 'Child', + url: '/apiv/2/categories/2', + ancestors: [{name: 'Parent'}], + }, + { + name: 'Category 3', + url: '/apiv/2/categories/3', + ancestors: [], + }, + ], + }, +}; + +export const Default = {}; diff --git a/src/openforms/js/components/admin/form_design/FormDetailFields.js b/src/openforms/js/components/admin/form_design/FormDetailFields.js index 6c36b05452..b9a1080d53 100644 --- a/src/openforms/js/components/admin/form_design/FormDetailFields.js +++ b/src/openforms/js/components/admin/form_design/FormDetailFields.js @@ -11,6 +11,63 @@ import TinyMCEEditor from './Editor'; import LanguageTabs from './LanguageTabs'; import {slugify} from './utils'; +const IntroductionPageFields = ({translations, onChange}) => ( +
+ } + collapsible + > + + {langCode => ( + <> +
+ +
+ + + } + helpText={ + + } + > + + onChange({ + target: { + name: `form.translations.${langCode}.introductionPageContent`, + value: newValue, + }, + }) + } + /> + + + + )} + +
+); + /** * Component to render the metadata admin form for an Open Forms form. */ @@ -31,105 +88,81 @@ const FormDetailFields = ({form: {slug, translations, appointmentOptions}, onCha }; return ( -
- } - > - - {langCode => ( - <> - - - } - helpText={ - +
+ } + > + + {langCode => ( + <> + + + } + helpText={ + + } + required + > + - } - required - > - - - + + - {!isAppointment && ( - <> - - - } - helpText={ - - } - > - - onChange({ - target: { - name: `form.translations.${langCode}.introductionPageContent`, - value: newValue, - }, - }) + {!isAppointment && ( + <> + + } - /> - - - - - - } - helpText={ - - } - > - - onChange({ - target: { - name: `form.translations.${langCode}.explanationTemplate`, - value: newValue, - }, - }) + helpText={ + } - /> - - - - )} - - )} - -
+ > + + onChange({ + target: { + name: `form.translations.${langCode}.explanationTemplate`, + value: newValue, + }, + }) + } + /> + + + + )} + + )} + +
+ + {!isAppointment && } + ); }; diff --git a/src/openforms/js/components/admin/form_design/FormDetailFields.stories.js b/src/openforms/js/components/admin/form_design/FormDetailFields.stories.js new file mode 100644 index 0000000000..ce22e2f82c --- /dev/null +++ b/src/openforms/js/components/admin/form_design/FormDetailFields.stories.js @@ -0,0 +1,51 @@ +import {fn} from '@storybook/test'; + +import {FormDecorator} from 'components/admin/form_design/story-decorators'; + +import FormDetailFields from './FormDetailFields'; + +export default { + title: 'Form design / Tabs / Form / Detail fields', + decorators: [FormDecorator], + component: FormDetailFields, + args: { + form: { + uuid: '', + internalName: '', + slug: 'my-form', + showProgressIndicator: true, + showSummaryProgress: false, + active: true, + category: '', + theme: '', + isDeleted: false, + activateOn: null, + deactivateOn: null, + maintenanceMode: false, + translationEnabled: false, + submissionAllowed: true, + suspensionAllowed: true, + askPrivacyConsent: 'global_setting', + askStatementOfTruth: 'global_setting', + appointmentOptions: { + isAppointment: false, + }, + authenticationBackendOptions: {}, + translations: { + nl: { + name: 'Mijn formulier', + explanationTemplate: '', + introductionPageContent: '', + }, + en: { + name: 'My form', + explanationTemplate: '', + introductionPageContent: '', + }, + }, + }, + onChange: fn(), + }, +}; + +export const Default = {}; diff --git a/src/openforms/js/components/admin/form_design/FormStepDefinition.js b/src/openforms/js/components/admin/form_design/FormStepDefinition.js index 0732774c82..9dafcd4111 100644 --- a/src/openforms/js/components/admin/form_design/FormStepDefinition.js +++ b/src/openforms/js/components/admin/form_design/FormStepDefinition.js @@ -5,6 +5,7 @@ import {FormattedMessage, useIntl} from 'react-intl'; import MessageList from 'components/admin/MessageList'; import Field, {normalizeErrors} from 'components/admin/forms/Field'; +import Fieldset from 'components/admin/forms/Fieldset'; import FormRow from 'components/admin/forms/FormRow'; import {Checkbox, TextInput} from 'components/admin/forms/Inputs'; import FormIOBuilder from 'components/formio_builder/builder'; @@ -12,7 +13,7 @@ import FormIOBuilder from 'components/formio_builder/builder'; import AuthenticationWarning from './AuthenticationWarning'; import ChangedFormDefinitionWarning from './ChangedFormDefinitionWarning'; import {FormContext} from './Context'; -import LanguageTabs from './LanguageTabs'; +import LanguageTabs, {DEFAULT_LANGUAGE} from './LanguageTabs'; import LogicWarning from './LogicWarning'; import PluginWarning from './PluginWarning'; import useDetectConfigurationChanged from './useDetectConfigurationChanged'; @@ -67,7 +68,7 @@ const FormStepDefinition = ({ }); }; - const {translationEnabled, formSteps, registrationBackends} = useContext(FormContext); + const {formSteps, registrationBackends} = useContext(FormContext); // A 'total configuration': merging all the configurations from the different steps, so that we can figure out if // a key is unique across steps @@ -167,6 +168,8 @@ const FormStepDefinition = ({ erroredLanguages.add(langCode); } + const hasName = !!translations[DEFAULT_LANGUAGE].name; + return ( <> @@ -174,14 +177,17 @@ const FormStepDefinition = ({ -
-

+
-

- + } + collapsible + initialCollapsed={hasName && !!slug && !errors.length} + > {(langCode, defaultLang) => ( <> @@ -209,6 +215,8 @@ const FormStepDefinition = ({ onBlur={() => setSlug(langCode)} /> + + + + + + + + )} -
+ -

Velden

+

+ +

diff --git a/src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js b/src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js new file mode 100644 index 0000000000..2d9d433ec3 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/StepsFieldSet.stories.js @@ -0,0 +1,111 @@ +import {fn} from '@storybook/test'; + +import { + AdminChangeFormDecorator, + FormDecorator, +} from 'components/admin/form_design/story-decorators'; + +import {StepsFieldSet} from './form-creation-form'; + +export default { + title: 'Form design / Tabs / Steps', + decorators: [ + FormDecorator, + Story => ( +
+ +
+ ), + AdminChangeFormDecorator, + ], + component: StepsFieldSet, + args: { + submitting: false, + loadingErrors: '', + steps: [ + { + configuration: { + display: 'form', + components: [], + }, + formDefinition: '', + index: 0, + name: 'Step 1', + internalName: '', + slug: 'step-1', + isApplicable: true, + loginRequired: false, + isReusable: false, + url: '', + isNew: false, + validationErrors: [], + translations: { + nl: { + name: 'Stap 1', + saveText: '', + previousText: '', + nextText: '', + }, + en: { + name: 'Step 1', + saveText: '', + previousText: '', + nextText: '', + }, + }, + }, + ], + onEdit: fn(), + onComponentMutated: fn(), + onFieldChange: fn(), + onDelete: fn(), + onReorder: fn(), + onReplace: fn(), + onAdd: fn(), + }, + parameters: { + adminChangeForm: { + wrapFieldset: true, + }, + }, +}; + +export const Default = {}; + +export const WithValidationErrors = { + args: { + steps: [ + { + configuration: { + display: 'form', + components: [], + }, + formDefinition: '', + index: 0, + name: 'Step 1', + internalName: '', + slug: 'step-1', + isApplicable: true, + loginRequired: false, + isReusable: false, + url: '', + isNew: false, + validationErrors: [['translations.nl.name', 'Computer says no']], + translations: { + nl: { + name: 'Stap 1', + saveText: '', + previousText: '', + nextText: '', + }, + en: { + name: 'Step 1', + saveText: '', + previousText: '', + nextText: '', + }, + }, + }, + ], + }, +}; diff --git a/src/openforms/js/components/admin/form_design/form-creation-form.js b/src/openforms/js/components/admin/form_design/form-creation-form.js index 3adb06d2f8..3ba4f3ba7c 100644 --- a/src/openforms/js/components/admin/form_design/form-creation-form.js +++ b/src/openforms/js/components/admin/form_design/form-creation-form.js @@ -873,7 +873,7 @@ function reducer(draft, action) { } } -const StepsFieldSet = ({submitting = false, loadingErrors, steps = [], ...props}) => { +export const StepsFieldSet = ({submitting = false, loadingErrors, steps = [], ...props}) => { if (loadingErrors) { return
{loadingErrors}
; } diff --git a/src/openforms/js/components/admin/form_design/story-decorators.js b/src/openforms/js/components/admin/form_design/story-decorators.js index 52cf23441d..3308bf310d 100644 --- a/src/openforms/js/components/admin/form_design/story-decorators.js +++ b/src/openforms/js/components/admin/form_design/story-decorators.js @@ -2,7 +2,11 @@ import {fn} from '@storybook/test'; import {Form, Formik} from 'formik'; import {Fragment} from 'react'; -import {FeatureFlagsContext, FormContext} from 'components/admin/form_design/Context'; +import { + FeatureFlagsContext, + FormContext, + TinyMceContext, +} from 'components/admin/form_design/Context'; import Fieldset from 'components/admin/forms/Fieldset'; import {ReactSelectContext} from 'components/admin/forms/ReactSelect'; import {ValidationErrorsProvider} from 'components/admin/forms/ValidationErrors'; @@ -59,12 +63,29 @@ export const FormDecorator = (Story, {args}) => ( }, components: args.availableComponents || {}, registrationBackends: args.registrationBackends || [], + languages: [ + { + code: 'nl', + label: 'Nederlands', + }, + { + code: 'en', + label: 'Engels', + }, + ], + translationEnabled: false, }} > ); +export const TinyMceDecorator = Story => ( + + + +); + export const ValidationErrorsDecorator = (Story, {args, parameters}) => ( diff --git a/src/openforms/js/components/admin/forms/Fieldset.js b/src/openforms/js/components/admin/forms/Fieldset.js index 0b407dd58e..1df589172e 100644 --- a/src/openforms/js/components/admin/forms/Fieldset.js +++ b/src/openforms/js/components/admin/forms/Fieldset.js @@ -63,7 +63,7 @@ const Fieldset = ({ ) : null; const className = classNames('module', 'aligned', extraClassName, { - 'collapse in': collapsible, + 'collapse in show': collapsible, collapsed: collapsed, }); diff --git a/src/openforms/js/lang/en.json b/src/openforms/js/lang/en.json index 07ff822d2b..72df2d3874 100644 --- a/src/openforms/js/lang/en.json +++ b/src/openforms/js/lang/en.json @@ -389,6 +389,11 @@ "description": "Email registration options 'paymentEmails' label", "originalDefault": "The email addresses to which the payment status update will be sent (defaults to general registration addresses)" }, + "7jY1U4": { + "defaultMessage": "Fields", + "description": "Form definition formio configuration", + "originalDefault": "Fields" + }, "833GAg": { "defaultMessage": "Input mapping", "description": "Input mapping title", @@ -1414,6 +1419,11 @@ "description": "StUF-ZDS registration options 'zdsZaaktypeStatusCode' helpText", "originalDefault": "Zaaktype status code for newly created zaken in StUF-ZDS" }, + "P7Wd+/": { + "defaultMessage": "Content", + "description": "form.introductionPageContent label", + "originalDefault": "Content" + }, "PC7ICN": { "defaultMessage": "Enabled", "description": "Manage process vars enabled checkbox column title", @@ -1439,6 +1449,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", @@ -1559,11 +1574,21 @@ "description": "Variable source group label for static variables", "originalDefault": "Static variables" }, + "ShUATL": { + "defaultMessage": "Explanation", + "description": "Start page explanation text label", + "originalDefault": "Explanation" + }, "SjbNyf": { "defaultMessage": "Add variable", "description": "Add zaakeigenschap (mapping) button", "originalDefault": "Add variable" }, + "SlvZKo": { + "defaultMessage": "You can (optionally) configure an introduction page shown before the form start page. Leave the content field blank to disable this page - users will then immediately go to the start page.", + "description": "Introduction page description", + "originalDefault": "You can (optionally) configure an introduction page shown before the form start page. Leave the content field blank to disable this page - users will then immediately go to the start page." + }, "Sw6TLH": { "defaultMessage": "Document type", "description": "ZGW APIs registration options 'DocumentType' label", @@ -1649,6 +1674,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", @@ -1704,6 +1734,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", @@ -1819,11 +1854,6 @@ "description": "Email registration options 'emailContentTemplateHtml' helpText", "originalDefault": "Content of the registration email message (as html)." }, - "Z5lydZ": { - "defaultMessage": "Introduction page", - "description": "form.introductionPageContent label", - "originalDefault": "Introduction page" - }, "Z8f4hI": { "defaultMessage": "Document confidentiality level", "description": "StUF-ZDS registration options 'zdsZaakdocVertrouwelijkheid' label", @@ -2034,6 +2064,11 @@ "description": "Export form button title", "originalDefault": "Export this form" }, + "d6q6wz": { + "defaultMessage": "Introduction page", + "description": "Introduction page fieldset title", + "originalDefault": "Introduction page" + }, "dGBYF7": { "defaultMessage": "{collapsed, select, true {(Show)} other {(Hide)}}", "description": "Fieldset collapse link text", @@ -2054,11 +2089,6 @@ "description": "JSON variable type \"array\" representation", "originalDefault": "Array" }, - "ddR92A": { - "defaultMessage": "Explanation template", - "description": "Start page explanation text label", - "originalDefault": "Explanation template" - }, "deoN5r": { "defaultMessage": "Show progress indicator", "description": "Progress indicator field label", @@ -2104,6 +2134,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", @@ -2384,11 +2419,6 @@ "description": "Objects API registration options \"Submission report PDF informatieobjecttype\" label", "originalDefault": "Submission report PDF informatieobjecttype" }, - "jARYB7": { - "defaultMessage": "Form definition", - "description": "Form definition module title", - "originalDefault": "Form definition" - }, "jLv6k8": { "defaultMessage": "DMN variable", "description": "Accessible label for DMN variable dropdown", @@ -2434,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", @@ -2849,6 +2884,11 @@ "description": "Objects API registration backend: v2 switch warning message", "originalDefault": "Switching to the new registration options will remove the existing JSON templates. You will also not be able to save the form until the variables are correctly mapped. Are you sure you want to continue?" }, + "t+J++o": { + "defaultMessage": "{isReusable, select, true {Reusable step} other {Step}} settings", + "description": "Form definition module title", + "originalDefault": "{isReusable, select, true {Reusable step} other {Step}} settings" + }, "t5fg/K": { "defaultMessage": "one or more actions are invalid", "description": "Logic rule warning message about problematic actions.", @@ -3144,6 +3184,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 9341ee7a7b..ab994dd51c 100644 --- a/src/openforms/js/lang/nl.json +++ b/src/openforms/js/lang/nl.json @@ -393,6 +393,11 @@ "description": "Email registration options 'paymentEmails' label", "originalDefault": "The email addresses to which the payment status update will be sent (defaults to general registration addresses)" }, + "7jY1U4": { + "defaultMessage": "Velden", + "description": "Form definition formio configuration", + "originalDefault": "Fields" + }, "833GAg": { "defaultMessage": "Invoerparameters", "description": "Input mapping title", @@ -1428,6 +1433,11 @@ "description": "StUF-ZDS registration options 'zdsZaaktypeStatusCode' helpText", "originalDefault": "Zaaktype status code for newly created zaken in StUF-ZDS" }, + "P7Wd+/": { + "defaultMessage": "Inhoud", + "description": "form.introductionPageContent label", + "originalDefault": "Content" + }, "PC7ICN": { "defaultMessage": "Ingeschakeld", "description": "Manage process vars enabled checkbox column title", @@ -1453,6 +1463,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", @@ -1574,11 +1589,21 @@ "description": "Variable source group label for static variables", "originalDefault": "Static variables" }, + "ShUATL": { + "defaultMessage": "Toelichting", + "description": "Start page explanation text label", + "originalDefault": "Explanation" + }, "SjbNyf": { "defaultMessage": "Variabele toevoegen", "description": "Add zaakeigenschap (mapping) button", "originalDefault": "Add variable" }, + "SlvZKo": { + "defaultMessage": "Je kan (optioneel) een extra introductiepagina instellen die vóór de startpagina getoond wordt. Laat de inhoud leeg om deze pagina uit te schakelen - gebruikers komen dan meteen op de startpagina uit.", + "description": "Introduction page description", + "originalDefault": "You can (optionally) configure an introduction page shown before the form start page. Leave the content field blank to disable this page - users will then immediately go to the start page." + }, "Sw6TLH": { "defaultMessage": "Documenttype", "description": "ZGW APIs registration options 'DocumentType' label", @@ -1664,6 +1689,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", @@ -1720,6 +1750,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", @@ -1837,11 +1872,6 @@ "description": "Email registration options 'emailContentTemplateHtml' helpText", "originalDefault": "Content of the registration email message (as html)." }, - "Z5lydZ": { - "defaultMessage": "Introductiepagina", - "description": "form.introductionPageContent label", - "originalDefault": "Introduction page" - }, "Z8f4hI": { "defaultMessage": "Vertrouwelijkheidaanduiding documenten", "description": "StUF-ZDS registration options 'zdsZaakdocVertrouwelijkheid' label", @@ -2054,6 +2084,11 @@ "description": "Export form button title", "originalDefault": "Export this form" }, + "d6q6wz": { + "defaultMessage": "Introductiepagina", + "description": "Introduction page fieldset title", + "originalDefault": "Introduction page" + }, "dGBYF7": { "defaultMessage": "{collapsed, select, true {(Tonen)} other {(Verbergen)}}", "description": "Fieldset collapse link text", @@ -2074,11 +2109,6 @@ "description": "JSON variable type \"array\" representation", "originalDefault": "Array" }, - "ddR92A": { - "defaultMessage": "Toelichtingssjabloon", - "description": "Start page explanation text label", - "originalDefault": "Explanation template" - }, "deoN5r": { "defaultMessage": "Toon voortgang", "description": "Progress indicator field label", @@ -2124,6 +2154,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", @@ -2405,11 +2440,6 @@ "description": "Objects API registration options \"Submission report PDF informatieobjecttype\" label", "originalDefault": "Submission report PDF informatieobjecttype" }, - "jARYB7": { - "defaultMessage": "(Herbruikbare) stapgegevens", - "description": "Form definition module title", - "originalDefault": "Form definition" - }, "jLv6k8": { "defaultMessage": "DMN-variabele", "description": "Accessible label for DMN variable dropdown", @@ -2455,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", @@ -2870,6 +2905,11 @@ "description": "Objects API registration backend: v2 switch warning message", "originalDefault": "Switching to the new registration options will remove the existing JSON templates. You will also not be able to save the form until the variables are correctly mapped. Are you sure you want to continue?" }, + "t+J++o": { + "defaultMessage": "{isReusable, select, true {Herbruikbare stapinstellingen} other {Stapinstellingen}}", + "description": "Form definition module title", + "originalDefault": "{isReusable, select, true {Reusable step} other {Step}} settings" + }, "t5fg/K": { "defaultMessage": "één of meer acties zijn ongeldig", "description": "Logic rule warning message about problematic actions.", @@ -3166,6 +3206,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", diff --git a/src/openforms/scss/components/admin/_edit-panel.scss b/src/openforms/scss/components/admin/_edit-panel.scss index 421d81c44d..bd3f31cf83 100644 --- a/src/openforms/scss/components/admin/_edit-panel.scss +++ b/src/openforms/scss/components/admin/_edit-panel.scss @@ -1,3 +1,5 @@ +@use 'microscope-sass/lib/bem'; + @import '../../vars'; .edit-panel { @@ -8,7 +10,7 @@ margin-top: 20px; } - &__submit-layer { + @include bem.element('submit-layer') { position: fixed; z-index: 1; top: 0; @@ -22,13 +24,13 @@ align-items: center; } - &__nav { + @include bem.element('nav') { width: 25%; max-width: 300px; margin-right: 10px; } - &__edit-area { + @include bem.element('edit-area') { flex-grow: 1; min-width: 0; width: 75%; @@ -38,6 +40,15 @@ background: var(--edit-panel-title-bg); color: var(--edit-panel-title-fg); } + + // provide sufficient contrast in light mode + @at-root & fieldset .collapse-toggle { + color: var(--edit-panel-title-fg); + } + + @at-root & fieldset.collapsed .collapse-toggle { + color: var(--link-fg); + } } }