From 5a38a96050c5f5aa892f164dde590cbdf001e087 Mon Sep 17 00:00:00 2001 From: Lars <74791975+lassopicasso@users.noreply.github.com> Date: Wed, 8 Jan 2025 14:53:50 +0100 Subject: [PATCH 1/2] perf: Adjustments summary2 (#14353) --- frontend/language/src/nb.json | 2 +- .../Summary2/Summary2Component.test.tsx | 24 ++--- .../Summary2/Summary2Component.tsx | 2 +- .../Summary2Target.tsx | 91 ++++--------------- .../Summary2/Summary2Target/targetUtils.ts | 67 ++++++++++++++ .../useTargetTypes.ts | 0 6 files changed, 95 insertions(+), 91 deletions(-) rename frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/{Target => Summary2Target}/Summary2Target.tsx (65%) create mode 100644 frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/targetUtils.ts rename frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/{Target => Summary2Target}/useTargetTypes.ts (100%) diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index d68daaab64d..3eca000e224 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1453,7 +1453,7 @@ "ux_editor.component_properties.target": "Hva vil du vise i oppsummeringen?", "ux_editor.component_properties.target_description": "Her kan du velge hva som skal vises på oppsummeringssiden. Du kan for eksempel vise hele sidegrupper, utvalgte sider eller utvalgte komponenter", "ux_editor.component_properties.target_invalid": "Ugyldig mål", - "ux_editor.component_properties.target_taskId": "1. Oppsummer fra denne sidegruppen", + "ux_editor.component_properties.target_layoutSet_id": "1. Oppsummer fra denne sidegruppen", "ux_editor.component_properties.target_type": "2. Vis sidegruppe, side eller komponent", "ux_editor.component_properties.target_unit_component": "3. Komponent", "ux_editor.component_properties.target_unit_layout_set": "3. Sidegruppe", diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.test.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.test.tsx index edb9f118615..ef6daef8b39 100644 --- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.test.tsx @@ -7,7 +7,11 @@ import { QueryKey } from 'app-shared/types/QueryKey'; import React from 'react'; import { componentMocks } from '../../../../testing/componentMocks'; import { component1IdMock, layout1NameMock, layoutMock } from '../../../../testing/layoutMock'; -import { layoutSet1NameMock, layoutSetsMock } from '../../../../testing/layoutSetsMock'; +import { + layoutSet1NameMock, + layoutSet2NameMock, + layoutSetsMock, +} from '../../../../testing/layoutSetsMock'; import { renderWithProviders } from '../../../../testing/mocks'; import type { IGenericEditComponent } from '../../componentConfig'; import { Summary2Component } from './Summary2Component'; @@ -50,30 +54,18 @@ describe('Summary2ComponentTargetSelector', () => { expect(select).toHaveValue(layoutSetsMock.sets[1].tasks[0]); }); - it('should allow selecting a task id', async () => { + it('should allow selecting a layout set', async () => { const user = userEvent.setup(); render({ component: { ...defaultProps.component, target: { type: 'component', id: component1IdMock } }, }); - await user.selectOptions(targetTaskIdSelect(), 'Task_2'); + await user.selectOptions(targetTaskIdSelect(), layoutSet2NameMock); expect(defaultProps.handleComponentChange).toHaveBeenCalledWith( expect.objectContaining({ target: { taskId: 'Task_2', type: 'component', id: '' } }), ); }); - it('should remove the task id from the target if the task id is the same as the current layout set', async () => { - const user = userEvent.setup(); - render({ - component: { ...defaultProps.component, target: { type: 'component', id: component1IdMock } }, - }); - - await user.selectOptions(targetTaskIdSelect(), 'Task_1'); - expect(defaultProps.handleComponentChange).toHaveBeenCalledWith( - expect.objectContaining({ target: { type: 'component', id: '' } }), - ); - }); - it('should defaults to page target and disabled target select', async () => { render(); expect(targetTypeSelect()).toHaveValue('layoutSet'); @@ -164,7 +156,7 @@ describe('Summary2ComponentTargetSelector', () => { const targetTaskIdSelect = () => screen.getByRole('combobox', { - name: textMock('ux_editor.component_properties.target_taskId'), + name: textMock('ux_editor.component_properties.target_layoutSet_id'), }); const targetTypeSelect = () => diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.tsx index bae17a21a84..459f9e85a82 100644 --- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.tsx +++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { IGenericEditComponent } from '../../componentConfig'; import type { ComponentType } from 'app-shared/types/ComponentType'; import { Summary2Override } from './Override/Summary2Override'; -import { Summary2Target } from './Target/Summary2Target'; +import { Summary2Target } from './Summary2Target/Summary2Target'; import type { Summary2OverrideConfig, Summary2TargetConfig, diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Target/Summary2Target.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/Summary2Target.tsx similarity index 65% rename from frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Target/Summary2Target.tsx rename to frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/Summary2Target.tsx index 6a880a0e226..fbb350f2be8 100644 --- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Target/Summary2Target.tsx +++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/Summary2Target.tsx @@ -12,14 +12,12 @@ import type { Summary2TargetConfig, SummaryTargetType, } from 'app-shared/types/ComponentSpecificConfig'; -import { ComponentType } from 'app-shared/types/ComponentType'; import { useTranslation } from 'react-i18next'; -import type { FormComponent } from '../../../../../types/FormComponent'; import { useAppContext, useComponentTitle } from '../../../../../hooks'; import { useFormLayoutsQuery } from '../../../../../hooks/queries/useFormLayoutsQuery'; -import { getAllLayoutComponents } from '../../../../../utils/formLayoutUtils'; import { useTargetTypes } from './useTargetTypes'; import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; +import { getComponentOptions, getLayoutSetOptions, getPageOptions } from './targetUtils'; type Summary2TargetProps = { target: Summary2TargetConfig; @@ -31,64 +29,21 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => { const { org, app } = useStudioEnvironmentParams(); const { selectedFormLayoutSetName, selectedFormLayoutName } = useAppContext(); const { data: layoutSets } = useLayoutSetsQuery(org, app); - - const tasks = [ - ...new Set( - layoutSets.sets.reduce((acc, set) => { - return set.tasks ? acc.concat(set.tasks) : acc; - }, []), - ), - ]; - const currentTaskId = layoutSets?.sets?.find((set) => set.id === selectedFormLayoutSetName) - .tasks?.[0]; - const selectedLayoutSetName = target.taskId + const selectedLayoutSetTargetName = target.taskId ? layoutSets?.sets?.find((set) => set.tasks?.[0] === target.taskId).id : selectedFormLayoutSetName; - - const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedLayoutSetName); - - const targetTypes = useTargetTypes(); + const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedLayoutSetTargetName); const getComponentTitle = useComponentTitle(); + const targetTypes = useTargetTypes(); - const excludedComponents = [ - ComponentType.ActionButton, - ComponentType.Alert, - ComponentType.AttachmentList, - ComponentType.Button, - ComponentType.ButtonGroup, - ComponentType.CustomButton, - ComponentType.Grid, - ComponentType.Header, - ComponentType.IFrame, - ComponentType.Image, - ComponentType.InstantiationButton, - ComponentType.InstanceInformation, - ComponentType.Link, - ComponentType.NavigationBar, - ComponentType.NavigationButtons, - ComponentType.Panel, - ComponentType.Paragraph, - ComponentType.PrintButton, - ComponentType.Summary, - ComponentType.Summary2, - ]; - - const components = formLayoutsData - ? Object.values(formLayoutsData).flatMap((layout) => - getAllLayoutComponents(layout, excludedComponents), - ) - : []; - const componentOptions = components.map((formComponent: FormComponent) => ({ - id: formComponent.id, - description: getComponentTitle(formComponent), - })); + const layoutSetOptions = getLayoutSetOptions(layoutSets); + const pageOptions = getPageOptions(formLayoutsData); + const componentOptions = getComponentOptions({ formLayoutsData, getComponentTitle }); - const pageOptions = formLayoutsData - ? Object.keys(formLayoutsData).map((page) => ({ - id: page, - description: undefined, - })) - : []; + const handleLayoutSetChange = (taskId: string) => { + const updatedTarget = { ...target, id: '', taskId }; + onChange(updatedTarget); + }; const handleTypeChange = (event: React.ChangeEvent) => { const newType = event.target.value as SummaryTargetType; @@ -100,16 +55,6 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => { onChange(updatedTarget); }; - const handleTaskIdChange = (taskId: string) => { - const updatedTarget = { ...target, id: '' }; - if (taskId === currentTaskId) { - delete updatedTarget.taskId; - } else { - updatedTarget.taskId = taskId; - } - onChange(updatedTarget); - }; - const handleTargetIdChange = (value: string) => { const updatedTarget = { ...target }; updatedTarget.id = value; @@ -127,13 +72,13 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => { handleTaskIdChange(e.target.value)} + label={t('ux_editor.component_properties.target_layoutSet_id')} + value={target.taskId} + onChange={(e) => handleLayoutSetChange(e.target.value)} > - {tasks.map((taskId) => ( - ))} @@ -172,7 +117,7 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => { key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed size='sm' label={t('ux_editor.component_properties.target_unit_layout_set')} - value={selectedLayoutSetName} + value={selectedLayoutSetTargetName} disabled={true} /> )} diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/targetUtils.ts b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/targetUtils.ts new file mode 100644 index 00000000000..038f2901476 --- /dev/null +++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/targetUtils.ts @@ -0,0 +1,67 @@ +import type { IFormLayouts } from '@altinn/ux-editor/types/global'; +import type { FormComponent } from '@altinn/ux-editor/types/FormComponent'; +import { getAllLayoutComponents } from '../../../../../utils/formLayoutUtils'; +import { ComponentType } from 'app-shared/types/ComponentType'; +import type { LayoutSet, LayoutSets } from 'app-shared/types/api/LayoutSetsResponse'; + +const excludedComponents = [ + ComponentType.ActionButton, + ComponentType.Alert, + ComponentType.AttachmentList, + ComponentType.Button, + ComponentType.ButtonGroup, + ComponentType.CustomButton, + ComponentType.Grid, + ComponentType.Header, + ComponentType.IFrame, + ComponentType.Image, + ComponentType.InstantiationButton, + ComponentType.InstanceInformation, + ComponentType.Link, + ComponentType.NavigationBar, + ComponentType.NavigationButtons, + ComponentType.Panel, + ComponentType.Paragraph, + ComponentType.PrintButton, + ComponentType.Summary, + ComponentType.Summary2, +]; + +type GetComponentOptionsProps = { + formLayoutsData: IFormLayouts; + getComponentTitle: (formComponent: FormComponent) => string; +}; + +type TargetProps = { + id: string; + description: string; +}; + +export const getComponentOptions = ({ + formLayoutsData, + getComponentTitle, +}: GetComponentOptionsProps): TargetProps[] => { + const availableComponents = formLayoutsData + ? Object.values(formLayoutsData).flatMap((layout) => + getAllLayoutComponents(layout, excludedComponents), + ) + : []; + + return availableComponents.map((formComponent: FormComponent) => ({ + id: formComponent.id, + description: getComponentTitle(formComponent), + })); +}; + +export const getPageOptions = (formLayoutsData: IFormLayouts): TargetProps[] => { + return formLayoutsData + ? Object.keys(formLayoutsData).map((page) => ({ + id: page, + description: undefined, + })) + : []; +}; + +export const getLayoutSetOptions = (layoutSets: LayoutSets): LayoutSet[] => { + return layoutSets?.sets.filter((set: LayoutSet) => set.tasks?.length > 0); +}; diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Target/useTargetTypes.ts b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/useTargetTypes.ts similarity index 100% rename from frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Target/useTargetTypes.ts rename to frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Target/useTargetTypes.ts From 7b805ee8bb7f96e02eba2c7513d96d88e05b3309 Mon Sep 17 00:00:00 2001 From: Nina Kylstad Date: Wed, 8 Jan 2025 15:02:21 +0100 Subject: [PATCH 2/2] chore(ui-editor): remove custom component from toolbar list (#14362) --- .../packages/ux-editor/src/data/formItemConfig.test.ts | 9 +++++++-- frontend/packages/ux-editor/src/data/formItemConfig.ts | 1 - 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/frontend/packages/ux-editor/src/data/formItemConfig.test.ts b/frontend/packages/ux-editor/src/data/formItemConfig.test.ts index cc3481cc92a..032123875f7 100644 --- a/frontend/packages/ux-editor/src/data/formItemConfig.test.ts +++ b/frontend/packages/ux-editor/src/data/formItemConfig.test.ts @@ -14,9 +14,14 @@ describe('formItemConfig', () => { confOnScreenComponents, ]; const allAvailableComponents = allAvailableLists.flat(); - const excludedComponents = [ComponentType.Payment, ComponentType.Subform, ComponentType.Summary2]; + const excludedComponents = [ + ComponentType.Custom, + ComponentType.Payment, + ComponentType.Subform, + ComponentType.Summary2, + ]; - /** Test that all components, except Payment, Subform and Summary2 (since behind featureFlag), are available in one of the visible lists */ + /** Test that all components, except Custom, Payment, Subform and Summary2 (since behind featureFlag), are available in one of the visible lists */ it.each( Object.values(ComponentType).filter( (componentType) => !excludedComponents.includes(componentType), diff --git a/frontend/packages/ux-editor/src/data/formItemConfig.ts b/frontend/packages/ux-editor/src/data/formItemConfig.ts index 698cb06b6d4..aefe758565a 100644 --- a/frontend/packages/ux-editor/src/data/formItemConfig.ts +++ b/frontend/packages/ux-editor/src/data/formItemConfig.ts @@ -504,7 +504,6 @@ export const advancedItems: FormItemConfigs[ComponentType][] = [ formItemConfigs[ComponentType.Accordion], formItemConfigs[ComponentType.AccordionGroup], formItemConfigs[ComponentType.List], - formItemConfigs[ComponentType.Custom], formItemConfigs[ComponentType.RepeatingGroup], formItemConfigs[ComponentType.PaymentDetails], shouldDisplayFeature(FeatureFlag.Subform) && formItemConfigs[ComponentType.Subform],