Fix linter errors in sometsx files

ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx

@@ -30,9 +30,7 @@ class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
 
     return (
       <div className="column-controls--section">
-        <div className="column-controls--label">
-          {internalName}
-        </div>
+        <div className="column-controls--label">{internalName}</div>
         <InputClickToEdit
           value={displayName}
           wrapperClass="column-controls-input"

ui/src/dashboards/components/GraphOptionsFixFirstColumn.tsx

@@ -8,7 +8,7 @@ interface Props {
 const GraphOptionsFixFirstColumn: SFC<Props> = ({
   fixed,
   onToggleFixFirstColumn,
-}) =>
+}) => (
   <div className="form-group col-xs-12">
     <div className="form-control-static">
       <input
@@ -20,5 +20,6 @@ const GraphOptionsFixFirstColumn: SFC<Props> = ({
       <label htmlFor="fixFirstColumnCheckbox">Fix First Column</label>
     </div>
   </div>
+)
 
 export default GraphOptionsFixFirstColumn

ui/src/dashboards/components/GraphOptionsTimeFormat.tsx

@@ -57,11 +57,12 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
       <div className="form-group col-xs-12">
         <label>
           Time Format
-          {customFormat &&
+          {customFormat && (
             <QuestionMarkTooltip
               tipID="Time Axis Format"
               tipContent={tipContent}
-            />}
+            />
+          )}
         </label>
         <Dropdown
           items={FORMAT_OPTIONS}
@@ -71,7 +72,7 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
           className="dropdown-stretch"
           onChoose={this.handleChooseFormat}
         />
-        {showCustom &&
+        {showCustom && (
           <div className="column-controls--section">
             <InputClickToEdit
               wrapperClass="column-controls-input "
@@ -81,7 +82,8 @@ class GraphOptionsTimeFormat extends PureComponent<Props, State> {
               placeholder="Enter custom format..."
               appearAsNormalInput={true}
             />
-          </div>}
+          </div>
+        )}
       </div>
     )
   }

ui/src/data_explorer/components/CustomCell.tsx

@@ -11,18 +11,10 @@ const CustomCell: SFC<CustomCellProps> = ({data, columnName}) => {
   if (columnName === 'time') {
     const date = moment(new Date(data)).format('MM/DD/YY hh:mm:ssA')
 
-    return (
-      <span>
-        {date}
-      </span>
-    )
+    return <span>{date}</span>
   }
 
-  return (
-    <span>
-      {data}
-    </span>
-  )
+  return <span>{data}</span>
 }
 
 export default CustomCell

ui/src/kapacitor/components/KapacitorForm.tsx

@@ -42,14 +42,14 @@ const KapacitorForm: SFC<Props> = ({
   source,
   hash,
   notify,
-}) =>
+}) => (
   <div className="page">
     <div className="page-header">
       <div className="page-header__container">
         <div className="page-header__left">
-          <h1 className="page-header__title">{`${exists
-            ? 'Configure'
-            : 'Add a New'} Kapacitor Connection`}</h1>
+          <h1 className="page-header__title">{`${
+            exists ? 'Configure' : 'Add a New'
+          } Kapacitor Connection`}</h1>
         </div>
       </div>
     </div>
@@ -95,7 +95,7 @@ const KapacitorForm: SFC<Props> = ({
                       inputType="password"
                     />
                   </div>
-                  {url.startsWith('https') &&
+                  {url.startsWith('https') && (
                     <div className="form-group col-xs-12">
                       <div className="form-control-static">
                         <input
@@ -112,7 +112,8 @@ const KapacitorForm: SFC<Props> = ({
                       <label className="form-helper">
                         {insecureSkipVerifyText}
                       </label>
-                    </div>}
+                    </div>
+                  )}
                   <div className="form-group form-group-submit col-xs-12 text-center">
                     <button
                       className="btn btn-default"
@@ -147,5 +148,6 @@ const KapacitorForm: SFC<Props> = ({
       </div>
     </FancyScrollbar>
   </div>
+)
 
 export default KapacitorForm

ui/src/kapacitor/components/KapacitorFormInput.tsx

@@ -18,11 +18,9 @@ const KapacitorFormInput: SFC<Props> = ({
   onChange,
   maxLength,
   inputType,
-}) =>
+}) => (
   <div className="form-group">
-    <label htmlFor={name}>
-      {label}
-    </label>
+    <label htmlFor={name}>{label}</label>
     <input
       className="form-control"
       id={name}
@@ -35,6 +33,7 @@ const KapacitorFormInput: SFC<Props> = ({
       type={inputType}
     />
   </div>
+)
 
 KapacitorFormInput.defaultProps = {
   inputType: '',

ui/src/shared/components/ConfirmButtons.tsx

@@ -36,7 +36,7 @@ export const Confirm: SFC<ConfirmProps> = ({
   onConfirm,
   icon,
   title,
-}) =>
+}) => (
   <button
     data-test="confirm"
     className={classnames('btn btn-success btn-square', {
@@ -48,8 +48,9 @@ export const Confirm: SFC<ConfirmProps> = ({
   >
     <span className={icon} />
   </button>
+)
 
-export const Cancel: SFC<CancelProps> = ({buttonSize, onCancel, icon}) =>
+export const Cancel: SFC<CancelProps> = ({buttonSize, onCancel, icon}) => (
   <button
     data-test="cancel"
     className={classnames('btn btn-info btn-square', {
@@ -59,6 +60,7 @@ export const Cancel: SFC<CancelProps> = ({buttonSize, onCancel, icon}) =>
   >
     <span className={icon} />
   </button>
+)
 
 class ConfirmButtons extends PureComponent<ConfirmButtonsProps, {}> {
   public static defaultProps: Partial<ConfirmButtonsProps> = {
@@ -86,35 +88,37 @@ class ConfirmButtons extends PureComponent<ConfirmButtonsProps, {}> {
   public render() {
     const {item, buttonSize, isDisabled, confirmLeft, confirmTitle} = this.props
 
-    return confirmLeft
-      ? <div className="confirm-buttons">
-          <Confirm
-            buttonSize={buttonSize}
-            isDisabled={isDisabled}
-            onConfirm={this.handleConfirm(item)}
-            icon="icon checkmark"
-            title={confirmTitle}
-          />
-          <Cancel
-            buttonSize={buttonSize}
-            onCancel={this.handleCancel(item)}
-            icon="icon remove"
-          />
-        </div>
-      : <div className="confirm-buttons">
-          <Cancel
-            buttonSize={buttonSize}
-            onCancel={this.handleCancel(item)}
-            icon="icon remove"
-          />
-          <Confirm
-            buttonSize={buttonSize}
-            isDisabled={isDisabled}
-            onConfirm={this.handleConfirm(item)}
-            icon="icon checkmark"
-            title={confirmTitle}
-          />
-        </div>
+    return confirmLeft ? (
+      <div className="confirm-buttons">
+        <Confirm
+          buttonSize={buttonSize}
+          isDisabled={isDisabled}
+          onConfirm={this.handleConfirm(item)}
+          icon="icon checkmark"
+          title={confirmTitle}
+        />
+        <Cancel
+          buttonSize={buttonSize}
+          onCancel={this.handleCancel(item)}
+          icon="icon remove"
+        />
+      </div>
+    ) : (
+      <div className="confirm-buttons">
+        <Cancel
+          buttonSize={buttonSize}
+          onCancel={this.handleCancel(item)}
+          icon="icon remove"
+        />
+        <Confirm
+          buttonSize={buttonSize}
+          isDisabled={isDisabled}
+          onConfirm={this.handleConfirm(item)}
+          icon="icon checkmark"
+          title={confirmTitle}
+        />
+      </div>
+    )
   }
 }
 

ui/src/shared/components/DatabaseList.tsx

@@ -112,14 +112,14 @@ class DatabaseList extends PureComponent<DatabaseListProps, DatabaseListState> {
         <div className="query-builder--heading">DB.RetentionPolicy</div>
         <div className="query-builder--list">
           <FancyScrollbar>
-            {this.state.namespaces.map(namespace =>
+            {this.state.namespaces.map(namespace => (
               <DatabaseListItem
                 isActive={this.isActive(this.props.query, namespace)}
                 namespace={namespace}
                 onChooseNamespace={this.handleChooseNamespace}
                 key={namespace.database + namespace.retentionPolicy}
               />
-            )}
+            ))}
           </FancyScrollbar>
         </div>
       </div>

ui/src/shared/components/DatabaseListItem.tsx

@@ -15,7 +15,7 @@ const DatabaseListItem: SFC<DatabaseListItemProps> = ({
   namespace,
   namespace: {database, retentionPolicy},
   onChooseNamespace,
-}) =>
+}) => (
   <div
     className={classnames('query-builder--list-item', {
       active: isActive,
@@ -24,5 +24,6 @@ const DatabaseListItem: SFC<DatabaseListItemProps> = ({
   >
     {database}.{retentionPolicy}
   </div>
+)
 
 export default DatabaseListItem

ui/src/shared/components/InputClickToEdit.tsx

@@ -103,42 +103,47 @@ class InputClickToEdit extends PureComponent<Props, State> {
       appearAsNormalInput,
     } = this.props
 
-    const wrapperClass = `${wrapper}${appearAsNormalInput
-      ? ' input-cte__normal'
-      : ''}`
+    const wrapperClass = `${wrapper}${
+      appearAsNormalInput ? ' input-cte__normal' : ''
+    }`
     const defaultStyle = value ? 'input-cte' : 'input-cte__empty'
 
-    return disabled
-      ? <div className={wrapperClass}>
-          <div data-test="disabled" className="input-cte__disabled">
-            {value}
+    return disabled ? (
+      <div className={wrapperClass}>
+        <div data-test="disabled" className="input-cte__disabled">
+          {value}
+        </div>
+      </div>
+    ) : (
+      <div className={wrapperClass}>
+        {isEditing ? (
+          <input
+            type="text"
+            className="form-control input-sm provider--input"
+            defaultValue={value}
+            onBlur={this.handleInputBlur}
+            onKeyDown={this.handleKeyDown}
+            onChange={this.handleChange}
+            autoFocus={true}
+            onFocus={this.handleFocus}
+            tabIndex={tabIndex}
+            spellCheck={false}
+          />
+        ) : (
+          <div
+            className={defaultStyle}
+            onClick={this.handleInputClick}
+            onFocus={this.handleInputClick}
+            tabIndex={tabIndex}
+          >
+            {value || placeholder}
+            {appearAsNormalInput || (
+              <span data-test="icon" className="icon pencil" />
+            )}
           </div>
-        </div>
-      : <div className={wrapperClass}>
-          {isEditing
-            ? <input
-                type="text"
-                className="form-control input-sm provider--input"
-                defaultValue={value}
-                onBlur={this.handleInputBlur}
-                onKeyDown={this.handleKeyDown}
-                onChange={this.handleChange}
-                autoFocus={true}
-                onFocus={this.handleFocus}
-                tabIndex={tabIndex}
-                spellCheck={false}
-              />
-            : <div
-                className={defaultStyle}
-                onClick={this.handleInputClick}
-                onFocus={this.handleInputClick}
-                tabIndex={tabIndex}
-              >
-                {value || placeholder}
-                {appearAsNormalInput ||
-                  <span data-test="icon" className="icon pencil" />}
-              </div>}
-        </div>
+        )}
+      </div>
+    )
   }
 }
 

ui/src/shared/components/MeasurementList.tsx

@@ -123,38 +123,41 @@ class MeasurementList extends PureComponent<Props, State> {
       <div className="query-builder--column">
         <div className="query-builder--heading">
           <span>Measurements & Tags</span>
-          {database &&
+          {database && (
             <MeasurementListFilter
               onEscape={this.handleEscape}
               onFilterText={this.handleFilterText}
               filterText={this.state.filterText}
-            />}
+            />
+          )}
         </div>
-        {database
-          ? <div className="query-builder--list">
-              <FancyScrollbar>
-                {filtered.map(measurement =>
-                  <MeasurementListItem
-                    query={query}
-                    key={measurement}
-                    measurement={measurement}
-                    querySource={querySource}
-                    onChooseTag={onChooseTag}
-                    onGroupByTag={onGroupByTag}
-                    areTagsAccepted={areTagsAccepted}
-                    onAcceptReject={this.handleAcceptReject}
-                    isActive={measurement === query.measurement}
-                    numTagsActive={Object.keys(query.tags).length}
-                    onChooseMeasurement={this.handleChoosemeasurement}
-                  />
-                )}
-              </FancyScrollbar>
-            </div>
-          : <div className="query-builder--list-empty">
-              <span>
-                No <strong>Database</strong> selected
-              </span>
-            </div>}
+        {database ? (
+          <div className="query-builder--list">
+            <FancyScrollbar>
+              {filtered.map(measurement => (
+                <MeasurementListItem
+                  query={query}
+                  key={measurement}
+                  measurement={measurement}
+                  querySource={querySource}
+                  onChooseTag={onChooseTag}
+                  onGroupByTag={onGroupByTag}
+                  areTagsAccepted={areTagsAccepted}
+                  onAcceptReject={this.handleAcceptReject}
+                  isActive={measurement === query.measurement}
+                  numTagsActive={Object.keys(query.tags).length}
+                  onChooseMeasurement={this.handleChoosemeasurement}
+                />
+              ))}
+            </FancyScrollbar>
+          </div>
+        ) : (
+          <div className="query-builder--list-empty">
+            <span>
+              No <strong>Database</strong> selected
+            </span>
+          </div>
+        )}
       </div>
     )
   }

ui/src/shared/components/MeasurementListFilter.tsx

@@ -10,7 +10,7 @@ const MeasurementListFilter: SFC<Props> = ({
   onEscape,
   onFilterText,
   filterText,
-}) =>
+}) => (
   <div className="query-builder--filter">
     <input
       className="form-control input-sm"
@@ -24,5 +24,6 @@ const MeasurementListFilter: SFC<Props> = ({
     />
     <span className="icon search" />
   </div>
+)
 
 export default MeasurementListFilter

ui/src/shared/components/MeasurementListItem.tsx

@@ -30,7 +30,7 @@ const MeasurementListItem: SFC<Props> = ({
   onAcceptReject,
   areTagsAccepted,
   onChooseMeasurement,
-}) =>
+}) => (
   <div
     key={measurement}
     onClick={isActive ? noop : onChooseMeasurement(measurement)}
@@ -41,24 +41,27 @@ const MeasurementListItem: SFC<Props> = ({
         {measurement}
       </span>
       {isActive &&
-        numTagsActive >= 1 &&
-        <div
-          className={classnames('flip-toggle', {flipped: areTagsAccepted})}
-          onClick={onAcceptReject}
-        >
-          <div className="flip-toggle--container">
-            <div className="flip-toggle--front">!=</div>
-            <div className="flip-toggle--back">=</div>
+        numTagsActive >= 1 && (
+          <div
+            className={classnames('flip-toggle', {flipped: areTagsAccepted})}
+            onClick={onAcceptReject}
+          >
+            <div className="flip-toggle--container">
+              <div className="flip-toggle--front">!=</div>
+              <div className="flip-toggle--back">=</div>
+            </div>
           </div>
-        </div>}
+        )}
     </div>
-    {isActive &&
+    {isActive && (
       <TagList
         query={query}
         querySource={querySource}
         onChooseTag={onChooseTag}
         onGroupByTag={onGroupByTag}
-      />}
+      />
+    )}
   </div>
+)
 
 export default MeasurementListItem

ui/src/shared/components/Tabs.tsx

@@ -82,18 +82,12 @@ export const TabList: SFC<TabListProps> = ({
   if (customClass) {
     return (
       <div className={customClass}>
-        <div className="btn-group btn-group-lg tab-group">
-          {kids}
-        </div>
+        <div className="btn-group btn-group-lg tab-group">{kids}</div>
       </div>
     )
   }
 
-  return (
-    <div className="btn-group btn-group-lg tab-group">
-      {kids}
-    </div>
-  )
+  return <div className="btn-group btn-group-lg tab-group">{kids}</div>
 }
 
 TabList.defaultProps = {
@@ -110,20 +104,18 @@ export const TabPanels: SFC<TabPanelsProps> = ({
   children,
   activeIndex,
   customClass,
-}) =>
+}) => (
   // if only 1 child, children array index lookup will fail
-  <div className={customClass}>
-    {children[activeIndex]}
-  </div>
+  <div className={customClass}>{children[activeIndex]}</div>
+)
 
 interface TabPanelProps {
   children: JSX.Element[] | JSX.Element
 }
 
-export const TabPanel: SFC<TabPanelProps> = ({children}) =>
-  <div>
-    {children}
-  </div>
+export const TabPanel: SFC<TabPanelProps> = ({children}) => (
+  <div>{children}</div>
+)
 
 interface TabsProps {
   children: JSX.Element[] | JSX.Element
@@ -178,10 +170,6 @@ export class Tabs extends PureComponent<TabsProps, TabsState> {
       return child
     })
 
-    return (
-      <div className={tabContentsClass}>
-        {kids}
-      </div>
-    )
+    return <div className={tabContentsClass}>{kids}</div>
   }
 }

ui/src/shared/components/TagList.tsx

@@ -110,7 +110,7 @@ class TagList extends PureComponent<Props, State> {
 
     return (
       <div className="query-builder--sub-list">
-        {_.map(this.state.tags, (tagValues: string[], tagKey: string) =>
+        {_.map(this.state.tags, (tagValues: string[], tagKey: string) => (
           <TagListItem
             key={tagKey}
             tagKey={tagKey}
@@ -120,7 +120,7 @@ class TagList extends PureComponent<Props, State> {
             selectedTagValues={query.tags[tagKey] || []}
             isUsingGroupBy={query.groupBy.tags.indexOf(tagKey) > -1}
           />
-        )}
+        ))}
       </div>
     )
   }