From 5b2c8e13dc7c70d6cad1560cd7d803a3f384cc12 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Thu, 24 Oct 2024 22:25:47 +0200 Subject: [PATCH 01/10] added UI for created a new subform --- frontend/language/src/nb.json | 4 + .../StudioRecommendedNextAction.module.css | 2 +- .../StudioRecommendedNextAction.tsx | 4 +- .../EditLayoutSet/EditLayoutSet.module.css | 11 +++ .../EditLayoutSet/EditLayoutSet.tsx | 82 +++++++++++++++---- 5 files changed, 86 insertions(+), 17 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index a53c582ec7b..d6935b63b21 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1296,6 +1296,10 @@ "ux_editor.component_properties.subform.choose_layout_set_description": " Før du kan bruke komponenten Tabell for underskjema, må du velge hvilket underskjema du skal bruke den med. Deretter kan du velge hvilke egenskaper komponenten skal ha.", "ux_editor.component_properties.subform.choose_layout_set_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 skjema", + "ux_editor.component_properties.subform.create_layout_set_description": " Hvis du velger å lage et nytt underskjema, oppretter vi et tomt underskjema for deg. Det må du selv utforme, før du kan sette opp tabellen.", + "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema", + "ux_editor.component_properties.subform.datamodell_binding_layout_set_name": "Velg datamodellknytning", "ux_editor.component_properties.subform.go_to_layout_set": "Gå til utforming av underskjemaet", "ux_editor.component_properties.subform.no_layout_sets_acting_as_subform": "Det finnes ingen sidegrupper i løsningen som kan brukes som et underskjema", "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema", diff --git a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.module.css b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.module.css index d2c491f06f4..71b154d5cb5 100644 --- a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.module.css +++ b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.module.css @@ -7,5 +7,5 @@ .description { margin-top: var(--fds-spacing-2); - margin-bottom: var(--fds-spacing-4); + margin-bottom: var(--fds-spacing-1); } diff --git a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx index 12313cb3cfa..5bf6ed75fde 100644 --- a/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx +++ b/frontend/libs/studio-components/src/components/StudioRecommendedNextAction/StudioRecommendedNextAction.tsx @@ -10,8 +10,8 @@ export type StudioRecommendedNextActionProps = { saveButtonText?: string; onSkip?: React.MouseEventHandler; skipButtonText?: string; - title: string; - description: string; + title?: string; + description?: string; hideSaveButton?: boolean; hideSkipButton?: boolean; children: React.ReactNode; 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 new file mode 100644 index 00000000000..2075e368e3b --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css @@ -0,0 +1,11 @@ +.button { + padding-left: 0; + border-radius: var(--fds-sizing-1); +} + +.savelayoutSetButton { + display: flex; + align-self: flex-start; + margin-left: 0.5rem; + border: 2px solid var(--success-color); +} 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 eff8e7bcd9c..832c58a378a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx @@ -2,7 +2,16 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -import { StudioRecommendedNextAction } from '@studio/components'; +import { + StudioButton, + StudioIconTextfield, + StudioNativeSelect, + StudioProperty, + StudioRecommendedNextAction, +} from '@studio/components'; +import { Paragraph } from '@digdir/designsystemet-react'; +import { CheckmarkIcon, ClipboardIcon, PlusIcon } from '@studio/icons'; +import classes from './EditLayoutSet.module.css'; type EditLayoutSetProps = { existingLayoutSetForSubform: string; @@ -30,19 +39,64 @@ export const EditLayoutSet = ({ const layoutSetIsUndefined = !existingLayoutSetForSubform; if (layoutSetIsUndefined) { return ( - - - + <> + + + {t('ux_editor.component_properties.subform.create_layout_set_description')} + + + {/* TODO: add functionalty */} + } + onClick={undefined} + /> + + + {/* TODO: - Fix align for all */} + + + {/* TODO: - extract text - add functionalty */} + + {/* TODO: - Add seelctor for datmodell*/} + + + + {/* TODO: - extract text - add functionalty */} + } + onClick={undefined} + title={'Lagreeeeeeeee'} + variant='tertiary' + color='success' + /> + + ); } From dd617033bba562b7eb9d0ff17b56306f7ee12e52 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 25 Oct 2024 11:20:56 +0200 Subject: [PATCH 02/10] added a seperate component for creating new layoutset --- .../CreateNewSubform.module.css | 5 ++ .../CreateNewSubform/CreateNewSubform.tsx | 54 ++++++++++++++++ .../EditLayoutSet/CreateNewSubform/index.ts | 1 + .../EditLayoutSet/EditLayoutSet.module.css | 7 --- .../EditLayoutSet/EditLayoutSet.tsx | 63 +++++++------------ 5 files changed, 81 insertions(+), 49 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css new file mode 100644 index 00000000000..28e138f134c --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css @@ -0,0 +1,5 @@ +.savelayoutSetButton { + display: flex; + align-self: flex-start; + border: 2px solid var(--success-color); +} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx new file mode 100644 index 00000000000..48e28322886 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { StudioButton, StudioCard, StudioNativeSelect, StudioTextfield } from '@studio/components'; +import { ClipboardIcon, CheckmarkIcon } from '@studio/icons'; +import { useTranslation } from 'react-i18next'; +import classes from './CreateNewSubform.module.css'; + +type CreateNewSubformProps = { + onSaveClick: () => void; + handleNameChange: (value: string) => void; + onChangeDataModel: (value: string) => void; + layoutSetName: string; + dataModelValue: string; +}; + +export const CreateNewSubform = ({ + onSaveClick, + handleNameChange, + onChangeDataModel, + layoutSetName, + dataModelValue, +}: CreateNewSubformProps): React.ReactElement => { + const { t } = useTranslation(); + + return ( + + + + + + handleNameChange(e.target.value)} + /> + onChangeDataModel(e.target.value)} + value={dataModelValue} + size='sm' + /> + } + onClick={onSaveClick} + title={'Lagre'} + variant='tertiary' + color='success' + /> + + + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts new file mode 100644 index 00000000000..5bc8afe8761 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts @@ -0,0 +1 @@ +export { CreateNewSubform } from './CreateNewSubform'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css index 2075e368e3b..cec24eef80a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css @@ -2,10 +2,3 @@ padding-left: 0; border-radius: var(--fds-sizing-1); } - -.savelayoutSetButton { - display: flex; - align-self: flex-start; - margin-left: 0.5rem; - border: 2px solid var(--success-color); -} 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 832c58a378a..d746fe6f7b0 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx @@ -2,16 +2,11 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -import { - StudioButton, - StudioIconTextfield, - StudioNativeSelect, - StudioProperty, - StudioRecommendedNextAction, -} from '@studio/components'; +import { StudioProperty, StudioRecommendedNextAction } from '@studio/components'; import { Paragraph } from '@digdir/designsystemet-react'; -import { CheckmarkIcon, ClipboardIcon, PlusIcon } from '@studio/icons'; +import { PlusIcon } from '@studio/icons'; import classes from './EditLayoutSet.module.css'; +import { CreateNewSubform } from './CreateNewSubform'; type EditLayoutSetProps = { existingLayoutSetForSubform: string; @@ -24,6 +19,11 @@ export const EditLayoutSet = ({ }: EditLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [isLayoutSetSelectorVisible, setIsLayoutSetSelectorVisible] = useState(false); + const [showCreateSubform, setShowCreateSubform] = useState(false); + + function handleClick() { + setShowCreateSubform(true); + } if (isLayoutSetSelectorVisible) { return ( @@ -35,7 +35,6 @@ export const EditLayoutSet = ({ /> ); } - const layoutSetIsUndefined = !existingLayoutSetForSubform; if (layoutSetIsUndefined) { return ( @@ -60,42 +59,22 @@ export const EditLayoutSet = ({ className={classes.button} property={t('ux_editor.component_properties.subform.create_layout_set_button')} icon={} - onClick={undefined} + onClick={handleClick} /> - - {/* TODO: - Fix align for all */} - - - {/* TODO: - extract text - add functionalty */} - { + // Save the new layout set and then hide the create subform + //TODO: Implement save function and then hide the create subform + setShowCreateSubform(false); + }} /> - {/* TODO: - Add seelctor for datmodell*/} - - - - {/* TODO: - extract text - add functionalty */} - } - onClick={undefined} - title={'Lagreeeeeeeee'} - variant='tertiary' - color='success' - /> - + )} ); } From 50e02c7df39735602deb7dc02fca4b28a6db2797 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 25 Oct 2024 22:56:52 +0200 Subject: [PATCH 03/10] save new created subform --- frontend/language/src/nb.json | 1 - .../CreateNewSubform.module.css | 5 -- .../CreateNewSubform/CreateNewSubform.tsx | 54 --------------- .../EditLayoutSet/CreateNewSubform/index.ts | 1 - .../EditLayoutSet/EditLayoutSet.module.css | 6 ++ .../EditLayoutSet/EditLayoutSet.tsx | 69 ++++++++++++++----- .../EditLayoutSetForSubform.tsx | 5 ++ 7 files changed, 62 insertions(+), 79 deletions(-) delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index d6935b63b21..9bcf5db73cf 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1299,7 +1299,6 @@ "ux_editor.component_properties.subform.create_layout_set_button": "Opprett et nytt skjema", "ux_editor.component_properties.subform.create_layout_set_description": " Hvis du velger å lage et nytt underskjema, oppretter vi et tomt underskjema for deg. Det må du selv utforme, før du kan sette opp tabellen.", "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema", - "ux_editor.component_properties.subform.datamodell_binding_layout_set_name": "Velg datamodellknytning", "ux_editor.component_properties.subform.go_to_layout_set": "Gå til utforming av underskjemaet", "ux_editor.component_properties.subform.no_layout_sets_acting_as_subform": "Det finnes ingen sidegrupper i løsningen som kan brukes som et underskjema", "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema", diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css deleted file mode 100644 index 28e138f134c..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.savelayoutSetButton { - display: flex; - align-self: flex-start; - border: 2px solid var(--success-color); -} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx deleted file mode 100644 index 48e28322886..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/CreateNewSubform.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { StudioButton, StudioCard, StudioNativeSelect, StudioTextfield } from '@studio/components'; -import { ClipboardIcon, CheckmarkIcon } from '@studio/icons'; -import { useTranslation } from 'react-i18next'; -import classes from './CreateNewSubform.module.css'; - -type CreateNewSubformProps = { - onSaveClick: () => void; - handleNameChange: (value: string) => void; - onChangeDataModel: (value: string) => void; - layoutSetName: string; - dataModelValue: string; -}; - -export const CreateNewSubform = ({ - onSaveClick, - handleNameChange, - onChangeDataModel, - layoutSetName, - dataModelValue, -}: CreateNewSubformProps): React.ReactElement => { - const { t } = useTranslation(); - - return ( - - - - - - handleNameChange(e.target.value)} - /> - onChangeDataModel(e.target.value)} - value={dataModelValue} - size='sm' - /> - } - onClick={onSaveClick} - title={'Lagre'} - variant='tertiary' - color='success' - /> - - - ); -}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts deleted file mode 100644 index 5bc8afe8761..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubform/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CreateNewSubform } from './CreateNewSubform'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css index cec24eef80a..56715e5bd5a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css @@ -2,3 +2,9 @@ padding-left: 0; border-radius: var(--fds-sizing-1); } + +.savelayoutSetButton { + display: flex; + align-self: flex-start; + border: 2px solid var(--success-color); +} 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 d746fe6f7b0..7f34997b391 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx @@ -2,27 +2,51 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -import { StudioProperty, StudioRecommendedNextAction } from '@studio/components'; +import { + StudioProperty, + StudioRecommendedNextAction, + StudioButton, + StudioCard, + StudioTextfield, +} from '@studio/components'; import { Paragraph } from '@digdir/designsystemet-react'; -import { PlusIcon } from '@studio/icons'; +import { PlusIcon, ClipboardIcon, CheckmarkIcon } from '@studio/icons'; +import { useAddLayoutSetMutation } from 'app-development/hooks/mutations/useAddLayoutSetMutation'; +import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import classes from './EditLayoutSet.module.css'; -import { CreateNewSubform } from './CreateNewSubform'; type EditLayoutSetProps = { existingLayoutSetForSubform: string; onUpdateLayoutSet: (layoutSetId: string) => void; + onSubFormCreated: (layoutSetName: string) => void; }; export const EditLayoutSet = ({ existingLayoutSetForSubform, onUpdateLayoutSet, + onSubFormCreated, }: EditLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [isLayoutSetSelectorVisible, setIsLayoutSetSelectorVisible] = useState(false); const [showCreateSubform, setShowCreateSubform] = useState(false); + const [newSubForm, setNewSubForm] = useState(''); + const { org, app } = useStudioEnvironmentParams(); + const { mutate: addLayoutSet } = useAddLayoutSetMutation(org, app); - function handleClick() { - setShowCreateSubform(true); + const createNewSubform = () => { + addLayoutSet({ + layoutSetIdToUpdate: newSubForm, + layoutSetConfig: { + id: newSubForm, + type: 'subform', + }, + }); + onSubFormCreated(newSubForm); + setShowCreateSubform(false); + }; + + function onNameChange(subFormName: string) { + setNewSubForm(subFormName); } if (isLayoutSetSelectorVisible) { @@ -54,26 +78,35 @@ export const EditLayoutSet = ({ onSetLayoutSetSelectorVisible={setIsLayoutSetSelectorVisible} showButtons={false} /> - {/* TODO: add functionalty */} } - onClick={handleClick} + onClick={() => setShowCreateSubform(!showCreateSubform)} /> {showCreateSubform && ( - { - // Save the new layout set and then hide the create subform - //TODO: Implement save function and then hide the create subform - setShowCreateSubform(false); - }} - /> + + + + + + onNameChange(e.target.value)} + /> + } + onClick={createNewSubform} + title={'Lagre'} + variant='tertiary' + color='success' + /> + + )} ); 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 e158d7ffaf4..f07467b4fe6 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 @@ -25,10 +25,15 @@ export const EditLayoutSetForSubform = ({ handleComponentChange(updatedComponent); }; + function handleSubFormCreated(layoutSetName: string): void { + handleUpdatedLayoutSet(layoutSetName); + } + return ( ); }; From 2426f12fb8066f167789b05d302ab5129e0b81dc Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Sat, 26 Oct 2024 20:35:16 +0200 Subject: [PATCH 04/10] navigate automaticlly to created subform --- .../EditLayoutSetForSubform/EditLayoutSetForSubform.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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 f07467b4fe6..a9fd5e8d781 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 @@ -6,6 +6,7 @@ import { SubFormUtilsImpl } from '../../../../classes/SubFormUtils'; import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import type { IGenericEditComponent } from '../../../../components/config/componentConfig'; +import { useAppContext } from '../../../../hooks'; export const EditLayoutSetForSubform = ({ handleComponentChange, @@ -13,6 +14,7 @@ export const EditLayoutSetForSubform = ({ }: IGenericEditComponent): React.ReactElement => { const { org, app } = useStudioEnvironmentParams(); const { data: layoutSets } = useLayoutSetsQuery(org, app); + const { setSelectedFormLayoutSetName } = useAppContext(); const subFormUtils = new SubFormUtilsImpl(layoutSets.sets); @@ -25,7 +27,8 @@ export const EditLayoutSetForSubform = ({ handleComponentChange(updatedComponent); }; - function handleSubFormCreated(layoutSetName: string): void { + function handleCreatedSubForm(layoutSetName: string) { + setSelectedFormLayoutSetName(layoutSetName); handleUpdatedLayoutSet(layoutSetName); } @@ -33,7 +36,7 @@ export const EditLayoutSetForSubform = ({ ); }; From 53ae44cb0e34ba2cc2afbd18be0c1cbff5178871 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Sun, 27 Oct 2024 16:42:49 +0100 Subject: [PATCH 05/10] refacure and added seperate componenent for creating new sunform --- .../CreateNewLayoutSet.module.css | 9 +++ .../CreateNewLayoutSet.test.tsx | 66 +++++++++++++++++++ .../CreateNewLayoutSet/CreateNewLayoutSet.tsx | 65 ++++++++++++++++++ .../EditLayoutSet/CreateNewLayoutSet/index.ts | 1 + .../EditLayoutSet/EditLayoutSet.module.css | 6 -- .../EditLayoutSet/EditLayoutSet.tsx | 58 ++-------------- .../EditLayoutSetForSubform.test.tsx | 23 +++++++ 7 files changed, 171 insertions(+), 57 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.module.css create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.test.tsx create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.module.css new file mode 100644 index 00000000000..d2b62780738 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.module.css @@ -0,0 +1,9 @@ +.savelayoutSetButton { + display: flex; + align-self: flex-start; + border: 2px solid var(--success-color); +} + +.headerIcon { + font-size: large; +} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.test.tsx new file mode 100644 index 00000000000..655f47609bf --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.test.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { renderWithProviders } from '../../../../../../testing/mocks'; +import { CreateNewLayoutSet } from './CreateNewLayoutSet'; +import type { ComponentType } from 'app-shared/types/ComponentType'; +import { textMock } from '@studio/testing/mocks/i18nMock'; +import { screen, waitFor } from '@testing-library/react'; +import { createQueryClientMock } from 'app-shared/mocks/queryClientMock'; +import { app, org } from '@studio/testing/testids'; +import { QueryKey } from 'app-shared/types/QueryKey'; +import { layoutSets } from 'app-shared/mocks/mocks'; +import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; +import userEvent from '@testing-library/user-event'; +import type { FormComponent } from '../../../../../../types/FormComponent'; +import { AppContext } from '../../../../../../AppContext'; +import { appContextMock } from '../../../../../../testing/appContextMock'; + +const onSubFormCreatedMock = jest.fn(); + +describe('CreateNewLayoutSet', () => { + afterEach(jest.clearAllMocks); + + it('displays the card with label and input field', () => { + renderCreateNewLayoutSet(); + const card = screen.getByLabelText( + textMock('ux_editor.component_properties.subform.created_layout_set_name'), + ); + expect(card).toBeInTheDocument(); + }); + + it('displays the input field', () => { + renderCreateNewLayoutSet(); + const input = screen.getByRole('textbox'); + expect(input).toBeInTheDocument(); + }); + + it('displays the save button', () => { + renderCreateNewLayoutSet(); + const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + expect(saveButton).toBeInTheDocument(); + }); + + it('calls onSubFormCreated when save button is clicked', async () => { + const user = userEvent.setup(); + renderCreateNewLayoutSet(); + const input = screen.getByRole('textbox'); + await user.type(input, 'NewSubForm'); + const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + await user.click(saveButton); + await waitFor(() => expect(onSubFormCreatedMock).toHaveBeenCalledTimes(1)); + expect(onSubFormCreatedMock).toHaveBeenCalledWith('NewSubForm'); + }); +}); + +const renderCreateNewLayoutSet = ( + layoutSetsMock: LayoutSets = layoutSets, + componentProps: Partial> = {}, +) => { + const queryClient = createQueryClientMock(); + queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock); + return renderWithProviders( + + + , + { queryClient }, + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx new file mode 100644 index 00000000000..3929d3a4240 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { StudioButton, StudioCard, StudioTextfield } from '@studio/components'; +import { ClipboardIcon, CheckmarkIcon } from '@studio/icons'; +import { useAddLayoutSetMutation } from 'app-development/hooks/mutations/useAddLayoutSetMutation'; +import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; +import classes from './CreateNewLayoutSet.module.css'; + +type CreateNewLayoutSetProps = { + onSubFormCreated: (layoutSetName: string) => void; +}; + +export const CreateNewLayoutSet = ({ + onSubFormCreated, +}: CreateNewLayoutSetProps): React.ReactElement => { + const { t } = useTranslation(); + const [newSubForm, setNewSubForm] = useState(''); + const { org, app } = useStudioEnvironmentParams(); + const { mutate: addLayoutSet } = useAddLayoutSetMutation(org, app); + + const createNewSubform = () => { + if (!newSubForm) return; + addLayoutSet({ + layoutSetIdToUpdate: newSubForm, + layoutSetConfig: { + id: newSubForm, + type: 'subform', + }, + }); + onSubFormCreated(newSubForm); + setNewSubForm(''); + }; + + function onNameChange(subFormName: string) { + setNewSubForm(subFormName); + } + + function handleChange(e: React.ChangeEvent) { + onNameChange(e.target.value); + } + + return ( + + + + + + + } + onClick={createNewSubform} + title={t('general.close')} + variant='tertiary' + color='success' + /> + + + ); +}; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts new file mode 100644 index 00000000000..5690ff8d953 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts @@ -0,0 +1 @@ +export { CreateNewLayoutSet } from './CreateNewLayoutSet'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css index 56715e5bd5a..cec24eef80a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css @@ -2,9 +2,3 @@ padding-left: 0; border-radius: var(--fds-sizing-1); } - -.savelayoutSetButton { - display: flex; - align-self: flex-start; - border: 2px solid var(--success-color); -} 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 7f34997b391..d60768e4b38 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx @@ -2,18 +2,11 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -import { - StudioProperty, - StudioRecommendedNextAction, - StudioButton, - StudioCard, - StudioTextfield, -} from '@studio/components'; +import { StudioProperty, StudioRecommendedNextAction } from '@studio/components'; import { Paragraph } from '@digdir/designsystemet-react'; -import { PlusIcon, ClipboardIcon, CheckmarkIcon } from '@studio/icons'; -import { useAddLayoutSetMutation } from 'app-development/hooks/mutations/useAddLayoutSetMutation'; -import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; +import { PlusIcon } from '@studio/icons'; import classes from './EditLayoutSet.module.css'; +import { CreateNewLayoutSet } from './CreateNewLayoutSet/CreateNewLayoutSet'; type EditLayoutSetProps = { existingLayoutSetForSubform: string; @@ -29,24 +22,9 @@ export const EditLayoutSet = ({ const { t } = useTranslation(); const [isLayoutSetSelectorVisible, setIsLayoutSetSelectorVisible] = useState(false); const [showCreateSubform, setShowCreateSubform] = useState(false); - const [newSubForm, setNewSubForm] = useState(''); - const { org, app } = useStudioEnvironmentParams(); - const { mutate: addLayoutSet } = useAddLayoutSetMutation(org, app); - const createNewSubform = () => { - addLayoutSet({ - layoutSetIdToUpdate: newSubForm, - layoutSetConfig: { - id: newSubForm, - type: 'subform', - }, - }); - onSubFormCreated(newSubForm); - setShowCreateSubform(false); - }; - - function onNameChange(subFormName: string) { - setNewSubForm(subFormName); + function handleClick() { + setShowCreateSubform(!showCreateSubform); } if (isLayoutSetSelectorVisible) { @@ -82,32 +60,10 @@ export const EditLayoutSet = ({ className={classes.button} property={t('ux_editor.component_properties.subform.create_layout_set_button')} icon={} - onClick={() => setShowCreateSubform(!showCreateSubform)} + onClick={handleClick} /> - {showCreateSubform && ( - - - - - - onNameChange(e.target.value)} - /> - } - onClick={createNewSubform} - title={'Lagre'} - variant='tertiary' - color='success' - /> - - - )} + {showCreateSubform && } ); } diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx index 0140a74acfc..969ca5b7dca 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx @@ -47,6 +47,29 @@ describe('EditLayoutSetForSubForm', () => { expect(setLayoutSetButton).toBeInTheDocument(); }); + it('displays a button(Opprett et nytt skjema) to set a layout set for the subform', async () => { + const subformLayoutSetId = 'subformLayoutSetId'; + renderEditLayoutSetForSubForm({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + const createNewLayoutSetButton = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), + }); + expect(createNewLayoutSetButton).toBeInTheDocument(); + }); + + it('renders CreateNewLayoutSet component when clicking the create new layout set button', async () => { + const user = userEvent.setup(); + const subformLayoutSetId = 'subformLayoutSetId'; + renderEditLayoutSetForSubForm({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + const createNewLayoutSetButton = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), + }); + await user.click(createNewLayoutSetButton); + const createNewLayoutSetComponent = screen.getByText( + textMock('ux_editor.component_properties.subform.created_layout_set_name'), + ); + expect(createNewLayoutSetComponent).toBeInTheDocument(); + }); + it('displays a select to choose a layout set for the subform', async () => { const subformLayoutSetId = 'subformLayoutSetId'; renderEditLayoutSetForSubForm({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); From 419a6c2093c941d5622df4f8c075c73333d9e310 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Mon, 28 Oct 2024 08:40:15 +0100 Subject: [PATCH 06/10] changed buttonm color --- .../EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx index 3929d3a4240..f1fb9fbb963 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx @@ -57,7 +57,7 @@ export const CreateNewLayoutSet = ({ onClick={createNewSubform} title={t('general.close')} variant='tertiary' - color='success' + color='second' /> From 040b3c99d1f3deedeec500c66b2568a9586ab6e6 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Mon, 28 Oct 2024 09:50:02 +0100 Subject: [PATCH 07/10] added test --- .../EditLayoutSetForSubform.test.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx index 969ca5b7dca..1054601f68b 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx @@ -134,6 +134,26 @@ describe('EditLayoutSetForSubForm', () => { ); }); + it('calls handleComponentChange after creating a new layout set and clicking Lukk button', async () => { + const user = userEvent.setup(); + const subformLayoutSetId = 'subformLayoutSetId'; + renderEditLayoutSetForSubForm({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + const createNewLayoutSetButton = screen.getByRole('button', { + name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), + }); + await user.click(createNewLayoutSetButton); + const input = screen.getByRole('textbox'); + await user.type(input, 'NewSubForm'); + const saveButton = screen.getByRole('button', { name: textMock('general.close') }); + await user.click(saveButton); + expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); + expect(handleComponentChangeMock).toHaveBeenCalledWith( + expect.objectContaining({ + layoutSet: 'NewSubForm', + }), + ); + }); + it('closes the view mode when clicking close button after selecting a layout set', async () => { const user = userEvent.setup(); const subformLayoutSetId = 'subformLayoutSetId'; From b4372c81c198c08fff2fc57c425065e8b5c15a27 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Mon, 28 Oct 2024 15:34:56 +0100 Subject: [PATCH 08/10] fixed comments --- frontend/language/src/nb.json | 4 ++-- .../EditLayoutSet/CreateNewLayoutSet/index.ts | 1 - .../CreateNewSubformLayoutSet.module.css} | 1 + .../CreateNewSubformLayoutSet.test.tsx} | 23 ++++++++++--------- .../CreateNewSubformLayoutSet.tsx} | 16 +++++-------- .../CreateNewSubformLayoutSet/index.ts | 1 + .../EditLayoutSet/EditLayoutSet.tsx | 13 +++++------ .../EditLayoutSetForSubform.test.tsx | 6 ++--- 8 files changed, 31 insertions(+), 34 deletions(-) delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewLayoutSet/CreateNewLayoutSet.module.css => CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css} (82%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewLayoutSet/CreateNewLayoutSet.test.tsx => CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx} (79%) rename frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/{CreateNewLayoutSet/CreateNewLayoutSet.tsx => CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx} (84%) create mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/index.ts diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 90c6d95a9a1..2f268aec2ef 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1318,8 +1318,8 @@ "ux_editor.component_properties.subform.choose_layout_set_description": " Før du kan bruke komponenten Tabell for underskjema, må du velge hvilket underskjema du skal bruke den med. Deretter kan du velge hvilke egenskaper komponenten skal ha.", "ux_editor.component_properties.subform.choose_layout_set_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 skjema", - "ux_editor.component_properties.subform.create_layout_set_description": " Hvis du velger å lage et nytt underskjema, oppretter vi et tomt underskjema for deg. Det må du selv utforme, før du kan sette opp tabellen.", + "ux_editor.component_properties.subform.create_layout_set_button": "Lag et nytt underskjema", + "ux_editor.component_properties.subform.create_layout_set_description": "Hvis du velger å lage et nytt underskjema, oppretter vi et tomt underskjema for deg. Det må du selv utforme, før du kan sette opp tabellen.", "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema", "ux_editor.component_properties.subform.go_to_layout_set": "Gå til utforming av underskjemaet", "ux_editor.component_properties.subform.no_layout_sets_acting_as_subform": "Det finnes ingen sidegrupper i løsningen som kan brukes som et underskjema", diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts deleted file mode 100644 index 5690ff8d953..00000000000 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { CreateNewLayoutSet } from './CreateNewLayoutSet'; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css similarity index 82% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.module.css rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css index d2b62780738..7def1fa7574 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css @@ -2,6 +2,7 @@ display: flex; align-self: flex-start; border: 2px solid var(--success-color); + color: var(--success-color); } .headerIcon { diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx similarity index 79% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.test.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx index 655f47609bf..34bd3c28a5f 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { renderWithProviders } from '../../../../../../testing/mocks'; -import { CreateNewLayoutSet } from './CreateNewLayoutSet'; +import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; import type { ComponentType } from 'app-shared/types/ComponentType'; import { textMock } from '@studio/testing/mocks/i18nMock'; import { screen, waitFor } from '@testing-library/react'; @@ -16,32 +16,33 @@ import { appContextMock } from '../../../../../../testing/appContextMock'; const onSubFormCreatedMock = jest.fn(); -describe('CreateNewLayoutSet', () => { +describe('CreateNewSubformLayoutSet ', () => { afterEach(jest.clearAllMocks); it('displays the card with label and input field', () => { - renderCreateNewLayoutSet(); - const card = screen.getByLabelText( - textMock('ux_editor.component_properties.subform.created_layout_set_name'), - ); + renderCreateNewSubformLayoutSet(); + const card = screen.getByRole('textbox', { + name: textMock('ux_editor.component_properties.subform.created_layout_set_name'), + }); + expect(card).toBeInTheDocument(); }); it('displays the input field', () => { - renderCreateNewLayoutSet(); + renderCreateNewSubformLayoutSet(); const input = screen.getByRole('textbox'); expect(input).toBeInTheDocument(); }); it('displays the save button', () => { - renderCreateNewLayoutSet(); + renderCreateNewSubformLayoutSet(); const saveButton = screen.getByRole('button', { name: textMock('general.close') }); expect(saveButton).toBeInTheDocument(); }); it('calls onSubFormCreated when save button is clicked', async () => { const user = userEvent.setup(); - renderCreateNewLayoutSet(); + renderCreateNewSubformLayoutSet(); const input = screen.getByRole('textbox'); await user.type(input, 'NewSubForm'); const saveButton = screen.getByRole('button', { name: textMock('general.close') }); @@ -51,7 +52,7 @@ describe('CreateNewLayoutSet', () => { }); }); -const renderCreateNewLayoutSet = ( +const renderCreateNewSubformLayoutSet = ( layoutSetsMock: LayoutSets = layoutSets, componentProps: Partial> = {}, ) => { @@ -59,7 +60,7 @@ const renderCreateNewLayoutSet = ( queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock); return renderWithProviders( - + , { queryClient }, ); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx similarity index 84% rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx index f1fb9fbb963..ef9b52de926 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewLayoutSet/CreateNewLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx @@ -4,15 +4,15 @@ import { StudioButton, StudioCard, StudioTextfield } from '@studio/components'; import { ClipboardIcon, CheckmarkIcon } from '@studio/icons'; import { useAddLayoutSetMutation } from 'app-development/hooks/mutations/useAddLayoutSetMutation'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; -import classes from './CreateNewLayoutSet.module.css'; +import classes from './CreateNewSubformLayoutSet.module.css'; -type CreateNewLayoutSetProps = { +type CreateNewSubformLayoutSetProps = { onSubFormCreated: (layoutSetName: string) => void; }; -export const CreateNewLayoutSet = ({ +export const CreateNewSubformLayoutSet = ({ onSubFormCreated, -}: CreateNewLayoutSetProps): React.ReactElement => { +}: CreateNewSubformLayoutSetProps): React.ReactElement => { const { t } = useTranslation(); const [newSubForm, setNewSubForm] = useState(''); const { org, app } = useStudioEnvironmentParams(); @@ -31,12 +31,8 @@ export const CreateNewLayoutSet = ({ setNewSubForm(''); }; - function onNameChange(subFormName: string) { - setNewSubForm(subFormName); - } - function handleChange(e: React.ChangeEvent) { - onNameChange(e.target.value); + setNewSubForm(e.target.value); } return ( @@ -57,7 +53,7 @@ export const CreateNewLayoutSet = ({ onClick={createNewSubform} title={t('general.close')} variant='tertiary' - color='second' + color='success' /> 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/CreateNewSubformLayoutSet/index.ts new file mode 100644 index 00000000000..39c8808d341 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/index.ts @@ -0,0 +1 @@ +export { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; 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 d60768e4b38..d1c7f577346 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx @@ -2,11 +2,10 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet'; import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet'; -import { StudioProperty, StudioRecommendedNextAction } from '@studio/components'; -import { Paragraph } from '@digdir/designsystemet-react'; +import { StudioParagraph, StudioProperty, StudioRecommendedNextAction } from '@studio/components'; import { PlusIcon } from '@studio/icons'; import classes from './EditLayoutSet.module.css'; -import { CreateNewLayoutSet } from './CreateNewLayoutSet/CreateNewLayoutSet'; +import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet'; type EditLayoutSetProps = { existingLayoutSetForSubform: string; @@ -24,7 +23,7 @@ export const EditLayoutSet = ({ const [showCreateSubform, setShowCreateSubform] = useState(false); function handleClick() { - setShowCreateSubform(!showCreateSubform); + setShowCreateSubform(true); } if (isLayoutSetSelectorVisible) { @@ -47,9 +46,9 @@ export const EditLayoutSet = ({ hideSaveButton={true} hideSkipButton={true} > - + {t('ux_editor.component_properties.subform.create_layout_set_description')} - + - {showCreateSubform && } + {showCreateSubform && } ); } diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx index 1054601f68b..d17fcd915cd 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx @@ -64,9 +64,9 @@ describe('EditLayoutSetForSubForm', () => { name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), }); await user.click(createNewLayoutSetButton); - const createNewLayoutSetComponent = screen.getByText( - textMock('ux_editor.component_properties.subform.created_layout_set_name'), - ); + const createNewLayoutSetComponent = screen.getByRole('textbox', { + name: textMock('ux_editor.component_properties.subform.created_layout_set_name'), + }); expect(createNewLayoutSetComponent).toBeInTheDocument(); }); From 6ded655f2e2c1db13ddd306892c5211e198a1aa5 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Mon, 28 Oct 2024 16:38:24 +0100 Subject: [PATCH 09/10] fixed typecheck --- .../EditLayoutSetForSubform.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx index 59f196e6d46..9be5df6e5d6 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.test.tsx @@ -49,7 +49,7 @@ describe('EditLayoutSetForSubform', () => { it('displays a button(Opprett et nytt skjema) to set a layout set for the subform', async () => { const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubForm({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); const createNewLayoutSetButton = screen.getByRole('button', { name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), }); @@ -59,7 +59,7 @@ describe('EditLayoutSetForSubform', () => { it('renders CreateNewLayoutSet component when clicking the create new layout set button', async () => { const user = userEvent.setup(); const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubForm({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); const createNewLayoutSetButton = screen.getByRole('button', { name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), }); @@ -137,7 +137,7 @@ describe('EditLayoutSetForSubform', () => { it('calls handleComponentChange after creating a new layout set and clicking Lukk button', async () => { const user = userEvent.setup(); const subformLayoutSetId = 'subformLayoutSetId'; - renderEditLayoutSetForSubForm({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); + renderEditLayoutSetForSubform({ sets: [{ id: subformLayoutSetId, type: 'subform' }] }); const createNewLayoutSetButton = screen.getByRole('button', { name: textMock('ux_editor.component_properties.subform.create_layout_set_button'), }); From 1cf06a95646eabced287d526fff96de76bbffb78 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Mon, 28 Oct 2024 16:41:05 +0100 Subject: [PATCH 10/10] fixed typecheck --- .../CreateNewSubformLayoutSet.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx index 34bd3c28a5f..970ce181232 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx @@ -54,7 +54,7 @@ describe('CreateNewSubformLayoutSet ', () => { const renderCreateNewSubformLayoutSet = ( layoutSetsMock: LayoutSets = layoutSets, - componentProps: Partial> = {}, + componentProps: Partial> = {}, ) => { const queryClient = createQueryClientMock(); queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock);