12175 move texts configs into separate section

frontend/language/src/nb.json

@@ -1032,6 +1032,7 @@
   "right_menu.rules_conditional_rendering_add_alt": "Legg til regel for vis/skjul felt",
   "right_menu.rules_empty": "Ingen regler lagt til...",
   "right_menu.show_old_dynamics": "Vis gammelt verktøy for dynamikk",
+  "right_menu.text": "Tekst",
   "right_menu.warning_dynamics_deprecated": "Denne funksjonaliteten utgår og vi kommer ikke til å vedlikeholde den. Vi anbefaler å bruke <0 href=\"{{expressionDocs}}\" >dynamiske uttrykk.</0>",
   "schema_editor.active_languages": "Aktive språk:",
   "schema_editor.add": "Legg til",
@@ -1480,7 +1481,7 @@
   "ux_editor.component_unknown": "Ukjent komponent",
   "ux_editor.conditional_rendering_connection_header": "Betingede renderingstilkoblinger",
   "ux_editor.container_empty": "Tomt, dra noe inn her...",
-  "ux_editor.container_not_editable_info": "Noen egenskaper for denne komponenten er ikke redigerbare for øyeblikket. Du kan legge til underkomponenter i kolonnen til venstre.",
+  "ux_editor.container_not_editable_info": "Noen egenskaper for denne komponenten er ikke redigerbare for øyeblikket. Du kan legge til underkomponenter i kolonnen til venstre og redigere tekster.",
   "ux_editor.edit_component.show_beta_func": "Vis ny konfigurasjon (BETA)",
   "ux_editor.edit_component.show_beta_func_help_text": "Vi jobber med å få på plass støtte for å redigere alle innstillinger. Ved å huke av her kan du ta i bruk den nye konfigurasjonsvisningen, som støtter flere innstillinger. Merk at denne visningen fortsatt er under utvikling, og vil kunne oppleves som noe ustabil.",
   "ux_editor.edit_component.unknown_component": "Komponenten {{componentName}} gjenkjennes ikke av Studio og kan derfor ikke konfigureres.",
@@ -1547,6 +1548,7 @@
   "ux_editor.modal_new_option": "Legg til flere",
   "ux_editor.modal_options": "Valg",
   "ux_editor.modal_properties_add_check_box_options": "Hvordan vil du legge til avkrysningsbokser?",
+  "ux_editor.modal_properties_add_options": "Hvordan vil du legge til alternativer?",
   "ux_editor.modal_properties_add_radio_button_options": "Hvordan vil du legge til radioknapper?",
   "ux_editor.modal_properties_button_helper": "Søk etter tekst til knappen",
   "ux_editor.modal_properties_button_type_ActionButton": "ActionButton",
@@ -1615,6 +1617,8 @@
   "ux_editor.modal_properties_read_only": "Read-only.",
   "ux_editor.modal_properties_read_only_description": "Om dette feltet ikke skal kunne redigeres, kan du skru på read-only.",
   "ux_editor.modal_properties_tag_helper": "Søk etter merkebeskrivelse",
+  "ux_editor.modal_properties_textResourceBindings_add_button": "'Legg til ny'-knapp",
+  "ux_editor.modal_properties_textResourceBindings_add_button_add": "Legg til tekst for 'Legg til ny'-knapp",
   "ux_editor.modal_properties_textResourceBindings_altTextImg": "Alternativ tekst for bilde",
   "ux_editor.modal_properties_textResourceBindings_altTextImg_add": "Legg til alternativ tekst for bilde",
   "ux_editor.modal_properties_textResourceBindings_back": "Tekst på tilbake-knapp",
@@ -1623,16 +1627,24 @@
   "ux_editor.modal_properties_textResourceBindings_body_add": "Legg til tekstinnhold",
   "ux_editor.modal_properties_textResourceBindings_description": "Beskrivelse",
   "ux_editor.modal_properties_textResourceBindings_description_add": "Legg til beskrivelse",
+  "ux_editor.modal_properties_textResourceBindings_edit_button_close": "'Rediger'-knapp (lukket gruppe)",
+  "ux_editor.modal_properties_textResourceBindings_edit_button_close_add": "Legg til tekst for 'Rediger'-knapp (lukket gruppe)",
+  "ux_editor.modal_properties_textResourceBindings_edit_button_open": "'Rediger'-knapp (åpen gruppe)",
+  "ux_editor.modal_properties_textResourceBindings_edit_button_open_add": "Legg til tekst for 'Rediger'-knapp (åpen gruppe)",
   "ux_editor.modal_properties_textResourceBindings_help": "Hjelpetekst",
   "ux_editor.modal_properties_textResourceBindings_help_add": "Legg til hjelpetekst",
   "ux_editor.modal_properties_textResourceBindings_next": "Tekst på neste-knapp",
   "ux_editor.modal_properties_textResourceBindings_next_add": "Legg til tekst på neste-knapp",
+  "ux_editor.modal_properties_textResourceBindings_save_and_next_button": "'Lagre og neste'-knapp",
+  "ux_editor.modal_properties_textResourceBindings_save_and_next_button_add": "Legg til tekst for 'Lagre og neste'-knapp",
+  "ux_editor.modal_properties_textResourceBindings_save_button": "'Lagre'-knapp",
+  "ux_editor.modal_properties_textResourceBindings_save_button_add": "'Legg til tekst for Lagre'-knapp",
   "ux_editor.modal_properties_textResourceBindings_shortName": "Kortnavn",
   "ux_editor.modal_properties_textResourceBindings_shortName_add": "Legg til kortnavn",
   "ux_editor.modal_properties_textResourceBindings_tableTitle": "Tittel i tabell",
   "ux_editor.modal_properties_textResourceBindings_tableTitle_add": "Legg til tittel i tabell",
-  "ux_editor.modal_properties_textResourceBindings_tag": "Merkebeskrivelse:",
-  "ux_editor.modal_properties_textResourceBindings_tag_add": "Legg til merkebeskrivelse",
+  "ux_editor.modal_properties_textResourceBindings_tagTitle": "Merkebeskrivelse",
+  "ux_editor.modal_properties_textResourceBindings_tagTitle_add": "Legg til merkebeskrivelse",
   "ux_editor.modal_properties_textResourceBindings_title": "Ledetekst",
   "ux_editor.modal_properties_textResourceBindings_title_add": "Legg til ledetekst",
   "ux_editor.modal_properties_trigger_validation_label": "Skal feltet trigge en validering?",
@@ -1667,6 +1679,14 @@
   "ux_editor.pages_error_length": "Navnet kan ikke være lengre enn 30 tegn.",
   "ux_editor.pages_error_unique": "Navnet må være unikt.",
   "ux_editor.preview": "Forhåndsvisning",
+  "ux_editor.properties_panel.options.add_options": "Legg til alternativer",
+  "ux_editor.properties_panel.options.codelist_switch_to_custom": "Bytt til egendefinert kodeliste",
+  "ux_editor.properties_panel.options.codelist_switch_to_static": "Bytt til statisk kodeliste",
+  "ux_editor.properties_panel.options.remove_option": "Slett alternativ",
+  "ux_editor.properties_panel.options.use_code_list_helptext": "Skru på denne innstillingen for å bruke en kodeliste for å styre alternativene til denne komponenten. Skru av innstillingen for å legge til alternativene manuelt.",
+  "ux_editor.properties_panel.options.use_code_list_label": "Bruk kodeliste",
+  "ux_editor.properties_panel.texts.no_properties": "Det er ingen tekster å konfigurere for denne komponenten.",
+  "ux_editor.properties_panel.texts.options_title": "Kodelister og alternativer",
   "ux_editor.radios_description_add": "Legg til beskrivelse",
   "ux_editor.radios_description_placeholder": "Ingen beskrivelse",
   "ux_editor.radios_error_DuplicateValues": "Alle verdier må være unike.",

frontend/packages/ux-editor-v3/src/components/config/componentConfig.tsx

@@ -114,8 +114,8 @@ export const configComponents: IConfigComponents = {
       component={component}
       handleComponentChange={handleComponentChange}
       textKey={EditSettings.TagTitle}
-      labelKey='ux_editor.modal_properties_textResourceBindings_tag'
-      placeholderKey='ux_editor.modal_properties_textResourceBindings_tag_add'
+      labelKey='ux_editor.modal_properties_textResourceBindings_tagTitle'
+      placeholderKey='ux_editor.modal_properties_textResourceBindings_tagTitle_add'
     />
   ),
   [EditSettings.Options]: EditOptions,

frontend/packages/ux-editor/src/components/Properties/Content.test.tsx

@@ -14,24 +14,9 @@ import { useLayoutSchemaQuery } from '../../hooks/queries/useLayoutSchemaQuery';
 
 const user = userEvent.setup();
 
-// Test data:
-const textResourceEditTestId = 'text-resource-edit';
-
-// Mocks:
-jest.mock('../TextResourceEdit', () => ({
-  TextResourceEdit: () => <div data-testid={textResourceEditTestId} />,
-}));
-
 describe('ContentTab', () => {
   afterEach(jest.clearAllMocks);
 
-  describe('when editing a text resource', () => {
-    it('should render the component', async () => {
-      await render({ props: {}, editId: 'test' });
-      expect(screen.getByTestId(textResourceEditTestId)).toBeInTheDocument();
-    });
-  });
-
   describe('when editing a container', () => {
     const props = {
       formId: container1IdMock,

frontend/packages/ux-editor/src/components/Properties/Content.tsx

@@ -1,20 +1,11 @@
 import React from 'react';
-import { TextResourceEdit } from '../TextResourceEdit';
 import { EditFormComponent } from '../config/EditFormComponent';
 import { EditFormContainer } from '../config/EditFormContainer';
-import { getCurrentEditId } from '../../selectors/textResourceSelectors';
-import { useSelector } from 'react-redux';
 import { useFormContext } from '../../containers/FormContext';
-import { useTranslation } from 'react-i18next';
 import { isContainer } from '../../utils/formItemUtils';
 
 export const Content = () => {
   const { formId, form, handleUpdate, debounceSave } = useFormContext();
-  const editId = useSelector(getCurrentEditId);
-  const { t } = useTranslation();
-
-  if (editId) return <TextResourceEdit />;
-  if (!formId || !form) return t('right_menu.content_empty');
 
   return isContainer(form) ? (
     <EditFormContainer

frontend/packages/ux-editor/src/components/Properties/Properties.test.tsx

@@ -9,21 +9,27 @@ import { component1Mock, component1IdMock } from '../../testing/layoutMock';
 import { renderWithProviders } from '../../testing/mocks';
 
 // Test data:
+const textText = 'Tekst';
 const contentText = 'Innhold';
 const dynamicsText = 'Dynamikk';
 const calculationsText = 'Beregninger';
 const texts = {
+  'right_menu.text': textText,
   'right_menu.content': contentText,
   'right_menu.dynamics': dynamicsText,
   'right_menu.calculations': calculationsText,
 };
 
+const textTestId = 'text';
 const contentTestId = 'content';
 const conditionalRenderingTestId = 'conditional-rendering';
 const expressionsTestId = 'expressions';
 const calculationsTestId = 'calculations';
 
 // Mocks:
+jest.mock('./Text', () => ({
+  Text: () => <div data-testid={textTestId} />,
+}));
 jest.mock('./Content', () => ({
   Content: () => <div data-testid={contentTestId} />,
 }));
@@ -39,6 +45,24 @@ jest.mock('./Calculations', () => ({
 jest.mock('react-i18next', () => ({ useTranslation: () => mockUseTranslation(texts) }));
 
 describe('Properties', () => {
+  describe('Text', () => {
+    it('Toggles text when clicked', async () => {
+      const user = userEvent.setup();
+      renderProperties();
+      const button = screen.queryByRole('button', { name: textText });
+      await act(() => user.click(button));
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+      await act(() => user.click(button));
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('Opens text when a component is selected', async () => {
+      const { rerender } = renderProperties();
+      rerender(getComponent({ formId: 'test' }));
+      const button = screen.queryByRole('button', { name: textText });
+      await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'true'));
+    });
+  });
   describe('Default config', () => {
     it('hides the properties header when the form is undefined', () => {
       renderProperties({ form: undefined });
@@ -83,13 +107,6 @@ describe('Properties', () => {
       await act(() => user.click(button));
       expect(button).toHaveAttribute('aria-expanded', 'false');
     });
-
-    it('Opens content when a component is selected', async () => {
-      const { rerender } = renderProperties();
-      rerender(getComponent({ formId: 'test' }));
-      const button = screen.queryByRole('button', { name: contentText });
-      await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'true'));
-    });
   });
 
   describe('Dynamics', () => {
@@ -141,9 +158,11 @@ describe('Properties', () => {
   it('Renders accordion', () => {
     const formIdMock = 'test-id';
     renderProperties({ formId: formIdMock });
+    expect(screen.getByText(textText)).toBeInTheDocument();
     expect(screen.getByText(contentText)).toBeInTheDocument();
     expect(screen.getByText(dynamicsText)).toBeInTheDocument();
     expect(screen.getByText(calculationsText)).toBeInTheDocument();
+    expect(screen.getByTestId(textTestId)).toBeInTheDocument();
     expect(screen.getByTestId(contentTestId)).toBeInTheDocument();
     expect(screen.getByTestId(expressionsTestId)).toBeInTheDocument();
     expect(screen.getByTestId(calculationsTestId)).toBeInTheDocument();

frontend/packages/ux-editor/src/components/Properties/Properties.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { Calculations } from './Calculations';
 import { Content } from './Content';
+import { Text } from './Text';
 import { useTranslation } from 'react-i18next';
 import { Accordion } from '@digdir/design-system-react';
 import { useFormContext } from '../../containers/FormContext';
@@ -19,7 +20,7 @@ export const Properties = () => {
   useEffect(() => {
     if (formIdRef.current !== formId) {
       formIdRef.current = formId;
-      if (formId && openList.length === 0) setOpenList(['content']);
+      if (formId && openList.length === 0) setOpenList(['text']);
     }
   }, [formId, openList.length]);
 
@@ -44,19 +45,27 @@ export const Properties = () => {
         />
       )}
       <Accordion color='subtle'>
+        <Accordion.Item open={openList.includes('text')}>
+          <Accordion.Header onHeaderClick={() => toggleOpen('text')}>
+            {t('right_menu.text')}
+          </Accordion.Header>
+          <Accordion.Content>{formId ? <Text /> : t('right_menu.content_empty')}</Accordion.Content>
+        </Accordion.Item>
         <Accordion.Item open={openList.includes('content')}>
           <Accordion.Header onHeaderClick={() => toggleOpen('content')}>
             {t('right_menu.content')}
           </Accordion.Header>
           <Accordion.Content>
-            <Content />
+            {formId ? <Content /> : t('right_menu.content_empty')}
           </Accordion.Content>
         </Accordion.Item>
         <Accordion.Item open={openList.includes('dynamics')}>
           <Accordion.Header onHeaderClick={() => toggleOpen('dynamics')}>
             {t('right_menu.dynamics')}
           </Accordion.Header>
-          <Accordion.Content>{formId && <Dynamics />}</Accordion.Content>
+          <Accordion.Content>
+            {formId ? <Dynamics /> : t('right_menu.content_empty')}
+          </Accordion.Content>
         </Accordion.Item>
         <Accordion.Item open={openList.includes('calculations')}>
           <Accordion.Header onHeaderClick={(e) => toggleOpen('calculations')}>

frontend/packages/ux-editor/src/components/Properties/Text.module.css

@@ -0,0 +1,3 @@
+.textResourceContainer {
+  padding-bottom: 20px;
+}