fix: Disable Select/Deselect all buttons when ui.dropdown is disabled #…

…1821 (#1822)
h2oai · Feb 2, 2023 · fee996a · fee996a
1 parent 494240b
commit fee996a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/ui/src/dropdown.test.tsx b/ui/src/dropdown.test.tsx
@@ -128,6 +128,16 @@ describe('Dropdown.tsx', () => {
       expect(wave.args[name]).toMatchObject(['A', 'B', 'D'])
     })
 
+    it('Do not select all options on Select all - dropdown disabled', () => {
+      const { getByText } = render(<XDropdown model={{ ...defaultProps, values: ['A'], disabled: true }} />)
+
+      expect(wave.args[name]).toMatchObject(['A'])
+
+      fireEvent.click(getByText('Select All'))
+
+      expect(wave.args[name]).toMatchObject(['A'])
+    })
+
     it('Calls sync on Select all - trigger enabled', () => {
       const { getByText } = render(<XDropdown model={{ ...defaultProps, values: ['A'], trigger: true }} />)
 
@@ -146,6 +156,16 @@ describe('Dropdown.tsx', () => {
       expect(pushMock).toHaveBeenCalled()
     })
 
+    it('Do not deselect all options on Deselect all - dropdown disabled', () => {
+      const { getByText } = render(<XDropdown model={{ ...defaultProps, values: ['A'], disabled: true }} />)
+
+      expect(wave.args[name]).toMatchObject(['A'])
+
+      fireEvent.click(getByText('Deselect All'))
+
+      expect(wave.args[name]).toMatchObject(['A'])
+    })
+
     describe('Prop changes', () => {
       describe('Single-valued', () => {
         it('Displays new value when "value" prop is updated', () => {
@@ -365,7 +385,7 @@ describe('Dropdown.tsx', () => {
 
     it('Shows correct selection in the dropdown dialog - init multi values', () => {
       const { getByTestId, getAllByRole } = render(<XDropdown model={{ ...dialogProps, values: ['1', '2'] }} />)
-      
+
       fireEvent.click(getByTestId(name))
       expect(getAllByRole('checkbox')[1]).toBeChecked()
       expect(getAllByRole('checkbox')[2]).toBeChecked()

diff --git a/ui/src/dropdown.tsx b/ui/src/dropdown.tsx
@@ -160,7 +160,7 @@ const
           isMultivalued &&
           <div>
             <Fluent.Text variant='small'>
-              <Fluent.Link onClick={selectAll}>Select All</Fluent.Link> | <Fluent.Link onClick={deselectAll}>Deselect All</Fluent.Link>
+              <Fluent.Link disabled={disabled} onClick={selectAll}>Select All</Fluent.Link> | <Fluent.Link disabled={disabled} onClick={deselectAll}>Deselect All</Fluent.Link>
             </Fluent.Text>
           </div>
         }