From 021f7b6701b0b5038958b7aff5d0f8b563de9a76 Mon Sep 17 00:00:00 2001 From: Jamal Alabdullah Date: Tue, 19 Nov 2024 09:54:18 +0100 Subject: [PATCH 01/23] add link to datamodel --WIP --- frontend/language/src/nb.json | 2 + .../CreateNewDataModel.tsx | 40 +++++++++++++++++++ .../CreateNewSubformLayoutSet.tsx | 28 ++++++++++++- .../SubformDataModelSelect.tsx | 3 ++ 4 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewDataModel.tsx diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index d4e9f09400f..cd7fc8f1540 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1333,6 +1333,8 @@ "ux_editor.component_properties.subform.choose_layout_set_header": "Velg underskjemaet du vil bruke", "ux_editor.component_properties.subform.choose_layout_set_label": "Velg et underskjema", "ux_editor.component_properties.subform.create_layout_set_button": "Opprett et nytt underskjema", + "ux_editor.component_properties.subform.create_new_data_model": "Lag ny datamodell", + "ux_editor.component_properties.subform.create_new_data_model_label": "Navn på ny datamodell", "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema", "ux_editor.component_properties.subform.data_model_binding_label": "Velg datamodellknytning", "ux_editor.component_properties.subform.data_model_empty_messsage": "Ingen tilgjengelige datamodeller", diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewDataModel.tsx new file mode 100644 index 00000000000..dbfd5a869cd --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewDataModel.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { StudioTextfield, StudioProperty } from '@studio/components'; +import { LinkIcon } from '@studio/icons'; +import { useTranslation } from 'react-i18next'; + +type CreateNewDataModelProps = { + showNewDataModelInput: boolean; + newDataModelName: string; + onNewDataModelNameChange: (e: React.ChangeEvent) => void; + onNewDataModelClick: () => void; +}; + +export const CreateNewDataModel = ({ + showNewDataModelInput, + newDataModelName, + onNewDataModelNameChange, + onNewDataModelClick, +}: CreateNewDataModelProps): React.ReactElement => { + const { t } = useTranslation(); + + return ( + <> + {showNewDataModelInput && ( + + )} + {!showNewDataModelInput && ( + } + onClick={onNewDataModelClick} + property={t('ux_editor.component_properties.subform.create_new_data_model')} + /> + )} + + ); +}; 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 1973042cdd9..bc6b41e5461 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 @@ -7,6 +7,7 @@ import { SubformDataModelSelect } from './SubformDataModelSelect'; import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName'; import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform'; import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; +import { CreateNewDataModel } from './CreateNewDataModel'; type CreateNewSubformLayoutSetProps = { onUpdateLayoutSet: (layoutSetName: string) => void; @@ -28,6 +29,10 @@ export const CreateNewSubformLayoutSet = ({ const { createSubform, isPendingLayoutSetMutation } = useCreateSubform(); const [nameError, setNameError] = useState(''); + const [selectDisabled, setSelectDisabled] = useState(false); + const [showNewDataModelInput, setShowNewDataModelInput] = useState(false); + const [newDataModelName, setNewDataModelName] = useState(''); + function handleChange(subformName: string) { const subformNameValidation = validateLayoutSetName(subformName, layoutSets); setNameError(subformNameValidation); @@ -42,12 +47,26 @@ export const CreateNewSubformLayoutSet = ({ }); } + function handleNewDataModelNameChange(e: React.ChangeEvent) { + setNewDataModelName(e.target.value); + } + const saveIcon = isPendingLayoutSetMutation ? ( ) : ( ); + function handleNewDataModelClick() { + setShowNewDataModelInput(true); + setSelectDisabled(true); + } + + function isSaveButtonDisabled(): boolean { + if (showNewDataModelInput) return !newDataModelName; + return !newSubform || !!nameError || !selectedDataType; + } + return ( @@ -62,13 +81,20 @@ export const CreateNewSubformLayoutSet = ({ +
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 15ee9d3d400..fb2db90f0dc 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 @@ -7,11 +7,13 @@ import { StudioNativeSelect } from '@studio/components'; export interface ISubformDataModelSelectProps { selectedDataType: string; setSelectedDataType: (dataType: string) => void; + disabled?: boolean; } export const SubformDataModelSelect = ({ selectedDataType, setSelectedDataType, + disabled, }: ISubformDataModelSelectProps) => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); @@ -27,6 +29,7 @@ export const SubformDataModelSelect = ({ onChange={(e) => handleChange(e.target.value)} value={selectedDataType} size='small' + disabled={disabled} > {dataModelIds ? ( From 0b7bd00aa2deeaf826f98405fb97ed0edcbd77b7 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Tue, 19 Nov 2024 11:50:52 +0100 Subject: [PATCH 02/23] display close button when create new datamodel is enabled --- .../CreateNewSubformLayoutSet.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 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 bc6b41e5461..5b047e5f4c8 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 @@ -51,6 +51,16 @@ export const CreateNewSubformLayoutSet = ({ setNewDataModelName(e.target.value); } + const handleClose = () => { + if (selectDisabled) { + setShowNewDataModelInput(false); + setSelectDisabled(false); + setNewDataModelName(''); + } else { + setShowCreateSubformCard(false); + } + }; + const saveIcon = isPendingLayoutSetMutation ? ( ) : ( @@ -98,9 +108,9 @@ export const CreateNewSubformLayoutSet = ({ variant='secondary' color='success' /> - {hasSubforms && ( + {(hasSubforms || selectDisabled) && ( setShowCreateSubformCard(false)} + onClick={handleClose} title={t('general.close')} icon={} variant='secondary' From e2b074f1578467ee372e9208f820c22cada006dd Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Tue, 19 Nov 2024 12:03:03 +0100 Subject: [PATCH 03/23] group datamodels for subform files --- .../{ => SubformDataModel}/CreateNewDataModel.tsx | 0 .../{ => SubformDataModel}/SubformDataModelSelect.test.tsx | 0 .../{ => SubformDataModel}/SubformDataModelSelect.tsx | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/{ => SubformDataModel}/CreateNewDataModel.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/{ => SubformDataModel}/SubformDataModelSelect.test.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/{ => SubformDataModel}/SubformDataModelSelect.tsx (100%) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/CreateNewDataModel.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewDataModel.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/CreateNewDataModel.tsx 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/SubformDataModel/SubformDataModelSelect.test.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.test.tsx 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/SubformDataModel/SubformDataModelSelect.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.tsx From c01659b0b9f3ff9323251abfecaf6d5f806ce9f4 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Wed, 20 Nov 2024 11:59:37 +0100 Subject: [PATCH 04/23] use form onSubmit in StudioRecommendedNextAction --- ...css => CreateNewSubformButtons.module.css} | 0 .../EditLayoutSet/EditLayoutSet.tsx | 36 ++++++++++++++++--- 2 files changed, 31 insertions(+), 5 deletions(-) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/{CreateNewSubformLayoutSet.module.css => CreateNewSubformButtons.module.css} (100%) 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/CreateNewSubformButtons.module.css similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.module.css 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 81b31abe538..a9d70d8625d 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,6 +16,7 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen 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'; +import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform'; export const EditLayoutSet = ({ handleComponentChange, @@ -26,22 +27,47 @@ export const EditLayoutSet = ({ const [selectedSubform, setSelectedSubform] = useState(undefined); const { org, app } = useStudioEnvironmentParams(); const { data: layoutSets } = useLayoutSetsQuery(org, app); - + const { createSubform, isPendingLayoutSetMutation } = useCreateSubform(); const subformUtils = new SubformUtilsImpl(layoutSets.sets); const hasSubforms = subformUtils.hasSubforms; const { title, description } = subformUtils.recommendedNextActionText; - const handleUpdatedLayoutSet = (layoutSet: string): void => { - const updatedComponent = { ...component, layoutSet }; + const handleUpdatedComponent = (subform: string) => { + const updatedComponent = { ...component, layoutSet: subform }; handleComponentChange(updatedComponent); }; + const handleSelectSubformSubmit = (e: React.FormEvent): void => { + e.preventDefault(); + const formData: FormData = new FormData(e.currentTarget); + const subform = formData.get('subform') as string; + handleComponentChange({ ...component, layoutSet: subform }); + }; + + const handleCreateSubformSubmit = (e: React.FormEvent): void => { + e.preventDefault(); + const formData: FormData = new FormData(e.currentTarget); + const newSubformName = formData.get('subform') as string; + const subformDataType = formData.get('subformDataType') as string; + + createSubform({ + layoutSetName: newSubformName, + onSubformCreated: handleUpdatedComponent, + dataType: subformDataType, + }); + }; + return ( {!hasSubforms && ( <> @@ -54,7 +80,7 @@ export const EditLayoutSet = ({ {showCreateSubformCard || !hasSubforms ? ( @@ -73,7 +99,7 @@ export const EditLayoutSet = ({ } - onClick={() => handleUpdatedLayoutSet(selectedSubform)} + type='submit' title={t('general.save')} disabled={!selectedSubform} variant='secondary' From f6b174b7b210d5b51320ef2bae663e8438903b43 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 21 Nov 2024 07:39:25 +0100 Subject: [PATCH 05/23] renaming and moving files --- .../DefinedLayoutSet/DefinedLayoutSet.module.css | 0 .../{EditLayoutSet => }/DefinedLayoutSet/DefinedLayoutSet.tsx | 0 ...SubformLayoutSet.test.tsx => CreateNewSubformSection.test.tsx} | 0 ...{CreateNewSubformLayoutSet.tsx => CreateNewSubformSection.tsx} | 0 .../{SubformDataModel => }/SubformDataModelSelect.test.tsx | 0 .../SelectSubformSection.module.css} | 0 .../SelectSubformSection.test.tsx} | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/{EditLayoutSet => }/DefinedLayoutSet/DefinedLayoutSet.module.css (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/{EditLayoutSet => }/DefinedLayoutSet/DefinedLayoutSet.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/{CreateNewSubformLayoutSet.test.tsx => CreateNewSubformSection.test.tsx} (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/{CreateNewSubformLayoutSet.tsx => CreateNewSubformSection.tsx} (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/{SubformDataModel => }/SubformDataModelSelect.test.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{SelectLayoutSet/SelectLayoutSet.module.css => SelectSubformSection/SelectSubformSection.module.css} (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{SelectLayoutSet/SelectLayoutSet.test.tsx => SelectSubformSection/SelectSubformSection.test.tsx} (100%) 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/DefinedLayoutSet/DefinedLayoutSet.module.css similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.module.css 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/DefinedLayoutSet/DefinedLayoutSet.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.tsx 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/CreateNewSubformSection.test.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.test.tsx 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/CreateNewSubformSection.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.test.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.module.css rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css 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/SelectSubformSection/SelectSubformSection.test.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx From 80202d6f41724c9ebef49aed6ae296a664e6a3a4 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 21 Nov 2024 07:41:04 +0100 Subject: [PATCH 06/23] Refactor SelectSubformSection --- .../SubformDataModel.tsx | 68 ++++++++++++++++ .../SubformDataModel/CreateNewDataModel.tsx | 40 ---------- .../SubformDataModelSelect.tsx | 48 ------------ .../SelectLayoutSet/SelectLayoutSet.tsx | 36 --------- .../SelectSubformSection.tsx | 78 +++++++++++++++++++ 5 files changed, 146 insertions(+), 124 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel.tsx delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/CreateNewDataModel.tsx delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.tsx delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel.tsx new file mode 100644 index 00000000000..f4c9d94da80 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { StudioTextfield, StudioNativeSelect, StudioProperty } from '@studio/components'; +import { LinkIcon } from '@studio/icons'; +import { useTranslation } from 'react-i18next'; +import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; +import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery'; + +type SubformDataModelProps = { + handleDataModel: (dataModelId: string) => void; + setDisplayDataModelInput: (setDisplayDataModelInput: boolean) => void; + setDataModel: (dataModelId: string) => void; + displayDataModelInput: boolean; +}; + +export const SubformDataModel = ({ + handleDataModel, + setDisplayDataModelInput, + setDataModel, + displayDataModelInput, +}: SubformDataModelProps): React.ReactElement => { + const { t } = useTranslation(); + const { org, app } = useStudioEnvironmentParams(); + const { data: dataModelIds } = useAppMetadataModelIdsQuery(org, app, false); + + const handleDisplayInput = () => { + setDisplayDataModelInput(true); + setDataModel(''); + }; + + return ( + <> + handleDataModel(e.target.value)} + size='small' + disabled={displayDataModelInput} + name='subformDataModel' + > + + {dataModelIds ? ( + dataModelIds.map((dataModelId) => ( + + )) + ) : ( + + )} + + {displayDataModelInput ? ( + handleDataModel(e.target.value)} + /> + ) : ( + } + onClick={handleDisplayInput} + property={t('ux_editor.component_properties.subform.create_new_data_model')} + /> + )} + + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/CreateNewDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/CreateNewDataModel.tsx deleted file mode 100644 index dbfd5a869cd..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/CreateNewDataModel.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { StudioTextfield, StudioProperty } from '@studio/components'; -import { LinkIcon } from '@studio/icons'; -import { useTranslation } from 'react-i18next'; - -type CreateNewDataModelProps = { - showNewDataModelInput: boolean; - newDataModelName: string; - onNewDataModelNameChange: (e: React.ChangeEvent) => void; - onNewDataModelClick: () => void; -}; - -export const CreateNewDataModel = ({ - showNewDataModelInput, - newDataModelName, - onNewDataModelNameChange, - onNewDataModelClick, -}: CreateNewDataModelProps): React.ReactElement => { - const { t } = useTranslation(); - - return ( - <> - {showNewDataModelInput && ( - - )} - {!showNewDataModelInput && ( - } - onClick={onNewDataModelClick} - property={t('ux_editor.component_properties.subform.create_new_data_model')} - /> - )} - - ); -}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.tsx deleted file mode 100644 index fb2db90f0dc..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel/SubformDataModelSelect.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery'; -import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; -import { useTranslation } from 'react-i18next'; -import { StudioNativeSelect } from '@studio/components'; - -export interface ISubformDataModelSelectProps { - selectedDataType: string; - setSelectedDataType: (dataType: string) => void; - disabled?: boolean; -} - -export const SubformDataModelSelect = ({ - selectedDataType, - setSelectedDataType, - disabled, -}: ISubformDataModelSelectProps) => { - const { t } = useTranslation(); - const { org, app } = useStudioEnvironmentParams(); - const { data: dataModelIds } = useAppMetadataModelIdsQuery(org, app, false); - - function handleChange(dataType: string) { - setSelectedDataType(dataType); - } - - return ( - handleChange(e.target.value)} - value={selectedDataType} - size='small' - disabled={disabled} - > - - {dataModelIds ? ( - dataModelIds.map((dataModelId) => ( - - )) - ) : ( - - )} - - ); -}; 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 deleted file mode 100644 index 1033dfdc898..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { StudioNativeSelect } from '@studio/components'; -import { useTranslation } from 'react-i18next'; -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'; - -type SelectLayoutSetProps = { - setSelectedSubform: (layoutSetId: string) => void; - selectedSubform: string; -}; - -export const SelectLayoutSet = ({ setSelectedSubform, selectedSubform }: 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')} - value={selectedSubform} - > - - {subformUtils.subformLayoutSetsIds.map((option) => ( - - ))} - - ); -}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.tsx new file mode 100644 index 00000000000..d37c570c163 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.tsx @@ -0,0 +1,78 @@ +import React, { useState } from 'react'; +import { + StudioNativeSelect, + StudioRecommendedNextAction, + StudioProperty, + StudioButton, +} from '@studio/components'; +import { CheckmarkIcon, PlusIcon } from '@studio/icons'; +import { useTranslation } from 'react-i18next'; +import classes from './SelectSubformSection.module.css'; + +type SelectSubformSectionProps = { + setShowCreateSubformCard: (showCreateSubformCard: boolean) => void; + onComponentUpdate: (subform: string) => void; + recommendedNextActionText: { + title: string; + description: string; + }; + subformLayoutSetsIds: string[]; +}; + +export const SelectSubformSection = ({ + setShowCreateSubformCard, + onComponentUpdate, + recommendedNextActionText: { title, description }, + subformLayoutSetsIds, +}: SelectSubformSectionProps) => { + const [selectedSubform, setSelectedSubform] = useState(undefined); + const { t } = useTranslation(); + + const handleSelectSubformSubmit = (e: React.FormEvent): void => { + e.preventDefault(); + const formData: FormData = new FormData(e.currentTarget); + const subform = formData.get('subform') as string; + onComponentUpdate(subform); + }; + + return ( + + setSelectedSubform(e.target.value)} + label={t('ux_editor.component_properties.subform.choose_layout_set_label')} + value={selectedSubform} + > + + {subformLayoutSetsIds.map((option) => ( + + ))} + + } + onClick={() => setShowCreateSubformCard(true)} + /> + } + type='submit' + title={t('general.save')} + disabled={!selectedSubform} + variant='secondary' + color='success' + /> + + ); +}; From ad39290455a8473eaa6ba914de8696a40c84bb51 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 21 Nov 2024 07:43:43 +0100 Subject: [PATCH 07/23] move create subform buttons to own file --- .../CreateNewSubformButtons.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.tsx new file mode 100644 index 00000000000..3289b59d8e5 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import classes from './CreateNewSubformButtons.module.css'; +import { CheckmarkIcon, TrashIcon } from '@studio/icons'; +import { StudioButton, StudioSpinner } from '@studio/components'; +import { useTranslation } from 'react-i18next'; + +type CreateNewSubformButtonsProps = { + isPendingLayoutSetMutation: boolean; + disableSaveButton: boolean; + displayCloseButton: boolean; + handleCloseButton: () => void; +}; + +export const CreateNewSubformButtons = ({ + isPendingLayoutSetMutation, + disableSaveButton, + displayCloseButton, + handleCloseButton, +}: CreateNewSubformButtonsProps) => { + const { t } = useTranslation(); + + const saveIcon = isPendingLayoutSetMutation ? ( + + ) : ( + + ); + + return ( +
+ + {displayCloseButton && ( + } + variant='secondary' + color='danger' + /> + )} +
+ ); +}; From a8112970f6d02269fed8e00374406879007693c1 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 21 Nov 2024 07:44:42 +0100 Subject: [PATCH 08/23] refactor createNewSubformSection --- .../CreateNewSubformSection.tsx | 175 +++++++++--------- 1 file changed, 83 insertions(+), 92 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.tsx index 5b047e5f4c8..1bcd15d5002 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.tsx @@ -1,124 +1,115 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { StudioButton, StudioCard, StudioSpinner, StudioTextfield } from '@studio/components'; -import { TrashIcon, CheckmarkIcon } from '@studio/icons'; -import classes from './CreateNewSubformLayoutSet.module.css'; -import { SubformDataModelSelect } from './SubformDataModelSelect'; +import { + StudioCard, + StudioParagraph, + StudioRecommendedNextAction, + StudioTextfield, +} from '@studio/components'; import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName'; -import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform'; import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; -import { CreateNewDataModel } from './CreateNewDataModel'; +import { SubformDataModel } from './SubformDataModel'; +import { CreateNewSubformButtons } from './CreateNewSubformButtons'; +import { SubformInstructions } from '../SubformInstructions'; +import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform'; -type CreateNewSubformLayoutSetProps = { - onUpdateLayoutSet: (layoutSetName: string) => void; +type CreateNewSubformSectionProps = { layoutSets: LayoutSets; setShowCreateSubformCard: (showCreateSubform: boolean) => void; hasSubforms: boolean; + recommendedNextActionText: { + title: string; + description: string; + }; + onComponentUpdate: (subform: string) => void; }; -export const CreateNewSubformLayoutSet = ({ - onUpdateLayoutSet, +export const CreateNewSubformSection = ({ layoutSets, setShowCreateSubformCard, hasSubforms, -}: CreateNewSubformLayoutSetProps): React.ReactElement => { + recommendedNextActionText: { title, description }, + onComponentUpdate, +}: CreateNewSubformSectionProps): React.ReactElement => { const { t } = useTranslation(); - const [newSubform, setNewSubform] = useState(''); - const [selectedDataType, setSelectedDataType] = useState(); const { validateLayoutSetName } = useValidateLayoutSetName(); + const [nameError, setNameError] = useState(''); + const [dataModel, setDataModel] = useState(''); + const [displayDataModelInput, setDisplayDataModelInput] = useState(false); const { createSubform, isPendingLayoutSetMutation } = useCreateSubform(); - const [nameError, setNameError] = useState(''); - - const [selectDisabled, setSelectDisabled] = useState(false); - const [showNewDataModelInput, setShowNewDataModelInput] = useState(false); - const [newDataModelName, setNewDataModelName] = useState(''); - function handleChange(subformName: string) { + const handleSubformName = (subformName: string) => { const subformNameValidation = validateLayoutSetName(subformName, layoutSets); setNameError(subformNameValidation); - setNewSubform(subformName); - } - - function handleCreateSubform() { - createSubform({ - layoutSetName: newSubform, - onSubformCreated: onUpdateLayoutSet, - dataType: selectedDataType, - }); - } + }; - function handleNewDataModelNameChange(e: React.ChangeEvent) { - setNewDataModelName(e.target.value); - } + const handleDataModel = (dataModelId: string) => { + // Add data model validation here when this PR is merged: https://github.com/Altinn/altinn-studio/issues/13364 + setDataModel(dataModelId); + }; - const handleClose = () => { - if (selectDisabled) { - setShowNewDataModelInput(false); - setSelectDisabled(false); - setNewDataModelName(''); + const handleCloseButton = () => { + if (displayDataModelInput) { + setDataModel(''); + setDisplayDataModelInput(false); } else { setShowCreateSubformCard(false); } }; - const saveIcon = isPendingLayoutSetMutation ? ( - - ) : ( - - ); - - function handleNewDataModelClick() { - setShowNewDataModelInput(true); - setSelectDisabled(true); - } + const handleCreateSubformSubmit = (e: React.FormEvent): void => { + e.preventDefault(); + const formData: FormData = new FormData(e.currentTarget); + const newSubformName = formData.get('subform') as string; + const subformDataType = formData.get('subformDataType') as string; - function isSaveButtonDisabled(): boolean { - if (showNewDataModelInput) return !newDataModelName; - return !newSubform || !!nameError || !selectedDataType; - } + createSubform({ + layoutSetName: newSubformName, + onSubformCreated: onComponentUpdate, + dataType: subformDataType, + }); + }; return ( - - - handleChange(e.target.value)} - error={nameError} - /> - - -
- + {!hasSubforms && ( + <> + + {t('ux_editor.component_properties.subform.no_existing_layout_set_empty_subform')} + + + + )} + + + handleSubformName(e.target.value)} + error={nameError} + /> + + - {(hasSubforms || selectDisabled) && ( - } - variant='secondary' - color='danger' - /> - )} -
- - + + + ); }; From 1efe572f56c4145d2061ff150f0f498f73ddf881 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 21 Nov 2024 07:45:15 +0100 Subject: [PATCH 09/23] make editLayoutset file simpler --- .../EditLayoutSet/EditLayoutSet.tsx | 108 ++++-------------- 1 file changed, 21 insertions(+), 87 deletions(-) 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 a9d70d8625d..511aa1dc96f 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,112 +1,46 @@ import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -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 { CreateNewSubformSection } from './CreateNewSubformLayoutSet'; 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'; -import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform'; +import { SelectSubformSection } from './SelectSubformSection/SelectSubformSection'; 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 { createSubform, isPendingLayoutSetMutation } = useCreateSubform(); const subformUtils = new SubformUtilsImpl(layoutSets.sets); const hasSubforms = subformUtils.hasSubforms; - const { title, description } = subformUtils.recommendedNextActionText; - const handleUpdatedComponent = (subform: string) => { + const handleUpdateComponent = (subform: string) => { const updatedComponent = { ...component, layoutSet: subform }; handleComponentChange(updatedComponent); }; - const handleSelectSubformSubmit = (e: React.FormEvent): void => { - e.preventDefault(); - const formData: FormData = new FormData(e.currentTarget); - const subform = formData.get('subform') as string; - handleComponentChange({ ...component, layoutSet: subform }); - }; - - const handleCreateSubformSubmit = (e: React.FormEvent): void => { - e.preventDefault(); - const formData: FormData = new FormData(e.currentTarget); - const newSubformName = formData.get('subform') as string; - const subformDataType = formData.get('subformDataType') as string; - - createSubform({ - layoutSetName: newSubformName, - onSubformCreated: handleUpdatedComponent, - dataType: subformDataType, - }); - }; + const displayCreateSubformCard = showCreateSubformCard || !hasSubforms; + if (displayCreateSubformCard) { + return ( + + ); + } return ( - - {!hasSubforms && ( - <> - - {t('ux_editor.component_properties.subform.no_existing_layout_set_empty_subform')} - - - - )} - {showCreateSubformCard || !hasSubforms ? ( - - ) : ( - <> - - } - onClick={() => setShowCreateSubformCard(true)} - /> - } - type='submit' - title={t('general.save')} - disabled={!selectedSubform} - variant='secondary' - color='success' - /> - - )} - + ); }; From 5e5f7a711b5c51583ae3e18f53dec737118b2590 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Thu, 21 Nov 2024 07:47:55 +0100 Subject: [PATCH 10/23] rename folder --- .../CreateNewSubformButtons.module.css | 0 .../CreateNewSubformButtons.tsx | 0 .../CreateNewSubformSection.test.tsx | 0 .../CreateNewSubformSection.tsx | 0 .../SubformDataModel.tsx | 0 .../SubformDataModelSelect.test.tsx | 0 .../index.ts | 0 7 files changed, 0 insertions(+), 0 deletions(-) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewSubformLayoutSet => CreateNewSubformSection}/CreateNewSubformButtons.module.css (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewSubformLayoutSet => CreateNewSubformSection}/CreateNewSubformButtons.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewSubformLayoutSet => CreateNewSubformSection}/CreateNewSubformSection.test.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewSubformLayoutSet => CreateNewSubformSection}/CreateNewSubformSection.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewSubformLayoutSet => CreateNewSubformSection}/SubformDataModel.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewSubformLayoutSet => CreateNewSubformSection}/SubformDataModelSelect.test.tsx (100%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewSubformLayoutSet => CreateNewSubformSection}/index.ts (100%) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.module.css similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.module.css rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.module.css diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformButtons.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.test.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformSection.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModel.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx 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/CreateNewSubformSection/SubformDataModelSelect.test.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModelSelect.test.tsx diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/index.ts rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts From f193db2648dbe815f90cd2a967469e77d353422b Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 22 Nov 2024 10:15:09 +0100 Subject: [PATCH 11/23] update useCreateSubform --- .../ux-editor/src/hooks/useCreateSubform.ts | 59 ++++++++++++++----- 1 file changed, 43 insertions(+), 16 deletions(-) diff --git a/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts b/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts index 19d33225104..232736e6e20 100644 --- a/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts +++ b/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts @@ -1,3 +1,4 @@ +import { useCreateDataModelMutation } from 'app-development/hooks/mutations'; import { useAddLayoutSetMutation } from 'app-development/hooks/mutations/useAddLayoutSetMutation'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; @@ -5,11 +6,12 @@ type CreateSubformProps = { layoutSetName: string; onSubformCreated: (layoutSetName: string) => void; dataType: string; + newDataModel?: boolean; }; type UseCreateSubformReturn = { createSubform: (props: CreateSubformProps) => void; - isPendingLayoutSetMutation: boolean; + isPendingNewSubformMutation: boolean; }; export const useCreateSubform = (): UseCreateSubformReturn => { @@ -18,24 +20,49 @@ export const useCreateSubform = (): UseCreateSubformReturn => { org, app, ); + const { mutate: createDataModel, isPending: isPendinDataModelMutation } = + useCreateDataModelMutation(); - const createSubform = ({ layoutSetName, onSubformCreated, dataType }: CreateSubformProps) => { - addLayoutSet( - { - layoutSetIdToUpdate: layoutSetName, - layoutSetConfig: { - id: layoutSetName, - type: 'subform', - dataType, + const createSubform = ({ + layoutSetName, + onSubformCreated, + dataType, + newDataModel = false, + }: CreateSubformProps) => { + const handleAddLayoutSet = () => { + addLayoutSet( + { + layoutSetIdToUpdate: layoutSetName, + layoutSetConfig: { + id: layoutSetName, + type: 'subform', + dataType, + }, }, - }, - { - onSuccess: () => { - onSubformCreated(layoutSetName); + { + onSuccess: () => { + onSubformCreated(layoutSetName); + }, }, - }, - ); + ); + }; + + if (newDataModel) { + createDataModel( + { + name: dataType, + relativePath: '', + }, + { + onSuccess: handleAddLayoutSet, + }, + ); + } else { + handleAddLayoutSet(); + } }; - return { createSubform, isPendingLayoutSetMutation }; + const isPendingNewSubformMutation = isPendingLayoutSetMutation || isPendinDataModelMutation; + + return { createSubform, isPendingNewSubformMutation }; }; From dde4aa1675537506483a98a1e34e2f51209ec070 Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Fri, 22 Nov 2024 10:19:14 +0100 Subject: [PATCH 12/23] Invalidate layoutsets for preview --- frontend/packages/shared/src/types/AppsQueryKey.ts | 1 + frontend/packages/ux-editor/src/AppContext.tsx | 10 ++++++++++ .../packages/ux-editor/src/hooks/useCreateSubform.ts | 5 ++++- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/frontend/packages/shared/src/types/AppsQueryKey.ts b/frontend/packages/shared/src/types/AppsQueryKey.ts index 8516df4f95e..6854da5864f 100644 --- a/frontend/packages/shared/src/types/AppsQueryKey.ts +++ b/frontend/packages/shared/src/types/AppsQueryKey.ts @@ -1,5 +1,6 @@ export enum AppsQueryKey { AppLayouts = 'formLayouts', + AppLayoutSets = 'fetchLayoutSets', AppLayoutSettings = 'layoutSettings', AppTextResources = 'fetchTextResources', } diff --git a/frontend/packages/ux-editor/src/AppContext.tsx b/frontend/packages/ux-editor/src/AppContext.tsx index f1550bb04e2..f748c953a66 100644 --- a/frontend/packages/ux-editor/src/AppContext.tsx +++ b/frontend/packages/ux-editor/src/AppContext.tsx @@ -20,6 +20,7 @@ export interface AppContextProps { selectedFormLayoutName: string; setSelectedFormLayoutName: (selectedFormLayoutName: string) => void; updateLayoutsForPreview: (layoutSetName: string, resetQueries?: boolean) => Promise; + updateLayoutSetsForPreview: (resetQueries?: boolean) => Promise; updateLayoutSettingsForPreview: (layoutSetName: string, resetQueries?: boolean) => Promise; updateTextsForPreview: (language: string, resetQueries?: boolean) => Promise; shouldReloadPreview: boolean; @@ -75,6 +76,13 @@ export const AppContextProvider = ({ [refetch], ); + const updateLayoutSetsForPreview = useCallback( + async (resetQueries: boolean = false): Promise => { + return await refetch([AppsQueryKey.AppLayoutSets], resetQueries); + }, + [refetch], + ); + const updateLayoutSettingsForPreview = useCallback( async (layoutSetName: string, resetQueries: boolean = false): Promise => { return await refetch([AppsQueryKey.AppLayoutSettings, layoutSetName], resetQueries); @@ -97,6 +105,7 @@ export const AppContextProvider = ({ selectedFormLayoutName, setSelectedFormLayoutName, updateLayoutsForPreview, + updateLayoutSetsForPreview, updateLayoutSettingsForPreview, updateTextsForPreview, shouldReloadPreview, @@ -109,6 +118,7 @@ export const AppContextProvider = ({ selectedFormLayoutName, setSelectedFormLayoutName, updateLayoutsForPreview, + updateLayoutSetsForPreview, updateLayoutSettingsForPreview, updateTextsForPreview, shouldReloadPreview, diff --git a/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts b/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts index 232736e6e20..4c5825e0ace 100644 --- a/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts +++ b/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts @@ -1,6 +1,7 @@ import { useCreateDataModelMutation } from 'app-development/hooks/mutations'; import { useAddLayoutSetMutation } from 'app-development/hooks/mutations/useAddLayoutSetMutation'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; +import { useAppContext } from './useAppContext'; type CreateSubformProps = { layoutSetName: string; @@ -22,6 +23,7 @@ export const useCreateSubform = (): UseCreateSubformReturn => { ); const { mutate: createDataModel, isPending: isPendinDataModelMutation } = useCreateDataModelMutation(); + const { updateLayoutSetsForPreview } = useAppContext(); const createSubform = ({ layoutSetName, @@ -40,7 +42,8 @@ export const useCreateSubform = (): UseCreateSubformReturn => { }, }, { - onSuccess: () => { + onSuccess: async () => { + await updateLayoutSetsForPreview(); onSubformCreated(layoutSetName); }, }, From 169c9214433dc1105e48088ed6b39b29159d02e9 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 22 Nov 2024 12:24:47 +0100 Subject: [PATCH 13/23] Adjust createNewSubformSection and fix/update tests --- .../CreateNewSubformSection.test.tsx | 99 ++++++++++++------- .../CreateNewSubformSection.tsx | 20 ++-- 2 files changed, 74 insertions(+), 45 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx index b50ac34c15a..94c1615c05a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { renderWithProviders } from '../../../../../../testing/mocks'; -import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; +import { CreateNewSubformSection } from './CreateNewSubformSection'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { screen } from '@testing-library/react'; import { layoutSets } from 'app-shared/mocks/mocks'; @@ -8,24 +8,13 @@ import userEvent from '@testing-library/user-event'; import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext'; import { queriesMock } from 'app-shared/mocks/queriesMock'; import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; +import { QueryKey } from 'app-shared/types/QueryKey'; +import { app, org } from '@studio/testing/testids'; +import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; -const onUpdateLayoutSetMock = jest.fn(); const setShowCreateSubformCardMock = jest.fn(); -const selectedOptionDataType = 'moped'; - -jest.mock('./SubformDataModelSelect', () => ({ - SubformDataModelSelect: ({ - selectedDataType, - setSelectedDataType, - }: { - selectedDataType: string | undefined; - setSelectedDataType: (value: string) => void; - }) => ( - - ), -})); +const onComponentUpdate = jest.fn(); +const dataModelIds = ['dataModel1', 'dataModel2']; describe('CreateNewSubformLayoutSet ', () => { afterEach(jest.clearAllMocks); @@ -54,22 +43,37 @@ describe('CreateNewSubformLayoutSet ', () => { expect(closeButton).not.toBeInTheDocument(); }); - it('calls onSubformCreated when save button is clicked', async () => { + it('displays the close button when data model input is rendered', async () => { + const user = userEvent.setup(); + + renderCreateNewSubformLayoutSet({ hasSubforms: false }); + expect( + screen.queryByRole('button', { name: textMock('general.close') }), + ).not.toBeInTheDocument(); + + const displayDataModelInput = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_new_data_model'), + }); + await user.click(displayDataModelInput); + + expect(screen.getByRole('button', { name: textMock('general.close') })).toBeInTheDocument(); + }); + + it('calls onComponentUpdate when save button is clicked', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet({}); const input = screen.getByRole('textbox'); await user.type(input, 'NewSubform'); const dataModelSelect = screen.getByRole('combobox'); - await user.selectOptions(dataModelSelect, ['moped']); + await user.selectOptions(dataModelSelect, [dataModelIds[0]]); const saveButton = screen.getByRole('button', { name: textMock('general.save') }); await user.click(saveButton); - expect(onUpdateLayoutSetMock).toHaveBeenCalledTimes(1); - expect(onUpdateLayoutSetMock).toHaveBeenCalledWith('NewSubform'); + expect(onComponentUpdate).toHaveBeenCalledTimes(1); + expect(onComponentUpdate).toHaveBeenCalledWith('NewSubform'); }); it('displays loading spinner when save button is clicked', async () => { const user = userEvent.setup(); - const addLayoutSetMock = jest.fn().mockImplementation( () => new Promise((resolve) => { @@ -80,12 +84,8 @@ describe('CreateNewSubformLayoutSet ', () => { queries: { addLayoutSet: addLayoutSetMock }, }); - const input = screen.getByRole('textbox'); - await user.type(input, 'NewSubform'); - - const dataModelSelect = screen.getByRole('combobox'); - await user.selectOptions(dataModelSelect, ['moped']); - + await user.type(screen.getByRole('textbox'), 'NewSubform'); + await user.selectOptions(screen.getByRole('combobox'), [dataModelIds[0]]); const saveButton = screen.getByRole('button', { name: textMock('general.save') }); await user.click(saveButton); @@ -93,12 +93,12 @@ describe('CreateNewSubformLayoutSet ', () => { expect(spinner).toBeInTheDocument(); }); - it('disables the save button when input is invalid', async () => { + it('disables the save button when subform name is invalid', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet({}); const dataModelSelect = screen.getByRole('combobox'); - await user.selectOptions(dataModelSelect, ['moped']); + await user.selectOptions(dataModelSelect, [dataModelIds[0]]); const saveButton = screen.getByRole('button', { name: textMock('general.save') }); expect(saveButton).toBeDisabled(); @@ -112,7 +112,7 @@ describe('CreateNewSubformLayoutSet ', () => { expect(saveButton).not.toBeDisabled(); }); - it('disables the save button when the input is valid and data model is invalid', async () => { + it('disables the save button when data model is not selected', async () => { const user = userEvent.setup(); renderCreateNewSubformLayoutSet({}); @@ -131,32 +131,59 @@ describe('CreateNewSubformLayoutSet ', () => { await user.type(input, 'NewSubform'); const dataModelSelect = screen.getByRole('combobox'); - await user.selectOptions(dataModelSelect, ['moped']); + await user.selectOptions(dataModelSelect, [dataModelIds[0]]); const saveButton = screen.getByRole('button', { name: textMock('general.close') }); expect(saveButton).not.toBeDisabled(); }); + + it('disables save button when input for new data model is invalid', async () => { + const user = userEvent.setup(); + renderCreateNewSubformLayoutSet({}); + + await user.type(screen.getByRole('textbox'), 'subform1'); + + const createNewDataModel = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_new_data_model'), + }); + await user.click(createNewDataModel); + + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); + expect(saveButton).toBeDisabled(); + + const dataModelInput = screen.getByRole('textbox', { + name: textMock('ux_editor.component_properties.subform.create_new_data_model_label'), + }); + await user.type(dataModelInput, 'datamodel'); + expect(saveButton).not.toBeDisabled(); + }); }); type RenderCreateNewSubformLayoutSetProps = { + layoutSetsMock?: LayoutSets; hasSubforms?: boolean; queries?: Partial; }; const renderCreateNewSubformLayoutSet = ({ + layoutSetsMock = layoutSets, hasSubforms = true, queries, }: RenderCreateNewSubformLayoutSetProps) => { + const queryClient = createQueryClientMock(); + queryClient.setQueryData([QueryKey.AppMetadataModelIds, org, app, false], dataModelIds); + return renderWithProviders( - , { queries: { ...queriesMock, ...queries }, - queryClient: createQueryClientMock(), + queryClient, }, ); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx index 1bcd15d5002..d0c077880e4 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx @@ -10,7 +10,7 @@ import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetN import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; import { SubformDataModel } from './SubformDataModel'; import { CreateNewSubformButtons } from './CreateNewSubformButtons'; -import { SubformInstructions } from '../SubformInstructions'; +import { SubformInstructions } from './SubformInstructions'; import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform'; type CreateNewSubformSectionProps = { @@ -33,10 +33,10 @@ export const CreateNewSubformSection = ({ }: CreateNewSubformSectionProps): React.ReactElement => { const { t } = useTranslation(); const { validateLayoutSetName } = useValidateLayoutSetName(); - const [nameError, setNameError] = useState(''); + const [nameError, setNameError] = useState(true); const [dataModel, setDataModel] = useState(''); const [displayDataModelInput, setDisplayDataModelInput] = useState(false); - const { createSubform, isPendingLayoutSetMutation } = useCreateSubform(); + const { createSubform, isPendingNewSubformMutation } = useCreateSubform(); const handleSubformName = (subformName: string) => { const subformNameValidation = validateLayoutSetName(subformName, layoutSets); @@ -61,12 +61,14 @@ export const CreateNewSubformSection = ({ e.preventDefault(); const formData: FormData = new FormData(e.currentTarget); const newSubformName = formData.get('subform') as string; - const subformDataType = formData.get('subformDataType') as string; + const subformDataType = formData.get('subformDataModel') as string; + const newSubformDataType = formData.get('newSubformDataModel') as string; createSubform({ layoutSetName: newSubformName, onSubformCreated: onComponentUpdate, - dataType: subformDataType, + dataType: subformDataType || newSubformDataType, + newDataModel: !!newSubformDataType, }); }; @@ -92,9 +94,9 @@ export const CreateNewSubformSection = ({ name='subform' label={t('ux_editor.component_properties.subform.created_layout_set_name')} size='sm' - disabled={isPendingLayoutSetMutation} + disabled={isPendingNewSubformMutation} onChange={(e) => handleSubformName(e.target.value)} - error={nameError} + error={typeof nameError === 'string' && nameError} /> From 67c0570a9daf8255521126ecb72bca0c87d26f09 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 22 Nov 2024 13:26:27 +0100 Subject: [PATCH 14/23] update tests in subformdataModel + rename + remove files --- .../SubformDataModel.test.tsx | 82 +++++++++++++++++++ .../SubformDataModelSelect.test.tsx | 67 --------------- .../SubformInstructions.tsx | 0 .../EditLayoutSet/EditLayoutSet.module.css | 9 -- 4 files changed, 82 insertions(+), 76 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModelSelect.test.tsx rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{ => CreateNewSubformSection}/SubformInstructions.tsx (100%) delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx new file mode 100644 index 00000000000..0cc64a9adeb --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { screen, waitFor } from '@testing-library/react'; +import { SubformDataModel, type SubformDataModelProps } from './SubformDataModel'; +import userEvent from '@testing-library/user-event'; +import { renderWithProviders } from 'dashboard/testing/mocks'; +import { textMock } from '@studio/testing/mocks/i18nMock'; +import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery'; + +jest.mock('app-shared/hooks/queries/useAppMetadataModelIdsQuery'); + +const user = userEvent.setup(); + +const mockDataModelIds = ['dataModelId1', 'dataModelId2']; + +(useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds }); + +describe('SubformDataModelSelect', () => { + afterEach(jest.clearAllMocks); + + it('renders StudioNativeSelect with its label and options', () => { + renderSubformDataModelSelect(); + + const dataModelSelect = screen.getByRole('combobox', { + name: textMock('ux_editor.component_properties.subform.data_model_binding_label'), + }); + const options = screen.getAllByRole('option'); + + expect(dataModelSelect).toBeInTheDocument(); + expect(options).toHaveLength(mockDataModelIds.length); + }); + + it('Renders a hidden placeholder option with an empty value', () => { + renderSubformDataModelSelect(); + const placeholderOption = screen.getByRole('option', { hidden: true, name: '' }); + expect(placeholderOption).toBeInTheDocument(); + expect(placeholderOption).toHaveAttribute('value', ''); + }); + + it('Calls handleDataModel when selecting an option', async () => { + const handleDataModel = jest.fn(); + renderSubformDataModelSelect({ handleDataModel }); + + await user.selectOptions( + screen.getByRole('combobox'), + screen.getByRole('option', { name: mockDataModelIds[1] }), + ); + await waitFor(() => expect(handleDataModel).toHaveBeenCalledTimes(1)); + expect(handleDataModel).toHaveBeenCalledWith(mockDataModelIds[1]); + }); + + it('Should call setDisplayDataModelInput true when clicking create new data model button', async () => { + const setDisplayDataModelInput = jest.fn(); + renderSubformDataModelSelect({ setDisplayDataModelInput }); + const displayDataModelInput = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_new_data_model'), + }); + await user.click(displayDataModelInput); + + expect(setDisplayDataModelInput).toHaveBeenCalledWith(true); + }); + + it('Should display create new data model input when setDisplayDataModelInput is true', () => { + renderSubformDataModelSelect({ displayDataModelInput: true }); + const dataModelInput = screen.getByRole('textbox', { + name: textMock('ux_editor.component_properties.subform.create_new_data_model_label'), + }); + + expect(dataModelInput).toBeInTheDocument(); + }); +}); + +const defaultProps: SubformDataModelProps = { + handleDataModel: jest.fn(), + setDisplayDataModelInput: jest.fn(), + setDataModel: jest.fn(), + displayDataModelInput: false, +}; + +const renderSubformDataModelSelect = (props: Partial = {}) => { + (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds }); + renderWithProviders(); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModelSelect.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModelSelect.test.tsx deleted file mode 100644 index e5eb86f3866..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModelSelect.test.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; -import { screen } from '@testing-library/react'; -import type { ISubformDataModelSelectProps } from './SubformDataModelSelect'; -import { SubformDataModelSelect } from './SubformDataModelSelect'; -import userEvent from '@testing-library/user-event'; -import { renderWithProviders } from 'dashboard/testing/mocks'; -import { textMock } from '@studio/testing/mocks/i18nMock'; -import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery'; - -jest.mock('app-shared/hooks/queries/useAppMetadataModelIdsQuery'); - -const user = userEvent.setup(); - -const mockDataModelIds = ['dataModelId1', 'dataModelId2']; -const defaultProps: ISubformDataModelSelectProps = { - selectedDataType: '', - setSelectedDataType: jest.fn(), -}; - -describe('SubformDataModelSelect', () => { - afterEach(jest.clearAllMocks); - - it('renders StudioNativeSelect with its label', () => { - (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds }); - renderSubformDataModelSelect(); - expect( - screen.getByRole('combobox', { - name: textMock('ux_editor.component_properties.subform.data_model_binding_label'), - }), - ).toBeInTheDocument(); - }); - - it('Renders all options', () => { - (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds }); - renderSubformDataModelSelect(); - expect(screen.getAllByRole('option')).toHaveLength(mockDataModelIds.length); - }); - - it('Selects provided selected item when there are provided options', () => { - (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds }); - renderSubformDataModelSelect({ selectedDataType: mockDataModelIds[1] }); - expect(screen.getByRole('combobox')).toHaveValue(mockDataModelIds[1]); - }); - - it('Renders a hidden placeholder option with an empty value', () => { - (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds }); - renderSubformDataModelSelect(); - const placeholderOption = screen.getByRole('option', { hidden: true, name: '' }); - expect(placeholderOption).toBeInTheDocument(); - expect(placeholderOption).toHaveAttribute('value', ''); - }); - - it('Calls setSelectedDataType when selecting an option', async () => { - (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds }); - const setSelectedDataType = jest.fn(); - renderSubformDataModelSelect({ setSelectedDataType }); - await user.selectOptions( - screen.getByRole('combobox'), - screen.getByRole('option', { name: mockDataModelIds[1] }), - ); - expect(setSelectedDataType).toHaveBeenCalledTimes(1); - expect(setSelectedDataType).toHaveBeenCalledWith(mockDataModelIds[1]); - }); -}); - -const renderSubformDataModelSelect = (props: Partial = {}) => - renderWithProviders(); 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/CreateNewSubformSection/SubformInstructions.tsx similarity index 100% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SubformInstructions.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformInstructions.tsx 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 deleted file mode 100644 index 08758ec752e..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.createSubformLinkButton { - padding-left: var(--fds-spacing-1); - border-radius: var(--fds-sizing-1); -} - -.saveSubformButton, -.createSubformLinkButton { - align-self: flex-start; -} From ff4d2e81f0ec9074ee48d537318eca6a32ce4090 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 22 Nov 2024 13:27:53 +0100 Subject: [PATCH 15/23] update tests in selectSubformSection --- .../SelectSubformSection.test.tsx | 77 ++++++++----------- 1 file changed, 34 insertions(+), 43 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx index 1c8ab704c40..e58ee619695 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx @@ -1,31 +1,27 @@ 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 { SelectSubformSection } from './SelectSubformSection'; +import { render, 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' }, - ], -}; +const subformLayoutSetsIds = [subform1, subform2]; +const onComponentUpdate = jest.fn(); 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 selectSubform = async () => { + const user = userEvent.setup(); + const subformSelector = screen.getByRole('combobox', { + name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'), + }); + await user.selectOptions(subformSelector, subform1); + }; + + it('should render subform selector with 3 options (1 dummy)', () => { + renderSelectSubformSection(); const selectLayoutSet = screen.getByRole('combobox'); expect(selectLayoutSet).toBeInTheDocument(); @@ -39,38 +35,33 @@ describe('SelectLayoutSet', () => { expect(options[0]).toBe(dummyOption); }); - it('should call setSelectedSubform when selecting a subform', async () => { - const setSelectedSubform = jest.fn(); + it('should call onComponentUpdate when selecting a subform and click save', async () => { const user = userEvent.setup(); - renderSelectLayoutSet({ setSelectedSubform, selectedSubform: undefined }); + renderSelectSubformSection(); - const selectLayoutSet = screen.getByRole('combobox'); - await user.selectOptions(selectLayoutSet, subform2); - - expect(setSelectedSubform).toHaveBeenCalledTimes(1); - expect(setSelectedSubform).toHaveBeenCalledWith(subform2); + await selectSubform(); + await user.click(screen.getByRole('button', { name: textMock('general.save') })); + expect(onComponentUpdate).toHaveBeenCalledTimes(1); + expect(onComponentUpdate).toHaveBeenCalledWith(subform1); }); - it('should display the selected subform layout set in document', () => { - const setSelectedSubform = jest.fn(); - renderSelectLayoutSet({ setSelectedSubform, selectedSubform: subform1 }); + it('should disable save button until user has selected a subform', async () => { + renderSelectSubformSection(); - const selectLayoutSet = screen.getByRole('combobox'); - expect(selectLayoutSet).toHaveValue(subform1); + const saveButton = screen.getByRole('button', { name: textMock('general.save') }); + expect(saveButton).toBeDisabled(); + await selectSubform(); + expect(saveButton).not.toBeDisabled(); }); }); -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 }, +const renderSelectSubformSection = () => { + render( + , ); }; From b5a57c46da743298d0ffc33262ee98ae646eac9a Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 22 Nov 2024 13:28:26 +0100 Subject: [PATCH 16/23] small adjustments --- .../CreateNewSubformButtons.tsx | 6 +++--- .../CreateNewSubformSection.tsx | 3 ++- .../CreateNewSubformSection/SubformDataModel.tsx | 4 ++-- .../CreateNewSubformSection/index.ts | 3 +-- .../EditLayoutSet/EditLayoutSet.test.tsx | 15 --------------- .../EditLayoutSet/EditLayoutSet.tsx | 2 +- .../SelectSubformSection.module.css | 10 ++++++++++ .../EditLayoutSetForSubform.tsx | 2 +- .../ux-editor/src/testing/appContextMock.ts | 1 + 9 files changed, 21 insertions(+), 25 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx index 3289b59d8e5..8cf0710b45f 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx @@ -5,21 +5,21 @@ import { StudioButton, StudioSpinner } from '@studio/components'; import { useTranslation } from 'react-i18next'; type CreateNewSubformButtonsProps = { - isPendingLayoutSetMutation: boolean; + isPendingNewSubformMutation: boolean; disableSaveButton: boolean; displayCloseButton: boolean; handleCloseButton: () => void; }; export const CreateNewSubformButtons = ({ - isPendingLayoutSetMutation, + isPendingNewSubformMutation, disableSaveButton, displayCloseButton, handleCloseButton, }: CreateNewSubformButtonsProps) => { const { t } = useTranslation(); - const saveIcon = isPendingLayoutSetMutation ? ( + const saveIcon = isPendingNewSubformMutation ? ( ) : ( diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx index d0c077880e4..9f7d1ff9c72 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx @@ -44,7 +44,8 @@ export const CreateNewSubformSection = ({ }; const handleDataModel = (dataModelId: string) => { - // Add data model validation here when this PR is merged: https://github.com/Altinn/altinn-studio/issues/13364 + // Add data model validation here and replace dataModel useState with dataModelError + // when this PR is merged: https://github.com/Altinn/altinn-studio/issues/13364 setDataModel(dataModelId); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx index f4c9d94da80..ae8e48e28cc 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery'; -type SubformDataModelProps = { +export type SubformDataModelProps = { handleDataModel: (dataModelId: string) => void; setDisplayDataModelInput: (setDisplayDataModelInput: boolean) => void; setDataModel: (dataModelId: string) => void; @@ -51,7 +51,7 @@ export const SubformDataModel = ({ {displayDataModelInput ? ( handleDataModel(e.target.value)} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts index f239c07a245..1af67251c53 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts @@ -1,2 +1 @@ -export { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; -export { SubformDataModelSelect } from './SubformDataModelSelect'; +export { CreateNewSubformSection } from './CreateNewSubformSection'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx index 9e33b3cf106..ece47e04d2d 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx @@ -49,21 +49,6 @@ describe('EditLayoutSet', () => { expect(screen.getByRole('textbox')).toBeInTheDocument(); }); - it('should disable save button until user has selected a subform', async () => { - const user = userEvent.setup(); - renderEditLayoutSet(subformLayoutSet); - - const saveButton = screen.getByRole('button', { name: textMock('general.save') }); - expect(saveButton).toBeDisabled(); - - const subformSelector = screen.getByRole('combobox', { - name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'), - }); - await user.selectOptions(subformSelector, [subformLayoutSetId]); - - expect(saveButton).not.toBeDisabled(); - }); - it('should call handleComponentChange when save button is clicked', async () => { const user = userEvent.setup(); renderEditLayoutSet(subformLayoutSet); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx index 511aa1dc96f..dba2761057c 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { CreateNewSubformSection } from './CreateNewSubformLayoutSet'; +import { CreateNewSubformSection } from './CreateNewSubformSection'; import { SubformUtilsImpl } from '@altinn/ux-editor/classes/SubformUtils'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css index d4591226e1d..db0ddb9bff0 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css @@ -8,3 +8,13 @@ text-overflow: ellipsis; width: 100%; } + +.createSubformLinkButton { + padding-left: var(--fds-spacing-1); + border-radius: var(--fds-sizing-1); +} + +.saveSubformButton, +.createSubformLinkButton { + align-self: flex-start; +} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx index a01c5c83402..db8672d1628 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { EditLayoutSet } from './EditLayoutSet'; import type { ComponentType } from 'app-shared/types/ComponentType'; import type { IGenericEditComponent } from '../../../../components/config/componentConfig'; -import { DefinedLayoutSet } from './EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet'; +import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { StudioButton } from '@studio/components'; import { useTranslation } from 'react-i18next'; import { PencilIcon } from '@studio/icons'; diff --git a/frontend/packages/ux-editor/src/testing/appContextMock.ts b/frontend/packages/ux-editor/src/testing/appContextMock.ts index 3bca2fbf221..8224645d412 100644 --- a/frontend/packages/ux-editor/src/testing/appContextMock.ts +++ b/frontend/packages/ux-editor/src/testing/appContextMock.ts @@ -13,6 +13,7 @@ export const appContextMock: AppContextProps = { setSelectedFormLayoutSetName: jest.fn(), selectedFormLayoutName: layout1NameMock, setSelectedFormLayoutName: jest.fn(), + updateLayoutSetsForPreview: jest.fn(), updateLayoutsForPreview: jest.fn(), updateLayoutSettingsForPreview: jest.fn(), updateTextsForPreview: jest.fn(), From 6f1ee416914495c51e7dbe98b6725738b647f76c Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 22 Nov 2024 13:56:52 +0100 Subject: [PATCH 17/23] update useCreateSubform.test.ts --- .../src/hooks/useCreateSubform.test.ts | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts b/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts index 3f5f5be7a08..81c4bc51a47 100644 --- a/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts +++ b/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts @@ -1,7 +1,14 @@ +import { renderHookWithProviders } from '../testing/mocks'; import { useCreateSubform } from './useCreateSubform'; -import { renderHook } from '@testing-library/react'; const addLayoutSetMock = jest.fn(); +const createDataModelMock = jest.fn(); + +jest.mock('app-development/hooks/mutations/useCreateDataModelMutation', () => ({ + useCreateDataModelMutation: jest.fn(() => ({ + mutate: createDataModelMock, + })), +})); jest.mock('app-development/hooks/mutations/useAddLayoutSetMutation', () => ({ useAddLayoutSetMutation: jest.fn(() => ({ @@ -15,7 +22,7 @@ describe('useCreateSubform', () => { }); it('should call addLayoutSet with correct parameters', () => { - const { createSubform } = renderHook(() => useCreateSubform()).result.current; + const { createSubform } = renderHookWithProviders(() => useCreateSubform()).result.current; const subformName = 'underskjema'; const onSubformCreated = jest.fn(); @@ -35,4 +42,27 @@ describe('useCreateSubform', () => { }, ); }); + + it('should call createDataModel with correct parameters when newDataModel is true', () => { + const { createSubform } = renderHookWithProviders(() => useCreateSubform()).result.current; + const subformName = 'underskjema'; + const onSubformCreated = jest.fn(); + + createSubform({ + layoutSetName: subformName, + onSubformCreated, + dataType: 'dataModel1', + newDataModel: true, + }); + + expect(createDataModelMock).toHaveBeenCalledWith( + { + name: 'dataModel1', + relativePath: '', + }, + { + onSuccess: expect.any(Function), + }, + ); + }); }); From c176a3611156620c8ac719d085a66fbc10c9ff19 Mon Sep 17 00:00:00 2001 From: lassopicasso Date: Fri, 22 Nov 2024 14:34:54 +0100 Subject: [PATCH 18/23] add test to appContext.test.tsx --- .../packages/ux-editor/src/AppContext.test.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/frontend/packages/ux-editor/src/AppContext.test.tsx b/frontend/packages/ux-editor/src/AppContext.test.tsx index 10f7fc5ffa9..bbe93415699 100644 --- a/frontend/packages/ux-editor/src/AppContext.test.tsx +++ b/frontend/packages/ux-editor/src/AppContext.test.tsx @@ -163,6 +163,21 @@ describe('AppContext', () => { ); }); + it('invalidates layout sets query for Apps in preview', async () => { + const { queryClient } = renderAppContext(({ updateLayoutSetsForPreview }: AppContextProps) => ( +