small adjustments

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

@@ -5,21 +5,21 @@ import { StudioButton, StudioSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 
 type CreateNewSubformButtonsProps = {
-  isPendingLayoutSetMutation: boolean;
+  isPendingNewSubformMutation: boolean;
   disableSaveButton: boolean;
   displayCloseButton: boolean;
   handleCloseButton: () => void;
 };
 
 export const CreateNewSubformButtons = ({
-  isPendingLayoutSetMutation,
+  isPendingNewSubformMutation,
   disableSaveButton,
   displayCloseButton,
   handleCloseButton,
 }: CreateNewSubformButtonsProps) => {
   const { t } = useTranslation();
 
-  const saveIcon = isPendingLayoutSetMutation ? (
+  const saveIcon = isPendingNewSubformMutation ? (
     <StudioSpinner size='sm' spinnerTitle={t('general.loading')} />
   ) : (
     <CheckmarkIcon />

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

@@ -44,7 +44,8 @@ export const CreateNewSubformSection = ({
   };
 
   const handleDataModel = (dataModelId: string) => {
-    // Add data model validation here when this PR is merged: https://github.com/Altinn/altinn-studio/issues/13364
+    // Add data model validation here and replace dataModel useState with dataModelError
+    // when this PR is merged: https://github.com/Altinn/altinn-studio/issues/13364
     setDataModel(dataModelId);
   };
 

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery';
 
-type SubformDataModelProps = {
+export type SubformDataModelProps = {
   handleDataModel: (dataModelId: string) => void;
   setDisplayDataModelInput: (setDisplayDataModelInput: boolean) => void;
   setDataModel: (dataModelId: string) => void;
@@ -51,7 +51,7 @@ export const SubformDataModel = ({
       </StudioNativeSelect>
       {displayDataModelInput ? (
         <StudioTextfield
-          name='subformDataModel'
+          name='newSubformDataModel'
           label={t('ux_editor.component_properties.subform.create_new_data_model_label')}
           size='sm'
           onChange={(e) => handleDataModel(e.target.value)}

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts

@@ -1,2 +1 @@
-export { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet';
-export { SubformDataModelSelect } from './SubformDataModelSelect';
+export { CreateNewSubformSection } from './CreateNewSubformSection';

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

@@ -49,21 +49,6 @@ describe('EditLayoutSet', () => {
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
 
-  it('should disable save button until user has selected a subform', async () => {
-    const user = userEvent.setup();
-    renderEditLayoutSet(subformLayoutSet);
-
-    const saveButton = screen.getByRole('button', { name: textMock('general.save') });
-    expect(saveButton).toBeDisabled();
-
-    const subformSelector = screen.getByRole('combobox', {
-      name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'),
-    });
-    await user.selectOptions(subformSelector, [subformLayoutSetId]);
-
-    expect(saveButton).not.toBeDisabled();
-  });
-
   it('should call handleComponentChange when save button is clicked', async () => {
     const user = userEvent.setup();
     renderEditLayoutSet(subformLayoutSet);

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { CreateNewSubformSection } from './CreateNewSubformLayoutSet';
+import { CreateNewSubformSection } from './CreateNewSubformSection';
 import { SubformUtilsImpl } from '@altinn/ux-editor/classes/SubformUtils';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css

@@ -8,3 +8,13 @@
   text-overflow: ellipsis;
   width: 100%;
 }
+
+.createSubformLinkButton {
+  padding-left: var(--fds-spacing-1);
+  border-radius: var(--fds-sizing-1);
+}
+
+.saveSubformButton,
+.createSubformLinkButton {
+  align-self: flex-start;
+}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { EditLayoutSet } from './EditLayoutSet';
 import type { ComponentType } from 'app-shared/types/ComponentType';
 import type { IGenericEditComponent } from '../../../../components/config/componentConfig';
-import { DefinedLayoutSet } from './EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet';
+import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet';
 import { StudioButton } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { PencilIcon } from '@studio/icons';

frontend/packages/ux-editor/src/testing/appContextMock.ts

@@ -13,6 +13,7 @@ export const appContextMock: AppContextProps = {
   setSelectedFormLayoutSetName: jest.fn(),
   selectedFormLayoutName: layout1NameMock,
   setSelectedFormLayoutName: jest.fn(),
+  updateLayoutSetsForPreview: jest.fn(),
   updateLayoutsForPreview: jest.fn(),
   updateLayoutSettingsForPreview: jest.fn(),
   updateTextsForPreview: jest.fn(),