From a50ff15ca1386206c65e561c288e2a27dc695c70 Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Mon, 3 Mar 2025 12:15:27 +0100
Subject: [PATCH 1/7] Add a tab menu for settings

---
 frontend/language/src/nb.json                 |  3 ++
 .../ux-editor/src/components/Tabs.module.css  |  8 ++++
 .../ux-editor/src/components/Tabs.tsx         | 42 +++++++++++++++++++
 .../FormDesignerNavigation.tsx                |  4 ++
 4 files changed, 57 insertions(+)
 create mode 100644 frontend/packages/ux-editor/src/components/Tabs.module.css
 create mode 100644 frontend/packages/ux-editor/src/components/Tabs.tsx

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 3ee368acdb4..093f3e81353 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -1913,6 +1913,9 @@
   "ux_editor.search_text_resources_close": "Lukk tekstsøk",
   "ux_editor.search_text_resources_label": "Velg eksisterende tekst basert på ID",
   "ux_editor.search_text_resources_none": "Ingen",
+  "ux_editor.settings.data_model_tab": "Datamodell",
+  "ux_editor.settings.navigation_tab": "Navigasjon",
+  "ux_editor.settings.other_settings": "Andre innstillinger",
   "ux_editor.show_icon": "Skal ikonet vises?",
   "ux_editor.subdomains_label": "Subdomener (kommaseparert)",
   "ux_editor.subdomains_placeholder": "domene1, domene2, domene3",
diff --git a/frontend/packages/ux-editor/src/components/Tabs.module.css b/frontend/packages/ux-editor/src/components/Tabs.module.css
new file mode 100644
index 00000000000..d063f11a9b8
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Tabs.module.css
@@ -0,0 +1,8 @@
+.heading {
+  margin-bottom: var(--fds-spacing-7);
+}
+
+.icon {
+  font-size: var(--fds-sizing-6);
+  margin-right: var(--fds-spacing-1);
+}
diff --git a/frontend/packages/ux-editor/src/components/Tabs.tsx b/frontend/packages/ux-editor/src/components/Tabs.tsx
new file mode 100644
index 00000000000..b94a3856abf
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Tabs.tsx
@@ -0,0 +1,42 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { StudioHeading, StudioTabs } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+import classes from './Tabs.module.css';
+import { CompassIcon, DatabaseIcon } from '@studio/icons';
+
+const SettingTabs = [
+  {
+    icon: CompassIcon,
+    title: 'ux_editor.settings.navigation_tab',
+  },
+  {
+    icon: DatabaseIcon,
+    title: 'ux_editor.settings.data_model_tab',
+  },
+];
+
+export const Tabs = (): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <StudioHeading level={2} size='xsmall' className={classes.heading}>
+        {t('ux_editor.settings.other_settings')}
+      </StudioHeading>
+      <StudioTabs defaultValue={SettingTabs[0].title}>
+        <StudioTabs.List>
+          {SettingTabs.map((tab) => {
+            const TabIcon = tab.icon;
+            return (
+              <StudioTabs.Tab key={tab.title} value={tab.title}>
+                <TabIcon className={classes.icon} />
+                {t(tab.title)}
+              </StudioTabs.Tab>
+            );
+          })}
+        </StudioTabs.List>
+      </StudioTabs>
+    </>
+  );
+};
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
index 31498bf4b0f..d4d1e9b3a31 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
@@ -4,6 +4,7 @@ import classes from './FormDesignerNavigation.module.css';
 import { useTranslation } from 'react-i18next';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppConfigQuery } from 'app-development/hooks/queries';
+import { Tabs } from '../../components/Tabs';
 
 export const FormDesignerNavigation = () => {
   const { t } = useTranslation();
@@ -15,6 +16,9 @@ export const FormDesignerNavigation = () => {
         <div className={classes.panel}>
           <div className={classes.content}>
             <div className={classes.header}>{appConfigData?.serviceName}</div>
+            <div>
+              <Tabs />
+            </div>
           </div>
           <footer className={classes.footer}>
             <Link href='/contact'>{t('general.contact')}</Link>

From cda89cae6811c7b300e739f1a4206ca6562ba07f Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Mon, 3 Mar 2025 12:20:02 +0100
Subject: [PATCH 2/7] Move div inside Tabs to be consistent with tasks

---
 frontend/packages/ux-editor/src/components/Tabs.tsx           | 4 ++--
 .../FormDesignNavigation/FormDesignerNavigation.tsx           | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/ux-editor/src/components/Tabs.tsx b/frontend/packages/ux-editor/src/components/Tabs.tsx
index b94a3856abf..5c44abf0ba6 100644
--- a/frontend/packages/ux-editor/src/components/Tabs.tsx
+++ b/frontend/packages/ux-editor/src/components/Tabs.tsx
@@ -20,7 +20,7 @@ export const Tabs = (): ReactElement => {
   const { t } = useTranslation();
 
   return (
-    <>
+    <div>
       <StudioHeading level={2} size='xsmall' className={classes.heading}>
         {t('ux_editor.settings.other_settings')}
       </StudioHeading>
@@ -37,6 +37,6 @@ export const Tabs = (): ReactElement => {
           })}
         </StudioTabs.List>
       </StudioTabs>
-    </>
+    </div>
   );
 };
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
index d4d1e9b3a31..e029cfd6573 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
@@ -16,9 +16,7 @@ export const FormDesignerNavigation = () => {
         <div className={classes.panel}>
           <div className={classes.content}>
             <div className={classes.header}>{appConfigData?.serviceName}</div>
-            <div>
-              <Tabs />
-            </div>
+            <Tabs />
           </div>
           <footer className={classes.footer}>
             <Link href='/contact'>{t('general.contact')}</Link>

From b20d7a3cac3e7bb1aaabb13485bf913b738889fd Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Mon, 3 Mar 2025 12:25:16 +0100
Subject: [PATCH 3/7] Rename Tabs to SettingsTabs

---
 .../SettingsTabs.module.css}                           |  0
 .../components/{Tabs.tsx => Settings/SettingsTabs.tsx} | 10 +++++-----
 .../FormDesignNavigation/FormDesignerNavigation.tsx    |  4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename frontend/packages/ux-editor/src/components/{Tabs.module.css => Settings/SettingsTabs.module.css} (100%)
 rename frontend/packages/ux-editor/src/components/{Tabs.tsx => Settings/SettingsTabs.tsx} (83%)

diff --git a/frontend/packages/ux-editor/src/components/Tabs.module.css b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
similarity index 100%
rename from frontend/packages/ux-editor/src/components/Tabs.module.css
rename to frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
diff --git a/frontend/packages/ux-editor/src/components/Tabs.tsx b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
similarity index 83%
rename from frontend/packages/ux-editor/src/components/Tabs.tsx
rename to frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
index 5c44abf0ba6..1cb7f4d6778 100644
--- a/frontend/packages/ux-editor/src/components/Tabs.tsx
+++ b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
@@ -2,10 +2,10 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { StudioHeading, StudioTabs } from '@studio/components';
 import { useTranslation } from 'react-i18next';
-import classes from './Tabs.module.css';
+import classes from './Settings.module.css';
 import { CompassIcon, DatabaseIcon } from '@studio/icons';
 
-const SettingTabs = [
+const tabs = [
   {
     icon: CompassIcon,
     title: 'ux_editor.settings.navigation_tab',
@@ -16,7 +16,7 @@ const SettingTabs = [
   },
 ];
 
-export const Tabs = (): ReactElement => {
+export const SettingsTabs = (): ReactElement => {
   const { t } = useTranslation();
 
   return (
@@ -24,9 +24,9 @@ export const Tabs = (): ReactElement => {
       <StudioHeading level={2} size='xsmall' className={classes.heading}>
         {t('ux_editor.settings.other_settings')}
       </StudioHeading>
-      <StudioTabs defaultValue={SettingTabs[0].title}>
+      <StudioTabs defaultValue={tabs[0].title}>
         <StudioTabs.List>
-          {SettingTabs.map((tab) => {
+          {tabs.map((tab) => {
             const TabIcon = tab.icon;
             return (
               <StudioTabs.Tab key={tab.title} value={tab.title}>
diff --git a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
index e029cfd6573..0d781b4ddf7 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx
@@ -4,7 +4,7 @@ import classes from './FormDesignerNavigation.module.css';
 import { useTranslation } from 'react-i18next';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppConfigQuery } from 'app-development/hooks/queries';
-import { Tabs } from '../../components/Tabs';
+import { SettingsTabs } from '../../components/Settings/SettingsTabs';
 
 export const FormDesignerNavigation = () => {
   const { t } = useTranslation();
@@ -16,7 +16,7 @@ export const FormDesignerNavigation = () => {
         <div className={classes.panel}>
           <div className={classes.content}>
             <div className={classes.header}>{appConfigData?.serviceName}</div>
-            <Tabs />
+            <SettingsTabs />
           </div>
           <footer className={classes.footer}>
             <Link href='/contact'>{t('general.contact')}</Link>

From 6a3a62f5cdcedeb120f1a7f1b16fed8624a78342 Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Mon, 3 Mar 2025 12:25:39 +0100
Subject: [PATCH 4/7] Fix imports

---
 .../packages/ux-editor/src/components/Settings/SettingsTabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
index 1cb7f4d6778..29124432dee 100644
--- a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
+++ b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { StudioHeading, StudioTabs } from '@studio/components';
 import { useTranslation } from 'react-i18next';
-import classes from './Settings.module.css';
+import classes from './SettingsTabs.module.css';
 import { CompassIcon, DatabaseIcon } from '@studio/icons';
 
 const tabs = [

From 57aa3777b7e96c953c8a08fe491d4a09ca9785ae Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Mon, 3 Mar 2025 12:56:42 +0100
Subject: [PATCH 5/7] Fix style

---
 .../ux-editor/src/components/Settings/SettingsTabs.module.css  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
index d063f11a9b8..34a78c881ae 100644
--- a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
+++ b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
@@ -1,4 +1,7 @@
 .heading {
+  color: #1e2b3c;
+  font-family: var(--studio-font-family);
+  letter-spacing: 1px;
   margin-bottom: var(--fds-spacing-7);
 }
 

From f10b74de6c7eefe5a2292522ceac6a9937854784 Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Tue, 4 Mar 2025 18:14:04 +0100
Subject: [PATCH 6/7] Refactor and add wip message

---
 frontend/language/src/nb.json                 |  1 +
 .../src/components/Settings/SettingsTabs.tsx  | 41 +++++++++----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 093f3e81353..ef531c9464f 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -1916,6 +1916,7 @@
   "ux_editor.settings.data_model_tab": "Datamodell",
   "ux_editor.settings.navigation_tab": "Navigasjon",
   "ux_editor.settings.other_settings": "Andre innstillinger",
+  "ux_editor.settings.wip_message": "Denne fanen er under utvikling - innhold kommer snart.",
   "ux_editor.show_icon": "Skal ikonet vises?",
   "ux_editor.subdomains_label": "Subdomener (kommaseparert)",
   "ux_editor.subdomains_placeholder": "domene1, domene2, domene3",
diff --git a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
index 29124432dee..fe4ce56666b 100644
--- a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
+++ b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
@@ -1,20 +1,14 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import { StudioHeading, StudioTabs } from '@studio/components';
+import { StudioAlert, StudioHeading, StudioTabs } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import classes from './SettingsTabs.module.css';
 import { CompassIcon, DatabaseIcon } from '@studio/icons';
 
-const tabs = [
-  {
-    icon: CompassIcon,
-    title: 'ux_editor.settings.navigation_tab',
-  },
-  {
-    icon: DatabaseIcon,
-    title: 'ux_editor.settings.data_model_tab',
-  },
-];
+enum Tabs {
+  Navigation = 'navigation',
+  Database = 'database',
+}
 
 export const SettingsTabs = (): ReactElement => {
   const { t } = useTranslation();
@@ -24,18 +18,23 @@ export const SettingsTabs = (): ReactElement => {
       <StudioHeading level={2} size='xsmall' className={classes.heading}>
         {t('ux_editor.settings.other_settings')}
       </StudioHeading>
-      <StudioTabs defaultValue={tabs[0].title}>
+      <StudioTabs defaultValue={Tabs.Navigation}>
         <StudioTabs.List>
-          {tabs.map((tab) => {
-            const TabIcon = tab.icon;
-            return (
-              <StudioTabs.Tab key={tab.title} value={tab.title}>
-                <TabIcon className={classes.icon} />
-                {t(tab.title)}
-              </StudioTabs.Tab>
-            );
-          })}
+          <StudioTabs.Tab value={Tabs.Navigation}>
+            <CompassIcon className={classes.icon} />
+            {t('ux_editor.settings.navigation_tab')}
+          </StudioTabs.Tab>
+          <StudioTabs.Tab value={Tabs.Database}>
+            <DatabaseIcon className={classes.icon} />
+            {t('ux_editor.settings.data_model_tab')}
+          </StudioTabs.Tab>
         </StudioTabs.List>
+        <StudioTabs.Content value={Tabs.Navigation}>
+          <StudioAlert severity='info'>{t('ux_editor.settings.wip_message')}</StudioAlert>
+        </StudioTabs.Content>
+        <StudioTabs.Content value={Tabs.Database}>
+          <StudioAlert severity='info'>{t('ux_editor.settings.wip_message')}</StudioAlert>
+        </StudioTabs.Content>
       </StudioTabs>
     </div>
   );

From a9eed42cc116ca4f3dd2a243e24bf6d27ea52182 Mon Sep 17 00:00:00 2001
From: Michael Queyrichon <michael.queyrichon@digdir.no>
Date: Tue, 4 Mar 2025 18:48:13 +0100
Subject: [PATCH 7/7] Fix width

---
 .../src/components/Settings/SettingsTabs.module.css       | 4 ++++
 .../ux-editor/src/components/Settings/SettingsTabs.tsx    | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
index 34a78c881ae..dbc3ae7d9c3 100644
--- a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
+++ b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.module.css
@@ -9,3 +9,7 @@
   font-size: var(--fds-sizing-6);
   margin-right: var(--fds-spacing-1);
 }
+
+.wipMessage {
+  display: inline-grid;
+}
diff --git a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
index fe4ce56666b..03fdf614f8c 100644
--- a/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
+++ b/frontend/packages/ux-editor/src/components/Settings/SettingsTabs.tsx
@@ -30,10 +30,14 @@ export const SettingsTabs = (): ReactElement => {
           </StudioTabs.Tab>
         </StudioTabs.List>
         <StudioTabs.Content value={Tabs.Navigation}>
-          <StudioAlert severity='info'>{t('ux_editor.settings.wip_message')}</StudioAlert>
+          <StudioAlert severity='info' className={classes.wipMessage}>
+            {t('ux_editor.settings.wip_message')}
+          </StudioAlert>
         </StudioTabs.Content>
         <StudioTabs.Content value={Tabs.Database}>
-          <StudioAlert severity='info'>{t('ux_editor.settings.wip_message')}</StudioAlert>
+          <StudioAlert severity='info' className={classes.wipMessage}>
+            {t('ux_editor.settings.wip_message')}
+          </StudioAlert>
         </StudioTabs.Content>
       </StudioTabs>
     </div>