feat: Create datamodel for subform in config

frontend/language/src/nb.json

@@ -1373,11 +1373,14 @@
   "ux_editor.component_properties.stickyHeader": "Fest tittelraden",
   "ux_editor.component_properties.style": "Stil",
   "ux_editor.component_properties.subdomains": "Subdomener (kommaseparert)",
+  "ux_editor.component_properties.subform.choose_data_model": "Velg datamodell...",
   "ux_editor.component_properties.subform.choose_layout_set": "Velg et underskjema...",
   "ux_editor.component_properties.subform.choose_layout_set_description": "Velg først underskjemaet du vil bruke i Tabell for underskjema. Deretter kan du sette opp egenskapene for komponenten.",
   "ux_editor.component_properties.subform.choose_layout_set_header": "Velg underskjemaet du vil bruke",
   "ux_editor.component_properties.subform.choose_layout_set_label": "Velg et underskjema",
   "ux_editor.component_properties.subform.create_layout_set_button": "Opprett et nytt underskjema",
+  "ux_editor.component_properties.subform.create_new_data_model": "Lag ny datamodell",
+  "ux_editor.component_properties.subform.create_new_data_model_label": "Navn på ny datamodell",
   "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema",
   "ux_editor.component_properties.subform.data_model_binding_label": "Velg datamodellknytning",
   "ux_editor.component_properties.subform.data_model_empty_messsage": "Ingen tilgjengelige datamodeller",

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

@@ -1,5 +1,6 @@
 export enum AppsQueryKey {
   AppLayouts = 'formLayouts',
+  AppLayoutSets = 'fetchLayoutSets',
   AppLayoutSettings = 'layoutSettings',
   AppTextResources = 'fetchTextResources',
 }

frontend/packages/ux-editor/src/AppContext.test.tsx

@@ -163,6 +163,21 @@ describe('AppContext', () => {
     );
   });
 
+  it('invalidates layout sets query for Apps in preview', async () => {
+    const { queryClient } = renderAppContext(({ updateLayoutSetsForPreview }: AppContextProps) => (
+      <Button onClick={() => updateLayoutSetsForPreview()} />
+    ));
+
+    await clickButton();
+
+    await waitFor(async () => expect(queryClient.invalidateQueries).toHaveBeenCalledTimes(1));
+    await waitFor(async () =>
+      expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+        queryKey: [AppsQueryKey.AppLayoutSets],
+      }),
+    );
+  });
+
   it('invalidates layout settings query for Apps in preview', async () => {
     const { queryClient } = renderAppContext(
       ({ updateLayoutSettingsForPreview, selectedFormLayoutSetName }: AppContextProps) => (

frontend/packages/ux-editor/src/AppContext.tsx

@@ -20,6 +20,7 @@ export interface AppContextProps {
   selectedFormLayoutName: string;
   setSelectedFormLayoutName: (selectedFormLayoutName: string) => void;
   updateLayoutsForPreview: (layoutSetName: string, resetQueries?: boolean) => Promise<void>;
+  updateLayoutSetsForPreview: (resetQueries?: boolean) => Promise<void>;
   updateLayoutSettingsForPreview: (layoutSetName: string, resetQueries?: boolean) => Promise<void>;
   updateTextsForPreview: (language: string, resetQueries?: boolean) => Promise<void>;
   shouldReloadPreview: boolean;
@@ -75,6 +76,13 @@ export const AppContextProvider = ({
     [refetch],
   );
 
+  const updateLayoutSetsForPreview = useCallback(
+    async (resetQueries: boolean = false): Promise<void> => {
+      return await refetch([AppsQueryKey.AppLayoutSets], resetQueries);
+    },
+    [refetch],
+  );
+
   const updateLayoutSettingsForPreview = useCallback(
     async (layoutSetName: string, resetQueries: boolean = false): Promise<void> => {
       return await refetch([AppsQueryKey.AppLayoutSettings, layoutSetName], resetQueries);
@@ -97,6 +105,7 @@ export const AppContextProvider = ({
       selectedFormLayoutName,
       setSelectedFormLayoutName,
       updateLayoutsForPreview,
+      updateLayoutSetsForPreview,
       updateLayoutSettingsForPreview,
       updateTextsForPreview,
       shouldReloadPreview,
@@ -109,6 +118,7 @@ export const AppContextProvider = ({
       selectedFormLayoutName,
       setSelectedFormLayoutName,
       updateLayoutsForPreview,
+      updateLayoutSetsForPreview,
       updateLayoutSettingsForPreview,
       updateTextsForPreview,
       shouldReloadPreview,

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import classes from './CreateNewSubformButtons.module.css';
+import { CheckmarkIcon, TrashIcon } from '@studio/icons';
+import { StudioButton, StudioSpinner } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+
+type CreateNewSubformButtonsProps = {
+  isPendingNewSubformMutation: boolean;
+  disableSaveButton: boolean;
+  displayCloseButton: boolean;
+  handleCloseButton: () => void;
+};
+
+export const CreateNewSubformButtons = ({
+  isPendingNewSubformMutation,
+  disableSaveButton,
+  displayCloseButton,
+  handleCloseButton,
+}: CreateNewSubformButtonsProps) => {
+  const { t } = useTranslation();
+
+  const saveIcon = isPendingNewSubformMutation ? (
+    <StudioSpinner size='sm' spinnerTitle={t('general.loading')} />
+  ) : (
+    <CheckmarkIcon />
+  );
+
+  return (
+    <div className={classes.buttonGroup}>
+      <StudioButton
+        icon={saveIcon}
+        type='submit'
+        title={t('general.save')}
+        disabled={disableSaveButton}
+        variant='secondary'
+        color='success'
+      />
+      {displayCloseButton && (
+        <StudioButton
+          onClick={handleCloseButton}
+          title={t('general.close')}
+          icon={<TrashIcon />}
+          variant='secondary'
+          color='danger'
+        />
+      )}
+    </div>
+  );
+};