move tooltip for time format link to constants and update time format tests

ui/src/dashboards/components/GraphOptionsTimeFormat.tsx

@@ -6,6 +6,7 @@ import {
   FORMAT_OPTIONS,
   TIME_FORMAT_CUSTOM,
   TIME_FORMAT_DEFAULT,
+  TIME_FORMAT_TOOLTIP_LINK,
 } from 'src/shared/constants/tableGraph'
 
 interface TimeFormatOptions {
@@ -51,8 +52,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
 
   public render() {
     const {format, customFormat} = this.state
-    const tipUrl = 'http://momentjs.com/docs/#/parsing/string-format/'
-    const tipContent = `For information on formatting, see <br/><a href="#">${tipUrl}</a>`
+    const tipContent = `For information on formatting, see <br/><a href="#">${TIME_FORMAT_TOOLTIP_LINK}</a>`
 
     const formatOption = FORMAT_OPTIONS.find(op => op.text === format)
     const showCustom = !formatOption || customFormat
@@ -61,14 +61,13 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
       <div className="form-group col-xs-12">
         <label>
           Time Format
-          {showCustom && (
-            <a href={tipUrl} target="_blank">
+          {showCustom &&
+            <a href={TIME_FORMAT_TOOLTIP_LINK} target="_blank">
               <QuestionMarkTooltip
                 tipID="Time Axis Format"
                 tipContent={tipContent}
               />
-            </a>
-          )}
+            </a>}
         </label>
         <Dropdown
           items={FORMAT_OPTIONS}
@@ -78,7 +77,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
           className="dropdown-stretch"
           onChoose={this.handleChooseFormat}
         />
-        {showCustom && (
+        {showCustom &&
           <div className="column-controls--section">
             <InputClickToEdit
               wrapperClass="field-controls-input "
@@ -88,8 +87,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
               placeholder="Enter custom format..."
               appearAsNormalInput={true}
             />
-          </div>
-        )}
+          </div>}
       </div>
     )
   }

ui/src/shared/constants/tableGraph.js

@@ -8,6 +8,9 @@ export const NULL_HOVER_TIME = '0'
 export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss'
 export const TIME_FORMAT_CUSTOM = 'Custom'
 
+export const TIME_FORMAT_TOOLTIP_LINK =
+  'http://momentjs.com/docs/#/parsing/string-format/'
+
 export const TIME_FIELD_DEFAULT = {
   internalName: 'time',
   displayName: '',

ui/test/dashboards/components/GraphOptionsTimeFormat.test.tsx

@@ -6,7 +6,10 @@ import GraphOptionsTimeFormat from 'src/dashboards/components/GraphOptionsTimeFo
 import {Dropdown} from 'src/shared/components/Dropdown'
 import InputClickToEdit from 'src/shared/components/InputClickToEdit'
 import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
-import {TIME_FORMAT_CUSTOM} from 'src/shared/constants/tableGraph'
+import {
+  TIME_FORMAT_CUSTOM,
+  TIME_FORMAT_TOOLTIP_LINK,
+} from 'src/shared/constants/tableGraph'
 
 const setup = (override = {}) => {
   const props = {
@@ -36,8 +39,14 @@ describe('Dashboards.Components.GraphOptionsTimeFormat', () => {
 
         wrapper.setState({customFormat: true})
 
+        const label = wrapper.find('label')
+        const link = label.find('a')
+
         expect(wrapper.find(Dropdown).exists()).toBe(true)
-        expect(wrapper.find(QuestionMarkTooltip).exists()).toBe(true)
+        expect(label.exists()).toBe(true)
+        expect(link.exists()).toBe(true)
+        expect(link.prop('href')).toBe(TIME_FORMAT_TOOLTIP_LINK)
+        expect(link.find(QuestionMarkTooltip).exists()).toBe(true)
         expect(wrapper.find(InputClickToEdit).exists()).toBe(true)
       })
     })
@@ -48,10 +57,14 @@ describe('Dashboards.Components.GraphOptionsTimeFormat', () => {
         const wrapper = setup({timeFormat})
         const dropdown = wrapper.find(Dropdown)
         const input = wrapper.find(InputClickToEdit)
+        const label = wrapper.find('label')
+        const link = label.find('a')
 
         expect(dropdown.prop('selected')).toBe(TIME_FORMAT_CUSTOM)
         expect(input.exists()).toBe(true)
         expect(input.prop('value')).toBe(timeFormat)
+        expect(link.exists()).toBe(true)
+        expect(link.find(QuestionMarkTooltip).exists()).toBe(true)
       })
     })
   })