diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx index 3289b59d8e5..8cf0710b45f 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx +++ b/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 ? ( ) : ( diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx index d0c077880e4..9f7d1ff9c72 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx +++ b/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); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx index f4c9d94da80..ae8e48e28cc 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx +++ b/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 = ({ {displayDataModelInput ? ( handleDataModel(e.target.value)} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts index f239c07a245..1af67251c53 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts +++ b/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'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx index 9e33b3cf106..ece47e04d2d 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx +++ b/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); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx index 511aa1dc96f..dba2761057c 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/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'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css index d4591226e1d..db0ddb9bff0 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css +++ b/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; +} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx index a01c5c83402..db8672d1628 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx +++ b/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'; diff --git a/frontend/packages/ux-editor/src/testing/appContextMock.ts b/frontend/packages/ux-editor/src/testing/appContextMock.ts index 3bca2fbf221..8224645d412 100644 --- a/frontend/packages/ux-editor/src/testing/appContextMock.ts +++ b/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(),