diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d1cea5be4c..4ee1db816b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ### Bug Fixes 1. [13753](https://github.com/influxdata/influxdb/pull/13753): Removed hardcoded bucket for Getting Started with Flux dashboard +1. [13783](https://github.com/influxdata/influxdb/pull/13783): Ensure map type variables allow for selecting values ### UI Improvements diff --git a/ui/src/dashboards/components/variablesControlBar/VariableDropdown.test.tsx b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.test.tsx new file mode 100644 index 00000000000..7747bcdffd1 --- /dev/null +++ b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.test.tsx @@ -0,0 +1,82 @@ +// Libraries +import React from 'react' +import {fireEvent} from 'react-testing-library' + +// Components +import VariableDropdown from 'src/dashboards/components/variablesControlBar/VariableDropdown' + +// Utils +import {renderWithRedux} from 'src/mockState' +import {AppState} from 'src/types' + +const values = { + def: 'defbuck', + def2: 'defbuck', + foo: 'foobuck', + goo: 'goobuck', + new: 'newBuck', +} + +const setInitialState = (state: AppState) => { + return { + ...state, + orgs: [ + { + id: '03cbdc8a53a63000', + }, + ], + variables: { + status: 'Done', + variables: { + '03cbdc8a53a63000': { + variable: { + id: '03cbdc8a53a63000', + orgID: '03c02466515c1000', + name: 'map_buckets', + description: '', + selected: null, + arguments: { + type: 'map', + values, + }, + labels: [], + }, + status: 'Done', + }, + }, + values: { + '03c8070355fbd000': { + status: 'Done', + values: { + '03cbdc8a53a63000': { + valueType: 'string', + values: Object.values(values), + selectedValue: 'defbuck', + }, + }, + order: ['03cbdc8a53a63000'], + }, + }, + }, + } +} + +describe('Dashboards.Components.VariablesControlBar.VariableDropdown', () => { + describe('if map type', () => { + it('renders dropdown with keys as dropdown items', () => { + const {getByTestId, getAllByTestId} = renderWithRedux( + , + setInitialState + ) + + const dropdownClosed = getByTestId('variable-dropdown') + fireEvent.click(dropdownClosed) + const dropdownItems = getAllByTestId(/dropdown--item/) + + expect(dropdownItems.length).toBe(Object.keys(values).length) + }) + }) +}) diff --git a/ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx index 4ca2cf8d99e..c8cfe667061 100644 --- a/ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx +++ b/ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx @@ -47,9 +47,10 @@ class VariableDropdown extends PureComponent { selectedID={selectedKey} onChange={this.handleSelect} widthPixels={140} - titleText="No Values" + titleText={selectedKey || 'No Values'} customClass="variable-dropdown--dropdown" menuColor={DropdownMenuColors.Amethyst} + buttonTestID="variable-dropdown" > {dropdownValues.map(({name}) => ( /* diff --git a/ui/src/dashboards/selectors/index.ts b/ui/src/dashboards/selectors/index.ts index 111f0f1270e..4520bd399e5 100644 --- a/ui/src/dashboards/selectors/index.ts +++ b/ui/src/dashboards/selectors/index.ts @@ -58,7 +58,7 @@ export const getVariableValuesForDropdown = ( const selection = list.find(({value}) => value === selectedValue) return { - selectedKey: selection[0], + selectedKey: get(selection, 'name', ''), list, } }