From fb09f9954e60351b516b00e429de2fb468cb1222 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 8 Nov 2024 15:08:59 +0100 Subject: [PATCH 01/25] redesign user story for next recommended action for subform component --- .../CreateNewSubformLayoutSet.module.css | 10 +-- .../CreateNewSubformLayoutSet.tsx | 33 +++++---- .../DefinedLayoutSet/DefinedLayoutSet.tsx | 8 +-- .../EditLayoutSet/EditLayoutSet.tsx | 67 +++++++------------ .../EditLayoutSetButton.test.tsx | 46 ------------- .../EditLayoutSetButtons.module.css | 4 -- .../EditLayoutSetButtons.tsx | 29 -------- .../SelectLayoutSet/SelectLayoutSet.tsx | 37 +--------- 8 files changed, 49 insertions(+), 185 deletions(-) delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButton.test.tsx delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.module.css delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css index 7def1fa7574..f860cd2085a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css @@ -1,10 +1,4 @@ -.savelayoutSetButton { +.buttonGroup { display: flex; - align-self: flex-start; - border: 2px solid var(--success-color); - color: var(--success-color); -} - -.headerIcon { - font-size: large; + gap: var(--fds-spacing-2); } diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx index 896e8172cd6..f681c082053 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { StudioButton, StudioCard, StudioTextfield } from '@studio/components'; -import { ClipboardIcon, CheckmarkIcon } from '@studio/icons'; +import { CheckmarkIcon, TrashIcon } from '@studio/icons'; import classes from './CreateNewSubformLayoutSet.module.css'; import { SubformDataModelSelect } from './SubformDataModelSelect'; import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName'; @@ -11,11 +11,13 @@ import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; type CreateNewSubformLayoutSetProps = { onSubformCreated: (layoutSetName: string) => void; layoutSets: LayoutSets; + setShowCreateSubformCard: (showCreateSubform: boolean) => void; }; export const CreateNewSubformLayoutSet = ({ onSubformCreated, layoutSets, + setShowCreateSubformCard, }: CreateNewSubformLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [newSubform, setNewSubform] = useState(''); @@ -37,9 +39,6 @@ export const CreateNewSubformLayoutSet = ({ return ( - - - - } - onClick={handleCreateSubform} - title={t('general.close')} - disabled={!newSubform || !!nameError || !selectedDataType} - variant='tertiary' - color='success' - /> +
+ } + onClick={handleCreateSubform} + title={t('general.save')} + disabled={!newSubform || !!nameError || !selectedDataType} + variant='secondary' + color='success' + /> + setShowCreateSubformCard(false)} + title={t('general.close')} + icon={} + variant='secondary' + color='danger' + /> +
); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx index 3dedfbec09e..53251441e99 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx @@ -6,13 +6,9 @@ import classes from './DefinedLayoutSet.module.css'; type DefinedLayoutSetProps = { existingLayoutSetForSubform: string; - onClick: () => void; }; -export const DefinedLayoutSet = ({ - existingLayoutSetForSubform, - onClick, -}: DefinedLayoutSetProps) => { +export const DefinedLayoutSet = ({ existingLayoutSetForSubform }: DefinedLayoutSetProps) => { const { t } = useTranslation(); const value = ( @@ -26,12 +22,12 @@ export const DefinedLayoutSet = ({ aria-label={t('ux_editor.component_properties.subform.selected_layout_set_title', { subform: existingLayoutSetForSubform, })} - onClick={onClick} property={t('ux_editor.component_properties.subform.selected_layout_set_label')} title={t('ux_editor.component_properties.subform.selected_layout_set_title', { subform: existingLayoutSetForSubform, })} value={value} + readOnly={true} /> ); }; 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 9f1c6baae8e..53e6e39ab48 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 @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -import { StudioParagraph, StudioProperty, StudioRecommendedNextAction } from '@studio/components'; +import { StudioProperty, StudioRecommendedNextAction } from '@studio/components'; import { PlusIcon } from '@studio/icons'; import classes from './EditLayoutSet.module.css'; import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; @@ -22,60 +22,39 @@ export const EditLayoutSet = ({ layoutSets, }: EditLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); - const [isLayoutSetSelectorVisible, setIsLayoutSetSelectorVisible] = useState(false); - const [showCreateSubform, setShowCreateSubform] = useState(false); + const [showCreateSubformCard, setShowCreateSubformCard] = useState(false); - function handleClick() { - setShowCreateSubform(true); + if (existingLayoutSetForSubform) { + return ; } - if (isLayoutSetSelectorVisible) { - return ( - - ); - } - const layoutSetIsUndefined = !existingLayoutSetForSubform; - if (layoutSetIsUndefined) { - return ( - <> - - - {t('ux_editor.component_properties.subform.create_layout_set_description')} - + return ( + + {showCreateSubformCard ? ( + + ) : ( + <> } - onClick={handleClick} + onClick={() => setShowCreateSubformCard(true)} /> - - {showCreateSubform && ( - - )} - - ); - } - - return ( - setIsLayoutSetSelectorVisible(true)} - /> + + )} + ); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButton.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButton.test.tsx deleted file mode 100644 index 6fde6c2a852..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButton.test.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import { EditLayoutSetButtons, type EditLayoutSetButtonsProps } from './EditLayoutSetButtons'; -import userEvent from '@testing-library/user-event'; -import { textMock } from '@studio/testing/mocks/i18nMock'; - -const defaultEditLayoutSetButtonsProps: EditLayoutSetButtonsProps = { - onClose: jest.fn(), - onDelete: jest.fn(), -}; - -describe('EditLayoutSetButtons', () => { - it('should trigger onClose callback when close button is clicked', async () => { - const user = userEvent.setup(); - const onCloseMock = jest.fn(); - - renderEditLayoutSetButtons({ - ...defaultEditLayoutSetButtonsProps, - onClose: onCloseMock, - }); - - const closeButton = screen.getByRole('button', { name: textMock('general.close') }); - await user.click(closeButton); - - expect(onCloseMock).toHaveBeenCalledTimes(1); - }); - - it('should trigger onDelete callback when close button is clicked', async () => { - const user = userEvent.setup(); - const onDeleteMock = jest.fn(); - - renderEditLayoutSetButtons({ - ...defaultEditLayoutSetButtonsProps, - onDelete: onDeleteMock, - }); - - const deleteButton = screen.getByRole('button', { name: textMock('general.delete') }); - await user.click(deleteButton); - - expect(onDeleteMock).toHaveBeenCalledTimes(1); - }); -}); - -const renderEditLayoutSetButtons = (props?: EditLayoutSetButtonsProps) => { - return render(); -}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.module.css deleted file mode 100644 index 070293f3385..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.buttons { - display: flex; - gap: var(--studio-property-button-vertical-spacing); -} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.tsx deleted file mode 100644 index 4eea4c21233..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/EditLayoutSetButtons/EditLayoutSetButtons.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { StudioButton, StudioDeleteButton } from '@studio/components'; -import { CheckmarkIcon } from '@studio/icons'; -import classes from './EditLayoutSetButtons.module.css'; - -export type EditLayoutSetButtonsProps = { - onClose: () => void; - onDelete: () => void; -}; - -export const EditLayoutSetButtons = ({ - onClose, - onDelete, -}: EditLayoutSetButtonsProps): React.ReactElement => { - const { t } = useTranslation(); - - return ( -
- } - onClick={onClose} - title={t('general.close')} - variant='secondary' - /> - -
- ); -}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx index e4a5af2a737..b1c59e4e9ea 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx @@ -1,8 +1,7 @@ -import React, { type ChangeEvent } from 'react'; +import React from 'react'; import { StudioNativeSelect } from '@studio/components'; import { useTranslation } from 'react-i18next'; import classes from './SelectLayoutSet.module.css'; -import { EditLayoutSetButtons } from './EditLayoutSetButtons/EditLayoutSetButtons'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; import { SubformUtilsImpl } from '../../../../../../classes/SubformUtils'; @@ -11,45 +10,17 @@ import cn from 'classnames'; type SelectLayoutSetProps = { existingLayoutSetForSubform: string; onUpdateLayoutSet: (layoutSetId: string) => void; - onSetLayoutSetSelectorVisible: (visible: boolean) => void; - showButtons?: boolean; }; export const SelectLayoutSet = ({ existingLayoutSetForSubform, onUpdateLayoutSet, - onSetLayoutSetSelectorVisible, - showButtons, }: SelectLayoutSetProps) => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); const { data: layoutSets } = useLayoutSetsQuery(org, app); const subformUtils = new SubformUtilsImpl(layoutSets.sets); - const addLinkToLayoutSet = (layoutSetId: string): void => { - onUpdateLayoutSet(layoutSetId); - }; - - const deleteLinkToLayoutSet = (): void => { - onUpdateLayoutSet(undefined); - closeLayoutSetSelector(); - }; - - const closeLayoutSetSelector = (): void => { - onSetLayoutSetSelectorVisible(false); - }; - - const handleLayoutSetChange = (event: ChangeEvent): void => { - const selectedLayoutSetId = event.target.value; - - if (selectedLayoutSetId === '') { - deleteLinkToLayoutSet(); - return; - } - - addLinkToLayoutSet(selectedLayoutSetId); - }; - return (
onUpdateLayoutSet(e.target.value)} label={t('ux_editor.component_properties.subform.choose_layout_set_label')} defaultValue={existingLayoutSetForSubform} - onBlur={closeLayoutSetSelector} > {subformUtils.subformLayoutSetsIds.map((option) => ( @@ -71,9 +41,6 @@ export const SelectLayoutSet = ({ ))} - {showButtons && ( - - )}
); }; From 11e49b878dbf411cd102d7475920455d2aa21b2e Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Mon, 11 Nov 2024 12:17:57 +0100 Subject: [PATCH 02/25] remove old code - no subforms available warning --- .../NoSubformLayoutsExist.module.css | 3 --- .../NoSubformLayoutsExist.tsx | 14 -------------- .../NoSubformLayoutsExist/index.ts | 1 - 3 files changed, 18 deletions(-) delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.module.css delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.tsx delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/index.ts diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.module.css deleted file mode 100644 index f9c625687da..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.alert { - margin: 0 var(--fds-spacing-5); -} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.tsx deleted file mode 100644 index d29a0b3ad90..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/NoSubformLayoutsExist.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Alert } from '@digdir/designsystemet-react'; -import { useTranslation } from 'react-i18next'; -import classes from './NoSubformLayoutsExist.module.css'; - -export const NoSubformLayoutsExist = () => { - const { t } = useTranslation(); - - return ( - - {t('ux_editor.component_properties.subform.no_layout_sets_acting_as_subform')} - - ); -}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/index.ts deleted file mode 100644 index 3aa25640eb8..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/NoSubformLayoutsExist/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NoSubformLayoutsExist } from './NoSubformLayoutsExist'; From 6dfe24d18822b1509365e9f5f13b4b02331f1c37 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Mon, 11 Nov 2024 13:15:45 +0100 Subject: [PATCH 03/25] add new class --- .../ux-editor/src/classes/SubformUtils.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/frontend/packages/ux-editor/src/classes/SubformUtils.ts b/frontend/packages/ux-editor/src/classes/SubformUtils.ts index ebd270e2825..2839c495240 100644 --- a/frontend/packages/ux-editor/src/classes/SubformUtils.ts +++ b/frontend/packages/ux-editor/src/classes/SubformUtils.ts @@ -25,4 +25,20 @@ export class SubformUtilsImpl implements SubformUtils { (set) => set.type === 'subform', ) as Array; } + + public get recommendedNextActionText(): { + title: string; + description: string; + } { + return this.hasSubforms + ? { + title: 'ux_editor.component_properties.subform.choose_layout_set_header', + description: 'ux_editor.component_properties.subform.choose_layout_set_description', + } + : { + title: 'ux_editor.component_properties.subform.no_existing_layout_set_header', + description: + 'ux_editor.component_properties.subform.no_existing_layout_set_create_content', + }; + } } From 102dba233b051e7ee09374d5acf5ca97102eba19 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Mon, 11 Nov 2024 13:16:22 +0100 Subject: [PATCH 04/25] add instructions component if user has no subforms --- .../EditLayoutSet/SubformInstructions.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SubformInstructions.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SubformInstructions.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SubformInstructions.tsx new file mode 100644 index 00000000000..a6714425c15 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SubformInstructions.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { StudioList } from '@studio/components'; + +export const SubformInstructions = (): React.ReactElement => { + const { t } = useTranslation(); + const instructions = [ + t('ux_editor.component_properties.subform.no_existing_layout_set_instruction_name'), + t('ux_editor.component_properties.subform.no_existing_layout_set_instruction_datamodel'), + t('ux_editor.component_properties.subform.no_existing_layout_set_instruction_design'), + t('ux_editor.component_properties.subform.no_existing_layout_set_instruction_table_setup'), + ]; + + return ( + + + {t('ux_editor.component_properties.subform.no_existing_layout_set_instructions_header')} + + + {instructions.map((instruction, index) => ( + {instruction} + ))} + + + ); +}; From 93417537845e004150bf88a58b9171d0af7c9bca Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Mon, 11 Nov 2024 13:17:45 +0100 Subject: [PATCH 05/25] refactor logic --- .../CreateNewSubformLayoutSet.tsx | 28 +++++++---- .../EditLayoutSet/EditLayoutSet.module.css | 9 +++- .../EditLayoutSet/EditLayoutSet.tsx | 50 ++++++++++++++----- .../SelectLayoutSet/SelectLayoutSet.tsx | 6 +-- .../EditLayoutSetForSubform.tsx | 20 ++------ 5 files changed, 70 insertions(+), 43 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx index f681c082053..21a866eae93 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx @@ -9,15 +9,17 @@ import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform'; import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; type CreateNewSubformLayoutSetProps = { - onSubformCreated: (layoutSetName: string) => void; + onUpdateLayoutSet: (layoutSetName: string) => void; layoutSets: LayoutSets; setShowCreateSubformCard: (showCreateSubform: boolean) => void; + hasSubforms: boolean; }; export const CreateNewSubformLayoutSet = ({ - onSubformCreated, + onUpdateLayoutSet, layoutSets, setShowCreateSubformCard, + hasSubforms, }: CreateNewSubformLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [newSubform, setNewSubform] = useState(''); @@ -33,7 +35,11 @@ export const CreateNewSubformLayoutSet = ({ } function handleCreateSubform() { - createSubform({ layoutSetName: newSubform, onSubformCreated, dataType: selectedDataType }); + createSubform({ + layoutSetName: newSubform, + onSubformCreated: onUpdateLayoutSet, + dataType: selectedDataType, + }); } return ( @@ -60,13 +66,15 @@ export const CreateNewSubformLayoutSet = ({ variant='secondary' color='success' /> - setShowCreateSubformCard(false)} - title={t('general.close')} - icon={} - variant='secondary' - color='danger' - /> + {hasSubforms && ( + setShowCreateSubformCard(false)} + title={t('general.close')} + icon={} + variant='secondary' + color='danger' + /> + )} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css index cec24eef80a..08758ec752e 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css @@ -1,4 +1,9 @@ -.button { - padding-left: 0; +.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/EditLayoutSet/EditLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx index 53e6e39ab48..4a1fb85030e 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 @@ -2,57 +2,81 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -import { StudioProperty, StudioRecommendedNextAction } from '@studio/components'; -import { PlusIcon } from '@studio/icons'; +import { + StudioButton, + StudioParagraph, + StudioProperty, + StudioRecommendedNextAction, +} from '@studio/components'; +import { CheckmarkIcon, PlusIcon } from '@studio/icons'; import classes from './EditLayoutSet.module.css'; import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; +import { SubformUtilsImpl } from '@altinn/ux-editor/classes/SubformUtils'; +import { SubformInstructions } from './SubformInstructions'; type EditLayoutSetProps = { existingLayoutSetForSubform: string; onUpdateLayoutSet: (layoutSetId: string) => void; - onSubformCreated: (layoutSetName: string) => void; layoutSets: LayoutSets; }; export const EditLayoutSet = ({ existingLayoutSetForSubform, onUpdateLayoutSet, - onSubformCreated, layoutSets, }: EditLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [showCreateSubformCard, setShowCreateSubformCard] = useState(false); + const [selectedSubform, setSelectedSubform] = useState(existingLayoutSetForSubform); - if (existingLayoutSetForSubform) { - return ; - } + const subformUtils = new SubformUtilsImpl(layoutSets.sets); + const hasSubforms = subformUtils.hasSubforms; + const { title, description } = subformUtils.recommendedNextActionText; return ( - {showCreateSubformCard ? ( + {!hasSubforms && ( + <> + + {t('ux_editor.component_properties.subform.no_existing_layout_set_empty_subform')} + + + + )} + {showCreateSubformCard || !hasSubforms ? ( ) : ( <> } onClick={() => setShowCreateSubformCard(true)} /> + } + onClick={() => onUpdateLayoutSet(selectedSubform)} + title={t('general.save')} + disabled={!selectedSubform} + variant='secondary' + color='success' + /> )} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx index b1c59e4e9ea..917615f3d1a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx @@ -9,12 +9,12 @@ import cn from 'classnames'; type SelectLayoutSetProps = { existingLayoutSetForSubform: string; - onUpdateLayoutSet: (layoutSetId: string) => void; + setSelectedSubform: (layoutSetId: string) => void; }; export const SelectLayoutSet = ({ existingLayoutSetForSubform, - onUpdateLayoutSet, + setSelectedSubform, }: SelectLayoutSetProps) => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); @@ -30,7 +30,7 @@ export const SelectLayoutSet = ({ onUpdateLayoutSet(e.target.value)} + onChange={(e) => setSelectedSubform(e.target.value)} label={t('ux_editor.component_properties.subform.choose_layout_set_label')} defaultValue={existingLayoutSetForSubform} > 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 70ee13ca973..096f46ab757 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 @@ -1,12 +1,10 @@ import React from 'react'; import { EditLayoutSet } from './EditLayoutSet'; -import { NoSubformLayoutsExist } from './NoSubformLayoutsExist'; import type { ComponentType } from 'app-shared/types/ComponentType'; -import { SubformUtilsImpl } from '../../../../classes/SubformUtils'; import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import type { IGenericEditComponent } from '../../../../components/config/componentConfig'; -import { useAppContext } from '../../../../hooks'; +import { DefinedLayoutSet } from './EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet'; export const EditLayoutSetForSubform = ({ handleComponentChange, @@ -14,12 +12,10 @@ export const EditLayoutSetForSubform = ({ }: IGenericEditComponent): React.ReactElement => { const { org, app } = useStudioEnvironmentParams(); const { data: layoutSets } = useLayoutSetsQuery(org, app); - const { setSelectedFormLayoutSetName } = useAppContext(); - const subformUtils = new SubformUtilsImpl(layoutSets.sets); - - if (!subformUtils.hasSubforms) { - return ; + const existingLayoutSetForSubform = component['layoutSet']; + if (existingLayoutSetForSubform) { + return ; } const handleUpdatedLayoutSet = (layoutSet: string): void => { @@ -27,16 +23,10 @@ export const EditLayoutSetForSubform = ({ handleComponentChange(updatedComponent); }; - function handleCreatedSubform(layoutSetName: string) { - setSelectedFormLayoutSetName(layoutSetName); - handleUpdatedLayoutSet(layoutSetName); - } - return ( ); From 6ba6f550ec2f532fae5eaae39b07407745330c04 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Mon, 11 Nov 2024 13:17:55 +0100 Subject: [PATCH 06/25] new text keys --- frontend/language/src/nb.json | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 3d3da74bec8..369ff5fd028 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1319,10 +1319,10 @@ "ux_editor.component_properties.subdomains": "Subdomener (kommaseparert)", "ux_editor.component_properties.subform": "Sidegruppe for underskjema", "ux_editor.component_properties.subform.choose_layout_set": "Velg et underskjema...", - "ux_editor.component_properties.subform.choose_layout_set_description": " Før du kan bruke komponenten Tabell for underskjema, må du velge hvilket underskjema du skal bruke den med. Deretter kan du velge hvilke egenskaper komponenten skal ha.", + "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": "Lag et nytt underskjema", + "ux_editor.component_properties.subform.create_layout_set_button": "Opprett et nytt underskjema", "ux_editor.component_properties.subform.create_layout_set_description": "Hvis du velger å lage et nytt underskjema, oppretter vi et tomt underskjema for deg. Det må du selv utforme, før du kan sette opp tabellen.", "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema", "ux_editor.component_properties.subform.data_model_binding_label": "Velg datamodellknytning", @@ -1330,6 +1330,14 @@ "ux_editor.component_properties.subform.go_to_layout_set": "Gå til utforming av underskjemaet", "ux_editor.component_properties.subform.layout_set_is_missing_content_heading": "Underskjemaet ditt mangler innhold.", "ux_editor.component_properties.subform.layout_set_is_missing_content_paragraph": "Denne tabellen bruker underskjemaet for å hente feltene og tekstene som skal vises i tabellen. Velg Utform underskjemaet for å legge inn innhold.", + "ux_editor.component_properties.subform.no_existing_layout_set_create_content": "Du må først utforme underskjemaet, med de feltene og tekstene du vil vise i tabellen.", + "ux_editor.component_properties.subform.no_existing_layout_set_empty_subform": "Når du velger Lag underskjema, oppretter vi et tomt underskjema for deg, og legger til i listen med sider du kan utforme.", + "ux_editor.component_properties.subform.no_existing_layout_set_header": "Før du kan sette opp Tabell for underskjema, må du lage underskjemaet", + "ux_editor.component_properties.subform.no_existing_layout_set_instruction_datamodel": "Velg en datamodellknytning og bekreft med den grønne haken.", + "ux_editor.component_properties.subform.no_existing_layout_set_instruction_design": "Gå til Utform underskjemaet og lag innholdet til det.", + "ux_editor.component_properties.subform.no_existing_layout_set_instruction_name": "Gi underskjemaet et godt navn som du husker.", + "ux_editor.component_properties.subform.no_existing_layout_set_instruction_table_setup": "Gå tilbake til komponenten Tabell for underskjema og sett opp tabellen med de feltene du har utformet i underskjemaet.", + "ux_editor.component_properties.subform.no_existing_layout_set_instructions_header": "Slik gjør du:", "ux_editor.component_properties.subform.no_layout_sets_acting_as_subform": "Det finnes ingen sidegrupper i løsningen som kan brukes som et underskjema", "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema", "ux_editor.component_properties.subform.selected_layout_set_title": "Endre underskjemakobling til {{subform}}", From 1542457cc0b863c89371b4cad52a564af1187e77 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Mon, 11 Nov 2024 14:54:42 +0100 Subject: [PATCH 07/25] some refactor + subform button in config header + css adjustments --- frontend/language/src/nb.json | 3 +- .../SubformMissingContentWarning.module.css | 2 +- .../SubformMissingContentWarning.tsx | 4 +- .../DefinedLayoutSet.module.css | 5 +-- .../DefinedLayoutSet/DefinedLayoutSet.tsx | 11 ++---- .../EditLayoutSet/EditLayoutSet.tsx | 9 +---- .../SelectLayoutSet.module.css | 4 -- .../SelectLayoutSet/SelectLayoutSet.tsx | 39 +++++++------------ .../EditLayoutSetForSubform.module.css | 3 ++ .../EditLayoutSetForSubform.tsx | 30 ++++++++++---- .../PropertiesHeader.module.css | 1 + 11 files changed, 52 insertions(+), 59 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 369ff5fd028..550eac444ee 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1262,6 +1262,7 @@ "ux_editor.component_properties.minWidth": "Minimumshøyde", "ux_editor.component_properties.mode": "Modus", "ux_editor.component_properties.multiPage": "Fordel gruppen over flere sider", + "ux_editor.component_properties.navigate_to_subform_button": "Utform underskjemaet", "ux_editor.component_properties.nextButton": "Vis Neste-knapp", "ux_editor.component_properties.openByDefault": "Feltet skal være åpent ved innlasting", "ux_editor.component_properties.openInNewTab": "Åpne lenken i ny fane", @@ -1340,7 +1341,7 @@ "ux_editor.component_properties.subform.no_existing_layout_set_instructions_header": "Slik gjør du:", "ux_editor.component_properties.subform.no_layout_sets_acting_as_subform": "Det finnes ingen sidegrupper i løsningen som kan brukes som et underskjema", "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema", - "ux_editor.component_properties.subform.selected_layout_set_title": "Endre underskjemakobling til {{subform}}", + "ux_editor.component_properties.subform.selected_layout_set_title": "Valgt underskjemakobling er {{subform}}", "ux_editor.component_properties.summary.add_override": "Legg til overstyring", "ux_editor.component_properties.summary.override.component_id": "ID på komponenten", "ux_editor.component_properties.summary.override.empty_field_text": "Tekst for tomme felter", diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.module.css b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.module.css index 36cb113d802..69b85d1a400 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.module.css @@ -1,4 +1,4 @@ .redirectButton { margin-top: var(--fds-spacing-3); - max-width: var(--fds-sizing-30); + align-self: flex-start; } diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.tsx index 02cdcfbb32e..7df7d28af68 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.tsx @@ -31,14 +31,12 @@ export const SubformMissingContentWarning = ({ } - iconPlacement='left' disabled={!subformLayoutSetName} className={classes.redirectButton} > - {t('top_menu.create')} + {t('ux_editor.component_properties.navigate_to_subform_button')} ); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css index 934a4372f8e..bfe06b73a5b 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css @@ -1,5 +1,4 @@ .selectedLayoutSet { - align-items: center; - display: flex; - gap: var(--fds-spacing-1); + display: block; + padding-left: var(--fds-spacing-3); } diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx index 53251441e99..b5a49eb1272 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx @@ -11,14 +11,11 @@ type DefinedLayoutSetProps = { export const DefinedLayoutSet = ({ existingLayoutSetForSubform }: DefinedLayoutSetProps) => { const { t } = useTranslation(); - const value = ( - - {existingLayoutSetForSubform} - - ); - return ( } aria-label={t('ux_editor.component_properties.subform.selected_layout_set_title', { subform: existingLayoutSetForSubform, })} @@ -26,7 +23,7 @@ export const DefinedLayoutSet = ({ existingLayoutSetForSubform }: DefinedLayoutS title={t('ux_editor.component_properties.subform.selected_layout_set_title', { subform: existingLayoutSetForSubform, })} - value={value} + value={existingLayoutSetForSubform} readOnly={true} /> ); 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 4a1fb85030e..0feff5d17fb 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 @@ -16,19 +16,17 @@ import { SubformUtilsImpl } from '@altinn/ux-editor/classes/SubformUtils'; import { SubformInstructions } from './SubformInstructions'; type EditLayoutSetProps = { - existingLayoutSetForSubform: string; onUpdateLayoutSet: (layoutSetId: string) => void; layoutSets: LayoutSets; }; export const EditLayoutSet = ({ - existingLayoutSetForSubform, onUpdateLayoutSet, layoutSets, }: EditLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [showCreateSubformCard, setShowCreateSubformCard] = useState(false); - const [selectedSubform, setSelectedSubform] = useState(existingLayoutSetForSubform); + const [selectedSubform, setSelectedSubform] = useState(undefined); const subformUtils = new SubformUtilsImpl(layoutSets.sets); const hasSubforms = subformUtils.hasSubforms; @@ -58,10 +56,7 @@ export const EditLayoutSet = ({ /> ) : ( <> - + void; }; -export const SelectLayoutSet = ({ - existingLayoutSetForSubform, - setSelectedSubform, -}: SelectLayoutSetProps) => { +export const SelectLayoutSet = ({ setSelectedSubform }: SelectLayoutSetProps) => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); const { data: layoutSets } = useLayoutSetsQuery(org, app); const subformUtils = new SubformUtilsImpl(layoutSets.sets); return ( -
setSelectedSubform(e.target.value)} + label={t('ux_editor.component_properties.subform.choose_layout_set_label')} > - setSelectedSubform(e.target.value)} - label={t('ux_editor.component_properties.subform.choose_layout_set_label')} - defaultValue={existingLayoutSetForSubform} - > - - {subformUtils.subformLayoutSetsIds.map((option) => ( - - ))} - -
+ + {subformUtils.subformLayoutSetsIds.map((option) => ( + + ))} + ); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css new file mode 100644 index 00000000000..1e46d5356e6 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css @@ -0,0 +1,3 @@ +.navigateSubformButton { + margin-left: var(--fds-spacing-3); +} 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 096f46ab757..b75e1b5f1e0 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 @@ -5,17 +5,37 @@ import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery' import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import type { IGenericEditComponent } from '../../../../components/config/componentConfig'; import { DefinedLayoutSet } from './EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet'; +import { StudioButton } from '@studio/components'; +import { useTranslation } from 'react-i18next'; +import { PencilIcon } from '@studio/icons'; +import { useAppContext } from '@altinn/ux-editor/hooks'; +import classes from './EditLayoutSetForSubform.module.css'; export const EditLayoutSetForSubform = ({ handleComponentChange, component, }: IGenericEditComponent): React.ReactElement => { const { org, app } = useStudioEnvironmentParams(); + const { setSelectedFormLayoutSetName } = useAppContext(); const { data: layoutSets } = useLayoutSetsQuery(org, app); + const { t } = useTranslation(); const existingLayoutSetForSubform = component['layoutSet']; if (existingLayoutSetForSubform) { - return ; + return ( + <> + + } + onClick={() => setSelectedFormLayoutSetName(existingLayoutSetForSubform)} + color='second' + title={t('ux_editor.component_properties.navigate_to_subform_button')} + className={classes.navigateSubformButton} + > + {t('ux_editor.component_properties.navigate_to_subform_button')} + + + ); } const handleUpdatedLayoutSet = (layoutSet: string): void => { @@ -23,11 +43,5 @@ export const EditLayoutSetForSubform = ({ handleComponentChange(updatedComponent); }; - return ( - - ); + return ; }; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css index 72129bd41ee..0c958143711 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css @@ -4,4 +4,5 @@ background-color: var(--fds-semantic-surface-neutral-default); gap: var(--fds-spacing-2); padding-bottom: var(--fds-spacing-2); + align-items: flex-start; } From 83c2bafe3277fe3523a2ac2e3e9fa3b49ef9ce55 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Mon, 11 Nov 2024 15:16:38 +0100 Subject: [PATCH 08/25] small refactor + small adjustments + cleanup --- .../DefinedLayoutSet.module.css | 2 +- .../EditLayoutSet/EditLayoutSet.tsx | 30 +++++++++++-------- .../SelectLayoutSet/SelectLayoutSet.tsx | 1 - .../EditLayoutSetForSubform.tsx | 9 +----- 4 files changed, 19 insertions(+), 23 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css index bfe06b73a5b..2647e5af726 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css @@ -1,4 +1,4 @@ .selectedLayoutSet { display: block; - padding-left: var(--fds-spacing-3); + padding: var(--fds-spacing-3); } 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 0feff5d17fb..3249ac4d4ca 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,6 +1,5 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; import { StudioButton, @@ -11,27 +10,32 @@ import { import { CheckmarkIcon, PlusIcon } from '@studio/icons'; import classes from './EditLayoutSet.module.css'; import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; -import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; import { SubformUtilsImpl } from '@altinn/ux-editor/classes/SubformUtils'; import { SubformInstructions } from './SubformInstructions'; +import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; +import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; +import type { IGenericEditComponent } from '@altinn/ux-editor/components/config/componentConfig'; +import type { ComponentType } from 'app-shared/types/ComponentType'; -type EditLayoutSetProps = { - onUpdateLayoutSet: (layoutSetId: string) => void; - layoutSets: LayoutSets; -}; - -export const EditLayoutSet = ({ - onUpdateLayoutSet, - layoutSets, -}: EditLayoutSetProps): React.ReactElement => { +export const EditLayoutSet = ({ + handleComponentChange, + component, +}: IGenericEditComponent): React.ReactElement => { const { t } = useTranslation(); const [showCreateSubformCard, setShowCreateSubformCard] = useState(false); const [selectedSubform, setSelectedSubform] = useState(undefined); + const { org, app } = useStudioEnvironmentParams(); + const { data: layoutSets } = useLayoutSetsQuery(org, app); const subformUtils = new SubformUtilsImpl(layoutSets.sets); const hasSubforms = subformUtils.hasSubforms; const { title, description } = subformUtils.recommendedNextActionText; + const handleUpdatedLayoutSet = (layoutSet: string): void => { + const updatedComponent = { ...component, layoutSet }; + handleComponentChange(updatedComponent); + }; + return ( @@ -66,7 +70,7 @@ export const EditLayoutSet = ({ } - onClick={() => onUpdateLayoutSet(selectedSubform)} + onClick={() => handleUpdatedLayoutSet(selectedSubform)} title={t('general.save')} disabled={!selectedSubform} variant='secondary' diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx index 03c42da5c03..cfd6890ed06 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx @@ -5,7 +5,6 @@ import classes from './SelectLayoutSet.module.css'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; import { SubformUtilsImpl } from '../../../../../../classes/SubformUtils'; -// import cn from 'classnames'; type SelectLayoutSetProps = { setSelectedSubform: (layoutSetId: string) => void; 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 b75e1b5f1e0..e344dc9a956 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 @@ -15,9 +15,7 @@ export const EditLayoutSetForSubform = ({ handleComponentChange, component, }: IGenericEditComponent): React.ReactElement => { - const { org, app } = useStudioEnvironmentParams(); const { setSelectedFormLayoutSetName } = useAppContext(); - const { data: layoutSets } = useLayoutSetsQuery(org, app); const { t } = useTranslation(); const existingLayoutSetForSubform = component['layoutSet']; @@ -38,10 +36,5 @@ export const EditLayoutSetForSubform = ({ ); } - const handleUpdatedLayoutSet = (layoutSet: string): void => { - const updatedComponent = { ...component, layoutSet }; - handleComponentChange(updatedComponent); - }; - - return ; + return ; }; From b6bc130febbb16c8c1ee9820913405598bbd9340 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Tue, 12 Nov 2024 07:53:03 +0100 Subject: [PATCH 09/25] fix tests in createNewsubformlayoutset --- .../CreateNewSubformLayoutSet.test.tsx | 47 ++++++++++--------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx index dc85b96c26d..d065b6da50d 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx @@ -1,20 +1,19 @@ import React from 'react'; import { renderWithProviders } from '../../../../../../testing/mocks'; import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; -import type { ComponentType } from 'app-shared/types/ComponentType'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { screen, waitFor } from '@testing-library/react'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; import { app, org } from '@studio/testing/testids'; import { QueryKey } from 'app-shared/types/QueryKey'; import { layoutSets } from 'app-shared/mocks/mocks'; -import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; import userEvent from '@testing-library/user-event'; -import type { FormComponent } from '../../../../../../types/FormComponent'; import { AppContext } from '../../../../../../AppContext'; import { appContextMock } from '../../../../../../testing/appContextMock'; +import { layoutSetsMock } from '@altinn/ux-editor/testing/layoutSetsMock'; -const onSubformCreatedMock = jest.fn(); +const onUpdateLayoutSetMock = jest.fn(); +const setShowCreateSubformCardMock = jest.fn(); const selectedOptionDataType = 'moped'; jest.mock('./SubformDataModelSelect', () => ({ @@ -43,12 +42,6 @@ describe('CreateNewSubformLayoutSet ', () => { expect(card).toBeInTheDocument(); }); - it('displays the input field', () => { - renderCreateNewSubformLayoutSet(); - const input = screen.getByRole('textbox'); - expect(input).toBeInTheDocument(); - }); - it('displays the data model select', async () => { renderCreateNewSubformLayoutSet(); const dataModelSelect = screen.getByRole('combobox'); @@ -61,6 +54,18 @@ describe('CreateNewSubformLayoutSet ', () => { expect(saveButton).toBeInTheDocument(); }); + it('displays the cancel button', () => { + renderCreateNewSubformLayoutSet(); + const cancelButton = screen.getByRole('button', { name: textMock('general.close') }); + expect(cancelButton).toBeInTheDocument(); + }); + + it('displays not the cancel button when hasSubforms is false', () => { + renderCreateNewSubformLayoutSet({ hasSubforms: false }); + const cancelButton = screen.queryByRole('button', { name: textMock('general.close') }); + expect(cancelButton).not.toBeInTheDocument(); + }); + it('calls onSubformCreated when save button is clicked', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet(); @@ -68,17 +73,17 @@ describe('CreateNewSubformLayoutSet ', () => { await user.type(input, 'NewSubform'); const dataModelSelect = screen.getByRole('combobox'); await user.selectOptions(dataModelSelect, ['moped']); - const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); await user.click(saveButton); - await waitFor(() => expect(onSubformCreatedMock).toHaveBeenCalledTimes(1)); - expect(onSubformCreatedMock).toHaveBeenCalledWith('NewSubform'); + expect(onUpdateLayoutSetMock).toHaveBeenCalledTimes(1); + expect(onUpdateLayoutSetMock).toHaveBeenCalledWith('NewSubform'); }); it('disables the save button when input is invalid', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet(); - const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); expect(saveButton).toBeDisabled(); const input = screen.getByRole('textbox'); @@ -105,7 +110,7 @@ describe('CreateNewSubformLayoutSet ', () => { const input = screen.getByRole('textbox'); await user.type(input, 'NewSubform'); - const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); expect(saveButton).toBeDisabled(); }); @@ -124,18 +129,18 @@ describe('CreateNewSubformLayoutSet ', () => { }); }); -const renderCreateNewSubformLayoutSet = ( - layoutSetsMock: LayoutSets = layoutSets, - componentProps: Partial> = {}, -) => { +const renderCreateNewSubformLayoutSet = ({ + hasSubforms = true, +}: { hasSubforms?: boolean } = {}) => { const queryClient = createQueryClientMock(); queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock); return renderWithProviders( , { queryClient }, From ac8979a8eed9fc6580baaebbc354dccafc4b740b Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Tue, 12 Nov 2024 09:35:09 +0100 Subject: [PATCH 10/25] keep the selected layoutset --- .../EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx index cfd6890ed06..1033dfdc898 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx @@ -8,9 +8,10 @@ import { SubformUtilsImpl } from '../../../../../../classes/SubformUtils'; type SelectLayoutSetProps = { setSelectedSubform: (layoutSetId: string) => void; + selectedSubform: string; }; -export const SelectLayoutSet = ({ setSelectedSubform }: SelectLayoutSetProps) => { +export const SelectLayoutSet = ({ setSelectedSubform, selectedSubform }: SelectLayoutSetProps) => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); const { data: layoutSets } = useLayoutSetsQuery(org, app); @@ -22,6 +23,7 @@ export const SelectLayoutSet = ({ setSelectedSubform }: SelectLayoutSetProps) => size='small' onChange={(e) => setSelectedSubform(e.target.value)} label={t('ux_editor.component_properties.subform.choose_layout_set_label')} + value={selectedSubform} > {subformUtils.subformLayoutSetsIds.map((option) => ( From 5eb7621b6f82e37562d83baad409ef4cafe8aa8f Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Tue, 12 Nov 2024 09:39:52 +0100 Subject: [PATCH 11/25] fix --- .../EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 3249ac4d4ca..81b31abe538 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 @@ -60,7 +60,10 @@ export const EditLayoutSet = ({ /> ) : ( <> - + Date: Tue, 12 Nov 2024 12:16:53 +0100 Subject: [PATCH 12/25] fix tests --- .../SubformDataModelSelect.tsx | 12 +- .../EditLayoutSetForSubform.test.tsx | 247 +++++++++--------- .../EditLayoutSetForSubform.tsx | 2 - 3 files changed, 135 insertions(+), 126 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx index e1ed83dfa1b..904feaff3e8 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx @@ -17,7 +17,7 @@ export const SubformDataModelSelect = ({ }: ISubformDataModelSelectProps) => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); - const { data: dataModelIds = [] } = useAppMetadataModelIdsQuery(org, app, false); + const { data: dataModelIds } = useAppMetadataModelIdsQuery(org, app, false); function handleChange(dataType: string) { setSelectedDataType(dataType); @@ -32,16 +32,16 @@ export const SubformDataModelSelect = ({ size='small' > - {dataModelIds.length === 0 ? ( - - ) : ( + {dataModelIds ? ( dataModelIds.map((dataModelId) => ( )) + ) : ( + )} ); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx index 5c55c1eb33a..a491fbb3ec6 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx @@ -17,49 +17,50 @@ import { appContextMock } from '../../../../testing/appContextMock'; const handleComponentChangeMock = jest.fn(); const setSelectedFormLayoutSetMock = jest.fn(); +const subformLayoutSetId = 'subformLayoutSetId'; +const layoutSetsDefault = { sets: [{ id: subformLayoutSetId, type: 'subform' }] } as LayoutSets; describe('EditLayoutSetForSubform', () => { afterEach(jest.clearAllMocks); - it('displays "no existing subform layout sets" message if no subform layout set exist', () => { - renderEditLayoutSetForSubform(); - const noExistingSubformForLayoutSet = screen.getByText( - textMock('ux_editor.component_properties.subform.no_layout_sets_acting_as_subform'), - ); - expect(noExistingSubformForLayoutSet).toBeInTheDocument(); - }); + // it('displays "no existing subform layout sets" message if no subform layout set exist', () => { + // renderEditLayoutSetForSubform(); + // const noExistingSubformForLayoutSet = screen.getByText( + // textMock('ux_editor.component_properties.subform.no_layout_sets_acting_as_subform'), + // ); + // expect(noExistingSubformForLayoutSet).toBeInTheDocument(); + // }); it('displays the headers for recommendNextAction if subform layout sets exists', () => { - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const setLayoutSetButton = screen.getByRole('heading', { name: textMock('ux_editor.component_properties.subform.choose_layout_set_header'), }); expect(setLayoutSetButton).toBeInTheDocument(); }); + // Må kanskje flyttes til editLayoutsetforSubform it('displays the description for recommendNextAction if subform layout sets exists', () => { - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const setLayoutSetButton = screen.getByText( textMock('ux_editor.component_properties.subform.choose_layout_set_description'), ); expect(setLayoutSetButton).toBeInTheDocument(); }); + // Må kanskje flyttes til editLayoutsetforSubform it('displays a button(Opprett et nytt skjema) to set a layout set for the subform', async () => { - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const createNewLayoutSetButton = screen.getByRole('button', { name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), }); expect(createNewLayoutSetButton).toBeInTheDocument(); }); + // Må kanskje flyttes til editLayoutsetforSubform it('renders CreateNewLayoutSet component when clicking the create new layout set button', async () => { const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const createNewLayoutSetButton = screen.getByRole('button', { name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), }); @@ -70,9 +71,9 @@ describe('EditLayoutSetForSubform', () => { expect(createNewLayoutSetComponent).toBeInTheDocument(); }); + // Må kanskje flyttes til editLayoutsetforSubform it('displays a select to choose a layout set for the subform', async () => { - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const selectLayoutSet = getSelectForLayoutSet(); const options = within(selectLayoutSet).getAllByRole('option'); expect(options).toHaveLength(2); @@ -82,12 +83,15 @@ describe('EditLayoutSetForSubform', () => { expect(options[1]).toHaveTextContent(subformLayoutSetId); }); - it('calls handleComponentChange when setting a layout set for the subform', async () => { + // Må kanskje flyttes til editLayoutsetforSubform + it('calls handleComponentChange when setting a layout set for the subform and then click save', async () => { const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const selectLayoutSet = getSelectForLayoutSet(); await user.selectOptions(selectLayoutSet, subformLayoutSetId); + + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); + await user.click(saveButton); expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); expect(handleComponentChangeMock).toHaveBeenCalledWith( expect.objectContaining({ @@ -98,127 +102,127 @@ describe('EditLayoutSetForSubform', () => { it('should display the selected layout set in document after the user choose it', async () => { const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const selectLayoutSet = getSelectForLayoutSet(); await user.selectOptions(selectLayoutSet, subformLayoutSetId); expect(screen.getByText(subformLayoutSetId)).toBeInTheDocument(); }); - it('should display the select again with its buttons when the user clicks on the seleced layoutset', async () => { - const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform( - { sets: [{ id: subformLayoutSetId, type: 'subform' }] }, - { layoutSet: subformLayoutSetId }, - ); - await user.click(screen.getByText(subformLayoutSetId)); - const selectLayoutSet = getSelectForLayoutSet(); - expect(selectLayoutSet).toBeInTheDocument(); - expect(screen.getByRole('button', { name: textMock('general.close') })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: textMock('general.delete') })).toBeInTheDocument(); + it('should display the selected subform layout set in document and be read only', () => { + renderEditLayoutSetForSubform({ + layoutSetsMock: layoutSetsDefault, + componentProps: { layoutSet: subformLayoutSetId }, + }); + + const selectedSubform = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.selected_layout_set_title', { + subform: subformLayoutSetId, + }), + }); + expect(selectedSubform).toHaveAttribute('aria-readonly'); }); - it('calls handleComponentChange with no layout set for component if selecting the empty option', async () => { + it('should disable the save button if no layout set is selected', () => { + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); + expect(saveButton).toBeDisabled(); + }); + + it('should disable the save button if selecting the empty option', async () => { const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const selectLayoutSet = getSelectForLayoutSet(); const emptyOptionText = textMock('ux_editor.component_properties.subform.choose_layout_set'); await user.selectOptions(selectLayoutSet, emptyOptionText); - expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); - expect(handleComponentChangeMock).toHaveBeenCalledWith( - expect.not.objectContaining({ - layoutSet: expect.anything(), - }), - ); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); + expect(saveButton).toBeDisabled(); }); - it('calls handleComponentChange after creating a new layout set and selecting data model type, then clicking Lukk button', async () => { + it('calls handleComponentChange after creating a new layout set and selecting data model type, then clicking save button', async () => { const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); const createNewLayoutSetButton = screen.getByRole('button', { name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), }); await user.click(createNewLayoutSetButton); const input = screen.getByRole('textbox'); await user.type(input, 'NewSubform'); - const dataModelSelect = await screen.findAllByRole('combobox'); - await user.selectOptions(dataModelSelect[0], subformLayoutSetId); - const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + + const dataModelSelect = await screen.findByRole('combobox', { + name: textMock('ux_editor.component_properties.subform.data_model_binding_label'), + }); + await user.selectOptions(dataModelSelect, 'dataModelId'); + + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); await user.click(saveButton); expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); }); - it('closes the view mode when clicking close button after selecting a layout set', async () => { - const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform( - { sets: [{ id: subformLayoutSetId, type: 'subform' }] }, - { layoutSet: subformLayoutSetId }, - ); - await user.click(screen.getByText(subformLayoutSetId)); - const closeButton = screen.getByRole('button', { name: textMock('general.close') }); - await user.click(closeButton); - expect( - screen.queryByRole('button', { name: textMock('general.close') }), - ).not.toBeInTheDocument(); - expect( - screen.queryByRole('button', { name: textMock('general.delete') }), - ).not.toBeInTheDocument(); - }); + // it.only('closes the view mode when clicking save button after selecting a layout set', async () => { + // const user = userEvent.setup(); + // renderEditLayoutSetForSubform({ + // layoutSetsMock: layoutSetsDefault, + // componentProps: { layoutSet: subformLayoutSetId }, + // }); + // await user.click(screen.getByText(subformLayoutSetId)); + // screen.logTestingPlaygroundURL(); + // const closeButton = screen.getByRole('button', { name: textMock('general.close') }); + // await user.click(closeButton); + // expect( + // screen.queryByRole('button', { name: textMock('general.close') }), + // ).not.toBeInTheDocument(); + // expect( + // screen.queryByRole('button', { name: textMock('general.delete') }), + // ).not.toBeInTheDocument(); + // }); - it('calls handleComponentChange with no layout set for component when clicking delete button', async () => { - const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform( - { sets: [{ id: subformLayoutSetId, type: 'subform' }] }, - { layoutSet: subformLayoutSetId }, - ); - await user.click(screen.getByText(subformLayoutSetId)); - const deleteLayoutSetConnectionButton = screen.getByRole('button', { - name: textMock('general.delete'), - }); - await user.click(deleteLayoutSetConnectionButton); - expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); - expect(handleComponentChangeMock).toHaveBeenCalledWith( - expect.not.objectContaining({ - layoutSet: expect.anything(), - }), - ); - }); + // it('calls handleComponentChange with no layout set for component when clicking delete button', async () => { + // const user = userEvent.setup(); + // renderEditLayoutSetForSubform({ + // layoutSetsMock: layoutSetsDefault, + // componentProps: { layoutSet: subformLayoutSetId }, + // }); + // await user.click(screen.getByText(subformLayoutSetId)); + // const deleteLayoutSetConnectionButton = screen.getByRole('button', { + // name: textMock('general.delete'), + // }); + // await user.click(deleteLayoutSetConnectionButton); + // expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); + // expect(handleComponentChangeMock).toHaveBeenCalledWith( + // expect.not.objectContaining({ + // layoutSet: expect.anything(), + // }), + // ); + // }); - it('displays a button with the existing layout set for the subform if set', () => { - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform( - { sets: [{ id: subformLayoutSetId, type: 'subform' }] }, - { layoutSet: subformLayoutSetId }, - ); - const existingLayoutSetButton = screen.getByRole('button', { - name: textMock('ux_editor.component_properties.subform.selected_layout_set_title', { - subform: subformLayoutSetId, - }), - }); - expect(existingLayoutSetButton).toBeInTheDocument(); - }); + // it('displays a button with the existing layout set for the subform if set', () => { + // renderEditLayoutSetForSubform({ + // layoutSetsMock: layoutSetsDefault, + // componentProps: { layoutSet: subformLayoutSetId }, + // }); + // const existingLayoutSetButton = screen.getByRole('button', { + // name: textMock('ux_editor.component_properties.subform.selected_layout_set_title', { + // subform: subformLayoutSetId, + // }), + // }); + // expect(existingLayoutSetButton).toBeInTheDocument(); + // }); - it('opens view mode when a layout set for the subform is set', async () => { - const user = userEvent.setup(); - const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubform( - { sets: [{ id: subformLayoutSetId, type: 'subform' }] }, - { layoutSet: subformLayoutSetId }, - ); - const existingLayoutSetButton = screen.getByRole('button', { - name: textMock('ux_editor.component_properties.subform.selected_layout_set_title', { - subform: subformLayoutSetId, - }), - }); - await user.click(existingLayoutSetButton); - const selectLayoutSet = getSelectForLayoutSet(); - expect(selectLayoutSet).toBeInTheDocument(); - }); + // it('opens view mode when a layout set for the subform is set', async () => { + // const user = userEvent.setup(); + // renderEditLayoutSetForSubform({ + // layoutSetsMock: layoutSetsDefault, + // componentProps: { layoutSet: subformLayoutSetId }, + // }); + // const existingLayoutSetButton = screen.getByRole('button', { + // name: textMock('ux_editor.component_properties.subform.selected_layout_set_title', { + // subform: subformLayoutSetId, + // }), + // }); + // await user.click(existingLayoutSetButton); + // const selectLayoutSet = getSelectForLayoutSet(); + // expect(selectLayoutSet).toBeInTheDocument(); + // }); }); const getSelectForLayoutSet = () => @@ -226,12 +230,19 @@ const getSelectForLayoutSet = () => name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'), }); -const renderEditLayoutSetForSubform = ( - layoutSetsMock: LayoutSets = layoutSets, - componentProps: Partial> = {}, -) => { +type RenderEditLayoutSetForSubformProps = { + layoutSetsMock?: LayoutSets; + componentProps?: Partial>; +}; + +const renderEditLayoutSetForSubform = ({ + layoutSetsMock = layoutSets, + componentProps = {}, +}: RenderEditLayoutSetForSubformProps) => { const queryClient = createQueryClientMock(); queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock); + queryClient.setQueryData([QueryKey.AppMetadataModelIds, org, app, false], ['dataModelId']); + return renderWithProviders( Date: Tue, 12 Nov 2024 12:19:36 +0100 Subject: [PATCH 13/25] remove unused import --- .../CreateNewSubformLayoutSet.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx index d065b6da50d..94514c118e4 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { renderWithProviders } from '../../../../../../testing/mocks'; import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; import { textMock } from '@studio/testing/mocks/i18nMock'; -import { screen, waitFor } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; import { app, org } from '@studio/testing/testids'; import { QueryKey } from 'app-shared/types/QueryKey'; From 5e83f186810ced033dd6fc76dbdb1e0bc1e9314d Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Tue, 12 Nov 2024 12:34:22 +0100 Subject: [PATCH 14/25] fix tests after change text key --- .../EditSubformTableColumns.test.tsx | 6 +++++- .../SubformMissingContentWarning.test.tsx | 12 ++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx index 1c676a21f6f..f54e2522947 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx @@ -148,7 +148,11 @@ describe('EditSubformTableColumns', () => { textMock('ux_editor.component_properties.subform.layout_set_is_missing_content_paragraph'), ), ).toBeInTheDocument(); - expect(screen.getByRole('button', { name: textMock('top_menu.create') })).toBeInTheDocument(); + expect( + screen.getByRole('button', { + name: textMock('ux_editor.component_properties.navigate_to_subform_button'), + }), + ).toBeInTheDocument(); }); }); diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.test.tsx index f49fb605f9d..8a9939188b4 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/SubformMissingContentWarning/SubformMissingContentWarning.test.tsx @@ -27,7 +27,11 @@ describe('SubformMissingContentWarning', () => { textMock('ux_editor.component_properties.subform.layout_set_is_missing_content_paragraph'), ), ).toBeInTheDocument(); - expect(screen.getByRole('button', { name: textMock('top_menu.create') })).toBeInTheDocument(); + expect( + screen.getByRole('button', { + name: textMock('ux_editor.component_properties.navigate_to_subform_button'), + }), + ).toBeInTheDocument(); }); it('calls redirect/state change functions on redirect button click', async () => { const user = userEvent.setup(); @@ -36,7 +40,11 @@ describe('SubformMissingContentWarning', () => { , ); - await user.click(screen.getByRole('button', { name: textMock('top_menu.create') })); + await user.click( + screen.getByRole('button', { + name: textMock('ux_editor.component_properties.navigate_to_subform_button'), + }), + ); expect(setSelectedFormLayoutName).toHaveBeenCalledTimes(1); expect(setSelectedFormLayoutName).toHaveBeenCalledWith(undefined); From e145619799b0b89192da2c976137b00a599ee308 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 14:25:58 +0100 Subject: [PATCH 15/25] add data-testid to card and remove unecessary prop --- .../StudioRecommendedNextAction.tsx | 2 +- .../CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx | 1 - .../CreateNewSubformLayoutSet/SubformDataModelSelect.tsx | 3 --- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx index 5bf6ed75fde..60006f3f377 100644 --- a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx +++ b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx @@ -30,7 +30,7 @@ export const StudioRecommendedNextAction = ({ }: StudioRecommendedNextActionProps): React.ReactElement => { const formName = useId(); return ( -
+ {title} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx index 21a866eae93..7ed1b347637 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx @@ -53,7 +53,6 @@ export const CreateNewSubformLayoutSet = ({ error={nameError} /> diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx index 904feaff3e8..15ee9d3d400 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx @@ -5,13 +5,11 @@ import { useTranslation } from 'react-i18next'; import { StudioNativeSelect } from '@studio/components'; export interface ISubformDataModelSelectProps { - disabled: boolean; selectedDataType: string; setSelectedDataType: (dataType: string) => void; } export const SubformDataModelSelect = ({ - disabled, selectedDataType, setSelectedDataType, }: ISubformDataModelSelectProps) => { @@ -26,7 +24,6 @@ export const SubformDataModelSelect = ({ return ( handleChange(e.target.value)} value={selectedDataType} size='small' From 0949c944540538f67bd0256c28bcac529ac71b6b Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 14:29:49 +0100 Subject: [PATCH 16/25] test-refactor `editLayoutsetforsubform` - remove old tests, update tests and move tests down lvls to where the code is --- .../EditLayoutSetForSubform.test.tsx | 201 ++---------------- 1 file changed, 15 insertions(+), 186 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx index a491fbb3ec6..76081a6aaa3 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx @@ -4,7 +4,7 @@ import { EditLayoutSetForSubform } from './EditLayoutSetForSubform'; import { ComponentType } from 'app-shared/types/ComponentType'; import { componentMocks } from '../../../../testing/componentMocks'; import { textMock } from '@studio/testing/mocks/i18nMock'; -import { screen, within } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; import { app, org } from '@studio/testing/testids'; import { QueryKey } from 'app-shared/types/QueryKey'; @@ -23,91 +23,6 @@ const layoutSetsDefault = { sets: [{ id: subformLayoutSetId, type: 'subform' }] describe('EditLayoutSetForSubform', () => { afterEach(jest.clearAllMocks); - // it('displays "no existing subform layout sets" message if no subform layout set exist', () => { - // renderEditLayoutSetForSubform(); - // const noExistingSubformForLayoutSet = screen.getByText( - // textMock('ux_editor.component_properties.subform.no_layout_sets_acting_as_subform'), - // ); - // expect(noExistingSubformForLayoutSet).toBeInTheDocument(); - // }); - - it('displays the headers for recommendNextAction if subform layout sets exists', () => { - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const setLayoutSetButton = screen.getByRole('heading', { - name: textMock('ux_editor.component_properties.subform.choose_layout_set_header'), - }); - expect(setLayoutSetButton).toBeInTheDocument(); - }); - - // Må kanskje flyttes til editLayoutsetforSubform - it('displays the description for recommendNextAction if subform layout sets exists', () => { - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const setLayoutSetButton = screen.getByText( - textMock('ux_editor.component_properties.subform.choose_layout_set_description'), - ); - expect(setLayoutSetButton).toBeInTheDocument(); - }); - - // Må kanskje flyttes til editLayoutsetforSubform - it('displays a button(Opprett et nytt skjema) to set a layout set for the subform', async () => { - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const createNewLayoutSetButton = screen.getByRole('button', { - name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), - }); - expect(createNewLayoutSetButton).toBeInTheDocument(); - }); - - // Må kanskje flyttes til editLayoutsetforSubform - it('renders CreateNewLayoutSet component when clicking the create new layout set button', async () => { - const user = userEvent.setup(); - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const createNewLayoutSetButton = screen.getByRole('button', { - name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), - }); - await user.click(createNewLayoutSetButton); - const createNewLayoutSetComponent = screen.getByRole('textbox', { - name: textMock('ux_editor.component_properties.subform.created_layout_set_name'), - }); - expect(createNewLayoutSetComponent).toBeInTheDocument(); - }); - - // Må kanskje flyttes til editLayoutsetforSubform - it('displays a select to choose a layout set for the subform', async () => { - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const selectLayoutSet = getSelectForLayoutSet(); - const options = within(selectLayoutSet).getAllByRole('option'); - expect(options).toHaveLength(2); - expect(options[0]).toHaveTextContent( - textMock('ux_editor.component_properties.subform.choose_layout_set'), - ); - expect(options[1]).toHaveTextContent(subformLayoutSetId); - }); - - // Må kanskje flyttes til editLayoutsetforSubform - it('calls handleComponentChange when setting a layout set for the subform and then click save', async () => { - const user = userEvent.setup(); - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const selectLayoutSet = getSelectForLayoutSet(); - await user.selectOptions(selectLayoutSet, subformLayoutSetId); - - const saveButton = screen.getByRole('button', { name: textMock('general.save') }); - await user.click(saveButton); - expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); - expect(handleComponentChangeMock).toHaveBeenCalledWith( - expect.objectContaining({ - layoutSet: subformLayoutSetId, - }), - ); - }); - - it('should display the selected layout set in document after the user choose it', async () => { - const user = userEvent.setup(); - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const selectLayoutSet = getSelectForLayoutSet(); - await user.selectOptions(selectLayoutSet, subformLayoutSetId); - expect(screen.getByText(subformLayoutSetId)).toBeInTheDocument(); - }); - it('should display the selected subform layout set in document and be read only', () => { renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault, @@ -122,113 +37,27 @@ describe('EditLayoutSetForSubform', () => { expect(selectedSubform).toHaveAttribute('aria-readonly'); }); - it('should disable the save button if no layout set is selected', () => { - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const saveButton = screen.getByRole('button', { name: textMock('general.save') }); - expect(saveButton).toBeDisabled(); - }); - - it('should disable the save button if selecting the empty option', async () => { - const user = userEvent.setup(); - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const selectLayoutSet = getSelectForLayoutSet(); - const emptyOptionText = textMock('ux_editor.component_properties.subform.choose_layout_set'); - await user.selectOptions(selectLayoutSet, emptyOptionText); - const saveButton = screen.getByRole('button', { name: textMock('general.save') }); - expect(saveButton).toBeDisabled(); - }); - - it('calls handleComponentChange after creating a new layout set and selecting data model type, then clicking save button', async () => { + it('should call the setSelectedFormLayoutSetName when clicking the navigate to subform button', async () => { const user = userEvent.setup(); - renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); - const createNewLayoutSetButton = screen.getByRole('button', { - name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), + renderEditLayoutSetForSubform({ + layoutSetsMock: layoutSetsDefault, + componentProps: { layoutSet: subformLayoutSetId }, }); - await user.click(createNewLayoutSetButton); - const input = screen.getByRole('textbox'); - await user.type(input, 'NewSubform'); - const dataModelSelect = await screen.findByRole('combobox', { - name: textMock('ux_editor.component_properties.subform.data_model_binding_label'), + const navigateToSubformButton = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.navigate_to_subform_button'), }); - await user.selectOptions(dataModelSelect, 'dataModelId'); - - const saveButton = screen.getByRole('button', { name: textMock('general.save') }); - await user.click(saveButton); - expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); + await user.click(navigateToSubformButton); + expect(setSelectedFormLayoutSetMock).toHaveBeenCalledTimes(1); + expect(setSelectedFormLayoutSetMock).toHaveBeenCalledWith(subformLayoutSetId); }); - // it.only('closes the view mode when clicking save button after selecting a layout set', async () => { - // const user = userEvent.setup(); - // renderEditLayoutSetForSubform({ - // layoutSetsMock: layoutSetsDefault, - // componentProps: { layoutSet: subformLayoutSetId }, - // }); - // await user.click(screen.getByText(subformLayoutSetId)); - // screen.logTestingPlaygroundURL(); - // const closeButton = screen.getByRole('button', { name: textMock('general.close') }); - // await user.click(closeButton); - // expect( - // screen.queryByRole('button', { name: textMock('general.close') }), - // ).not.toBeInTheDocument(); - // expect( - // screen.queryByRole('button', { name: textMock('general.delete') }), - // ).not.toBeInTheDocument(); - // }); - - // it('calls handleComponentChange with no layout set for component when clicking delete button', async () => { - // const user = userEvent.setup(); - // renderEditLayoutSetForSubform({ - // layoutSetsMock: layoutSetsDefault, - // componentProps: { layoutSet: subformLayoutSetId }, - // }); - // await user.click(screen.getByText(subformLayoutSetId)); - // const deleteLayoutSetConnectionButton = screen.getByRole('button', { - // name: textMock('general.delete'), - // }); - // await user.click(deleteLayoutSetConnectionButton); - // expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); - // expect(handleComponentChangeMock).toHaveBeenCalledWith( - // expect.not.objectContaining({ - // layoutSet: expect.anything(), - // }), - // ); - // }); - - // it('displays a button with the existing layout set for the subform if set', () => { - // renderEditLayoutSetForSubform({ - // layoutSetsMock: layoutSetsDefault, - // componentProps: { layoutSet: subformLayoutSetId }, - // }); - // const existingLayoutSetButton = screen.getByRole('button', { - // name: textMock('ux_editor.component_properties.subform.selected_layout_set_title', { - // subform: subformLayoutSetId, - // }), - // }); - // expect(existingLayoutSetButton).toBeInTheDocument(); - // }); - - // it('opens view mode when a layout set for the subform is set', async () => { - // const user = userEvent.setup(); - // renderEditLayoutSetForSubform({ - // layoutSetsMock: layoutSetsDefault, - // componentProps: { layoutSet: subformLayoutSetId }, - // }); - // const existingLayoutSetButton = screen.getByRole('button', { - // name: textMock('ux_editor.component_properties.subform.selected_layout_set_title', { - // subform: subformLayoutSetId, - // }), - // }); - // await user.click(existingLayoutSetButton); - // const selectLayoutSet = getSelectForLayoutSet(); - // expect(selectLayoutSet).toBeInTheDocument(); - // }); -}); - -const getSelectForLayoutSet = () => - screen.getByRole('combobox', { - name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'), + it('should render the recommended next action card if no subform is selected', () => { + renderEditLayoutSetForSubform({ layoutSetsMock: layoutSetsDefault }); + const card = screen.getByTestId('recommendedNextActionCard'); + expect(card).toBeInTheDocument(); }); +}); type RenderEditLayoutSetForSubformProps = { layoutSetsMock?: LayoutSets; From a815260116723568ee215a7416d54fb560ec1d97 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 15:49:09 +0100 Subject: [PATCH 17/25] tests for editLayoutSet --- .../EditLayoutSet/EditLayoutSet.test.tsx | 97 +++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx 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 new file mode 100644 index 00000000000..61c1e0e95af --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { renderWithProviders } from '@altinn/ux-editor/testing/mocks'; +import { app, org } from '@studio/testing/testids'; +import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; +import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; +import { QueryKey } from 'app-shared/types/QueryKey'; +import { ComponentType } from 'app-shared/types/ComponentType'; +import { componentMocks } from '@altinn/ux-editor/testing/componentMocks'; +import { EditLayoutSet } from './EditLayoutSet'; +import { screen } from '@testing-library/react'; +import { textMock } from '@studio/testing/mocks/i18nMock'; +import userEvent from '@testing-library/user-event'; +import { layoutSets } from 'app-shared/mocks/mocks'; + +const handleComponentChange = jest.fn(); +const subformLayoutSetId = 'subformLayoutSetId'; +const subformLayoutSet = { sets: [{ id: subformLayoutSetId, type: 'subform' }] } as LayoutSets; + +describe('EditLayoutSet', () => { + afterEach(jest.clearAllMocks); + + it('should render the create subform card when no subforms are available', () => { + renderEditLayoutSet(); + const header = screen.getByText( + textMock('ux_editor.component_properties.subform.no_existing_layout_set_header'), + ); + expect(header).toBeInTheDocument(); + }); + + it('should render the select subform card when subforms are available', () => { + renderEditLayoutSet(subformLayoutSet); + const header = screen.getByText( + textMock('ux_editor.component_properties.subform.choose_layout_set_header'), + ); + expect(header).toBeInTheDocument(); + }); + + it('should display create subform card when clicking create subform button', async () => { + const user = userEvent.setup(); + renderEditLayoutSet(subformLayoutSet); + + expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); + + const createSubformButton = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), + }); + await user.click(createSubformButton); + + 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); + + const subformSelector = screen.getByRole('combobox', { + name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'), + }); + await user.selectOptions(subformSelector, [subformLayoutSetId]); + + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); + await user.click(saveButton); + expect(handleComponentChange).toHaveBeenCalledTimes(1); + expect(handleComponentChange).toHaveBeenCalledWith({ + ...componentMocks[ComponentType.Subform], + layoutSet: subformLayoutSetId, + }); + }); +}); + +const renderEditLayoutSet = (layoutSetsMock: LayoutSets = layoutSets) => { + const queryClient = createQueryClientMock(); + queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock); + + return renderWithProviders( + , + { queryClient }, + ); +}; From fce3b3add847d697ac20169ef1bbcc565fccd972 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 15:51:22 +0100 Subject: [PATCH 18/25] tests for createNewSubformLayoutset --- .../CreateNewSubformLayoutSet.test.tsx | 73 ++++++------------- 1 file changed, 24 insertions(+), 49 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx index 94514c118e4..f78e654edad 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx @@ -3,14 +3,8 @@ import { renderWithProviders } from '../../../../../../testing/mocks'; import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { screen } from '@testing-library/react'; -import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; -import { app, org } from '@studio/testing/testids'; -import { QueryKey } from 'app-shared/types/QueryKey'; import { layoutSets } from 'app-shared/mocks/mocks'; import userEvent from '@testing-library/user-event'; -import { AppContext } from '../../../../../../AppContext'; -import { appContextMock } from '../../../../../../testing/appContextMock'; -import { layoutSetsMock } from '@altinn/ux-editor/testing/layoutSetsMock'; const onUpdateLayoutSetMock = jest.fn(); const setShowCreateSubformCardMock = jest.fn(); @@ -33,37 +27,28 @@ jest.mock('./SubformDataModelSelect', () => ({ describe('CreateNewSubformLayoutSet ', () => { afterEach(jest.clearAllMocks); - it('displays the card with label and input field', () => { - renderCreateNewSubformLayoutSet(); - const card = screen.getByRole('textbox', { - name: textMock('ux_editor.component_properties.subform.created_layout_set_name'), - }); - - expect(card).toBeInTheDocument(); - }); - - it('displays the data model select', async () => { + it('displays the card with label, input field and data model select', () => { renderCreateNewSubformLayoutSet(); + const subformNameInput = screen.getByRole('textbox'); const dataModelSelect = screen.getByRole('combobox'); + + expect(subformNameInput).toBeInTheDocument(); expect(dataModelSelect).toBeInTheDocument(); }); - it('displays the save button', () => { + it('displays the save button and close button', () => { renderCreateNewSubformLayoutSet(); - const saveButton = screen.getByRole('button', { name: textMock('general.close') }); - expect(saveButton).toBeInTheDocument(); - }); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); + const closeButton = screen.getByRole('button', { name: textMock('general.close') }); - it('displays the cancel button', () => { - renderCreateNewSubformLayoutSet(); - const cancelButton = screen.getByRole('button', { name: textMock('general.close') }); - expect(cancelButton).toBeInTheDocument(); + expect(saveButton).toBeInTheDocument(); + expect(closeButton).toBeInTheDocument(); }); - it('displays not the cancel button when hasSubforms is false', () => { + it('displays not the close button when hasSubforms is false', () => { renderCreateNewSubformLayoutSet({ hasSubforms: false }); - const cancelButton = screen.queryByRole('button', { name: textMock('general.close') }); - expect(cancelButton).not.toBeInTheDocument(); + const closeButton = screen.queryByRole('button', { name: textMock('general.close') }); + expect(closeButton).not.toBeInTheDocument(); }); it('calls onSubformCreated when save button is clicked', async () => { @@ -79,31 +64,26 @@ describe('CreateNewSubformLayoutSet ', () => { expect(onUpdateLayoutSetMock).toHaveBeenCalledWith('NewSubform'); }); - it('disables the save button when input is invalid', async () => { + it('disables the save button when input is invalid and data model is valid', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet(); + const dataModelSelect = screen.getByRole('combobox'); + await user.selectOptions(dataModelSelect, ['moped']); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); expect(saveButton).toBeDisabled(); const input = screen.getByRole('textbox'); - await user.type(input, 'æøå'); expect(saveButton).toBeDisabled(); - - await user.clear(input); - await user.type(input, 'e re a'); - expect(saveButton).toBeDisabled(); - await user.clear(input); await user.type(input, 'NewSubform'); - const dataModelSelect = screen.getByRole('combobox'); - await user.selectOptions(dataModelSelect, ['moped']); expect(saveButton).not.toBeDisabled(); }); - it('disables the save button when the input is valid and no data model is selected', async () => { + it('disables the save button when the input is valid and data model is invalid', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet(); @@ -114,7 +94,7 @@ describe('CreateNewSubformLayoutSet ', () => { expect(saveButton).toBeDisabled(); }); - it('does not disable the save button when the input is valid and a data model is selected', async () => { + it('enables save button when both input and data model is valid', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet(); @@ -132,17 +112,12 @@ describe('CreateNewSubformLayoutSet ', () => { const renderCreateNewSubformLayoutSet = ({ hasSubforms = true, }: { hasSubforms?: boolean } = {}) => { - const queryClient = createQueryClientMock(); - queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock); return renderWithProviders( - - - , - { queryClient }, + , ); }; From a81a9bca5ca65de3072117d8610d64bd1a2bd253 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 15:53:04 +0100 Subject: [PATCH 19/25] tests for subform selector (selectlayoutSet) --- .../SelectLayoutSet/SelectLayoutSet.test.tsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx new file mode 100644 index 00000000000..1c8ab704c40 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { SelectLayoutSet } from './SelectLayoutSet'; +import { renderWithProviders } from 'dashboard/testing/mocks'; +import { QueryKey } from 'app-shared/types/QueryKey'; +import { app, org } from '@studio/testing/testids'; +import { layoutSetsMock } from '@altinn/ux-editor/testing/layoutSetsMock'; +import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; +import { screen } from '@testing-library/react'; +import { textMock } from '@studio/testing/mocks/i18nMock'; +import userEvent from '@testing-library/user-event'; + +const subform1 = 'subformLayoutSetId'; +const subform2 = 'subformLayoutSetId2'; + +const layoutSets = { + ...layoutSetsMock, + sets: [ + { id: subform1, type: 'subform' }, + { id: subform2, type: 'subform' }, + ], +}; + +describe('SelectLayoutSet', () => { + afterEach(jest.clearAllMocks); + + it('should render the select layout set component with 3 options (1 dummy)', () => { + const setSelectedSubform = jest.fn(); + renderSelectLayoutSet({ setSelectedSubform, selectedSubform: undefined }); + + const selectLayoutSet = screen.getByRole('combobox'); + expect(selectLayoutSet).toBeInTheDocument(); + + const dummyOption = screen.getByRole('option', { + name: textMock('ux_editor.component_properties.subform.choose_layout_set'), + }); + const options = screen.getAllByRole('option'); + + expect(options).toHaveLength(3); + expect(options[0]).toBe(dummyOption); + }); + + it('should call setSelectedSubform when selecting a subform', async () => { + const setSelectedSubform = jest.fn(); + const user = userEvent.setup(); + renderSelectLayoutSet({ setSelectedSubform, selectedSubform: undefined }); + + const selectLayoutSet = screen.getByRole('combobox'); + await user.selectOptions(selectLayoutSet, subform2); + + expect(setSelectedSubform).toHaveBeenCalledTimes(1); + expect(setSelectedSubform).toHaveBeenCalledWith(subform2); + }); + + it('should display the selected subform layout set in document', () => { + const setSelectedSubform = jest.fn(); + renderSelectLayoutSet({ setSelectedSubform, selectedSubform: subform1 }); + + const selectLayoutSet = screen.getByRole('combobox'); + expect(selectLayoutSet).toHaveValue(subform1); + }); +}); + +type SelectLayoutSetProps = { + setSelectedSubform: (layoutSetId: string) => void; + selectedSubform: string; +}; + +const renderSelectLayoutSet = ({ setSelectedSubform, selectedSubform }: SelectLayoutSetProps) => { + const queryClient = createQueryClientMock(); + queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSets); + + renderWithProviders( + , + { queryClient }, + ); +}; From b94074bdaa3a44c35ee07d58c5930ffda5e0dcd6 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 15:53:35 +0100 Subject: [PATCH 20/25] remove disabled prop in test --- .../CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx index a898fb739a2..e5eb86f3866 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx @@ -13,7 +13,6 @@ const user = userEvent.setup(); const mockDataModelIds = ['dataModelId1', 'dataModelId2']; const defaultProps: ISubformDataModelSelectProps = { - disabled: false, selectedDataType: '', setSelectedDataType: jest.fn(), }; From 156b84ce598052f8c778a525c789bd1131050097 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 16:55:46 +0100 Subject: [PATCH 21/25] fix conflict issue --- .../CreateNewSubformLayoutSet.test.tsx | 2 +- .../CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx index 6330830d236..b50ac34c15a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx @@ -86,7 +86,7 @@ describe('CreateNewSubformLayoutSet ', () => { const dataModelSelect = screen.getByRole('combobox'); await user.selectOptions(dataModelSelect, ['moped']); - const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); await user.click(saveButton); const spinner = await screen.findByText(textMock('general.loading')); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx index 7c451349196..1973042cdd9 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx @@ -54,6 +54,7 @@ export const CreateNewSubformLayoutSet = ({ handleChange(e.target.value)} error={nameError} From 075ce9df7062b76af9b41402957bcc6be858e83c Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 13 Nov 2024 17:02:53 +0100 Subject: [PATCH 22/25] add 1 test to cover coverage --- .../EditLayoutSet/EditLayoutSet.test.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) 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 61c1e0e95af..9e33b3cf106 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 @@ -81,6 +81,21 @@ describe('EditLayoutSet', () => { layoutSet: subformLayoutSetId, }); }); + + it('should close create subform card when close button is clicked', async () => { + const user = userEvent.setup(); + renderEditLayoutSet(subformLayoutSet); + + const createSubformButton = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), + }); + await user.click(createSubformButton); + + expect(screen.getByRole('textbox')).toBeInTheDocument(); + const closeButton = screen.getByRole('button', { name: textMock('general.close') }); + await user.click(closeButton); + expect(screen.queryByRole('textbox')).not.toBeInTheDocument(); + }); }); const renderEditLayoutSet = (layoutSetsMock: LayoutSets = layoutSets) => { From f5e5a7867c4022a7a0d5dd578909c4ae9773accb Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 14 Nov 2024 10:53:25 +0100 Subject: [PATCH 23/25] remove some unused text keys for subform --- frontend/language/src/nb.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index ccbd9274eee..9d91930b618 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1328,13 +1328,11 @@ "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": "Sidegruppe for underskjema", "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_layout_set_description": "Hvis du velger å lage et nytt underskjema, oppretter vi et tomt underskjema for deg. Det må du selv utforme, før du kan sette opp tabellen.", "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", From 542b16dcc234f91e32e6d88df71e6f862c78314c Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 14 Nov 2024 12:30:00 +0100 Subject: [PATCH 24/25] remove one more unused text key --- frontend/language/src/nb.json | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 9d91930b618..d4e9f09400f 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1347,7 +1347,6 @@ "ux_editor.component_properties.subform.no_existing_layout_set_instruction_name": "Gi underskjemaet et godt navn som du husker.", "ux_editor.component_properties.subform.no_existing_layout_set_instruction_table_setup": "Gå tilbake til komponenten Tabell for underskjema og sett opp tabellen med de feltene du har utformet i underskjemaet.", "ux_editor.component_properties.subform.no_existing_layout_set_instructions_header": "Slik gjør du:", - "ux_editor.component_properties.subform.no_layout_sets_acting_as_subform": "Det finnes ingen sidegrupper i løsningen som kan brukes som et underskjema", "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema", "ux_editor.component_properties.subform.selected_layout_set_title": "Valgt underskjemakobling er {{subform}}", "ux_editor.component_properties.summary.add_override": "Legg til overstyring", From 73565450b6a68bc7d50954d5bf4b9eb884d7d452 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 15 Nov 2024 10:23:36 +0100 Subject: [PATCH 25/25] add testId and sort it alphabetically --- frontend/testing/testids.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/frontend/testing/testids.js b/frontend/testing/testids.js index 46621c9da3a..e9ddf5df3ec 100644 --- a/frontend/testing/testids.js +++ b/frontend/testing/testids.js @@ -1,17 +1,18 @@ +export const app = 'testApp'; export const appContentWrapperId = 'app-content-wrapper'; +export const conditionalRenderingDeleteButtonId = 'delete_field_button'; +export const conditionalRenderingOutputFieldId = 'conditional-rendering-output-field'; export const dataModellingContainerId = 'data-modelling-container'; export const deleteButtonId = (key) => `delete-button-${key}`; export const draggableToolbarItemId = 'draggableToolbarItem'; export const droppableListId = 'droppableList'; +export const org = 'testOrg'; export const orgMenuItemId = (orgUserName) => orgUserName ? `menu-org-${orgUserName}` : 'menu-org-no-org-user-name'; -export const resetRepoContainerId = 'reset-repo-container'; -export const typeItemId = (pointer) => `type-item-${pointer}`; -export const userMenuItemId = 'user-menu-item'; export const pageAccordionContentId = (pageName) => `page-accordion-content-${pageName}`; export const profileButtonId = 'profileButton'; -export const org = 'testOrg'; -export const app = 'testApp'; +export const recommendedNextAction = 'recommendedNextActionCard'; +export const resetRepoContainerId = 'reset-repo-container'; export const selectedLayoutSet = 'layout-set-test'; -export const conditionalRenderingOutputFieldId = 'conditional-rendering-output-field'; -export const conditionalRenderingDeleteButtonId = 'delete_field_button'; +export const typeItemId = (pointer) => `type-item-${pointer}`; +export const userMenuItemId = 'user-menu-item';