diff --git a/frontend/packages/ux-editor/src/components/Properties/Text.tsx b/frontend/packages/ux-editor/src/components/Properties/Text.tsx index fe02d36ed90..0982457006a 100644 --- 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) } 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 index c4f26e0c7ed..0d0d099fb5a 100644 --- 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,7 +83,7 @@ const OpenOption = ({ legend, onChange, option, onDelete, onClose }: OpenOptionP @@ -91,14 +91,14 @@ const OpenOption = ({ legend, onChange, option, onDelete, onClose }: OpenOptionP compact handleIdChange={handleDescriptionChange} handleRemoveTextResource={handleDeleteDescription} - label={t('ux_editor.options_text_description')} + label={t('general.description')} textResourceId={option.description} /> diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditManualOptionsWithEditor/EditManualOptionsWithEditor.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditManualOptionsWithEditor/EditManualOptionsWithEditor.test.tsx index 851d8292465..d2c3b370872 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditManualOptionsWithEditor/EditManualOptionsWithEditor.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/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 index ef2b6a6ee02..ce253439b84 100644 --- 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({ - editFormId, component, handleComponentChange, renderOptions, }: ISelectionEditComponentProvidedProps) { - 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 (
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.tsx index 763ac47d238..6679be6ad19 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.tsx +++ b/frontend/packages/ux-editor/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;