From 42ab5a7354028254241ff401a3ddb8da0d4a77a1 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Wed, 8 Jan 2025 16:14:02 +0100
Subject: [PATCH] :truck: [open-formulieren/open-forms#2177] Moving map
 settings to separate tab

---
 src/registry/map/edit.tsx                     | 31 +++++++++++++------
 src/registry/map/map-configuration.stories.ts |  2 ++
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/registry/map/edit.tsx b/src/registry/map/edit.tsx
index b3c1d1cb..4068af7f 100644
--- a/src/registry/map/edit.tsx
+++ b/src/registry/map/edit.tsx
@@ -21,7 +21,7 @@ import {
   useDeriveComponentKey,
 } from '@/components/builder';
 import {LABELS} from '@/components/builder/messages';
-import {Checkbox, Select, TabList, TabPanel, Tabs} from '@/components/formio';
+import {Checkbox, Select, Tab, TabList, TabPanel, Tabs} from '@/components/formio';
 import {BuilderContext} from '@/context';
 import InteractionConfiguration from '@/registry/map/interaction-configuration';
 import {useErrorChecker} from '@/utils/errors';
@@ -62,16 +62,25 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'showInPDF',
             'hidden',
             'clearOnHide',
-            'isSensitiveData',
+            'isSensitiveData'
+          )}
+        />
+        <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
+        <BuilderTabs.Validation hasErrors={hasAnyError('validate')} />
+        <Tab
+          hasErrors={hasAnyError(
             'useConfigDefaultMapSettings',
             'defaultZoom',
             'initialCenter',
             'tileLayerIdentifier',
             'interactions'
           )}
-        />
-        <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
-        <BuilderTabs.Validation hasErrors={hasAnyError('validate')} />
+        >
+          <FormattedMessage
+            description="Component edit form tab title for 'Map settings' tab"
+            defaultMessage="Map settings"
+          />
+        </Tab>
         <BuilderTabs.Registration hasErrors={hasAnyError('registration')} />
         <BuilderTabs.Translations hasErrors={hasAnyError('openForms.translations')} />
       </TabList>
@@ -86,10 +95,6 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
         <Hidden />
         <ClearOnHide />
         <IsSensitiveData />
-        <UseConfigDefaultMapSettings />
-        {!values.useConfigDefaultMapSettings && <MapConfiguration />}
-        <TileLayer />
-        <InteractionConfiguration />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -104,6 +109,14 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
         <Validate.ValidationErrorTranslations />
       </TabPanel>
 
+      {/* Map settings tab */}
+      <TabPanel>
+        <TileLayer />
+        <InteractionConfiguration />
+        <UseConfigDefaultMapSettings />
+        {!values.useConfigDefaultMapSettings && <MapConfiguration />}
+      </TabPanel>
+
       {/* Registration tab */}
       <TabPanel>
         <Registration.RegistrationAttributeSelect />
diff --git a/src/registry/map/map-configuration.stories.ts b/src/registry/map/map-configuration.stories.ts
index addc53fd..666e7b01 100644
--- a/src/registry/map/map-configuration.stories.ts
+++ b/src/registry/map/map-configuration.stories.ts
@@ -45,6 +45,7 @@ export const NotUsingGlobalConfig: Story = {
     const canvas = within(canvasElement);
 
     await step('Initial state', async () => {
+      await userEvent.click(canvas.getByRole('link', {name: 'Map settings'}));
       expect(
         canvas.getByLabelText('Use globally configured map component settings')
       ).not.toBeChecked();
@@ -81,6 +82,7 @@ export const UsingGlobalConfig: Story = {
     const canvas = within(canvasElement);
 
     await step('Initial state', async () => {
+      await userEvent.click(canvas.getByRole('link', {name: 'Map settings'}));
       expect(
         canvas.getByLabelText('Use globally configured map component settings')
       ).not.toBeChecked();