fix: Map type Variables selector shows keys, not values

CHANGELOG.md

@@ -8,6 +8,7 @@
 1. [15295](https://github.com/influxdata/influxdb/pull/15295): Ensures users are created with an active status
 1. [15306](https://github.com/influxdata/influxdb/pull/15306): Added missing string values for CacheStatus type
 1. [15348](https://github.com/influxdata/influxdb/pull/15348): Disable saving for threshold check if no threshold selected
+1. [15354](https://github.com/influxdata/influxdb/pull/15354): Query variable selector shows variable keys, not values
 
 ## v2.0.0-alpha.18 [2019-09-26]
 

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

@@ -74,9 +74,11 @@ describe('Dashboards.Components.VariablesControlBar.VariableDropdown', () => {
 
       const dropdownButton = getByTestId('variable-dropdown--button')
       fireEvent.click(dropdownButton)
-      const dropdownItems = getAllByTestId('variable-dropdown--item')
+      const dropdownItems = getAllByTestId('variable-dropdown--item').map(
+        node => node.id
+      )
 
-      expect(dropdownItems.length).toBe(Object.keys(values).length)
+      expect(dropdownItems).toEqual(Object.keys(values))
     })
   })
 })

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

@@ -73,7 +73,7 @@ class VariableDropdown extends PureComponent<Props> {
             >
               {dropdownValues.map(({name}) => (
                 /*
-                Use key as value since they are unique otherwise 
+                Use key as value since they are unique otherwise
                 multiple selection appear in the dropdown
               */
                 <Dropdown.Item
@@ -95,12 +95,9 @@ class VariableDropdown extends PureComponent<Props> {
   }
 
   private handleSelect = (selectedKey: string) => {
-    const {dashboardID, variableID, onSelectValue, values} = this.props
+    const {dashboardID, variableID, onSelectValue} = this.props
 
-    const selection = values.find(v => v.name === selectedKey)
-    const selectedValue = !!selection ? selection.value : ''
-
-    onSelectValue(dashboardID, variableID, selectedValue)
+    onSelectValue(dashboardID, variableID, selectedKey)
   }
 }
 

ui/src/dashboards/selectors/index.ts

@@ -72,14 +72,14 @@ export const getVariableValuesForDropdown = (
       const mapValues = getArgumentValuesForVariable(state, variableID) as {
         [key: string]: string
       }
+
       const list = Object.entries(mapValues).map(([name, value]) => ({
         name,
         value,
       }))
-      const selection = list.find(({value}) => value === selectedValue)
 
       return {
-        selectedKey: get(selection, 'name', ''),
+        selectedKey: selectedValue,
         list,
       }
     }

ui/src/timeMachine/components/variableToolbar/VariableTooltipContents.test.tsx

@@ -0,0 +1,83 @@
+// Libraries
+import React from 'react'
+import {fireEvent} from 'react-testing-library'
+
+// Components
+import VariableTooltipContents from 'src/timeMachine/components/variableToolbar/VariableTooltipContents'
+
+// Utils
+import {renderWithRedux} from 'src/mockState'
+import {AppState} from 'src/types'
+
+const variableValues = {
+  key1: 'value1',
+  key2: 'value2',
+}
+
+const setInitialState = (state: AppState) => {
+  return {
+    ...state,
+    orgs: [
+      {
+        id: '2e9f65b990c28374',
+      },
+    ],
+    variables: {
+      status: 'Done',
+      variables: {
+        '04960e76e5afe000': {
+          variable: {
+            id: '04960e76e5afe000',
+            orgID: '2e9f65b990c28374',
+            name: 'example_map',
+            description: '',
+            selected: null,
+            arguments: {
+              type: 'map',
+              values: variableValues,
+            },
+            createdAt: '2019-10-07T14:59:58.102045-07:00',
+            updatedAt: '2019-10-07T14:59:58.102045-07:00',
+            labels: [],
+            links: {
+              self: '/api/v2/variables/04960e76e5afe000',
+              labels: '/api/v2/variables/04960e76e5afe000/labels',
+              org: '/api/v2/orgs/2e9f65b990c28374',
+            },
+          },
+          status: 'Done',
+        },
+      },
+      values: {
+        de: {
+          status: 'Done',
+          values: {
+            '04960e76e5afe000': {
+              valueType: 'string',
+              values: Object.keys(variableValues),
+              selectedValue: 'key1',
+            },
+          },
+          order: ['04960e76e5afe000'],
+        },
+      },
+    },
+  }
+}
+
+describe("Time Machine's variable dropdown", () => {
+  describe('rendering map type variables', () => {
+    it("renders the variables' keys, rather than their values", async () => {
+      const {getByTestId, getByLabelText, getByText} = renderWithRedux(
+        <VariableTooltipContents variableID="04960e76e5afe000" />,
+        setInitialState
+      )
+
+      fireEvent.click(getByLabelText('Value'))
+      fireEvent.click(getByTestId('dropdown--button'))
+      Object.keys(variableValues).forEach(variableKey => {
+        expect(getByText(variableKey)).toBeTruthy()
+      })
+    })
+  })
+})

ui/src/variables/mocks/index.ts

@@ -19,3 +19,19 @@ export const createVariable = (
     },
   },
 })
+
+export const createMapVariable = (
+  name: string,
+  map: {[key: string]: string} = {},
+  selected?: string
+): Variable => ({
+  name,
+  id: name,
+  orgID: 'howdy',
+  selected: selected ? [selected] : [],
+  labels: [],
+  arguments: {
+    type: 'map',
+    values: {...map},
+  },
+})

ui/src/variables/utils/hydrateVars.test.ts

@@ -3,7 +3,7 @@ import {ValueFetcher} from 'src/variables/utils/ValueFetcher'
 import {hydrateVars} from 'src/variables/utils/hydrateVars'
 
 // Mocks
-import {createVariable} from 'src/variables/mocks'
+import {createMapVariable, createVariable} from 'src/variables/mocks'
 
 // Types
 import {CancellationError} from 'src/types/promises'
@@ -278,4 +278,35 @@ describe('hydrate vars', () => {
 
     cancel()
   })
+
+  test('returns the keys (not the values) of map types', async () => {
+    const firstVariable = createMapVariable('0495e1b2c71fd000', {
+      key1: 'value1',
+      key2: 'value2',
+    })
+    const secondVariable = createMapVariable('04960a2028efe000', {
+      key3: 'value3',
+      key4: 'value4',
+    })
+
+    const expected = {
+      '0495e1b2c71fd000': {
+        valueType: 'string',
+        values: ['key1', 'key2'],
+        selectedValue: 'key2',
+      },
+    }
+
+    const actual = await hydrateVars(
+      [firstVariable],
+      [firstVariable, secondVariable],
+      {
+        url: '',
+        orgID: '',
+        selections: {'0495e1b2c71fd000': 'key2'},
+      }
+    ).promise
+
+    expect(actual).toEqual(expected)
+  })
 })

ui/src/variables/utils/hydrateVars.ts

@@ -161,7 +161,7 @@ const mapVariableValues = (
   prevSelection: string,
   defaultSelection: string
 ): VariableValues => {
-  const values: string[] = Object.values(variable.arguments.values)
+  const values: string[] = Object.keys(variable.arguments.values)
 
   return {
     valueType: 'string',
@@ -219,7 +219,7 @@ export const collectDescendants = (
 /*
   Hydrate the values of a single node in the graph.
 
-  This assumes that every descendant of this node has already been hydrated. 
+  This assumes that every descendant of this node has already been hydrated.
 */
 const hydrateVarsHelper = async (
   node: VariableNode,
@@ -360,7 +360,7 @@ const extractResult = (graph: VariableNode[]): VariableValuesByID => {
   1. Construct a graph that represents the dependency structure between
      variables. A variable `a` depends on variable `b` if the query for `a`
      uses the variable `b`.
-     
+
      Each node in the graph has a hydration status: it it either `NotStarted`,
      `Loading` (values are being fetched), `Error` (values failed to fetch or
      cannot be fetched), or `Done` (values have been fetched successfully).