🚸 [#4969] Collapse form definition settings to declutter

If a name and slug (required fields) are provided, the fieldset is
collapsed.

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,
@@ -5135,12 +5141,6 @@
       "value": "Submission report PDF informatieobjecttype"
     }
   ],
-  "jARYB7": [
-    {
-      "type": 0,
-      "value": "Form definition"
-    }
-  ],
   "jLg5l6": [
     {
       "type": 0,
@@ -6209,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,

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,
@@ -5153,12 +5159,6 @@
       "value": "Informatieobjecttype inzendings-PDF"
     }
   ],
-  "jARYB7": [
-    {
-      "type": 0,
-      "value": "(Herbruikbare) stapgegevens"
-    }
-  ],
   "jLg5l6": [
     {
       "type": 0,
@@ -6227,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,

src/openforms/js/components/admin/form_design/FormStepDefinition.js

@@ -13,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';
@@ -168,21 +168,26 @@ const FormStepDefinition = ({
     erroredLanguages.add(langCode);
   }
 
+  const hasName = !!translations[DEFAULT_LANGUAGE].name;
+
   return (
     <>
       <ChangedFormDefinitionWarning changed={changed} affectedForms={affectedForms} />
       <PluginWarning loginRequired={loginRequired} configuration={configuration} />
       <AuthenticationWarning loginRequired={loginRequired} configuration={configuration} />
       <LogicWarning warnings={warnings} />
 
-      <Fieldset>
-        <h2>
+      <Fieldset
+        title={
           <FormattedMessage
             description="Form definition module title"
-            defaultMessage="Form definition"
+            defaultMessage="{isReusable, select, true {Reusable step} other {Step}} settings"
+            values={{isReusable: isReusable}}
           />
-        </h2>
-
+        }
+        collapsible
+        initialCollapsed={hasName && !!slug && !errors.length}
+      >
         <LanguageTabs haveErrors={[...erroredLanguages]}>
           {(langCode, defaultLang) => (
             <>

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",
@@ -2414,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",
@@ -2884,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.",

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",
@@ -2435,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",
@@ -2905,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.",

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);
+    }
   }
 }