fix: Account for invalid text resource ids in code list editor (#14797)

Co-authored-by: William Thorenfeldt <[email protected]>

frontend/libs/studio-components/src/components/StudioTextResourcePicker/StudioTextResourcePicker.test.tsx

@@ -87,6 +87,12 @@ describe('StudioTextResourcePicker', () => {
     expect(getCombobox()).toHaveValue('');
   });
 
+  it('Renders with no text resource option as selected when the given id does not exist', () => {
+    const nonExistentId = 'non-existent-id';
+    renderTextResourcePicker({ value: nonExistentId });
+    expect(getCombobox()).toHaveValue('');
+  });
+
   it('Calls the onValueChange callback with null when the user selects the unset option', async () => {
     const user = userEvent.setup();
     const value = textResources[arbitraryTextResourceIndex].id;

frontend/libs/studio-components/src/components/StudioTextResourcePicker/StudioTextResourcePicker.tsx

@@ -1,10 +1,11 @@
 import type { ReactElement } from 'react';
-import React, { forwardRef, useCallback } from 'react';
+import React, { useMemo, forwardRef, useCallback } from 'react';
 import type { TextResource } from '../../types/TextResource';
 import type { StudioComboboxProps } from '../StudioCombobox';
 import { StudioCombobox } from '../StudioCombobox';
 import type { Override } from '../../types/Override';
 import classes from './StudioTextResourcePicker.module.css';
+import { retrieveSelectedValues } from './utils';
 
 export type StudioTextResourcePickerProps = Override<
   {
@@ -37,11 +38,16 @@ export const StudioTextResourcePicker = forwardRef<HTMLInputElement, StudioTextR
       [onValueChange],
     );
 
+    const selectedValues: string[] = useMemo(
+      () => retrieveSelectedValues(textResources, value),
+      [textResources, value],
+    );
+
     return (
       <StudioCombobox
         hideLabel
         onValueChange={handleValueChange}
-        value={value ? [value] : []}
+        value={selectedValues}
         {...rest}
         ref={ref}
       >

frontend/libs/studio-components/src/components/StudioTextResourcePicker/utils.test.ts

@@ -0,0 +1,23 @@
+import { textResourcesMock } from '../../test-data/textResourcesMock';
+import { retrieveSelectedValues } from './utils';
+
+describe('utils', () => {
+  describe('retrieveSelectedValues', () => {
+    it('Returns an array with the value when the text resource exists', () => {
+      const textResources = textResourcesMock;
+      const arbitraryTextResourceIndex = 129;
+      const textResource = textResources[arbitraryTextResourceIndex];
+      expect(retrieveSelectedValues(textResources, textResource.id)).toEqual([textResource.id]);
+    });
+
+    it('Returns an empty array when the text resource does not exist', () => {
+      const textResources = textResourcesMock;
+      const idThatDoesNotExist = 'does-not-exist';
+      expect(retrieveSelectedValues(textResources, idThatDoesNotExist)).toEqual([]);
+    });
+
+    it.each([null, undefined])('Returns an empty array when the value is %s', (value) => {
+      expect(retrieveSelectedValues(textResourcesMock, value)).toEqual([]);
+    });
+  });
+});

frontend/libs/studio-components/src/components/StudioTextResourcePicker/utils.ts

@@ -0,0 +1,9 @@
+import type { TextResource } from '../../types/TextResource';
+
+export function retrieveSelectedValues(textResources: TextResource[], id?: string): string[] {
+  return doesTextResourceExist(textResources, id) ? [id] : [];
+}
+
+function doesTextResourceExist(textResources: TextResource[], id?: string): boolean {
+  return textResources.some((textResource) => textResource.id === id);
+}