diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 81f83324557..a506c76a406 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -1473,6 +1473,7 @@ "ux_editor.component_unknown": "Ukjent komponent", "ux_editor.conditional_rendering_connection_header": "Betingede renderingstilkoblinger", "ux_editor.container_empty": "Tomt, dra noe inn her...", + "ux_editor.container_not_editable_info": "Noen egenskaper for denne komponenten er ikke redigerbare for øyeblikket. Du kan legge til underkomponenter i kolonnen til venstre.", "ux_editor.edit_component.show_beta_func": "Vis ny konfigurasjon (BETA)", "ux_editor.edit_component.show_beta_func_help_text": "Vi jobber med å få på plass støtte for å redigere alle innstillinger. Ved å huke av her kan du ta i bruk den nye konfigurasjonsvisningen, som støtter flere innstillinger. Merk at denne visningen fortsatt er under utvikling, og vil kunne oppleves som noe ustabil.", "ux_editor.edit_component.unknown_component": "Komponenten {{componentName}} gjenkjennes ikke av Studio og kan derfor ikke konfigureres.", diff --git a/frontend/packages/ux-editor-v3/src/components/Properties/Content.tsx b/frontend/packages/ux-editor-v3/src/components/Properties/Content.tsx index 32744d080dd..8a287f5baab 100644 --- a/frontend/packages/ux-editor-v3/src/components/Properties/Content.tsx +++ b/frontend/packages/ux-editor-v3/src/components/Properties/Content.tsx @@ -16,27 +16,23 @@ export const Content = () => { if (editId) return ; if (!formId || !form) return t('right_menu.content_empty'); - return ( - <> - {isContainer(form) ? ( - { - handleUpdate(updatedContainer); - debounceSave(formId, updatedContainer); - }} - /> - ) : ( - { - handleUpdate(updatedComponent); - debounceSave(formId, updatedComponent); - }} - /> - )} - + return isContainer(form) ? ( + { + handleUpdate(updatedContainer); + debounceSave(formId, updatedContainer); + }} + /> + ) : ( + { + handleUpdate(updatedComponent); + debounceSave(formId, updatedComponent); + }} + /> ); }; diff --git a/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.test.tsx b/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.test.tsx index bd3e60c48ff..4bfebc16946 100644 --- a/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.test.tsx +++ b/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.test.tsx @@ -15,6 +15,8 @@ import { container1IdMock, externalLayoutsMock, layoutMock } from '../../testing import { textMock } from '../../../../../testing/mocks/i18nMock'; import type { FormLayoutsResponse } from 'app-shared/types/api'; import type { ILayoutSettings } from 'app-shared/types/global'; +import type { FormContainer } from '../../types/FormContainer'; +import { ComponentType } from 'app-shared/types/ComponentType'; const user = userEvent.setup(); @@ -22,6 +24,28 @@ const user = userEvent.setup(); const org = 'org'; const app = 'app'; const selectedLayoutSet = 'test-layout-set'; +const accordionContainer: FormContainer = { + id: 'accordionContainerId', + itemType: 'CONTAINER', + type: ComponentType.Accordion, + pageIndex: 1, + propertyPath: 'definitions/accordionComponent', +}; +const accordionGroupContainer: FormContainer = { + id: 'accordionGroupContainerId', + itemType: 'CONTAINER', + type: ComponentType.AccordionGroup, + pageIndex: 1, + propertyPath: 'definitions/accordionGroupComponent', +}; +const buttonGroupContainer: FormContainer = { + id: 'buttonGroupContainerId', + itemType: 'CONTAINER', + type: ComponentType.ButtonGroup, + pageIndex: 1, + propertyPath: 'definitions/buttonGroupComponent', +}; +const nonEditableContainers = [accordionContainer, accordionGroupContainer, buttonGroupContainer]; const handleContainerUpdateMock = jest.fn(); @@ -36,6 +60,16 @@ describe('EditFormContainer', () => { ).toBeInTheDocument(); }); + it.each(nonEditableContainers)( + 'should show info message when container is not group', + async (container) => { + await render({ container }); + expect( + screen.getByText(textMock('ux_editor.container_not_editable_info')), + ).toBeInTheDocument(); + }, + ); + it('should update form when editing field', async () => { await render(); diff --git a/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.tsx b/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.tsx index f10263eb81c..2b87df6ecdb 100644 --- a/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.tsx +++ b/frontend/packages/ux-editor-v3/src/components/config/EditFormContainer.tsx @@ -5,7 +5,14 @@ import { EditGroupDataModelBindings } from './group/EditGroupDataModelBindings'; import { getTextResource } from '../../utils/language'; import { idExists } from '../../utils/formLayoutUtils'; import type { DatamodelFieldElement } from 'app-shared/types/DatamodelFieldElement'; -import { Switch, Checkbox, LegacyFieldSet, LegacyTextField } from '@digdir/design-system-react'; +import { + Alert, + Switch, + Checkbox, + LegacyFieldSet, + LegacyTextField, + Paragraph, +} from '@digdir/design-system-react'; import classes from './EditFormContainer.module.css'; import { TextResource } from '../TextResource'; import { useDatamodelMetadataQuery } from '../../hooks/queries/useDatamodelMetadataQuery'; @@ -20,6 +27,7 @@ import { FormField } from '../FormField'; import type { FormContainer } from '../../types/FormContainer'; import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; import { useAppContext } from '../../hooks/useAppContext'; +import { ComponentType } from 'app-shared/types/ComponentType'; export interface IEditFormContainerProps { editFormId: string; @@ -130,7 +138,7 @@ export const EditFormContainer = ({ }); }; - return ( + return container.type === ComponentType.Group ? ( )} + ) : ( + + {t('ux_editor.container_not_editable_info')} + ); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/Content.tsx b/frontend/packages/ux-editor/src/components/Properties/Content.tsx index 32744d080dd..8a287f5baab 100644 --- a/frontend/packages/ux-editor/src/components/Properties/Content.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/Content.tsx @@ -16,27 +16,23 @@ export const Content = () => { if (editId) return ; if (!formId || !form) return t('right_menu.content_empty'); - return ( - <> - {isContainer(form) ? ( - { - handleUpdate(updatedContainer); - debounceSave(formId, updatedContainer); - }} - /> - ) : ( - { - handleUpdate(updatedComponent); - debounceSave(formId, updatedComponent); - }} - /> - )} - + return isContainer(form) ? ( + { + handleUpdate(updatedContainer); + debounceSave(formId, updatedContainer); + }} + /> + ) : ( + { + handleUpdate(updatedComponent); + debounceSave(formId, updatedComponent); + }} + /> ); }; diff --git a/frontend/packages/ux-editor/src/components/config/EditFormContainer.test.tsx b/frontend/packages/ux-editor/src/components/config/EditFormContainer.test.tsx index bd3e60c48ff..4bfebc16946 100644 --- a/frontend/packages/ux-editor/src/components/config/EditFormContainer.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/EditFormContainer.test.tsx @@ -15,6 +15,8 @@ import { container1IdMock, externalLayoutsMock, layoutMock } from '../../testing import { textMock } from '../../../../../testing/mocks/i18nMock'; import type { FormLayoutsResponse } from 'app-shared/types/api'; import type { ILayoutSettings } from 'app-shared/types/global'; +import type { FormContainer } from '../../types/FormContainer'; +import { ComponentType } from 'app-shared/types/ComponentType'; const user = userEvent.setup(); @@ -22,6 +24,28 @@ const user = userEvent.setup(); const org = 'org'; const app = 'app'; const selectedLayoutSet = 'test-layout-set'; +const accordionContainer: FormContainer = { + id: 'accordionContainerId', + itemType: 'CONTAINER', + type: ComponentType.Accordion, + pageIndex: 1, + propertyPath: 'definitions/accordionComponent', +}; +const accordionGroupContainer: FormContainer = { + id: 'accordionGroupContainerId', + itemType: 'CONTAINER', + type: ComponentType.AccordionGroup, + pageIndex: 1, + propertyPath: 'definitions/accordionGroupComponent', +}; +const buttonGroupContainer: FormContainer = { + id: 'buttonGroupContainerId', + itemType: 'CONTAINER', + type: ComponentType.ButtonGroup, + pageIndex: 1, + propertyPath: 'definitions/buttonGroupComponent', +}; +const nonEditableContainers = [accordionContainer, accordionGroupContainer, buttonGroupContainer]; const handleContainerUpdateMock = jest.fn(); @@ -36,6 +60,16 @@ describe('EditFormContainer', () => { ).toBeInTheDocument(); }); + it.each(nonEditableContainers)( + 'should show info message when container is not group', + async (container) => { + await render({ container }); + expect( + screen.getByText(textMock('ux_editor.container_not_editable_info')), + ).toBeInTheDocument(); + }, + ); + it('should update form when editing field', async () => { await render(); diff --git a/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx b/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx index f10263eb81c..2b87df6ecdb 100644 --- a/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx +++ b/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx @@ -5,7 +5,14 @@ import { EditGroupDataModelBindings } from './group/EditGroupDataModelBindings'; import { getTextResource } from '../../utils/language'; import { idExists } from '../../utils/formLayoutUtils'; import type { DatamodelFieldElement } from 'app-shared/types/DatamodelFieldElement'; -import { Switch, Checkbox, LegacyFieldSet, LegacyTextField } from '@digdir/design-system-react'; +import { + Alert, + Switch, + Checkbox, + LegacyFieldSet, + LegacyTextField, + Paragraph, +} from '@digdir/design-system-react'; import classes from './EditFormContainer.module.css'; import { TextResource } from '../TextResource'; import { useDatamodelMetadataQuery } from '../../hooks/queries/useDatamodelMetadataQuery'; @@ -20,6 +27,7 @@ import { FormField } from '../FormField'; import type { FormContainer } from '../../types/FormContainer'; import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; import { useAppContext } from '../../hooks/useAppContext'; +import { ComponentType } from 'app-shared/types/ComponentType'; export interface IEditFormContainerProps { editFormId: string; @@ -130,7 +138,7 @@ export const EditFormContainer = ({ }); }; - return ( + return container.type === ComponentType.Group ? ( )} + ) : ( + + {t('ux_editor.container_not_editable_info')} + ); };