feat: Allow dynamic value change for checklist #1154 (#2102)

ui/src/checklist.test.tsx

@@ -46,6 +46,35 @@ describe('Checklist.tsx', () => {
     expect(wave.args[name]).toMatchObject(['Choice1', 'Choice2', 'Choice3'])
   })
 
+  it('Set args when value is updated to different value', () => {
+    const { rerender } = render(<XChecklist model={checklistProps} />)
+    expect(wave.args[name]).toMatchObject([])
+    rerender(<XChecklist model={{ ...checklistProps, values: ['Choice1'] }} />)
+    expect(wave.args[name]).toMatchObject(['Choice1'])
+  })
+
+  it('Set args when value is updated to initial value', () => {
+    const { getByText, rerender } = render(<XChecklist model={{ ...checklistProps, values: ['Choice1'] }} />)
+    expect(wave.args[name]).toMatchObject(['Choice1'])
+
+    fireEvent.click(getByText('Choice2').parentElement!)
+    expect(wave.args[name]).toMatchObject(['Choice1', 'Choice2'])
+
+    rerender(<XChecklist model={{ ...checklistProps, values: ['Choice1'] }} />)
+    expect(wave.args[name]).toMatchObject(['Choice1'])
+  })
+
+  it('Updates choices', () => {
+    const { rerender, getByText } = render(<XChecklist model={checklistProps} />)
+    expect(getByText('Choice1')).toBeInTheDocument()
+    expect(getByText('Choice2')).toBeInTheDocument()
+    expect(getByText('Choice3')).toBeInTheDocument()
+    rerender(<XChecklist model={{ ...checklistProps, choices: [{ name: 'Choice3' }, { name: 'Choice4' }] }} />)
+
+    expect(getByText('Choice3')).toBeInTheDocument()
+    expect(getByText('Choice4')).toBeInTheDocument()
+  })
+
   it('Sets all choices as args after select all', () => {
     const { getByText } = render(<XChecklist model={checklistProps} />)
     fireEvent.click(getByText('Select All'))

ui/src/checklist.tsx

@@ -104,8 +104,7 @@ export const
           styles={{ root: { marginBottom: 4 }, checkmark: { display: 'flex' } }} // Fix: Center the checkmark in the checkbox.
         />
       ))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => { wave.args[m.name] = m.values || [] }, [])
+    React.useEffect(() => { wave.args[m.name] = m.values || [] }, [m.name, m.values])
     React.useEffect(() => { setChoices(getMappedChoices()) }, [getMappedChoices, m.choices])
     return (
       <div data-test={m.name}>