fix(ui): ensure map type variables can get selected key

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
 

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(
+        <VariableDropdown
+          variableID="03cbdc8a53a63000"
+          dashboardID="03c8070355fbd000"
+        />,
+        setInitialState
+      )
+
+      const dropdownClosed = getByTestId('variable-dropdown')
+      fireEvent.click(dropdownClosed)
+      const dropdownItems = getAllByTestId(/dropdown--item/)
+
+      expect(dropdownItems.length).toBe(Object.keys(values).length)
+    })
+  })
+})

ui/src/dashboards/components/variablesControlBar/VariableDropdown.tsx

@@ -47,9 +47,10 @@ class VariableDropdown extends PureComponent<Props> {
           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}) => (
             /*

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