feat: Allow dynamic value change for picker #1154 (#2099)

ui/src/picker.test.tsx

@@ -18,6 +18,7 @@ import { Picker, XPicker } from './picker'
 import { wave } from './ui'
 
 const name = 'picker'
+const altName = 'something else'
 let pickerProps: Picker
 
 const typeToInput = (input: HTMLInputElement, value: string) => {
@@ -30,7 +31,7 @@ describe('Picker.tsx', () => {
   beforeEach(() => {
     pickerProps = {
       name,
-      choices: [{ name }, { name: 'something else' }]
+      choices: [{ name }, { name: altName }]
     }
     wave.args[name] = null
   })
@@ -50,6 +51,28 @@ describe('Picker.tsx', () => {
     expect(wave.args[name]).toMatchObject([name])
   })
 
+  it('Set args when value is updated to different value', () => {
+    const { rerender } = render(<XPicker model={pickerProps} />)
+    expect(wave.args[name]).toBe(null)
+    rerender(<XPicker model={{ ...pickerProps, values: [name] }} />)
+    expect(wave.args[name]).toMatchObject([name])
+  })
+
+  it('Set args when value is updated to initial value', () => {
+    const { queryAllByRole, getByRole, rerender } = render(<XPicker model={{ ...pickerProps, values: [name] }} />)
+    expect(wave.args[name]).toMatchObject([name])
+
+    expect(queryAllByRole('listitem')).toHaveLength(1)
+    const input = (getByRole('combobox') as HTMLInputElement)
+
+    typeToInput(input, altName)
+    fireEvent.click(getByRole('option'))
+    expect(queryAllByRole('listitem')).toHaveLength(2)
+
+    rerender(<XPicker model={{ ...pickerProps, values: [name] }} />)
+    expect(wave.args[name]).toMatchObject([name])
+  })
+
   it('Renders label if specified', () => {
     const { getByText } = render(<XPicker model={{ ...pickerProps, label: name }} />)
     expect(getByText(name)).toBeInTheDocument()
@@ -92,6 +115,13 @@ describe('Picker.tsx', () => {
     expect(queryAllByRole('listitem')).toHaveLength(0)
   })
 
+  it('Shows correct values - value updated', () => {
+    const { rerender, queryAllByRole } = render(<XPicker model={pickerProps} />)
+    expect(queryAllByRole('listitem')).toHaveLength(0)
+    rerender(<XPicker model={{ ...pickerProps, values: [name] }} />)
+    expect(queryAllByRole('listitem')).toHaveLength(1)
+  })
+
   it('Does not render label if not specified', () => {
     const { queryByText } = render(<XPicker model={pickerProps} />)
     expect(queryByText(name)).not.toBeInTheDocument()

ui/src/picker.tsx

@@ -69,8 +69,10 @@ export const XPicker = ({ model: m }: { model: Picker }) => {
     },
     onEmptyResolveSuggestions = () => tags
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  React.useEffect(() => { wave.args[m.name] = m.values || null }, [])
+  React.useEffect(() => {
+    wave.args[m.name] = m.values || null
+    setSelectedTags(tags.filter(({ key }) => m.values?.includes(key as S)))
+  }, [m.name, m.values, tags])
 
   return (
     <>