Split ComponentSpecificContent in smaller parts

frontend/packages/ux-editor/src/components/config/EditModalContent.module.css

@@ -1,3 +1,7 @@
+.root {
+  --fieldset-gap: 24px;
+}
+
 .gridItem {
   margin-top: 18px;
 }
@@ -18,5 +22,5 @@
 .fieldset > div {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: var(--fieldset-gap);
 }

frontend/packages/ux-editor/src/components/config/EditModalContent.test.tsx

@@ -9,6 +9,9 @@ import { appDataMock, appStateMock } from '../../testing/mocks';
 
 const user = userEvent.setup();
 
+// Test data:
+const srcValueLabel = 'Source';
+
 describe('EditModalContent', () => {
   it('should return input specific content when type input', () => {
     const { rendered } = render({
@@ -98,9 +101,7 @@ describe('EditModalContent', () => {
       },
     });
 
-    expect(
-      screen.getByLabelText('ux_editor.modal_properties_image_src_value_label')
-    ).toBeInTheDocument();
+    expect(screen.getByLabelText(srcValueLabel)).toBeInTheDocument();
   });
 
   it('should not render Image component when component type is not Image', () => {
@@ -110,28 +111,22 @@ describe('EditModalContent', () => {
       },
     });
 
-    expect(
-      screen.queryByLabelText('ux_editor.modal_properties_image_src_value_label')
-    ).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(srcValueLabel)).not.toBeInTheDocument();
   });
 });
 
 const render = ({ componentProps = undefined, handleComponentUpdate = jest.fn } = {}) => {
   const createStore = configureStore();
   const mockLanguage = {
-    general: {
-      label: '',
-      value: '',
-    },
-    ux_editor: {
-      modal_header_type_h2: 'H2',
-      modal_header_type_h3: 'H3',
-      modal_header_type_h4: 'H4',
-      modal_properties_image_src_value_label: 'Source',
-      modal_properties_image_placement_label: 'Placement',
-      modal_properties_image_alt_text_label: 'Alt text',
-      modal_properties_image_width_label: 'Width',
-    },
+    'general.label': '',
+    'general.value': '',
+    'ux_editor.modal_header_type_h2': 'H2',
+    'ux_editor.modal_header_type_h3': 'H3',
+    'ux_editor.modal_header_type_h4': 'H4',
+    'ux_editor.modal_properties_image_src_value_label': srcValueLabel,
+    'ux_editor.modal_properties_image_placement_label': 'Placement',
+    'ux_editor.modal_properties_image_alt_text_label': 'Alt text',
+    'ux_editor.modal_properties_image_width_label': 'Width',
   };
   const initialState: IAppState = {
     ...appStateMock,

frontend/packages/ux-editor/src/components/config/EditModalContent.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import type { EditSettings, IGenericEditComponent } from './componentConfig';
 import { ComponentTypes } from '../index';
-import type { FormComponentType, IAppState, IThirdPartyComponent } from '../../types/global';
+import type { FormComponentType, IThirdPartyComponent } from '../../types/global';
 import { EditComponentId } from './editModal/EditComponentId';
 import { componentSpecificEditConfig, configComponents } from './componentConfig';
 import { ComponentSpecificContent } from './componentSpecificContent';
 import { FieldSet } from '@altinn/altinn-design-system';
 import classes from './EditModalContent.module.css';
-import { DEFAULT_LANGUAGE } from 'app-shared/constants';
-import { textResourcesByLanguageSelector } from '../../selectors/textResourceSelectors';
 
 export interface IEditModalContentProps {
   cancelEdit?: () => void;
@@ -24,8 +21,6 @@ export const EditModalContent = ({
   handleComponentUpdate,
   thirdPartyComponentConfig,
 }: IEditModalContentProps) => {
-  const language = useSelector((state: IAppState) => state.appData.languageState.language);
-  const textResources = useSelector(textResourcesByLanguageSelector(DEFAULT_LANGUAGE));
   const renderFromComponentSpecificDefinition = (configDef: EditSettings[]) => {
     if (!configDef) return null;
 
@@ -36,8 +31,6 @@ export const EditModalContent = ({
         key: configType,
         handleComponentChange: handleComponentUpdate,
         component,
-        language,
-        textResources,
       });
     });
   };
@@ -51,7 +44,7 @@ export const EditModalContent = ({
   };
 
   return (
-    <FieldSet className={classes.fieldset}>
+    <FieldSet className={classes.root}>
       <EditComponentId
         component={component}
         handleComponentUpdate={handleComponentUpdate}
@@ -60,8 +53,6 @@ export const EditModalContent = ({
       <ComponentSpecificContent
         component={component}
         handleComponentChange={handleComponentUpdate}
-        language={language}
-        textResources={textResources}
       />
     </FieldSet>
   );

frontend/packages/ux-editor/src/components/config/componentConfig.ts

@@ -1,4 +1,4 @@
-import type { FormComponentType, ITextResource } from '../../types/global';
+import type { FormComponentType } from '../../types/global';
 import { ComponentTypes } from '../index';
 import { EditCodeList } from './editModal/EditCodeList';
 import { EditDataModelBindings } from './editModal/EditDataModelBindings';
@@ -13,8 +13,6 @@ import { EditTitle } from './editModal/EditTitle';
 export interface IGenericEditComponent {
   component: FormComponentType;
   handleComponentChange: (component: FormComponentType) => void;
-  language: any;
-  textResources?: ITextResource[];
 }
 
 export enum EditSettings {

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.module.css

@@ -0,0 +1,5 @@
+.root > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fieldset-gap);
+}

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IGenericEditComponent } from '../../componentConfig';
+import { IFormAddressComponent } from '../../../../types/global';
+import { renderWithMockStore } from '../../../../testing/mocks';
+import { AddressComponent } from './AddressComponent';
+
+// Test data:
+const component: IFormAddressComponent = {
+  dataModelBindings: {
+    test: 'test'
+  },
+  id: '1',
+  simplified: false,
+};
+const handleComponentChange = jest.fn();
+const defaultProps: IGenericEditComponent = {
+  component,
+  handleComponentChange,
+};
+
+describe('AddressComponent', () => {
+  it('Renders without errors', () => {
+    render();
+  });
+});
+
+const render = (props?: Partial<IGenericEditComponent>) =>
+  renderWithMockStore()(<AddressComponent {...defaultProps} {...props} />);
+

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/AddressComponent.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Checkbox, FieldSet } from '@altinn/altinn-design-system';
+import classes from './AddressComponent.module.css';
+import { useText } from '../../../../hooks';
+import { IGenericEditComponent } from '../../componentConfig';
+import { IFormAddressComponent } from '../../../../types/global';
+import { AddressKeys, getTextResourceByAddressKey } from '../../../../utils/component';
+import { EditDataModelBindings } from '../../editModal/EditDataModelBindings';
+
+export const AddressComponent = ({
+  component,
+  handleComponentChange,
+}: IGenericEditComponent) => {
+  const t = useText();
+
+  const handleToggleAddressSimple = (isChecked: boolean) => {
+    handleComponentChange({
+      ...component,
+      simplified: isChecked,
+    });
+  };
+
+  return (
+    <FieldSet className={classes.root}>
+      <div>
+        <Checkbox
+          checked={(component as IFormAddressComponent).simplified}
+          label={t('ux_editor.modal_configure_address_component_simplified')}
+          onChange={(e) => handleToggleAddressSimple(e.target.checked)}
+        />
+      </div>
+      {Object.keys(AddressKeys).map((value: AddressKeys, index) => {
+        const simple: boolean = (component as IFormAddressComponent).simplified;
+        if (simple && (value === AddressKeys.careOf || value === AddressKeys.houseNumber)) {
+          return null;
+        }
+        return (
+          <EditDataModelBindings
+            component={component}
+            handleComponentChange={handleComponentChange}
+            key={value}
+            renderOptions={{
+              label: getTextResourceByAddressKey(value, t),
+              returnValue: value,
+              key: value,
+              uniqueKey: index,
+            }}
+          />
+        );
+      })}
+    </FieldSet>
+  );
+}

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Address/index.ts

@@ -0,0 +1 @@
+export { AddressComponent } from './AddressComponent';

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Button/ButtonComponent.module.css

@@ -0,0 +1,5 @@
+.root > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fieldset-gap);
+}

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Button/ButtonComponent.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { IGenericEditComponent } from '../../componentConfig';
+import { IFormButtonComponent } from '../../../../types/global';
+import { renderWithMockStore } from '../../../../testing/mocks';
+import { ButtonComponent } from './ButtonComponent';
+import { ComponentTypes } from '../../../';
+
+// Test data:
+const component: IFormButtonComponent = {
+  id: '1',
+  onClickAction: jest.fn(),
+  type: ComponentTypes.Button,
+};
+const handleComponentChange = jest.fn();
+const defaultProps: IGenericEditComponent = {
+  component,
+  handleComponentChange,
+};
+
+describe('ButtonComponent', () => {
+  it('Renders without errors', () => {
+    render();
+  });
+});
+
+const render = (props?: Partial<IGenericEditComponent>) =>
+  renderWithMockStore()(<ButtonComponent {...defaultProps} {...props} />);
+

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Button/ButtonComponent.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { FieldSet, Select } from '@altinn/altinn-design-system';
+import classes from '../../ButtonComponent.module.css';
+import { EditTitle } from '../../editModal/EditTitle';
+import { useText } from '../../../../hooks';
+import { IGenericEditComponent } from '../../componentConfig';
+import { ComponentTypes } from '../../../index';
+
+export const ButtonComponent = ({
+  component,
+  handleComponentChange,
+}: IGenericEditComponent) => {
+  const t = useText();
+
+  const handleButtonTypeChange = (selected: any) => {
+    const componentCopy = { ...component };
+    if (!componentCopy.textResourceBindings) {
+      componentCopy.textResourceBindings = {};
+    }
+    if (selected.value === 'NavigationButtons') {
+      componentCopy.type = 'NavigationButtons';
+      componentCopy.textResourceBindings.title = undefined;
+      (componentCopy as any).textResourceId = undefined;
+      componentCopy.customType = undefined;
+      (componentCopy as any).showBackButton = true;
+      componentCopy.textResourceBindings.next = 'next';
+      componentCopy.textResourceBindings.back = 'back';
+    } else if (selected.value === 'Button') {
+      componentCopy.type = 'Button';
+      componentCopy.textResourceBindings.next = undefined;
+      componentCopy.textResourceBindings.back = undefined;
+      (componentCopy as any).showPrev = undefined;
+      (componentCopy as any).showBackButton = undefined;
+      componentCopy.textResourceBindings.title = t('ux_editor.modal_properties_button_type_submit');
+    }
+    handleComponentChange(componentCopy);
+  };
+
+  const types = [
+    {
+      value: ComponentTypes.Button,
+      label: t('ux_editor.modal_properties_button_type_submit'),
+    },
+    {
+      value: ComponentTypes.NavigationButtons,
+      label: t('ux_editor.modal_properties_button_type_navigation'),
+    },
+  ];
+
+  return (
+    <FieldSet className={classes.root}>
+      <div>
+        <Select
+          label={t('ux_editor.modal_properties_button_type_helper')}
+          options={types}
+          value={types.find((element) => element.value === component.type).value}
+          onChange={handleButtonTypeChange}
+        />
+      </div>
+      {component.type === ComponentTypes.Button && (
+        <EditTitle
+          component={component}
+          handleComponentChange={handleComponentChange}
+        />
+      )}
+    </FieldSet>
+  );
+}

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Button/index.ts

@@ -0,0 +1 @@
+export { ButtonComponent } from './ButtonComponent';