Merge pull request #4979 from open-formulieren/issue/4969-layout-fixes

Layout fixes / declutter the configuration options

.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;

.storybook/preview-body.html

@@ -0,0 +1,6 @@
+<script id="setting-MAX_FILE_UPLOAD_SIZE" type="application/json">"50\u00a0MB"</script>
+<script id="config-REQUIRED_DEFAULT" type="application/json">false</script>
+<script id="config-RICH_TEXT_COLORS" type="application/json">[{"color": "#4ce699", "label": "Aquamarine"}]</script>
+<script id="config-MAP_TILE_LAYERS" type="application/json">[]</script>
+<script id="config-UPLOAD_FILETYPES" type="application/json">[{"label": "elk bestandstype", "value": "*"}, {"label": ".heic", "value": "image/heic"}, {"label": ".png", "value": "image/png"}, {"label": ".jpg", "value": "image/jpeg"}, {"label": ".pdf", "value": "application/pdf"}, {"label": ".xls", "value": "application/vnd.ms-excel"}, {"label": ".xlsx", "value": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}, {"label": ".csv", "value": "text/csv"}, {"label": ".txt", "value": "text/plain"}, {"label": ".doc", "value": "application/msword"}, {"label": ".docx", "value": "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}, {"label": "Open Office", "value": "application/vnd.oasis.opendocument.*,application/vnd.stardivision.*,application/vnd.sun.xml.*"}, {"label": ".zip", "value": "application/zip,application/zip-compressed,application/x-zip-compressed"}, {"label": ".rar", "value": "application/vnd.rar"}, {"label": ".tar", "value": "application/x-tar"}, {"label": ".msg", "value": "application/vnd.ms-outlook"}, {"label": ".dwg", "value": "application/acad.dwg,application/autocad_dwg.dwg,application/dwg.dwg,application/x-acad.dwg,application/x-autocad.dwg,application/x-dwg.dwg,drawing/dwg.dwg,image/vnd.dwg,image/x-dwg.dwg"}]</script>
+<script id="CONFIDENTIALITY_LEVELS" type="application/json">[{"label": "Openbaar", "value": "openbaar"}, {"label": "Beperkt openbaar", "value": "beperkt_openbaar"}, {"label": "Intern", "value": "intern"}, {"label": "Zaakvertrouwelijk", "value": "zaakvertrouwelijk"}, {"label": "Vertrouwelijk", "value": "vertrouwelijk"}, {"label": "Confidentieel", "value": "confidentieel"}, {"label": "Geheim", "value": "geheim"}, {"label": "Zeer geheim", "value": "zeer_geheim"}]</script>

.storybook/preview-head.html

@@ -7,4 +7,7 @@
 
 <script defer>
   document.documentElement.dataset.theme = 'light';
+  document.addEventListener('DOMContentLoaded', () => {
+    document.body.classList.add('change-form');
+  });
 </script>

.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: {

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",

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

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