feat: Dynamic choices change for single/multi-valued dialog dropdown #…

…1154 (#2104)
h2oai · Jan 15, 2024 · 5760db0 · 5760db0
1 parent 29142a1
commit 5760db0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 14 deletions.
diff --git a/ui/src/dropdown.test.tsx b/ui/src/dropdown.test.tsx
@@ -708,6 +708,28 @@ describe('Dropdown.tsx', () => {
           rerender(<XDropdown model={{ ...dialogProps, value: '1' }} />)
           expect(wave.args[name]).toEqual('1')
         })
+
+        it('Updates choices of single-valued dialog dropdown', () => {
+          const
+            choices = [{ name: 'A', label: 'Choice A' }],
+            updatedChoices = [
+              { name: 'D', label: 'Choice D' },
+              { name: 'E', label: 'Choice E' },
+              { name: 'F', label: 'Choice F' },
+            ],
+            { getByTestId, getByText, queryByText, rerender } = render(<XDropdown model={{ ...dialogProps, choices }} />)
+
+          fireEvent.click(getByTestId(name))
+          expect(getByText('Choice A')).toBeInTheDocument()
+
+          rerender(<XDropdown model={{ ...dialogProps, choices: updatedChoices }} />)
+          fireEvent.click(getByTestId(name))
+
+          expect(queryByText('Choice A')).not.toBeInTheDocument()
+          expect(getByText('Choice D')).toBeInTheDocument()
+          expect(getByText('Choice E')).toBeInTheDocument()
+          expect(getByText('Choice F')).toBeInTheDocument()
+        })
       })
 
       describe('Multi-valued', () => {
@@ -804,6 +826,28 @@ describe('Dropdown.tsx', () => {
           expect(checkboxes[0]).toBeChecked()
           expect(checkboxes[1]).toBeChecked()
         })
+
+        it('Updates choices of multi-valued dialog dropdown', () => {
+          const
+            choices = [{ name: 'A', label: 'Choice A' }],
+            updatedChoices = [
+              { name: 'D', label: 'Choice D' },
+              { name: 'E', label: 'Choice E' },
+              { name: 'F', label: 'Choice F' },
+            ],
+            { getByTestId, getByText, queryByText, rerender } = render(<XDropdown model={{ ...dialogProps, choices, values: ['A'] }} />)
+
+          fireEvent.click(getByTestId(name))
+          expect(getByText('Choice A')).toBeInTheDocument()
+
+          rerender(<XDropdown model={{ ...dialogProps, choices: updatedChoices, values: ['D'] }} />)
+          fireEvent.click(getByTestId(name))
+
+          expect(queryByText('Choice A')).not.toBeInTheDocument()
+          expect(getByText('Choice D')).toBeInTheDocument()
+          expect(getByText('Choice E')).toBeInTheDocument()
+          expect(getByText('Choice F')).toBeInTheDocument()
+        })
       })
     })
   })

diff --git a/ui/src/dropdown.tsx b/ui/src/dropdown.tsx
@@ -168,11 +168,11 @@ const
   ROW_HEIGHT = 44,
   PAGE_SIZE = 40,
   getPageSpecification = () => ({ itemCount: PAGE_SIZE, height: ROW_HEIGHT * PAGE_SIZE } as Fluent.IPageSpecification),
+  choicesToItems = (choices: Choice[], v?: S | S[]) => choices.map(({ name, label, disabled = false }, idx) =>
+    ({ name, text: label || name, idx, checked: Array.isArray(v) ? v.includes(name) : v === name, show: true, disabled })),
   useItems = (choices: Choice[], v?: S | S[]) => {
-    const
-      [items, setItems] = React.useState<DropdownItem[]>(choices.map(({ name, label, disabled = false }, idx) =>
-        ({ name, text: label || name, idx, checked: Array.isArray(v) ? v.includes(name) : v === name, show: true, disabled }))),
-      onSearchChange = (_e?: React.ChangeEvent<HTMLInputElement>, newVal = '') => setItems(items => items.map(i => ({ ...i, show: fuzzysearch(i.text, newVal) })))
+    const [items, setItems] = React.useState<DropdownItem[]>(choicesToItems(choices, v))
+    const onSearchChange = (_e?: React.ChangeEvent<HTMLInputElement>, newVal = '') => setItems(items => items.map(i => ({ ...i, show: fuzzysearch(i.text, newVal) })))
 
     return [items, setItems, onSearchChange] as const
   },
@@ -206,11 +206,9 @@ const
       }
 
     React.useEffect(() => {
-      if (model.value !== undefined) {
-        wave.args[name] = model.value ?? null
-        setItems(items => items.map(i => ({ ...i, checked: model.value === i.name })))
-      }
-    }, [name, model.value, setItems])
+      wave.args[name] = model.value ?? null
+      setItems(choicesToItems(choices, model.value))
+    }, [name, model.value, choices, setItems])
 
     return (
       <>
@@ -274,11 +272,9 @@ const
       }
 
     React.useEffect(() => {
-      if (values) {
-        wave.args[name] = values
-        setItems(items => items.map(i => ({ ...i, checked: values.includes(i.name) })))
-      }
-    }, [name, values, setItems])
+      wave.args[name] = values
+      setItems(choicesToItems(choices, values))
+    }, [name, values, choices, setItems])
 
     return (
       <>