Show info message instead of config for containers that are not group (…

…#12236) * Show info message instead of config for containers that are not group * Add code to ux-editor-v3 * Add tests --------- Co-authored-by: Andrea Standeren <andreastanderen@Andrea-sin-MacBook-Pro.local>
Altinn · Feb 2, 2024 · 008fd97 · 008fd97
1 parent c2113ca
commit 008fd97
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 48 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1474,6 +1474,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
@@ -16,27 +16,23 @@ export const Content = () => {
   if (editId) return <TextResourceEdit />;
   if (!formId || !form) return t('right_menu.content_empty');
 
-  return (
-    <>
-      {isContainer(form) ? (
-        <EditFormContainer
-          editFormId={formId}
-          container={form}
-          handleContainerUpdate={async (updatedContainer) => {
-            handleUpdate(updatedContainer);
-            debounceSave(formId, updatedContainer);
-          }}
-        />
-      ) : (
-        <EditFormComponent
-          editFormId={formId}
-          component={form}
-          handleComponentUpdate={async (updatedComponent) => {
-            handleUpdate(updatedComponent);
-            debounceSave(formId, updatedComponent);
-          }}
-        />
-      )}
-    </>
+  return isContainer(form) ? (
+    <EditFormContainer
+      editFormId={formId}
+      container={form}
+      handleContainerUpdate={async (updatedContainer) => {
+        handleUpdate(updatedContainer);
+        debounceSave(formId, updatedContainer);
+      }}
+    />
+  ) : (
+    <EditFormComponent
+      editFormId={formId}
+      component={form}
+      handleComponentUpdate={async (updatedComponent) => {
+        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
@@ -15,13 +15,37 @@ 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();
 
 // Test data:
 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
@@ -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 ? (
     <LegacyFieldSet className={classes.fieldset}>
       <FormField
         id={container.id}
@@ -237,5 +245,9 @@ export const EditFormContainer = ({
         </>
       )}
     </LegacyFieldSet>
+  ) : (
+    <Alert severity='info'>
+      <Paragraph size='small'>{t('ux_editor.container_not_editable_info')}</Paragraph>
+    </Alert>
   );
 };
diff --git 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 <TextResourceEdit />;
   if (!formId || !form) return t('right_menu.content_empty');
 
-  return (
-    <>
-      {isContainer(form) ? (
-        <EditFormContainer
-          editFormId={formId}
-          container={form}
-          handleContainerUpdate={async (updatedContainer) => {
-            handleUpdate(updatedContainer);
-            debounceSave(formId, updatedContainer);
-          }}
-        />
-      ) : (
-        <EditFormComponent
-          editFormId={formId}
-          component={form}
-          handleComponentUpdate={async (updatedComponent) => {
-            handleUpdate(updatedComponent);
-            debounceSave(formId, updatedComponent);
-          }}
-        />
-      )}
-    </>
+  return isContainer(form) ? (
+    <EditFormContainer
+      editFormId={formId}
+      container={form}
+      handleContainerUpdate={async (updatedContainer) => {
+        handleUpdate(updatedContainer);
+        debounceSave(formId, updatedContainer);
+      }}
+    />
+  ) : (
+    <EditFormComponent
+      editFormId={formId}
+      component={form}
+      handleComponentUpdate={async (updatedComponent) => {
+        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
@@ -15,13 +15,37 @@ 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();
 
 // Test data:
 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
@@ -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 ? (
     <LegacyFieldSet className={classes.fieldset}>
       <FormField
         id={container.id}
@@ -237,5 +245,9 @@ export const EditFormContainer = ({
         </>
       )}
     </LegacyFieldSet>
+  ) : (
+    <Alert severity='info'>
+      <Paragraph size='small'>{t('ux_editor.container_not_editable_info')}</Paragraph>
+    </Alert>
   );
 };