Merge pull request #2423 from influxdata/fix-template-variables-responsive

Make Template Variables Manager More Responsive

CHANGELOG.md

@@ -14,6 +14,7 @@
 1. [#2386](https://github.com/influxdata/chronograf/pull/2386): Fix queries that include regex, numbers and wildcard
 1. [#2398](https://github.com/influxdata/chronograf/pull/2398): Fix apps on hosts page from parsing tags with null values
 1. [#2408](https://github.com/influxdata/chronograf/pull/2408): Fix updated Dashboard names not updating dashboard list
+1. [#2423](https://github.com/influxdata/chronograf/pull/2423): Gracefully scale Template Variables Manager overlay on smaller displays
 
 ### Features
 1. [#2384](https://github.com/influxdata/chronograf/pull/2384): Add filtering by name to Dashboard index page

ui/src/dashboards/components/template_variables/RowButtons.js

@@ -1,33 +1,30 @@
 import React, {PropTypes} from 'react'
 import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
 
-const RowButtons = ({
+const RowButtons = ({onStartEdit, isEditing, onCancelEdit, onDelete, id}) => {
-  onStartEdit,
-  isEditing,
-  onCancelEdit,
-  onDelete,
-  id,
-  selectedType,
-}) => {
   if (isEditing) {
     return (
       <div className="tvm-actions">
         <button
-          className="btn btn-sm btn-info"
+          className="btn btn-sm btn-info btn-square"
           type="button"
           onClick={onCancelEdit}
         >
-          Cancel
+          <span className="icon remove" />
         </button>
-        <button className="btn btn-sm btn-success" type="submit">
+        <button className="btn btn-sm btn-success btn-square" type="submit">
-          {selectedType === 'csv' ? 'Save Values' : 'Get Values'}
+          <span className="icon checkmark" />
         </button>
       </div>
     )
   }
   return (
     <div className="tvm-actions">
-      <DeleteConfirmButtons onDelete={onDelete(id)} />
+      <DeleteConfirmButtons
+        onDelete={onDelete(id)}
+        icon="remove"
+        square={true}
+      />
       <button
         className="btn btn-sm btn-info btn-edit btn-square"
         type="button"

ui/src/shared/components/DeleteConfirmButtons.js

@@ -4,14 +4,15 @@ import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 
-const DeleteButton = ({onClickDelete, buttonSize}) =>
+const DeleteButton = ({onClickDelete, buttonSize, icon, square}) =>
   <button
     className={classnames('btn btn-danger table--show-on-row-hover', {
       [buttonSize]: buttonSize,
+      'btn-square': square,
     })}
     onClick={onClickDelete}
   >
-    Delete
+    {icon ? <span className={`icon ${icon}`} /> : 'Delete'}
   </button>
 
 class DeleteConfirmButtons extends Component {
@@ -37,7 +38,7 @@ class DeleteConfirmButtons extends Component {
   }
 
   render() {
-    const {onDelete, item, buttonSize} = this.props
+    const {onDelete, item, buttonSize, icon, square} = this.props
     const {isConfirming} = this.state
 
     return isConfirming
@@ -50,21 +51,27 @@ class DeleteConfirmButtons extends Component {
       : <DeleteButton
           onClickDelete={this.handleClickDelete}
           buttonSize={buttonSize}
+          icon={icon}
+          square={square}
         />
   }
 }
 
-const {func, oneOfType, shape, string} = PropTypes
+const {bool, func, oneOfType, shape, string} = PropTypes
 
 DeleteButton.propTypes = {
   onClickDelete: func.isRequired,
   buttonSize: string,
+  icon: string,
+  square: bool,
 }
 
 DeleteConfirmButtons.propTypes = {
   item: oneOfType([(string, shape())]),
   onDelete: func.isRequired,
   buttonSize: string,
+  square: bool,
+  icon: string,
 }
 
 DeleteConfirmButtons.defaultProps = {

ui/src/style/components/template-variables-manager.scss

@@ -42,19 +42,20 @@ $tvmp-table-gutter: 8px;
 /* Column Widths */
 .tvm--col-1 {flex: 0 0 140px;}
 .tvm--col-2 {flex: 0 0 140px;}
-.tvm--col-3 {flex: 1 0 500px;}
+.tvm--col-3 {flex: 1 0 0;}
-.tvm--col-4 {flex: 0 0 160px;}
+.tvm--col-4 {flex: 0 0 68px;}
 
 /* Table Column Labels */
 .template-variable-manager--table-heading {
   padding: 0 $tvmp-table-gutter;
   height: 18px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   flex-wrap: nowrap;
   font-weight: 600;
   font-size: 12px;
   color: $g11-sidewalk;
+  white-space: nowrap;
 
   > * {
     @include no-user-select();
@@ -132,7 +133,6 @@ $tvmp-table-gutter: 8px;
   line-height: 30px;
   border-radius: $radius;
   background-color: $g5-pepper;
-  margin-top: 2px;
   @include custom-scrollbar-round($g5-pepper, $g7-graphite);
 }
 .tvm-values-empty {
@@ -160,9 +160,13 @@ $tvmp-table-gutter: 8px;
 .tvm-query-builder {
   display: flex;
   align-items: center;
-  height: 30px;
+  min-height: 30px;
+  flex-wrap: wrap;
 
-  > * {margin-right: 2px;}
+  > * {
+    margin-bottom: 2px;
+    margin-right: 2px;
+  }
   > *:last-child {margin-right: 0;}
 
   .dropdown {
@@ -193,7 +197,9 @@ $tvmp-table-gutter: 8px;
     order: 1;
   }
 
-  > .btn {margin-left: $tvmp-table-gutter;}
+  > .btn:first-child {
+    margin-left: $tvmp-table-gutter;
+  }
 
   /* Override confirm buttons styles */
   /* Janky, but doing this quick & dirty for now  */