From 04df2815f25bdadcc65a93f45a41592eb54fd78c Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Fri, 4 Aug 2023 10:59:59 +0200
Subject: [PATCH] feat: Allow dynamic value change for checklist #1154 (#2102)

---
 ui/src/checklist.test.tsx | 29 +++++++++++++++++++++++++++++
 ui/src/checklist.tsx      |  3 +--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/ui/src/checklist.test.tsx b/ui/src/checklist.test.tsx
index 1cd7619323..e57e1155c2 100644
--- a/ui/src/checklist.test.tsx
+++ b/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'))
diff --git a/ui/src/checklist.tsx b/ui/src/checklist.tsx
index 1051fb326d..957e29a808 100644
--- a/ui/src/checklist.tsx
+++ b/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}>