Fix data model bindings (#11646)

* Fix data model bindings * Fix InputActionWrapper test * Add EditDataModelBindings tests
Altinn · Nov 23, 2023 · a0e7fbe · a0e7fbe
1 parent 7613c7d
commit a0e7fbe
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 10 deletions.
diff --git a/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.test.tsx b/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.test.tsx
@@ -92,4 +92,14 @@ describe('InputActionWrapper', () => {
     await act(() => user.hover(input));
     expect(screen.getByLabelText('general.edit')).toBeInTheDocument();
   });
+
+  it('renders right actions when switching mode', async () => {
+    const { rerender } = await rtlRender(<InputActionWrapper {...mockProps} mode={'editMode'} />);
+    expect(screen.getByLabelText('general.save')).toBeInTheDocument();
+    expect(screen.getByLabelText('general.delete')).toBeInTheDocument();
+
+    rerender(<InputActionWrapper {...mockProps} mode={'hoverMode'} />);
+    expect(screen.getByLabelText('general.edit')).toBeInTheDocument();
+    expect(screen.getByLabelText('general.delete')).toBeInTheDocument();
+  });
 });
diff --git a/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.tsx b/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { CheckmarkIcon, TrashIcon, PencilWritingIcon } from '@altinn/icons';
 import { useText } from '../../../../ux-editor/src/hooks/index';
 import { Button, ButtonProps } from '@digdir/design-system-react';
@@ -36,7 +36,12 @@ export const InputActionWrapper = ({
   ...rest
 }: InputActionWrapperProps): JSX.Element => {
   const t = useText();
-  const [actions, setActions] = useState<AvailableAction[]>(actionGroupMap[mode || 'standBy']);
+  const defaultActions = actionGroupMap[mode || 'standBy'];
+  const [actions, setActions] = useState<AvailableAction[]>(defaultActions);
+
+  useEffect(() => {
+    setActions(defaultActions);
+  }, [defaultActions]);
 
   const handleFocus = (): void => {
     setActions(actionGroupMap['editMode']);

diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.test.tsx
@@ -62,7 +62,7 @@ const render = async ({
     },
   };
 
-  renderWithMockStore(
+  return renderWithMockStore(
     { appData },
     { getDatamodelMetadata },
     handleDataModelChange(),
@@ -273,4 +273,23 @@ describe('EditDataModelBindings', () => {
     expect(editIcon).toBeInTheDocument();
     expect(onEditClick).toHaveBeenCalled;
   });
+
+  it('show right data model when switching component', async () => {
+    const { renderResult } = await render({
+      dataModelBindings: { simpleBinding: 'testModel.field1' },
+    });
+    expect(await screen.findByText('testModel.field1')).toBeInTheDocument();
+    renderResult.rerender(
+      <EditDataModelBindings
+        handleComponentChange={jest.fn()}
+        component={{
+          id: 'someComponentId',
+          type: ComponentType.Input,
+          dataModelBindings: { simpleBinding: 'testModel.field2' },
+          itemType: 'COMPONENT',
+        }}
+      />,
+    );
+    expect(await screen.findByText('testModel.field2')).toBeInTheDocument();
+  });
 });
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.tsx
@@ -1,7 +1,7 @@
 import type { IGenericEditComponent } from '../componentConfig';
 import { getMinOccursFromDataModel, getXsdDataTypeFromDataModel } from '../../../utils/datamodel';
 import { ComponentType } from 'app-shared/types/ComponentType';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useText } from '../../../hooks';
 import { SelectDataModelComponent } from '../SelectDataModelComponent';
 import { useDatamodelMetadataQuery } from '../../../hooks/queries/useDatamodelMetadataQuery';
@@ -49,9 +49,14 @@ export const EditDataModelBindings = ({
   const { uniqueKey, key, label } = renderOptions || {};
 
   const [dataModelSelectVisible, setDataModelSelectVisible] = useState(false);
-  const [selectedOption, setSelectedOption] = useState<string | undefined>(
-    component.dataModelBindings ? component.dataModelBindings[key || 'simpleBinding'] : undefined,
-  );
+
+  useEffect(() => {
+    setDataModelSelectVisible(false);
+  }, [component.id]);
+
+  const selectedOption = component.dataModelBindings
+    ? component.dataModelBindings[key || 'simpleBinding']
+    : undefined;
 
   return (
     <div key={uniqueKey || ''}>
@@ -69,7 +74,6 @@ export const EditDataModelBindings = ({
           onDeleteClick={() => {
             handleDataModelChange('', key);
             setDataModelSelectVisible(false);
-            setSelectedOption(undefined);
           }}
           onSaveClick={() => setDataModelSelectVisible(false)}
         >
@@ -95,7 +99,6 @@ export const EditDataModelBindings = ({
                 }
                 onDataModelChange={(dataModelField: string) => {
                   handleDataModelChange(dataModelField, key);
-                  setSelectedOption(dataModelField);
                 }}
                 noOptionsMessage={t('general.no_options')}
                 helpText={helpText}

diff --git a/frontend/packages/ux-editor/src/testing/mocks.tsx b/frontend/packages/ux-editor/src/testing/mocks.tsx
@@ -125,7 +125,9 @@ export const renderWithMockStore =
       storeCreator,
     });
     const renderResult = render(renderComponent(component));
-    return { renderResult, store };
+    const rerender = (rerenderedComponent) =>
+      renderResult.rerender(renderComponent(rerenderedComponent));
+    return { renderResult: { ...renderResult, rerender }, store };
   };
 
 export const renderHookWithMockStore =