Introduce Template Control Dropdown component

cleanup

ui/src/dashboards/components/TemplateControlDropdown.tsx

@@ -0,0 +1,50 @@
+import React, {SFC} from 'react'
+
+import Dropdown from 'src/shared/components/Dropdown'
+import {calculateDropdownWidth} from 'src/dashboards/constants/templateControlBar'
+
+interface TemplateValue {
+  value: string
+  selected?: boolean
+}
+
+interface Template {
+  id: string
+  tempVar: string
+  values: TemplateValue[]
+}
+
+interface Props {
+  template: Template
+  onSelectTemplate: (id: string) => void
+}
+
+const TemplateControlDropdown: SFC<Props> = ({template, onSelectTemplate}) => {
+  const dropdownItems = template.values.map(value => ({
+    ...value,
+    text: value.value,
+  }))
+
+  const dropdownStyle = template.values.length
+    ? {minWidth: calculateDropdownWidth(template.values)}
+    : null
+
+  const selectedItem =
+    dropdownItems.find(item => item.selected) || dropdownItems[0]
+
+  return (
+    <div className="template-control--dropdown" style={dropdownStyle}>
+      <Dropdown
+        items={dropdownItems}
+        buttonSize="btn-xs"
+        menuClass="dropdown-astronaut"
+        useAutoComplete={true}
+        selected={selectedItem.text || '(No values)'}
+        onChoose={onSelectTemplate(template.id)}
+      />
+      <label className="template-control--label">{template.tempVar}</label>
+    </div>
+  )
+}
+
+export default TemplateControlDropdown

ui/src/dashboards/constants/templateControlBar.js

@@ -0,0 +1,26 @@
+import calculateSize from 'calculate-size'
+
+export const minDropdownWidth = 146
+export const maxDropdownWidth = 300
+export const dropdownPadding = 30
+
+export const calculateDropdownWidth = values => {
+  const longestValue = values.reduce(
+    (a, b) => (a.value.length > b.value.length ? a.value : b.value)
+  )
+  const longestValuePixels =
+    calculateSize(longestValue, {
+      font: 'Monospace',
+      fontSize: '12px',
+    }).width + dropdownPadding
+
+  if (longestValuePixels < minDropdownWidth) {
+    return minDropdownWidth
+  }
+
+  if (longestValuePixels > maxDropdownWidth) {
+    return maxDropdownWidth
+  }
+
+  return longestValuePixels
+}