Refactoring layout/node type mapping (#1202)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.gitignore

@@ -392,3 +392,6 @@ src/Altinn.Apps/AppTemplates/AspNet/App/Properties/launchSettings.json
 # Cypress environment settings
 /cypress.env.json
 /.env
+
+# Auto-generated files (run 'yarn gen')
+/src/layout/components.ts

cypress.config.js

@@ -28,8 +28,8 @@ Valid environments are:
   videosFolder: 'test/videos',
   viewportHeight: 768,
   viewportWidth: 1536,
-  requestTimeout: 10000,
-  defaultCommandTimeout: 8000,
+  requestTimeout: 20000,
+  defaultCommandTimeout: 20000,
   reporter: 'junit',
   reporterOptions: {
     mochaFile: 'test/reports/result-[hash].xml',

package.json

@@ -7,19 +7,20 @@
   "exports": "./src/index.tsx",
   "scripts": {
     "postinstall": "husky install",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.development.js --mode development --progress",
-    "start:silent": "cross-env NOTIFY_ON_ERRORS=false yarn start",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js --progress",
-    "docker": "cross-env NODE_ENV=development webpack --config webpack.config.development.js --progress && http-server dist -p 8080 --cors",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:watchall": "jest --watchAll",
-    "tsc": "tsc && tsc --project test/tsconfig.json",
-    "tsc:watch": "tsc --watch",
-    "tsc:watch:cypress": "tsc --watch --project test/tsconfig.json",
-    "lint": "eslint .",
+    "gen": "node src/layout/components.gen.mjs",
+    "start": "yarn gen && cross-env NODE_ENV=development webpack-dev-server --config webpack.config.development.js --mode development --progress",
+    "start:silent": "yarn gen && cross-env NOTIFY_ON_ERRORS=false yarn start",
+    "build": "yarn gen && cross-env NODE_ENV=production webpack --config webpack.config.production.js --progress",
+    "docker": "yarn gen && cross-env NODE_ENV=development webpack --config webpack.config.development.js --progress && http-server dist -p 8080 --cors",
+    "test": "yarn gen && jest",
+    "test:watch": "yarn gen && jest --watch",
+    "test:watchall": "yarn gen && jest --watchAll",
+    "tsc": "yarn gen && tsc && tsc --project test/tsconfig.json",
+    "tsc:watch": "yarn gen && tsc --watch",
+    "tsc:watch:cypress": "yarn gen && tsc --watch --project test/tsconfig.json",
+    "lint": "yarn gen && eslint .",
     "clean": "rimraf dist",
-    "webpack-watch": "cross-env NODE_ENV=development webpack --mode=development --config webpack.config.development.js --watch --progress",
+    "webpack-watch": "yarn gen && cross-env NODE_ENV=development webpack --mode=development --config webpack.config.development.js --watch --progress",
     "cy:open": "cypress open",
     "cy:verify": "cypress verify",
     "cy:version": "cypress -v",

src/__mocks__/formLayoutStateMock.ts

@@ -24,7 +24,6 @@ export function getFormLayoutStateMock(customStates?: Partial<ILayoutState>): IL
           },
           readOnly: false,
           required: false,
-          disabled: false,
         },
         {
           id: 'field1',
@@ -37,7 +36,6 @@ export function getFormLayoutStateMock(customStates?: Partial<ILayoutState>): IL
           },
           readOnly: false,
           required: false,
-          disabled: false,
         },
         {
           id: 'field2',
@@ -50,7 +48,6 @@ export function getFormLayoutStateMock(customStates?: Partial<ILayoutState>): IL
           },
           readOnly: false,
           required: false,
-          disabled: false,
         },
         {
           id: 'field3',
@@ -63,7 +60,6 @@ export function getFormLayoutStateMock(customStates?: Partial<ILayoutState>): IL
           },
           readOnly: false,
           required: false,
-          disabled: false,
         },
       ],
     },

src/components/form/Form.test.tsx

@@ -25,7 +25,6 @@ describe('Form', () => {
       },
       readOnly: false,
       required: true,
-      disabled: false,
     },
     {
       id: 'field2',
@@ -38,7 +37,6 @@ describe('Form', () => {
       },
       readOnly: false,
       required: false,
-      disabled: false,
     },
     {
       id: 'field3',
@@ -51,7 +49,6 @@ describe('Form', () => {
       },
       readOnly: false,
       required: false,
-      disabled: false,
     },
     {
       id: 'testGroupId',
@@ -93,7 +90,6 @@ describe('Form', () => {
         },
         readOnly: false,
         required: false,
-        disabled: false,
       },
     ];
 
@@ -128,7 +124,6 @@ describe('Form', () => {
         },
         readOnly: false,
         required: false,
-        disabled: false,
       },
     ];
 

src/features/layout/fetch/fetchFormLayoutSagas.ts

@@ -5,7 +5,7 @@ import { preProcessItem, preProcessLayout } from 'src/features/expressions/valid
 import { FormDataActions } from 'src/features/formData/formDataSlice';
 import { FormLayoutActions } from 'src/features/layout/formLayoutSlice';
 import { QueueActions } from 'src/features/queue/queueSlice';
-import { components } from 'src/layout';
+import { ComponentConfigs } from 'src/layout/components';
 import { getLayoutSetIdForApplication } from 'src/utils/appMetadata';
 import { httpGet } from 'src/utils/network/networking';
 import { getLayoutSetsUrl, getLayoutSettingsUrl, getLayoutsUrl } from 'src/utils/urls/appUrlHelper';
@@ -23,12 +23,8 @@ type ComponentTypeCaseMapping = { [key: string]: ComponentTypes };
 let componentTypeCaseMapping: ComponentTypeCaseMapping | undefined = undefined;
 function getCaseMapping(): ComponentTypeCaseMapping {
   if (!componentTypeCaseMapping) {
-    componentTypeCaseMapping = {
-      group: 'Group',
-      summary: 'Summary',
-    };
-
-    for (const type in components) {
+    componentTypeCaseMapping = {};
+    for (const type in ComponentConfigs) {
       componentTypeCaseMapping[type.toLowerCase()] = type as ComponentTypes;
     }
   }

src/layout/ActionButton/index.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import { ActionButtonComponent } from 'src/layout/ActionButton/ActionButtonComponent';
 import { ActionComponent } from 'src/layout/LayoutComponent';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompActionButton } from 'src/layout/ActionButton/types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class ActionButton extends ActionComponent<'ActionButton'> {
   render(props: PropsFromGenericComponent<'ActionButton'>): JSX.Element | null {
@@ -17,3 +20,13 @@ export class ActionButton extends ActionComponent<'ActionButton'> {
     return false;
   }
 }
+
+export const Config = {
+  def: new ActionButton(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompActionButton;
+  nodeItem: ExprResolved<ILayoutCompActionButton>;
+  nodeObj: LayoutNode;
+};

src/layout/Address/index.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 import { AddressComponent } from 'src/layout/Address/AddressComponent';
 import { FormComponent } from 'src/layout/LayoutComponent';
 import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompAddress } from 'src/layout/Address/types';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
 import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class Address extends FormComponent<'AddressComponent'> {
   render(props: PropsFromGenericComponent<'AddressComponent'>): JSX.Element | null {
@@ -30,3 +33,13 @@ export class Address extends FormComponent<'AddressComponent'> {
     return false;
   }
 }
+
+export const Config = {
+  def: new Address(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompAddress;
+  nodeItem: ExprResolved<ILayoutCompAddress>;
+  nodeObj: LayoutNode;
+};

src/layout/AttachmentList/index.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import { AttachmentListComponent } from 'src/layout/AttachmentList/AttachmentListComponent';
 import { PresentationComponent } from 'src/layout/LayoutComponent';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompAttachmentList } from 'src/layout/AttachmentList/types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class AttachmentList extends PresentationComponent<'AttachmentList'> {
   render(props: PropsFromGenericComponent<'AttachmentList'>): JSX.Element | null {
@@ -17,3 +20,13 @@ export class AttachmentList extends PresentationComponent<'AttachmentList'> {
     return false;
   }
 }
+
+export const Config = {
+  def: new AttachmentList(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompAttachmentList;
+  nodeItem: ExprResolved<ILayoutCompAttachmentList>;
+  nodeObj: LayoutNode;
+};

src/layout/Button/ButtonComponent.test.tsx

@@ -29,7 +29,6 @@ const render = (submittingId: string) => {
     renderer: (props) => <ButtonComponent {...props} />,
     component: {
       id: 'some-id',
-      disabled: false,
     },
     genericProps: {
       text: submitBtnText,

src/layout/Button/index.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 import { ButtonComponent } from 'src/layout/Button/ButtonComponent';
 import { ActionComponent } from 'src/layout/LayoutComponent';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompButton } from 'src/layout/Button/types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class Button extends ActionComponent<'Button'> {
   render(props: PropsFromGenericComponent<'Button'>): JSX.Element | null {
@@ -17,3 +20,13 @@ export class Button extends ActionComponent<'Button'> {
     return false;
   }
 }
+
+export const Config = {
+  def: new Button(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompButton;
+  nodeItem: ExprResolved<ILayoutCompButton>;
+  nodeObj: LayoutNode;
+};

src/layout/ButtonGroup/index.tsx

@@ -5,8 +5,10 @@ import type { PropsFromGenericComponent } from '..';
 import { ButtonGroupComponent } from 'src/layout/ButtonGroup/ButtonGroupComponent';
 import { ButtonGroupHierarchyGenerator } from 'src/layout/ButtonGroup/hierarchy';
 import { ContainerComponent } from 'src/layout/LayoutComponent';
+import type { ILayoutCompButtonGroup, ILayoutCompButtonGroupInHierarchy } from 'src/layout/ButtonGroup/types';
 import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';
 import type { ComponentHierarchyGenerator } from 'src/utils/layout/HierarchyGenerator';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class ButtonGroup extends ContainerComponent<'ButtonGroup'> {
   private _hierarchyGenerator = new ButtonGroupHierarchyGenerator();
@@ -31,3 +33,13 @@ export class ButtonGroup extends ContainerComponent<'ButtonGroup'> {
     return false;
   }
 }
+
+export const Config = {
+  def: new ButtonGroup(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompButtonGroup;
+  nodeItem: ILayoutCompButtonGroupInHierarchy;
+  nodeObj: LayoutNode;
+};

src/layout/Checkboxes/index.tsx

@@ -5,9 +5,12 @@ import { useCommaSeparatedOptionsToText } from 'src/hooks/useCommaSeparatedOptio
 import { CheckboxContainerComponent } from 'src/layout/Checkboxes/CheckboxesContainerComponent';
 import { MultipleChoiceSummary } from 'src/layout/Checkboxes/MultipleChoiceSummary';
 import { FormComponent } from 'src/layout/LayoutComponent';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompCheckboxes } from 'src/layout/Checkboxes/types';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
 import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class Checkboxes extends FormComponent<'Checkboxes'> {
   render(props: PropsFromGenericComponent<'Checkboxes'>): JSX.Element | null {
@@ -35,3 +38,13 @@ export class Checkboxes extends FormComponent<'Checkboxes'> {
     return <MultipleChoiceSummary formData={formData} />;
   }
 }
+
+export const Config = {
+  def: new Checkboxes(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompCheckboxes;
+  nodeItem: ExprResolved<ILayoutCompCheckboxes>;
+  nodeObj: LayoutNode;
+};

src/layout/Custom/index.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 import { CustomWebComponent } from 'src/layout/Custom/CustomWebComponent';
 import { FormComponent } from 'src/layout/LayoutComponent';
 import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompCustom } from 'src/layout/Custom/types';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
 import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class Custom extends FormComponent<'Custom'> {
   render(props: PropsFromGenericComponent<'Custom'>): JSX.Element | null {
@@ -26,3 +29,13 @@ export class Custom extends FormComponent<'Custom'> {
     return <SummaryItemSimple formDataAsString={displayData} />;
   }
 }
+
+export const Config = {
+  def: new Custom(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompCustom;
+  nodeItem: ExprResolved<ILayoutCompCustom>;
+  nodeObj: LayoutNode;
+};

src/layout/Datepicker/index.tsx

@@ -7,9 +7,12 @@ import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
 import { appLanguageStateSelector } from 'src/selectors/appLanguageStateSelector';
 import { getDateFormat } from 'src/utils/dateHelpers';
 import { formatISOString } from 'src/utils/formatDate';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompDatepicker } from 'src/layout/Datepicker/types';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
 import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class Datepicker extends FormComponent<'Datepicker'> {
   render(props: PropsFromGenericComponent<'Datepicker'>): JSX.Element | null {
@@ -33,3 +36,13 @@ export class Datepicker extends FormComponent<'Datepicker'> {
     return <SummaryItemSimple formDataAsString={displayData} />;
   }
 }
+
+export const Config = {
+  def: new Datepicker(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompDatepicker;
+  nodeItem: ExprResolved<ILayoutCompDatepicker>;
+  nodeObj: LayoutNode;
+};

src/layout/Dropdown/index.tsx

@@ -5,9 +5,12 @@ import { useSelectedValueToText } from 'src/hooks/useSelectedValueToText';
 import { DropdownComponent } from 'src/layout/Dropdown/DropdownComponent';
 import { FormComponent } from 'src/layout/LayoutComponent';
 import { SummaryItemSimple } from 'src/layout/Summary/SummaryItemSimple';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type { PropsFromGenericComponent } from 'src/layout';
+import type { ILayoutCompDropdown } from 'src/layout/Dropdown/types';
 import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
 import type { LayoutNodeFromType } from 'src/utils/layout/hierarchy.types';
+import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 export class Dropdown extends FormComponent<'Dropdown'> {
   render(props: PropsFromGenericComponent<'Dropdown'>): JSX.Element | null {
@@ -29,3 +32,13 @@ export class Dropdown extends FormComponent<'Dropdown'> {
     return <SummaryItemSimple formDataAsString={displayData} />;
   }
 }
+
+export const Config = {
+  def: new Dropdown(),
+};
+
+export type TypeConfig = {
+  layout: ILayoutCompDropdown;
+  nodeItem: ExprResolved<ILayoutCompDropdown>;
+  nodeObj: LayoutNode;
+};