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')}
+
);
};