Update data model selection in component config

frontend/app-development/hooks/mutations/useDeleteDataModelMutation.ts

@@ -32,7 +32,7 @@ export const useDeleteDataModelMutation = () => {
       queryClient.removeQueries({
         queryKey: [QueryKey.JsonSchema, org, app, xsdPath],
       });
-      queryClient.invalidateQueries({ queryKey: [QueryKey.AppMetadataModelIds, org, app] });
+      queryClient.removeQueries({ queryKey: [QueryKey.AppMetadataModelIds, org, app] });
     },
   });
 };

frontend/language/src/nb.json

@@ -1568,7 +1568,11 @@
   "ux_editor.modal_properties_component_id_not_unique_error": "Komponenten må ha en unik ID",
   "ux_editor.modal_properties_component_id_not_valid": "Komponent-ID-en må ha minst 2 tegn. ID-en kan ikke starte med bindestrek (-) eller slutte med bindestrek og tall. Bruk bare tegn fra det engelske alfabetet.",
   "ux_editor.modal_properties_custom_code_list_id": "ID til egendefinert kodeliste",
+  "ux_editor.modal_properties_data_model_binding": "Datamodell",
   "ux_editor.modal_properties_data_model_binding_not_present": "Denne komponenten kan ikke knyttes til et datamodellfelt",
+  "ux_editor.modal_properties_data_model_field_binding": "Datamodellknytning",
+  "ux_editor.modal_properties_data_model_field_choose": "Velg datamodellfelt",
+  "ux_editor.modal_properties_data_model_field_update": "Datamodellfelt må oppdateres",
   "ux_editor.modal_properties_data_model_helper": "Velg en datamodellknytning",
   "ux_editor.modal_properties_data_model_label.address": "Gateadresse",
   "ux_editor.modal_properties_data_model_label.answer": "Svar",

frontend/packages/shared/src/utils/featureToggleUtils.ts

@@ -8,7 +8,8 @@ export type SupportedFeatureFlags =
   | 'componentConfigBeta'
   | 'shouldOverrideAppLibCheck'
   | 'resourceMigration'
-  | 'displayPaymentTaskProcessEditor';
+  | 'displayPaymentTaskProcessEditor'
+  | 'multipleDataModelsPerTask';
 
 /*
  * Please add all the features that you want to be toggle on by default here.

frontend/packages/ux-editor/src/App.tsx

@@ -21,7 +21,11 @@ export function App() {
   const { selectedFormLayoutSetName } = useAppContext();
   const { isSuccess: areWidgetsFetched, isError: widgetFetchedError } = useWidgetsQuery(org, app);
   const { isSuccess: isDataModelFetched, isError: dataModelFetchedError } =
-    useDataModelMetadataQuery(org, app, selectedFormLayoutSetName, undefined);
+    useDataModelMetadataQuery({
+      org,
+      app,
+      layoutSetName: selectedFormLayoutSetName,
+    });
   const { isSuccess: areTextResourcesFetched } = useTextResourcesQuery(org, app);
 
   const componentIsReady = areWidgetsFetched && isDataModelFetched && areTextResourcesFetched;

frontend/packages/ux-editor/src/components/Properties/DataModelBindings.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DataModelBindings } from './DataModelBindings';
 import { FormItemContext } from '../../containers/FormItemContext';
@@ -17,19 +17,21 @@ import { layoutSet1NameMock } from '@altinn/ux-editor/testing/layoutSetsMock';
 import { app, org } from '@studio/testing/testids';
 import type { DataModelMetadataResponse } from 'app-shared/types/api';
 
+const defaultModel = 'testModel';
+
 const dataModelMetadata: DataModelMetadataResponse = {
   elements: {
     testModel: {
-      id: 'testModel',
+      id: defaultModel,
       type: 'ComplexType',
-      dataBindingName: 'testModel',
-      displayString: 'testModel',
+      dataBindingName: defaultModel,
+      displayString: defaultModel,
       isReadOnly: false,
       isTagContent: false,
       jsonSchemaPointer: '#/definitions/testModel',
       maxOccurs: 1,
       minOccurs: 1,
-      name: 'testModel',
+      name: defaultModel,
       parentElement: null,
       restrictions: [],
       texts: [],
@@ -115,7 +117,7 @@ describe('DataModelBindings', () => {
     },
   );
 
-  it('should render already existing bindings in previewMode with label', () => {
+  it('should render already existing bindings in previewMode with label', async () => {
     render({
       props: {
         formItem: {
@@ -131,6 +133,10 @@ describe('DataModelBindings', () => {
       },
     });
 
+    await waitForElementToBeRemoved(() =>
+      screen.queryAllByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+
     ['address', 'careOf'].forEach((prop) => {
       const dataModelButton = screen.getByText(
         textMock(`ux_editor.modal_properties_data_model_label.${prop}`),
@@ -281,8 +287,13 @@ describe('DataModelBindings', () => {
       name: textMock(`ux_editor.component_title.Input`),
     });
     await user.click(dataModelButton);
-    const option = screen.getByText('testModel');
-    await user.click(option);
+
+    const dataModelFieldSelector = screen.getByRole('combobox', {
+      name: textMock('ux_editor.modal_properties_data_model_field_binding'),
+    });
+    const option = screen.getByRole('option', { name: defaultModel });
+    await user.selectOptions(dataModelFieldSelector, option);
+
     expect(formItemContextProviderMock.handleUpdate).toHaveBeenCalledTimes(1);
     expect(formItemContextProviderMock.debounceSave).toHaveBeenCalledTimes(1);
   });

frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { EditDataModelBindings } from '../config/editModal/EditDataModelBindings/EditDataModelBindings';
+import { EditDataModelBinding } from '../config/editModal/EditDataModelBinding/EditDataModelBinding';
 import { StudioProperty, StudioSpinner } from '@studio/components';
 import { Alert, Switch } from '@digdir/designsystemet-react';
 import { useComponentSchemaQuery } from '../../hooks/queries/useComponentSchemaQuery';
@@ -15,6 +15,7 @@ export const DataModelBindings = (): React.JSX.Element => {
   const { formItemId, formItem, handleUpdate, debounceSave } = useFormItemContext();
   const { data: schema } = useComponentSchemaQuery(formItem.type);
   const [multipleAttachments, setMultipleAttachments] = useState<boolean>(false);
+
   const t = useText();
 
   React.useEffect(() => {
@@ -87,7 +88,7 @@ export const DataModelBindings = (): React.JSX.Element => {
                 className={classes.dataModelBindings}
                 key={`${formItem.id}-data-model-${propertyKey}`}
               >
-                <EditDataModelBindings
+                <EditDataModelBinding
                   component={formItem}
                   handleComponentChange={async (updatedComponent, mutateOptions) => {
                     handleUpdate(updatedComponent);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { v1 as uuidv1 } from 'uuid';
 import Modal from 'react-modal';
 import { getComponentTitleByComponentType } from '../../utils/language';
-import { SelectDataModelComponent } from './SelectDataModelComponent';
+import { SelectDataFieldComponent } from './SelectDataFieldComponent';
 import type {
   IFormDesignerComponents,
   IFormDesignerContainers,
@@ -332,13 +332,12 @@ class ConditionalRendering extends React.Component<
                           />
 
                           <div>
-                            <SelectDataModelComponent
+                            <SelectDataFieldComponent
                               label={this.props.t('ux_editor.modal_properties_data_model_helper')}
                               onDataModelChange={this.handleParamDataChange.bind(null, paramName)}
                               selectedElement={
                                 this.state.conditionalRendering.inputParams[paramName]
                               }
-                              hideRestrictions={true}
                             />
                           </div>
                         </div>

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

@@ -100,7 +100,13 @@ const waitForData = async () => {
   const layoutSchemaResult = renderHookWithProviders(() => useLayoutSchemaQuery()).result;
   await waitFor(() => expect(layoutSchemaResult.current[0].isSuccess).toBe(true));
   const dataModelMetadataResult = renderHookWithProviders(
-    () => useDataModelMetadataQuery(org, app, layoutSet1NameMock, dataModelNameMock),
+    () =>
+      useDataModelMetadataQuery({
+        org,
+        app,
+        layoutSetName: layoutSet1NameMock,
+        dataModelName: dataModelNameMock,
+      }),
     { queries: { getDataModelMetadata } },
   ).result;
   await waitFor(() => expect(dataModelMetadataResult.current.isSuccess).toBe(true));

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

@@ -28,12 +28,11 @@ export const ExpressionContent = ({
   const { org, app } = useStudioEnvironmentParams();
   const { selectedFormLayoutSetName } = useAppContext();
   const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedFormLayoutSetName);
-  const { data: dataModelMetadata } = useDataModelMetadataQuery(
+  const { data: dataModelMetadata } = useDataModelMetadataQuery({
     org,
     app,
-    selectedFormLayoutSetName,
-    undefined,
-  );
+    layoutSetName: selectedFormLayoutSetName,
+  });
   const dataLookupOptions: Partial<DataLookupOptions> = useMemo(
     () => ({
       [DataLookupFuncName.Component]: getComponentIds(formLayoutsData),

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { v1 as uuidv1 } from 'uuid';
-import { SelectDataModelComponent } from './SelectDataModelComponent';
+import { SelectDataFieldComponent } from './SelectDataFieldComponent';
 import type { IRuleModelFieldElement } from '../../types/global';
 import { withTranslation } from 'react-i18next';
 import classes from './RuleComponent.module.css';
@@ -176,11 +176,10 @@ class Rule extends React.Component<IRuleComponentProps, IRuleComponentState> {
                             disabled={true}
                           />
                           <div>
-                            <SelectDataModelComponent
+                            <SelectDataFieldComponent
                               label={this.props.t('ux_editor.modal_properties_data_model_helper')}
                               onDataModelChange={this.handleParamDataChange.bind(null, paramName)}
                               selectedElement={this.state.ruleConnection.inputParams[paramName]}
-                              hideRestrictions={true}
                             />
                           </div>
                         </div>
@@ -207,11 +206,10 @@ class Rule extends React.Component<IRuleComponentProps, IRuleComponentState> {
                     disabled={true}
                   />
                   <div>
-                    <SelectDataModelComponent
+                    <SelectDataFieldComponent
                       label={this.props.t('ux_editor.modal_properties_data_model_helper')}
                       onDataModelChange={this.handleOutParamDataChange.bind(null, 'outParam0')}
                       selectedElement={this.state.ruleConnection.outParams.outParam0}
-                      hideRestrictions={true}
                     />
                   </div>
                 </div>

frontend/packages/ux-editor/src/components/config/SelectDataModelComponent.test.tsx → frontend/packages/ux-editor/src/components/config/SelectDataFieldComponent.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { renderWithProviders } from '../../testing/mocks';
-import { SelectDataModelComponent } from './SelectDataModelComponent';
+import { SelectDataFieldComponent } from './SelectDataFieldComponent';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
 import { ComponentType } from 'app-shared/types/ComponentType';
-import { getDataModelFieldsFilter } from '../../utils/dataModel';
+import { getDataModelFieldsFilter } from '../../utils/dataModelUtils';
 import { queryClientMock } from 'app-shared/mocks/queryClientMock';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { app, org } from '@studio/testing/testids';
@@ -75,7 +75,7 @@ const render = async ({
     dataModelMetadata,
   );
   renderWithProviders(
-    <SelectDataModelComponent
+    <SelectDataFieldComponent
       label={textMock(`ux_editor.component_title.${componentType}`)}
       onDataModelChange={handleComponentChange}
       dataModelFieldsFilter={getDataModelFieldsFilter(componentType, label)}
@@ -87,15 +87,18 @@ const render = async ({
 describe('SelectDataModelComponent', () => {
   it('should show select with no selected option by default', async () => {
     await render();
+
     expect(
-      screen.getByText(textMock(`ux_editor.component_title.${ComponentType.Input}`)),
+      screen.getByLabelText(textMock(`ux_editor.component_title.${ComponentType.Input}`)),
     ).toBeInTheDocument();
-    expect(screen.getByRole('combobox').getAttribute('value')).toEqual('');
+    const selector = screen.getByRole('combobox') as HTMLSelectElement;
+    expect(selector.value).toEqual('');
   });
 
   it('renders when dataModelData is undefined', async () => {
     await render({ dataModelMetadata: undefined });
-    const bindingTitle = screen.getByText(
+
+    const bindingTitle = screen.getByLabelText(
       textMock(`ux_editor.component_title.${ComponentType.Input}`),
     );
     expect(bindingTitle).toBeInTheDocument();
@@ -115,13 +118,14 @@ describe('SelectDataModelComponent', () => {
     await render({
       handleComponentChange,
     });
+
     const selectElement = screen.getByRole('combobox', {
       name: textMock(`ux_editor.component_title.${ComponentType.Input}`),
     });
-    await user.click(selectElement);
-    const optionElement = screen.getByText('testModel.field1');
-    await user.click(optionElement);
-    await waitFor(() => {});
+    const optionElement = screen.getByRole('option', { name: 'testModel.field1' });
+    await user.selectOptions(selectElement, optionElement);
+
+    expect(handleComponentChange).toHaveBeenCalled();
     expect(handleComponentChange).toHaveBeenCalledWith('testModel.field1');
   });
 

frontend/packages/ux-editor/src/components/config/SelectDataModelComponent.tsx → frontend/packages/ux-editor/src/components/config/SelectDataFieldComponent.tsx

@@ -1,39 +1,44 @@
 import React, { useEffect } from 'react';
-import { LegacySelect } from '@digdir/design-system-react';
+import { StudioNativeSelect } from '@studio/components';
 import { useDataModelMetadataQuery } from '../../hooks/queries/useDataModelMetadataQuery';
 import { FormField } from '../FormField';
 import type { Option } from '@altinn/text-editor/types';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import type { DataModelFieldElement } from 'app-shared/types/DataModelFieldElement';
 import { useAppContext } from '../../hooks';
 
-export interface ISelectDataModelProps {
+export interface ISelectDataFieldProps {
   inputId?: string;
   selectedElement: string;
   label: string;
   onDataModelChange: (dataModelField: string) => void;
-  noOptionsMessage?: string;
   hideRestrictions?: boolean;
   dataModelFieldsFilter?: (dataModelField: DataModelFieldElement) => boolean;
   componentType?: string;
   propertyPath?: string;
   helpText?: string;
+  dataModelName?: string;
 }
 
-export const SelectDataModelComponent = ({
+export const SelectDataFieldComponent = ({
   inputId,
   selectedElement,
   label,
   onDataModelChange,
-  noOptionsMessage,
   dataModelFieldsFilter,
   componentType,
   helpText,
   propertyPath,
-}: ISelectDataModelProps) => {
+  dataModelName,
+}: ISelectDataFieldProps) => {
   const { org, app } = useStudioEnvironmentParams();
   const { selectedFormLayoutSetName } = useAppContext();
-  const { data } = useDataModelMetadataQuery(org, app, selectedFormLayoutSetName, undefined);
+  const { data } = useDataModelMetadataQuery({
+    org,
+    app,
+    layoutSetName: selectedFormLayoutSetName,
+    dataModelName,
+  });
   const [dataModelElementNames, setDataModelElementNames] = React.useState<Option[]>([]);
 
   useEffect(() => {
@@ -45,10 +50,11 @@ export const SelectDataModelComponent = ({
     setDataModelElementNames(elementNames);
   }, [data, dataModelFieldsFilter]);
 
-  const onChangeSelectedBinding = (e: any) => {
-    onDataModelChange(e);
+  const onChangeSelectedBinding = (value: string) => {
+    onDataModelChange(value);
   };
 
+  dataModelElementNames.unshift({ value: '', label: '' });
   return (
     <FormField
       id={inputId}
@@ -59,11 +65,13 @@ export const SelectDataModelComponent = ({
       helpText={helpText}
       label={label}
       renderField={({ fieldProps }) => (
-        <LegacySelect
-          {...fieldProps}
-          onChange={(e: any) => fieldProps.onChange(e)}
-          options={dataModelElementNames}
-        />
+        <StudioNativeSelect {...fieldProps} onChange={(e) => fieldProps.onChange(e.target.value)}>
+          {dataModelElementNames.map((element) => (
+            <option key={element.value} value={element.value}>
+              {element.label}
+            </option>
+          ))}
+        </StudioNativeSelect>
       )}
     />
   );

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings/DefinedBinding/DefinedBinding.module.css → frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css

@@ -3,3 +3,7 @@
   display: flex;
   gap: var(--fds-spacing-1);
 }
+
+.error {
+  background-color: var(--fds-semantic-surface-danger-subtle);
+}