feat: Add subform layoutset

backend/src/Designer/Controllers/PreviewController.cs

@@ -1029,7 +1029,7 @@ private static ApplicationMetadata SetMockDataTypeIfMissing(ApplicationMetadata
             LayoutSets layoutSetsWithMockedDataTypesIfMissing = AddDataTypesToReturnedLayoutSetsIfMissing(layoutSets);
             layoutSetsWithMockedDataTypesIfMissing.Sets.ForEach(set =>
             {
-                if (set.Tasks[0] == Constants.General.CustomReceiptId)
+                if (set.Tasks?[0] == Constants.General.CustomReceiptId)
                 {
                     return;
                 }
@@ -1043,7 +1043,7 @@ private static ApplicationMetadata SetMockDataTypeIfMissing(ApplicationMetadata
                         {
                             ClassRef = $"Altinn.App.Models.model.{set.DataType}"
                         },
-                        TaskId = set.Tasks[0]
+                        TaskId = set.Tasks?[0]
                     });
                 }
             });

backend/src/Designer/Models/LayoutSets.cs

@@ -20,14 +20,19 @@
 public class LayoutSetConfig
 {
     [JsonPropertyName("id")]
     public string Id { get; set; }
 
     [JsonPropertyName("dataType")]
     [CanBeNull] public string DataType { get; set; }
 
     [JsonPropertyName("tasks")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
     public List<string> Tasks { get; set; }
 
+    [JsonPropertyName("type")]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string Type { get; set; }
+
     [JsonExtensionData]
     public IDictionary<string, object?> UnknownProperties { get; set; }
 }

backend/src/Designer/Services/Implementation/AppDevelopmentService.cs

@@ -305,7 +305,7 @@ public async Task<LayoutSets> AddLayoutSet(AltinnRepoEditingContext altinnRepoEd
             {
                 throw new NonUniqueLayoutSetIdException($"Layout set name, {newLayoutSet.Id}, already exists.");
             }
-            if (layoutSets.Sets.Exists(set => set.Tasks[0] == newLayoutSet.Tasks[0]))
+            if (newLayoutSet.Tasks != null && layoutSets.Sets.Exists(set => set.Tasks[0] == newLayoutSet.Tasks[0]))
             {
                 throw new NonUniqueTaskForLayoutSetException($"Layout set with task, {newLayoutSet.Tasks[0]}, already exists.");
             }

backend/src/Designer/Services/Implementation/PreviewService.cs

@@ -94,14 +94,16 @@ public async Task<List<string>> GetTasksForAllLayoutSets(string org, string app,
             List<string> tasks = [];
             if (layoutSets?.Sets is { Count: > 0 })
             {
-                foreach (LayoutSetConfig layoutSet in layoutSets.Sets.Where(ls => !tasks.Contains(ls.Tasks[0])))
+                foreach (LayoutSetConfig layoutSet in layoutSets.Sets.Where(ls => !tasks.Contains(ls.Tasks?[0])))
                 {
-                    if (layoutSet.Tasks[0] == Constants.General.CustomReceiptId)
+                    if (layoutSet.Tasks?[0] == Constants.General.CustomReceiptId)
                     {
                         continue;
                     }
-
-                    tasks.Add(layoutSet.Tasks[0]);
+                    if (layoutSet.Tasks != null)
+                    {
+                        tasks.Add(layoutSet.Tasks[0]);
+                    }
                 }
             }
             return tasks;
@@ -121,7 +123,7 @@ public async Task<string> GetTaskForLayoutSetName(string org, string app, string
         if (!string.IsNullOrEmpty(layoutSetName))
         {
             LayoutSets layoutSets = await altinnAppGitRepository.GetLayoutSetsFile(cancellationToken);
-            task = layoutSets?.Sets?.Find(element => element.Id == layoutSetName).Tasks[0];
+            task = layoutSets?.Sets?.Find(element => element.Id == layoutSetName).Tasks?[0];
         }
         return task;
     }

backend/src/Designer/Services/Implementation/ProcessModeling/ProcessModelingService.cs

@@ -114,7 +114,7 @@ public async Task<string> GetTaskTypeFromProcessDefinition(AltinnRepoEditingCont
                 XmlSerializer serializer = new XmlSerializer(typeof(Definitions));
                 Definitions? definitions = (Definitions?)serializer.Deserialize(processDefinitionStream);
                 LayoutSetConfig layoutSet = await _appDevelopmentService.GetLayoutSetConfig(altinnRepoEditingContext, layoutSetId);
-                string taskId = layoutSet.Tasks.First();
+                string taskId = layoutSet.Tasks?.First();
                 ProcessTask? task = definitions?.Process.Tasks.FirstOrDefault(task => task.Id == taskId);
                 return task?.ExtensionElements?.TaskExtension?.TaskType ?? string.Empty;
             }

frontend/app-development/hooks/mutations/useAddLayoutSetMutation.ts

@@ -1,24 +1,23 @@
 import { type UseMutateFunction, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
 import { QueryKey } from 'app-shared/types/QueryKey';
-import type {
-  LayoutSetConfig,
-  LayoutSets,
-  BpmnTaskType,
-} from 'app-shared/types/api/LayoutSetsResponse';
+import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
 import { useLocalStorage } from '@studio/components/src/hooks/useLocalStorage';
 import type {
   AddLayoutSetResponse,
   LayoutSetsResponse,
 } from 'app-shared/types/api/AddLayoutSetResponse';
+import type { LayoutSetConfig, LayoutSetPayload } from 'app-shared/types/api/LayoutSetPayload';
 
 export type AddLayoutSetMutationPayload = {
   layoutSetIdToUpdate: string;
-  taskType?: BpmnTaskType;
-  layoutSetConfig: LayoutSetConfig;
-};
+} & LayoutSetPayload;
+
 export type AddLayoutSetMutation = UseMutateFunction<
-  AddLayoutSetResponse,
+  {
+    layoutSets: AddLayoutSetResponse;
+    layoutSetConfig: LayoutSetConfig;
+  },
   Error,
   AddLayoutSetMutationPayload
 >;

frontend/language/src/nb.json

@@ -650,7 +650,7 @@
   "process_editor.configuration_panel_header_help_text_signing": "Du bruker oppgaven Signering (signing) når du vil at sluttbrukerne skal bekrefte med signatur.",
   "process_editor.configuration_panel_header_help_text_title": "Informasjon om valgt oppgave",
   "process_editor.configuration_panel_id_label": "ID:",
-  "process_editor.configuration_panel_layout_set_id_not_unique": "Navnet på sidegruppen må være unikt",
+  "process_editor.configuration_panel_layout_set_id_not_unique": "Navnet må være unikt",
   "process_editor.configuration_panel_layout_set_name": "Navn på sidegruppe: ",
   "process_editor.configuration_panel_layout_set_name_label": "Navn på sidegruppe",
   "process_editor.configuration_panel_missing_task": "Oppgave",
@@ -1361,6 +1361,11 @@
   "ux_editor.config.warning_duplicates.solution_studio_import": "Gå tilbake til Altinn Studio og velg 'Hent endringer' for å laste inn endringene du har gjort i koden.",
   "ux_editor.container_empty": "Tomt, dra noe inn her...",
   "ux_editor.container_not_editable_info": "Noen egenskaper for denne komponenten er ikke redigerbare for øyeblikket. Du kan legge til underkomponenter i kolonnen til venstre.",
+  "ux_editor.create.subform": "Nytt underskjema",
+  "ux_editor.create.subform.confirm_button": "Opprett underskjema",
+  "ux_editor.create.subform.label": "Navn på underskjema",
+  "ux_editor.delete.subform": "Slett underskjema",
+  "ux_editor.delete.subform.confirm": "Er du sikker på at du vil slette dette underskjemaet?",
   "ux_editor.edit_component.loading_schema": "Laster inn skjema",
   "ux_editor.edit_component.show_beta_func": "Vis ny konfigurasjon (BETA)",
   "ux_editor.edit_component.unknown_component": "Komponenten {{componentName}} gjenkjennes ikke av Studio og kan derfor ikke konfigureres.",
@@ -1636,6 +1641,7 @@
   "ux_editor.show_icon": "Skal ikonet vises?",
   "ux_editor.subdomains_label": "Subdomener (kommaseparert)",
   "ux_editor.subdomains_placeholder": "domene1, domene2, domene3",
+  "ux_editor.subform": "Underskjema",
   "ux_editor.success": "Vellykket",
   "ux_editor.sync_error_layout_set_component_id": "En feil oppsto under synkronisering av komponentID i en av layoutfilene. Vennligst forsikre deg om at layoutfilene kun inneholder gyldig JSON-struktur og prøv igjen.",
   "ux_editor.sync_error_settings_component_id": "En feil oppsto under synkronisering av komponentID i filen 'Settings.json'. Vennligst forsikre deg om at 'Settings.json' kun inneholder gyldig JSON-struktur og prøv igjen.",

frontend/packages/shared/src/api/mutations.ts

@@ -47,7 +47,7 @@ import type { ApplicationAttachmentMetadata } from 'app-shared/types/Application
 import type { CreateDeploymentPayload } from 'app-shared/types/api/CreateDeploymentPayload';
 import type { CreateReleasePayload } from 'app-shared/types/api/CreateReleasePayload';
 import type { CreateRepoCommitPayload } from 'app-shared/types/api/CreateRepoCommitPayload';
-import type { LayoutSetPayload } from 'app-shared/types/api/LayoutSetsResponse';
+import type { LayoutSetPayload } from 'app-shared/types/api/LayoutSetPayload';
 import type { ILayoutSettings, ITextResourcesObjectFormat } from 'app-shared/types/global';
 import type { RuleConfig } from 'app-shared/types/RuleConfig';
 import type { UpdateTextIdPayload } from 'app-shared/types/api/UpdateTextIdPayload';

frontend/packages/shared/src/types/BpmnTaskType.ts

@@ -0,0 +1 @@
+export type BpmnTaskType = 'data' | 'confirmation' | 'feedback' | 'signing' | 'payment';

frontend/packages/shared/src/types/api/LayoutSetPayload.ts

@@ -0,0 +1,19 @@
+import type { BpmnTaskType } from '../BpmnTaskType';
+
+export interface LayoutSetPayload {
+  taskType?: BpmnTaskType;
+  layoutSetConfig: LayoutSetConfig;
+}
+
+type SubFormConfig = {
+  type: 'subform';
+};
+
+type RegularLayoutSetConfig = {
+  tasks: string[];
+};
+
+export type LayoutSetConfig = {
+  id: string;
+  dataType?: string;
+} & (SubFormConfig | RegularLayoutSetConfig);

frontend/packages/shared/src/types/api/LayoutSetsResponse.ts

@@ -1,16 +1,12 @@
-export type BpmnTaskType = 'data' | 'confirmation' | 'feedback' | 'signing' | 'payment';
-
-export interface LayoutSets {
+export type LayoutSets = {
   sets: LayoutSetConfig[];
-}
+};
 
-export interface LayoutSetConfig {
+export type LayoutSet = {
   id: string;
   dataType?: string;
-  tasks: string[];
-}
+  tasks?: string[];
+  type?: string;
+};
 
-export interface LayoutSetPayload {
-  taskType: BpmnTaskType;
-  layoutSetConfig: LayoutSetConfig;
-}
+export type LayoutSetConfig = LayoutSet;

frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.module.css

@@ -1,8 +1,6 @@
-.layoutSetsDropDown {
-  min-width: 20vw;
-}
-
 .root {
   display: flex;
   flex-direction: row;
+  align-items: center;
+  gap: var(--fds-spacing-1);
 }

frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { LayoutSetsContainer } from './LayoutSetsContainer';
 import { queryClientMock } from 'app-shared/mocks/queryClientMock';
@@ -12,35 +12,73 @@ import {
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { appContextMock } from '../../testing/appContextMock';
 import { app, org } from '@studio/testing/testids';
+import {
+  addFeatureFlagToLocalStorage,
+  removeFeatureFlagFromLocalStorage,
+} from 'app-shared/utils/featureToggleUtils';
+import { textMock } from '@studio/testing/mocks/i18nMock';
 
 // Test data
 const layoutSetName1 = layoutSet1NameMock;
 const layoutSetName2 = layoutSet2NameMock;
 
 describe('LayoutSetsContainer', () => {
-  it('renders component', async () => {
+  it('should render the layout-sets as options within a combobox', async () => {
+    const user = userEvent.setup();
     render();
 
+    const combobox = screen.getByRole('combobox');
+    await user.click(combobox);
+
     expect(await screen.findByRole('option', { name: layoutSetName1 })).toBeInTheDocument();
     expect(await screen.findByRole('option', { name: layoutSetName2 })).toBeInTheDocument();
   });
 
-  it('NativeSelect should be rendered', async () => {
-    render();
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('Should update selected layout set when set is clicked in native select', async () => {
+  it('Should update with selected layout', async () => {
     render();
     const user = userEvent.setup();
-    await user.selectOptions(screen.getByRole('combobox'), layoutSetName2);
-    expect(appContextMock.setSelectedFormLayoutSetName).toHaveBeenCalledTimes(1);
+    const combobox = screen.getByRole('combobox');
+    await user.click(combobox);
+    await user.click(screen.getByRole('option', { name: layoutSetName2 }));
+
+    await waitFor(() =>
+      expect(appContextMock.setSelectedFormLayoutSetName).toHaveBeenCalledTimes(1),
+    );
     expect(appContextMock.refetchLayouts).toHaveBeenCalledTimes(1);
     expect(appContextMock.refetchLayouts).toHaveBeenCalledWith('test-layout-set-2');
     expect(appContextMock.refetchLayoutSettings).toHaveBeenCalledTimes(1);
     expect(appContextMock.refetchLayoutSettings).toHaveBeenCalledWith('test-layout-set-2');
     expect(appContextMock.onLayoutSetNameChange).toHaveBeenCalledWith('test-layout-set-2');
   });
+
+  it('should render add and delete subform buttons when feature is enabled', () => {
+    addFeatureFlagToLocalStorage('subForm');
+
+    render();
+    const createSubFormButton = screen.getByRole('button', {
+      name: textMock('ux_editor.create.subform'),
+    });
+    expect(createSubFormButton).toBeInTheDocument();
+
+    const deleteSubFormButton = screen.getByRole('button', {
+      name: textMock('ux_editor.delete.subform'),
+    });
+    expect(deleteSubFormButton).toBeInTheDocument();
+    removeFeatureFlagFromLocalStorage('subForm');
+  });
+
+  it('should not render add and delete subform buttons when feature is disabled', () => {
+    render();
+    const createSubFormButton = screen.queryByRole('button', {
+      name: textMock('ux_editor.create.subform'),
+    });
+    expect(createSubFormButton).not.toBeInTheDocument();
+
+    const deleteSubFormButton = screen.queryByRole('button', {
+      name: textMock('ux_editor.delete.subform'),
+    });
+    expect(deleteSubFormButton).not.toBeInTheDocument();
+  });
 });
 
 const render = () => {

frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect } from 'react';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
-import { NativeSelect } from '@digdir/designsystemet-react';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useText, useAppContext } from '../../hooks';
 import classes from './LayoutSetsContainer.module.css';
 import { ExportForm } from './ExportForm';
 import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
+import { SubFormWrapper } from './SubForm/SubFormWrapper';
+import { StudioCombobox } from '@studio/components';
 
 export function LayoutSetsContainer() {
   const { org, app } = useStudioEnvironmentParams();
-  const layoutSetsQuery = useLayoutSetsQuery(org, app);
-  const layoutSetNames = layoutSetsQuery.data?.sets?.map((set) => set.id);
+  const { data: layoutSetsResponse } = useLayoutSetsQuery(org, app);
+  const layoutSets = layoutSetsResponse?.sets;
   const t = useText();
   const {
     selectedFormLayoutSetName,
@@ -25,37 +26,45 @@ export function LayoutSetsContainer() {
     onLayoutSetNameChange(selectedFormLayoutSetName);
   }, [onLayoutSetNameChange, selectedFormLayoutSetName]);
 
-  const onLayoutSetClick = async (set: string) => {
-    if (selectedFormLayoutSetName !== set) {
-      await refetchLayouts(set);
-      await refetchLayoutSettings(set);
+  if (!layoutSets) return null;
 
-      setSelectedFormLayoutSetName(set);
+  const handleLayoutSetChange = async (layoutSetName: string) => {
+    if (selectedFormLayoutSetName !== layoutSetName && layoutSetName) {
+      await refetchLayouts(layoutSetName);
+      await refetchLayoutSettings(layoutSetName);
+
+      setSelectedFormLayoutSetName(layoutSetName);
       setSelectedFormLayoutName(undefined);
-      onLayoutSetNameChange(set);
+      onLayoutSetNameChange(layoutSetName);
     }
   };
 
-  if (!layoutSetNames) return null;
-
   return (
     <div className={classes.root}>
-      <NativeSelect
-        aria-label={t('left_menu.layout_dropdown_menu_label')}
-        onChange={(event) => onLayoutSetClick(event.target.value)}
-        value={selectedFormLayoutSetName}
-        className={classes.layoutSetsDropDown}
-        size='small'
+      <StudioCombobox
+        label={t('left_menu.layout_dropdown_menu_label')}
+        hideLabel
+        value={[selectedFormLayoutSetName]}
+        onValueChange={([value]) => handleLayoutSetChange(value)}
       >
-        {layoutSetNames.map((set: string) => {
-          return (
-            <option key={set} value={set}>
-              {set}
-            </option>
-          );
-        })}
-      </NativeSelect>
+        {layoutSets.map((layoutSet) => (
+          <StudioCombobox.Option
+            value={layoutSet.id}
+            key={layoutSet.id}
+            description={layoutSet.type === 'subform' && t('ux_editor.subform')}
+          >
+            {layoutSet.id}
+          </StudioCombobox.Option>
+        ))}
+      </StudioCombobox>
       {shouldDisplayFeature('exportForm') && <ExportForm />}
+      {shouldDisplayFeature('subForm') && (
+        <SubFormWrapper
+          layoutSets={layoutSetsResponse}
+          onSubFormCreated={handleLayoutSetChange}
+          selectedLayoutSet={selectedFormLayoutSetName}
+        />
+      )}
     </div>
   );
 }

frontend/packages/ux-editor/src/components/Elements/SubForm/CreateSubFormWrapper.module.css

@@ -0,0 +1,3 @@
+.confirmCreateButton {
+  margin-top: var(--fds-spacing-2);
+}