feat: merge select and edit tabs in config

frontend/language/src/nb.json

@@ -1525,6 +1525,10 @@
   "ux_editor.modal_header_type_helper": "Velg titteltype",
   "ux_editor.modal_new_option": "Legg til alternativ",
   "ux_editor.modal_properties_add_radio_button_options": "Hvordan vil du legge til radioknapper?",
+  "ux_editor.modal_properties_code_list": "Velg fra biblioteket",
+  "ux_editor.modal_properties_code_list_alert_title": "Du er i ferd med å redigere en kodeliste i biblioteket.",
+  "ux_editor.modal_properties_code_list_button_title_library": "Kodeliste fra biblioteket",
+  "ux_editor.modal_properties_code_list_button_title_manual": "Kodeliste på komponenten",
   "ux_editor.modal_properties_code_list_custom_list": "Egendefinert kodeliste",
   "ux_editor.modal_properties_code_list_filename_error": "Filnavnet er ugyldig. Du kan bruke tall, understrek, punktum, bindestrek, og store/små bokstaver fra det norske alfabetet. Filnavnet må starte med en engelsk bokstav.",
   "ux_editor.modal_properties_code_list_helper": "Velg kodeliste",
@@ -1534,7 +1538,6 @@
   "ux_editor.modal_properties_code_list_read_more_dynamic": "<0 href=\"{{optionsDocs}}\" >Les mer om dynamiske kodelister</0>",
   "ux_editor.modal_properties_code_list_read_more_static": "<0 href=\"{{optionsDocs}}\" >Les mer om statiske kodelister</0>",
   "ux_editor.modal_properties_code_list_spinner_title": "Laster inn kodelister",
-  "ux_editor.modal_properties_code_list_upload": "Last opp din egen kodeliste",
   "ux_editor.modal_properties_code_list_upload_duplicate_error": "Opplastning feilet. Du prøvde å laste opp en fil som finnes fra før.",
   "ux_editor.modal_properties_code_list_upload_generic_error": "Opplastning feilet. Filen du lastet opp er ikke satt opp riktig.",
   "ux_editor.modal_properties_code_list_upload_success": "Filen ble lastet opp.",
@@ -1681,11 +1684,14 @@
   "ux_editor.options.code_list_referenceId.description": "Her kan du legge til en referanse-ID til en dynamisk kodeliste som er satt opp i koden.",
   "ux_editor.options.code_list_referenceId.description_details": "Du bruker dynamiske kodelister for å tilpasse alternativer for brukerne. Det kan for eksempel være tilpasninger ut fra geografisk plassering, eller valg brukeren gjør tidligere i skjemaet.",
   "ux_editor.options.multiple": "{{value}} alternativer",
+  "ux_editor.options.option_edit_text": "Rediger kodeliste",
+  "ux_editor.options.option_remove_text": "Fjern valgt kodeliste",
   "ux_editor.options.section_heading": "Valg for kodelister",
   "ux_editor.options.single": "{{value}} alternativ",
   "ux_editor.options.tab_code_list": "Velg kodeliste",
   "ux_editor.options.tab_manual": "Sett opp egne alternativer",
   "ux_editor.options.tab_referenceId": "Angi referanse-ID",
+  "ux_editor.options.upload_title": "Last opp din egen",
   "ux_editor.page": "Side",
   "ux_editor.page_config_pdf_abort_converting_page_to_pdf": "Avbryt å gjøre om siden til PDF",
   "ux_editor.page_config_pdf_card_heading": "Siden skal være en PDF",

frontend/libs/studio-components/src/components/StudioCodelistEditor/StudioCodeListEditor.test.tsx

@@ -119,7 +119,8 @@ describe('StudioCodeListEditor', () => {
     const labelInput = screen.getByRole('textbox', { name: texts.itemLabel(1) });
     const newValue = 'new text';
     await user.type(labelInput, newValue);
-    expect(onChange).toHaveBeenCalledTimes(newValue.length);
+    await user.tab();
+    expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenLastCalledWith([
       { ...codeList[0], label: newValue },
       codeList[1],
@@ -133,7 +134,8 @@ describe('StudioCodeListEditor', () => {
     const valueInput = screen.getByRole('textbox', { name: texts.itemValue(1) });
     const newValue = 'new text';
     await user.type(valueInput, newValue);
-    expect(onChange).toHaveBeenCalledTimes(newValue.length);
+    await user.tab();
+    expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenLastCalledWith([
       { ...codeList[0], value: newValue },
       codeList[1],
@@ -147,7 +149,8 @@ describe('StudioCodeListEditor', () => {
     const descriptionInput = screen.getByRole('textbox', { name: texts.itemDescription(1) });
     const newValue = 'new text';
     await user.type(descriptionInput, newValue);
-    expect(onChange).toHaveBeenCalledTimes(newValue.length);
+    await user.tab();
+    expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenLastCalledWith([
       { ...codeList[0], description: newValue },
       codeList[1],
@@ -161,7 +164,8 @@ describe('StudioCodeListEditor', () => {
     const helpTextInput = screen.getByRole('textbox', { name: texts.itemHelpText(1) });
     const newValue = 'new text';
     await user.type(helpTextInput, newValue);
-    expect(onChange).toHaveBeenCalledTimes(newValue.length);
+    await user.tab();
+    expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenLastCalledWith([
       { ...codeList[0], helpText: newValue },
       codeList[1],
@@ -263,7 +267,8 @@ describe('StudioCodeListEditor', () => {
     const validValueInput = screen.getByRole('textbox', { name: texts.itemValue(3) });
     const newValue = 'new value';
     await user.type(validValueInput, newValue);
-    expect(onInvalid).toHaveBeenCalledTimes(newValue.length);
+    await user.tab();
+    expect(onInvalid).toHaveBeenCalledTimes(1);
   });
 
   it('Does not trigger onInvalid if an invalid code list is changed to a valid state', async () => {

frontend/libs/studio-components/src/components/StudioCodelistEditor/StudioCodeListEditor.tsx

@@ -162,7 +162,7 @@ function CodeLists({
           item={item}
           key={index}
           number={index + 1}
-          onChange={(newItem) => handleChange(index, newItem)}
+          onBlur={(newItem) => handleChange(index, newItem)}
           onDeleteButtonClick={() => handleDeleteButtonClick(index)}
         />
       ))}

frontend/libs/studio-components/src/components/StudioCodelistEditor/StudioCodeListEditorRow/StudioCodeListEditorRow.tsx

@@ -13,49 +13,49 @@ type StudioCodeListEditorRowProps = {
   error: ValueError | null;
   item: CodeListItem;
   number: number;
-  onChange: (newItem: CodeListItem) => void;
+  onBlur: (newItem: CodeListItem) => void;
   onDeleteButtonClick: () => void;
 };
 
 export function StudioCodeListEditorRow({
   error,
   item,
   number,
-  onChange,
+  onBlur,
   onDeleteButtonClick,
 }: StudioCodeListEditorRowProps) {
   const { texts } = useStudioCodeListEditorContext();
 
   const handleLabelChange = useCallback(
     (label: string) => {
       const updatedItem = changeLabel(item, label);
-      onChange(updatedItem);
+      onBlur(updatedItem);
     },
-    [item, onChange],
+    [item, onBlur],
   );
 
   const handleDescriptionChange = useCallback(
     (description: string) => {
       const updatedItem = changeDescription(item, description);
-      onChange(updatedItem);
+      onBlur(updatedItem);
     },
-    [item, onChange],
+    [item, onBlur],
   );
 
   const handleValueChange = useCallback(
     (value: string) => {
       const updatedItem = changeValue(item, value);
-      onChange(updatedItem);
+      onBlur(updatedItem);
     },
-    [item, onChange],
+    [item, onBlur],
   );
 
   const handleHelpTextChange = useCallback(
     (helpText: string) => {
       const updatedItem = changeHelpText(item, helpText);
-      onChange(updatedItem);
+      onBlur(updatedItem);
     },
-    [item, onChange],
+    [item, onBlur],
   );
 
   return (
@@ -64,22 +64,22 @@ export function StudioCodeListEditorRow({
         autoComplete='off'
         error={error && texts.valueErrors[error]}
         label={texts.itemValue(number)}
-        onChange={handleValueChange}
+        onBlur={handleValueChange}
         value={item.value}
       />
       <TextfieldCell
         label={texts.itemLabel(number)}
-        onChange={handleLabelChange}
+        onBlur={handleLabelChange}
         value={item.label}
       />
       <TextfieldCell
         label={texts.itemDescription(number)}
-        onChange={handleDescriptionChange}
+        onBlur={handleDescriptionChange}
         value={item.description}
       />
       <TextfieldCell
         label={texts.itemHelpText(number)}
-        onChange={handleHelpTextChange}
+        onBlur={handleHelpTextChange}
         value={item.helpText}
       />
       <DeleteButtonCell onClick={onDeleteButtonClick} number={number} />
@@ -90,23 +90,23 @@ export function StudioCodeListEditorRow({
 type TextfieldCellProps = {
   error?: string;
   label: string;
-  onChange: (newString: string) => void;
+  onBlur: (newString: string) => void;
   value: CodeListItemValue;
   autoComplete?: HTMLInputAutoCompleteAttribute;
 };
 
-function TextfieldCell({ error, label, value, onChange, autoComplete }: TextfieldCellProps) {
+function TextfieldCell({ error, label, value, onBlur, autoComplete }: TextfieldCellProps) {
   const ref = useRef<HTMLInputElement>(null);
 
   useEffect((): void => {
     ref.current?.setCustomValidity(error || '');
   }, [error]);
 
-  const handleChange = useCallback(
+  const handleBlur = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>): void => {
-      onChange(event.target.value);
+      onBlur(event.target.value);
     },
-    [onChange],
+    [onBlur],
   );
 
   const handleFocus = useCallback((event: FocusEvent<HTMLInputElement>): void => {
@@ -118,7 +118,7 @@ function TextfieldCell({ error, label, value, onChange, autoComplete }: Textfiel
       aria-label={label}
       autoComplete={autoComplete}
       className={classes.textfieldCell}
-      onChange={handleChange}
+      onBlur={handleBlur}
       onFocus={handleFocus}
       ref={ref}
       value={(value as string) ?? ''}