diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.module.css new file mode 100644 index 00000000000..1a8fb99df9d --- /dev/null +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.module.css @@ -0,0 +1,3 @@ +.customOrStaticButton { + padding: 0; +} diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.test.tsx similarity index 93% rename from frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.test.tsx rename to frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.test.tsx index dafd4675b28..73b3c932a1f 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.test.tsx @@ -6,10 +6,10 @@ import { renderWithMockStore, renderHookWithMockStore, optionListIdsMock, -} from '../../../testing/mocks'; -import { useLayoutSchemaQuery } from '../../../hooks/queries/useLayoutSchemaQuery'; +} from '../../../../testing/mocks'; +import { useLayoutSchemaQuery } from '../../../../hooks/queries/useLayoutSchemaQuery'; import userEvent from '@testing-library/user-event'; -import { textMock } from '../../../../../../testing/mocks/i18nMock'; +import { textMock } from '../../../../../../../testing/mocks/i18nMock'; describe('EditCodeList', () => { it('should render the component', async () => { diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.tsx similarity index 91% rename from frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.tsx rename to frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.tsx index c291bfa3531..f2c5a4c4364 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.tsx @@ -1,13 +1,14 @@ import React, { useEffect, useState } from 'react'; import { Alert, LegacySelect, Textfield } from '@digdir/design-system-react'; -import type { IGenericEditComponent } from '../componentConfig'; -import { useOptionListIdsQuery } from '../../../hooks/queries/useOptionListIdsQuery'; +import type { IGenericEditComponent } from '../../componentConfig'; +import { useOptionListIdsQuery } from '../../../../hooks/queries/useOptionListIdsQuery'; import { useTranslation, Trans } from 'react-i18next'; import { StudioButton, StudioSpinner } from '@studio/components'; import { ErrorMessage } from '@digdir/design-system-react'; import { altinnDocsUrl } from 'app-shared/ext-urls'; -import { FormField } from '../../FormField'; +import { FormField } from '../../../FormField'; import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; +import classes from './EditCodeList.module.css'; export function EditCodeList({ component, handleComponentChange }: IGenericEditComponent) { const { t } = useTranslation(); @@ -48,6 +49,7 @@ export function EditCodeList({ component, handleComponentChange }: IGenericEditC variant='tertiary' onClick={() => setUseCustomCodeList(!useCustomCodeList)} size='small' + className={classes.customOrStaticButton} > {optionListIds?.length > 0 && useCustomCodeList && ( <>{t('ux_editor.properties_panel.options.codelist_switch_to_static')} diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/index.ts b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/index.ts new file mode 100644 index 00000000000..951b645ee4a --- /dev/null +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/index.ts @@ -0,0 +1 @@ +export { EditCodeList } from './EditCodeList'; diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBinding.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBinding.tsx index 522961cd8dc..454d93e83ef 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBinding.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBinding.tsx @@ -4,9 +4,9 @@ import { TextResource } from '../../TextResource'; import type { TranslationKey } from 'language/type'; import type { IAppState } from '../../../types/global'; import { useTranslation } from 'react-i18next'; -import type { EditTextResourceBindingsProps } from './EditTextResourceBindings'; +import type { EditTextResourceBindingBase } from './EditTextResourceBindings'; -export interface EditTextResourceBindingProps extends EditTextResourceBindingsProps { +export interface EditTextResourceBindingProps extends EditTextResourceBindingBase { textKey: string; labelKey: TranslationKey; descriptionKey?: TranslationKey; diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.test.tsx index a911055e1e6..e36725c31f3 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.test.tsx @@ -35,11 +35,11 @@ describe('EditTextResourceBindings component', () => { const textResources: ITextResource[] = [ { id: 'test-title-text-id', - value: 'This is a test text', + value: 'This is a test title', }, { id: 'test-desc-text-id', - value: 'This is a test desc ', + value: 'This is a test description ', }, { id: 'test-help-text-id', @@ -50,30 +50,47 @@ describe('EditTextResourceBindings component', () => { test('that it renders with expected text resource binding keys', async () => { const textResourceBindingKeys = ['title', 'description', 'help']; await renderEditTextResourceBindingsComponent({ textResourceBindingKeys }); - const label = screen.getByText( - textMock('ux_editor.modal_properties_textResourceBindings_title'), - ); - expect(label).toBeInTheDocument(); - const labelText = screen.getByText('This is a test text'); + + textResourceBindingKeys.forEach((key) => { + expect( + screen.getByText(textMock(`ux_editor.modal_properties_textResourceBindings_${key}`)), + ).toBeInTheDocument(); + }); + + const labelText = screen.getByText('This is a test title'); expect(labelText).toBeInTheDocument(); - const descText = screen.getByText('This is a test desc'); + const descText = screen.getByText('This is a test description'); expect(descText).toBeInTheDocument(); const helpText = screen.getByText('This is a test help text'); expect(helpText).toBeInTheDocument(); }); - test('that it renders no text resource bindings if none are added', async () => { + test('that it renders no text resource bindings if no keys are provided', async () => { await renderEditTextResourceBindingsComponent({ + textResourceBindingKeys: [], component: { ...mockComponent, textResourceBindings: {} }, }); - const titleLabel = screen.queryByText( - textMock(`ux_editor.modal_properties_textResourceBindings_title`), - ); - expect(titleLabel).not.toBeInTheDocument(); + expect( + screen.queryByText(textMock('ux_editor.modal_properties_textResourceBindings_title')), + ).not.toBeInTheDocument(); const searchTextButton = screen.queryByRole('button', { name: textMock('general.search') }); expect(searchTextButton).not.toBeInTheDocument(); }); + test('that it renders empty text resource bindings if component has no text resource bindings', async () => { + const textResourceBindingKeys = ['title', 'description', 'help']; + await renderEditTextResourceBindingsComponent({ + textResourceBindingKeys, + component: { ...mockComponent, textResourceBindings: {} }, + }); + + textResourceBindingKeys.forEach((key) => { + expect( + screen.getByText(textMock(`ux_editor.modal_properties_textResourceBindings_${key}_add`)), + ).toBeInTheDocument(); + }); + }); + const waitForData = async () => { const layoutSchemaResult = renderHookWithMockStore()(() => useLayoutSchemaQuery()) .renderHookResult.result; diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.tsx index 1dec9c2a418..7a6784d1950 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings.tsx @@ -1,38 +1,34 @@ -import React, { useMemo, useState } from 'react'; +import React from 'react'; import { EditTextResourceBinding } from './EditTextResourceBinding'; import classes from './EditTextResourceBindings.module.css'; import type { FormContainer } from '../../../types/FormContainer'; import type { FormComponent } from '../../../types/FormComponent'; -export interface EditTextResourceBindingsProps { +export interface EditTextResourceBindingBase { editFormId?: string; component: FormComponent | FormContainer; handleComponentChange: (component: FormComponent | FormContainer) => void; - textResourceBindingKeys?: string[]; layoutName?: string; } +export interface EditTextResourceBindingsProps extends EditTextResourceBindingBase { + textResourceBindingKeys: string[]; +} + export const EditTextResourceBindings = ({ component, handleComponentChange, textResourceBindingKeys, }: EditTextResourceBindingsProps) => { - const [keysSet, setKeysSet] = useState( - Object.keys(textResourceBindingKeys || component.textResourceBindings || {}), - ); - - const keysToAdd = useMemo( - () => textResourceBindingKeys.filter((key) => !keysSet.includes(key)), - [keysSet, textResourceBindingKeys], - ); - const handleRemoveKey = (key: string) => { - setKeysSet((prevKeysSet) => prevKeysSet.filter((k) => k !== key)); + const updatedComponent = { ...component }; + delete updatedComponent.textResourceBindings[key]; + handleComponentChange(updatedComponent); }; return (
- {keysToAdd.map((key: string) => ( + {textResourceBindingKeys.map((key: string) => (