Expressions

src/altinn-app-frontend/src/components/GenericComponent.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
 import components, { FormComponentContext } from 'src/components';
+import { useExpressionsForComponent } from 'src/features/expressions/useExpressions';
 import Description from 'src/features/form/components/Description';
 import Label from 'src/features/form/components/Label';
 import Legend from 'src/features/form/components/Legend';
@@ -29,11 +30,13 @@ import type {
   IFormComponentContext,
   PropsFromGenericComponent,
 } from 'src/components';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type {
   ComponentExceptGroup,
   ComponentTypes,
   IGridStyling,
   ILayoutCompBase,
+  ILayoutComponent,
 } from 'src/features/form/layout';
 import type { IComponentValidations, ILabelSettings } from 'src/types';
 
@@ -101,8 +104,14 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export function GenericComponent<Type extends ComponentExceptGroup>(
-  props: IActualGenericComponentProps<Type>,
+  _props: IActualGenericComponentProps<Type>,
 ) {
+  const props = useExpressionsForComponent(
+    _props as ILayoutComponent,
+  ) as ExprResolved<IActualGenericComponentProps<Type>> & {
+    type: Type;
+  };
+
   const { id, ...passThroughProps } = props;
   const dispatch = useAppDispatch();
   const classes = useStyles(props);

src/altinn-app-frontend/src/components/hooks/index.ts

@@ -2,14 +2,14 @@ import { useEffect, useState } from 'react';
 import { shallowEqual } from 'react-redux';
 
 import { useAppSelector } from 'src/common/hooks';
+import { buildInstanceContext } from 'src/utils/instanceContext';
 import {
   getOptionLookupKey,
   getRelevantFormDataForOptionSource,
   setupSourceOptions,
 } from 'src/utils/options';
 import type { IMapping, IOption, IOptionSource } from 'src/types';
 
-import { buildInstanceContext } from 'altinn-shared/utils/instanceContext';
 import type { IDataSources, IInstanceContext } from 'altinn-shared/types';
 
 interface IUseGetOptionsParams {

src/altinn-app-frontend/src/components/index.ts

@@ -26,6 +26,7 @@ import { TextAreaComponent } from 'src/components/base/TextAreaComponent';
 import CustomComponent from 'src/components/custom/CustomWebComponent';
 import { NavigationButtons as NavigationButtonsComponent } from 'src/components/presentation/NavigationButtons';
 import type { IGenericComponentProps } from 'src/components/GenericComponent';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type {
   ComponentExceptGroup,
   ComponentExceptGroupAndSummary,
@@ -84,7 +85,7 @@ export interface IComponentProps extends IGenericComponentProps {
 }
 
 export type PropsFromGenericComponent<T extends ComponentExceptGroup> =
-  IComponentProps & Omit<ILayoutComponent<T>, 'type'>;
+  IComponentProps & ExprResolved<Omit<ILayoutComponent<T>, 'type'>>;
 
 export interface IFormComponentContext {
   grid?: IGrid;

src/altinn-app-frontend/src/components/summary/SummaryComponent.tsx

@@ -7,6 +7,7 @@ import cn from 'classnames';
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
 import ErrorPaper from 'src/components/message/ErrorPaper';
 import SummaryComponentSwitch from 'src/components/summary/SummaryComponentSwitch';
+import { useExpressionsForComponent } from 'src/features/expressions/useExpressions';
 import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 import { makeGetHidden } from 'src/selectors/getLayoutData';
 import {
@@ -80,9 +81,11 @@ export function SummaryComponent({
   const attachments = useAppSelector(
     (state: IRuntimeState) => state.attachments.attachments,
   );
-  const formComponent = useAppSelector((state) => {
+  const _formComponent = useAppSelector((state) => {
     return state.formLayout.layouts[pageRef].find((c) => c.id === componentRef);
   });
+  const formComponent = useExpressionsForComponent(_formComponent);
+
   const goToCorrectPageLinkText = useAppSelector((state) => {
     return getTextFromAppOrDefault(
       'form_filler.summary_go_to_correct_page',

src/altinn-app-frontend/src/components/summary/SummaryComponentSwitch.tsx

@@ -7,6 +7,7 @@ import MultipleChoiceSummary from 'src/components/summary/MultipleChoiceSummary'
 import SingleInputSummary from 'src/components/summary/SingleInputSummary';
 import SummaryBoilerplate from 'src/components/summary/SummaryBoilerplate';
 import SummaryGroupComponent from 'src/components/summary/SummaryGroupComponent';
+import type { ExprResolved } from 'src/features/expressions/types';
 import type {
   ILayoutComponent,
   ILayoutCompSummary,
@@ -19,7 +20,7 @@ export interface ISummaryComponentSwitch
     onChangeClick: () => void;
     changeText: string;
   };
-  formComponent: ILayoutComponent | ILayoutGroup;
+  formComponent: ExprResolved<ILayoutComponent | ILayoutGroup>;
   hasValidationMessages?: boolean;
   label?: any;
   formData?: any;

src/altinn-app-frontend/src/features/expressions/index.ts

@@ -549,6 +549,7 @@ export const ExprDefaultsForGroup: ExprDefaultValues<ILayoutGroup> = {
     addButton: true,
     deleteButton: true,
     saveButton: true,
+    alertOnDelete: false,
     saveAndNextButton: false,
   },
 };

src/altinn-app-frontend/src/features/expressions/useExpressions.ts

@@ -8,6 +8,7 @@ import {
   ExprDefaultsForComponent,
   ExprDefaultsForGroup,
 } from 'src/features/expressions/index';
+import { getInstanceContextSelector } from 'src/utils/instanceContext';
 import { useLayoutsAsNodes } from 'src/utils/layout/useLayoutsAsNodes';
 import type { ContextDataSources } from 'src/features/expressions/ExprContext';
 import type { EvalExprInObjArgs } from 'src/features/expressions/index';
@@ -17,7 +18,7 @@ import type {
 } from 'src/features/expressions/types';
 import type { ILayoutComponentOrGroup } from 'src/features/form/layout';
 
-import { buildInstanceContext } from 'altinn-shared/utils/instanceContext';
+import type { IInstanceContext } from 'altinn-shared/types';
 
 export interface UseExpressionsOptions<T> {
   /**
@@ -42,20 +43,28 @@ export interface UseExpressionsOptions<T> {
  * @param input Any input, object, value from the layout definitions, possibly containing expressions somewhere.
  *  This hook will look through the input (and recurse through objects), looking for expressions and resolve
  *  them to provide you with the base out value for the current component context.
- * @param options Optional options (see their own docs)
+ * @param _options Optional options (see their own docs)
  */
 export function useExpressions<T>(
   input: T,
-  options?: UseExpressionsOptions<T>,
+  _options?: UseExpressionsOptions<T>,
 ): ExprResolved<T> {
+  // The options argument is an object, so it's natural to create a new one each time this function is called. As
+  // the equality function in React will assume a new object reference is an entirely new object, we'll memoize this
+  // argument as to prevent infinite looping when given a new (but identical) options argument.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const options = useMemo(() => _options, [JSON.stringify(_options)]);
+
   const component = useContext(FormComponentContext);
   const nodes = useLayoutsAsNodes();
   const formData = useAppSelector((state) => state.formData?.formData);
   const applicationSettings = useAppSelector(
     (state) => state.applicationSettings?.applicationSettings,
   );
-  const instance = useAppSelector((state) => state.instanceData?.instance);
-  const instanceContext = buildInstanceContext(instance);
+  const instanceContextSelector = getInstanceContextSelector();
+  const instanceContext: IInstanceContext = useAppSelector(
+    instanceContextSelector,
+  );
   const id = (options && options.forComponentId) || component.id;
 
   const node = useMemo(() => {
@@ -93,16 +102,9 @@ const componentDefaults: any = {
 
 export function useExpressionsForComponent<T extends ILayoutComponentOrGroup>(
   input: T,
-  options?: Omit<UseExpressionsOptions<T>, 'defaults'>,
 ): ExprResolved<T> {
-  const newOptions = useMemo(
-    () => ({
-      ...options,
-      defaults: componentDefaults,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    Object.values(options),
-  );
-
-  return useExpressions(input, newOptions);
+  return useExpressions(input, {
+    forComponentId: input.id,
+    defaults: componentDefaults,
+  });
 }

src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx

@@ -4,6 +4,8 @@ import { Grid, makeStyles } from '@material-ui/core';
 
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
 import ErrorPaper from 'src/components/message/ErrorPaper';
+import { ExprDefaultsForGroup } from 'src/features/expressions';
+import { useExpressions } from 'src/features/expressions/useExpressions';
 import { RepeatingGroupAddButton } from 'src/features/form/components/RepeatingGroupAddButton';
 import { RepeatingGroupsEditContainer } from 'src/features/form/containers/RepeatingGroupsEditContainer';
 import { RepeatingGroupsLikertContainer } from 'src/features/form/containers/RepeatingGroupsLikertContainer';
@@ -70,6 +72,11 @@ export function GroupContainer({
     JSON.stringify(components),
   );
 
+  const edit = useExpressions(container.edit, {
+    forComponentId: id,
+    defaults: ExprDefaultsForGroup.edit,
+  });
+
   const editIndex = useAppSelector(
     (state: IRuntimeState) =>
       state.formLayout.uiConfig.repeatingGroups[id]?.editIndex ?? -1,
@@ -109,13 +116,8 @@ export function GroupContainer({
   const textResources = useAppSelector(
     (state) => state.textResources.resources,
   );
-  const getRepeatingGroupIndex = (containerId: string) => {
-    if (repeatingGroups && repeatingGroups[containerId]) {
-      return repeatingGroups[containerId].index;
-    }
-    return -1;
-  };
-  const repeatingGroupIndex = getRepeatingGroupIndex(id);
+  const repeatingGroupIndex =
+    repeatingGroups && repeatingGroups[id] ? repeatingGroups[id].index : -1;
   const repeatingGroupDeepCopyComponents = useMemo(
     () =>
       createRepeatingGroupComponents(
@@ -157,24 +159,24 @@ export function GroupContainer({
   React.useEffect(() => {
     const filteredIndexList = getRepeatingGroupFilteredIndices(
       formData,
-      container.edit?.filter,
+      edit?.filter,
     );
     if (filteredIndexList) {
       setFilteredIndexList(filteredIndexList);
     }
-  }, [formData, container]);
+  }, [formData, edit]);
 
   const onClickAdd = useCallback(() => {
     dispatch(FormLayoutActions.updateRepeatingGroups({ layoutElementId: id }));
-    if (container.edit?.mode !== 'showAll') {
+    if (edit?.mode !== 'showAll') {
       dispatch(
         FormLayoutActions.updateRepeatingGroupsEditIndex({
           group: id,
           index: repeatingGroupIndex + 1,
         }),
       );
     }
-  }, [container.edit?.mode, dispatch, id, repeatingGroupIndex]);
+  }, [edit?.mode, dispatch, id, repeatingGroupIndex]);
 
   React.useEffect(() => {
     const { edit } = container;
@@ -242,7 +244,7 @@ export function GroupContainer({
     return null;
   }
 
-  if (container.edit?.mode === 'likert') {
+  if (edit?.mode === 'likert') {
     return (
       <>
         <RepeatingGroupsLikertContainer
@@ -274,9 +276,9 @@ export function GroupContainer({
       item={true}
       className={classes.minusMargin}
     >
-      {(!container.edit?.mode ||
-        container.edit?.mode === 'showTable' ||
-        (container.edit?.mode === 'hideTable' && editIndex < 0)) && (
+      {(!edit?.mode ||
+        edit?.mode === 'showTable' ||
+        (edit?.mode === 'hideTable' && editIndex < 0)) && (
         <RepeatingGroupTable
           components={components}
           attachments={attachments}
@@ -295,7 +297,7 @@ export function GroupContainer({
           deleting={deletingIndexes.includes(repeatingGroupIndex)}
           setEditIndex={setEditIndex}
           onClickRemove={onClickRemove}
-          hideDeleteButton={container.edit?.deleteButton === false}
+          hideDeleteButton={edit?.deleteButton === false}
           setMultiPageIndex={setMultiPageIndex}
           multiPageIndex={multiPageIndex}
           textResources={textResources}
@@ -307,8 +309,8 @@ export function GroupContainer({
         container={true}
         justifyContent='flex-end'
       />
-      {container.edit?.mode !== 'showAll' &&
-        container.edit?.addButton !== false &&
+      {edit?.mode !== 'showAll' &&
+        edit?.addButton !== false &&
         editIndex < 0 &&
         repeatingGroupIndex + 1 < container.maxCount && (
           <RepeatingGroupAddButton
@@ -320,7 +322,7 @@ export function GroupContainer({
             textResources={textResources}
           />
         )}
-      {editIndex >= 0 && container.edit?.mode === 'hideTable' && (
+      {editIndex >= 0 && edit?.mode === 'hideTable' && (
         <RepeatingGroupsEditContainer
           container={container}
           editIndex={editIndex}
@@ -332,14 +334,14 @@ export function GroupContainer({
           layout={layout}
           onClickSave={onClickSave}
           repeatingGroupDeepCopyComponents={repeatingGroupDeepCopyComponents}
-          hideSaveButton={container.edit?.saveButton === false}
+          hideSaveButton={edit?.saveButton === false}
           multiPageIndex={multiPageIndex}
           setMultiPageIndex={setMultiPageIndex}
-          showSaveAndNextButton={container.edit?.saveAndNextButton === true}
+          showSaveAndNextButton={edit?.saveAndNextButton === true}
           filteredIndexes={filteredIndexList}
         />
       )}
-      {container.edit?.mode === 'showAll' &&
+      {edit?.mode === 'showAll' &&
         // Generate array of length repeatingGroupIndex and iterate over indexes
         Array(repeatingGroupIndex + 1)
           .fill(0)
@@ -369,12 +371,12 @@ export function GroupContainer({
                   repeatingGroupDeepCopyComponents
                 }
                 hideSaveButton={true}
-                hideDeleteButton={container.edit?.deleteButton === false}
+                hideDeleteButton={edit?.deleteButton === false}
               />
             );
           })}
-      {container.edit?.mode === 'showAll' &&
-        container.edit?.addButton !== false &&
+      {edit?.mode === 'showAll' &&
+        edit?.addButton !== false &&
         repeatingGroupIndex + 1 < container.maxCount && (
           <RepeatingGroupAddButton
             id={`add-button-${id}`}

src/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx

@@ -12,6 +12,8 @@ import {
 import cn from 'classnames';
 
 import { useAppDispatch } from 'src/common/hooks';
+import { ExprDefaultsForGroup } from 'src/features/expressions';
+import { useExpressions } from 'src/features/expressions/useExpressions';
 import { RepeatingGroupsEditContainer } from 'src/features/form/containers/RepeatingGroupsEditContainer';
 import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 import { Triggers } from 'src/types';
@@ -259,6 +261,11 @@ export function RepeatingGroupTable({
   const classes = useStyles();
   const mobileView = useMediaQuery('(max-width:992px)'); // breakpoint on altinn-modal
 
+  const edit = useExpressions(container.edit, {
+    forComponentId: id,
+    defaults: ExprDefaultsForGroup.edit,
+  });
+
   const tableHeaderComponentIds =
     container.tableHeaders ||
     components.map((c) => c.baseComponentId || c.id) ||
@@ -312,7 +319,7 @@ export function RepeatingGroupTable({
   };
 
   const handleDeleteClick = (index: number) => {
-    if (container.edit?.alertOnDelete) {
+    if (edit?.alertOnDelete) {
       onOpenChange(index);
     } else {
       onClickRemove(index);
@@ -391,10 +398,10 @@ export function RepeatingGroupTable({
           layout={layout}
           onClickSave={handleSaveClick}
           repeatingGroupDeepCopyComponents={repeatingGroupDeepCopyComponents}
-          hideSaveButton={container.edit?.saveButton === false}
+          hideSaveButton={edit?.saveButton === false}
           multiPageIndex={multiPageIndex}
           setMultiPageIndex={setMultiPageIndex}
-          showSaveAndNextButton={container.edit?.saveAndNextButton === true}
+          showSaveAndNextButton={edit?.saveAndNextButton === true}
           filteredIndexes={filteredIndexes}
         />
       )

src/altinn-app-frontend/src/features/form/data/update/updateFormDataSagas.ts

@@ -43,9 +43,7 @@ export function* updateFormDataSaga({
       );
     }
 
-    if (state.formDynamics.conditionalRendering) {
-      yield put(FormDynamicsActions.checkIfConditionalRulesShouldRun({}));
-    }
+    yield put(FormDynamicsActions.checkIfConditionalRulesShouldRun({}));
   } catch (error) {
     console.error(error);
     yield put(FormDataActions.updateRejected({ error }));