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,
}
}