refactor EditTextResourceBindings and small cleanup

frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/EditCodeList.module.css

@@ -0,0 +1,3 @@
+.customOrStaticButton {
+  padding: 0;
+}

frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.test.tsx → 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 () => {

frontend/packages/ux-editor/src/components/config/editModal/EditCodeList.tsx → 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')}</>

frontend/packages/ux-editor/src/components/config/editModal/EditCodeList/index.ts

@@ -0,0 +1 @@
+export { EditCodeList } from './EditCodeList';

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;

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;

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 (
     <div className={classes.container}>
-      {keysToAdd.map((key: string) => (
+      {textResourceBindingKeys.map((key: string) => (
         <EditTextResourceBinding
           key={key}
           component={component}