Small fixes plus two test cases

Altinn · Oct 30, 2024 · 416f1e2 · 416f1e2
1 parent 9157cdd
commit 416f1e2
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 20 deletions.
diff --git a/frontend/packages/ux-editor/src/components/Properties/Text.tsx b/frontend/packages/ux-editor/src/components/Properties/Text.tsx
@@ -50,7 +50,6 @@ export const Text = () => {
           component={form}
           handleComponentChange={handleComponentChange}
           textResourceBindingKeys={Object.keys(schema.properties.textResourceBindings.properties)}
-          editFormId={formId}
           layoutName={selectedFormLayoutName}
         />
       )}
@@ -64,7 +63,6 @@ export const Text = () => {
                   ComponentSpecificConfig<ComponentType.RadioButtons>)
           }
           handleComponentChange={handleComponentChange}
-          editFormId={formId}
           layoutName={selectedFormLayoutName}
           renderOptions={{
             isLayoutOptionsUnsupported: schema.properties.optionsId && !schema.properties.options,

diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOption/EditOption.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOption/EditOption.tsx
@@ -83,22 +83,22 @@ const OpenOption = ({ legend, onChange, option, onDelete, onClose }: OpenOptionP
       <StudioProperty.Group className={classes.textResources}>
         <TextResource
           compact
-          label={t('ux_editor.options_text_label')}
+          label={t('ux_editor.modal_properties_textResourceBindings_title')}
           handleIdChange={handleLabelChange}
           textResourceId={option.label}
         />
         <TextResource
           compact
           handleIdChange={handleDescriptionChange}
           handleRemoveTextResource={handleDeleteDescription}
-          label={t('ux_editor.options_text_description')}
+          label={t('general.description')}
           textResourceId={option.description}
         />
         <TextResource
           compact
           handleIdChange={handleHelpTextChange}
           handleRemoveTextResource={handleDeleteHelpText}
-          label={t('ux_editor.options_text_help_text')}
+          label={t('ux_editor.modal_properties_textResourceBindings_help')}
           textResourceId={option.helpText}
         />
       </StudioProperty.Group>

diff --git a/...ig/editModal/EditOptions/EditManualOptionsWithEditor/EditManualOptionsWithEditor.test.tsx b/...ig/editModal/EditOptions/EditManualOptionsWithEditor/EditManualOptionsWithEditor.test.tsx
@@ -154,4 +154,40 @@ describe('EditManualOptionsWithEditor', () => {
       });
     });
   });
+
+  it('should display an alert if trying to use the manual tab with an unsupported component', () => {
+    renderEditManualOptionsWithEditor({ isLayoutOptionsUnsupported: true });
+
+    expect(screen.getByText(textMock('ux_editor.options.codelist_only'))).toBeInTheDocument();
+  });
+
+  it('should delete optionsId from the layout when using the manual editor', async () => {
+    const user = userEvent.setup();
+    const mockHandleComponentChange = jest.fn();
+    renderEditManualOptionsWithEditor({
+      componentProps: {
+        optionsId: 'somePredefinedOptionsList',
+      },
+      handleComponentChange: mockHandleComponentChange,
+    });
+
+    const modalButton = screen.getByRole('button', {
+      name: textMock('ux_editor.modal_properties_code_list_custom_list'),
+    });
+
+    await user.click(modalButton);
+
+    const addNewButton = screen.getByRole('button', {
+      name: textMock('ux_editor.modal_new_option'),
+    });
+
+    await user.click(addNewButton);
+
+    await waitFor(() => {
+      expect(mockHandleComponentChange).toHaveBeenCalledWith({
+        ...mockComponent, // does not contain optionsId
+        options: [{ label: '', value: '' }],
+      });
+    });
+  });
 });
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
 import classes from './EditOptions.module.css';
 import type { IGenericEditComponent } from '../../componentConfig';
@@ -28,37 +28,29 @@ export enum SelectedOptionsType {
 }
 
 export function EditOptions<T extends SelectionComponentType>({
-  editFormId,
   component,
   handleComponentChange,
   renderOptions,
 }: ISelectionEditComponentProvidedProps<T>) {
-  const previousEditFormId = useRef(editFormId);
   const { org, app } = useStudioEnvironmentParams();
-  const { data: staticOptionListIds, isPending, isError, error } = useOptionListIdsQuery(org, app);
+  const { data: optionListIds, isPending, isError, error } = useOptionListIdsQuery(org, app);
   const { t } = useTranslation();
   const initialSelectedOptionsType = getSelectedOptionsType(
     component.optionsId,
     component.options,
-    staticOptionListIds || [],
+    optionListIds || [],
   );
   const [selectedOptionsType, setSelectedOptionsType] = React.useState(initialSelectedOptionsType);
 
   useEffect(() => {
-    if (editFormId !== previousEditFormId.current) {
-      previousEditFormId.current = editFormId;
-    }
-  }, [editFormId]);
-
-  useEffect(() => {
-    if (!staticOptionListIds) return;
+    if (!optionListIds) return;
     const updatedSelectedOptionsType = getSelectedOptionsType(
       component.optionsId,
       component.options,
-      staticOptionListIds,
+      optionListIds,
     );
     setSelectedOptionsType(updatedSelectedOptionsType);
-  }, [staticOptionListIds, component.optionsId, component.options, setSelectedOptionsType]);
+  }, [optionListIds, component.optionsId, component.options, setSelectedOptionsType]);
 
   return (
     <div className={classes.root}>

diff --git a/...tor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.tsx b/...tor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.tsx
@@ -6,7 +6,6 @@ import { StudioProperty } from '@studio/components';
 import classes from './EditTextResourceBindings.module.css';
 
 export interface EditTextResourceBindingBase {
-  editFormId?: string;
   component: FormComponent | FormContainer;
   handleComponentChange: (component: FormComponent | FormContainer) => void;
   layoutName?: string;