Merge pull request #3012 from influxdata/misc-polish

Misc. Polish

ui/src/admin/components/chronograf/AllUsersTableRow.js

@@ -83,7 +83,8 @@ const AllUsersTableRow = ({
           confirmText={removeWarning}
           confirmAction={wrappedDelete}
           size="btn-xs"
-          text="Remove"
+          type="btn-danger"
+          text="Delete"
           customClass="table--show-on-row-hover"
         />
       </td>

ui/src/admin/components/chronograf/ProvidersTable.js

@@ -80,7 +80,6 @@ class ProvidersTable extends Component {
                 <div className="fancytable--th provider--redirect">
                   Organization
                 </div>
-                <div className="fancytable--th" />
                 <div className="fancytable--th provider--delete" />
               </div>
               {mappings.map((mapping, i) =>

ui/src/admin/components/chronograf/ProvidersTableRow.js

@@ -71,13 +71,15 @@ class ProvidersTableRow extends Component {
     const isDefaultMapping = DEFAULT_MAPPING_ID === mapping.id
     return (
       <div className="fancytable--row">
-        <Dropdown
+        <div className="fancytable--td provider--scheme">
-          items={schemes}
+          <Dropdown
-          onChoose={this.handleChooseScheme}
+            items={schemes}
-          selected={scheme}
+            onChoose={this.handleChooseScheme}
-          className="fancytable--td provider--scheme"
+            selected={scheme}
-          disabled={isDefaultMapping}
+            className="dropdown-stretch"
-        />
+            disabled={isDefaultMapping}
+          />
+        </div>
         <InputClickToEdit
           value={provider}
           wrapperClass="fancytable--td provider--provider"

ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx

@@ -83,12 +83,14 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
 
     return (
       <div className="fancytable--row">
-        <Dropdown
+        <div className="fancytable--td provider--scheme">
-          items={schemes}
+          <Dropdown
-          onChoose={this.handleChooseScheme}
+            items={schemes}
-          selected={scheme}
+            onChoose={this.handleChooseScheme}
-          className={'fancytable--td provider--scheme'}
+            selected={scheme}
-        />
+            className="dropdown-stretch"
+          />
+        </div>
         <InputClickToEdit
           value={provider}
           wrapperClass="fancytable--td provider--provider"

ui/src/shared/components/Dropdown.js

@@ -146,7 +146,6 @@ export class Dropdown extends Component {
 
     const {isOpen, searchTerm, filteredItems, highlightedItemIndex} = this.state
     const menuItems = useAutoComplete ? filteredItems : items
-    const disabledClass = disabled ? 'disabled' : null
 
     return (
       <div
@@ -165,7 +164,7 @@ export class Dropdown extends Component {
               buttonSize={buttonSize}
               buttonColor={buttonColor}
               toggleStyle={toggleStyle}
-              disabledClass={disabledClass}
+              disabled={disabled}
               onFilterChange={this.handleFilterChange}
               onFilterKeyPress={this.handleFilterKeyPress}
             />
@@ -176,7 +175,7 @@ export class Dropdown extends Component {
               buttonSize={buttonSize}
               buttonColor={buttonColor}
               toggleStyle={toggleStyle}
-              disabledClass={disabledClass}
+              disabled={disabled}
             />}
         {isOpen && menuItems.length
           ? <DropdownMenu

ui/src/shared/components/DropdownHead.js

@@ -2,16 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+const disabledClass = disabled => (disabled ? ' disabled' : '')
+
 const DropdownHead = ({
   iconName,
   selected,
   buttonSize,
   toggleStyle,
   buttonColor,
-  disabledClass,
+  disabled,
 }) =>
   <div
-    className={`btn dropdown-toggle ${buttonSize} ${buttonColor} ${disabledClass}`}
+    className={`btn dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
+      disabled
+    )}`}
     style={toggleStyle}
   >
     {iconName && <span className={classnames('icon', {[iconName]: true})} />}
@@ -21,15 +25,15 @@ const DropdownHead = ({
     <span className="caret" />
   </div>
 
-const {string, shape} = PropTypes
+const {bool, string, shape} = PropTypes
 
 DropdownHead.propTypes = {
   iconName: string,
-  selected: string,
+  selected: string.isRequired,
-  buttonSize: string,
+  buttonSize: string.isRequired,
   toggleStyle: shape(),
-  buttonColor: string,
+  buttonColor: string.isRequired,
-  disabledClass: string,
+  disabled: bool,
 }
 
 export default DropdownHead

ui/src/shared/components/DropdownInput.js

@@ -1,17 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+const disabledClass = disabled => (disabled ? ' disabled' : '')
+
 const DropdownInput = ({
   searchTerm,
   buttonSize,
   buttonColor,
   toggleStyle,
-  disabledClass,
+  disabled,
   onFilterChange,
   onFilterKeyPress,
 }) =>
   <div
-    className={`dropdown-autocomplete dropdown-toggle ${buttonSize} ${buttonColor} ${disabledClass}`}
+    className={`dropdown-autocomplete dropdown-toggle ${buttonSize} ${buttonColor}${disabledClass(
+      disabled
+    )}`}
     style={toggleStyle}
   >
     <input
@@ -29,14 +33,14 @@ const DropdownInput = ({
 
 export default DropdownInput
 
-const {func, shape, string} = PropTypes
+const {bool, func, shape, string} = PropTypes
 
 DropdownInput.propTypes = {
   searchTerm: string,
   buttonSize: string,
   buttonColor: string,
   toggleStyle: shape({}),
-  disabledClass: string,
+  disabled: bool,
-  onFilterChange: func,
+  onFilterChange: func.isRequired,
-  onFilterKeyPress: func,
+  onFilterKeyPress: func.isRequired,
 }

ui/src/shared/components/Tags.js

@@ -27,19 +27,18 @@ class Tag extends Component {
   render() {
     const {item} = this.props
     return (
-      <span key={item} className="input-tag-item">
+      <span key={item} className="input-tag--item">
         <span>
           {item.text || item.name || item}
         </span>
-        {
+        <ConfirmButton
-          <ConfirmButton
+          icon="remove"
-            icon="remove"
+          size="btn-xs"
-            size="btn-xs"
+          customClass="input-tag--remove"
-            customClass="btn-xxs"
+          square={true}
-            confirmText="Remove user from organization?"
+          confirmText="Remove user from organization?"
-            confirmAction={this.handleClickDelete(item)}
+          confirmAction={this.handleClickDelete(item)}
-          />
+        />
-        }
       </span>
     )
   }

ui/src/style/components/input-tag-list.scss

@@ -3,29 +3,33 @@
   ---------------------------------------------
 */
 
-$input-tag-item-height: 24px;
+$input-tag--item-height: 24px;
 
 .input-tag-list {
   margin: 1px -1px;
   display: flex;
   flex-wrap: wrap;
 }
+// Special rule for alert handlers config
 .tag-input + .input-tag-list {
   padding: 0 11px;
   margin: 4px -1px;
 }
 
-.input-tag-item,
+.input-tag--item,
 .tags-add {
-  height: $input-tag-item-height;
+  height: $input-tag--item-height;
-  line-height: $input-tag-item-height;
+  line-height: $input-tag--item-height;
   border-radius: 3px;
   margin: 1px;
 }
 
-.input-tag-item {
+.input-tag--item {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
   white-space: nowrap;
-  padding: 0 9px;
+  padding: 0 0 0 9px;
   font-size: 12px;
   font-weight: 600;
   background-color: $g5-pepper;
@@ -33,22 +37,22 @@ $input-tag-item-height: 24px;
   cursor: default;
 }
 
-.input-tag-item .icon {
+.btn.confirm-button.input-tag--remove {
-  transition: color 0.25s ease;
+  margin-left: 2px;
-  margin-left: 6px;
+  color: $g8-storm;
-  position: relative;
+  background-color: transparent;
-  top: -0.5px;
 
   &:hover {
+    background-color: transparent;
     color: $c-dreamsicle;
-    cursor: pointer;
   }
 }
 
+
 // Optional Add Tags Button
 .tags-add {
   position: relative;
-  width: $input-tag-item-height;
+  width: $input-tag--item-height;
   background-color: $c-pool;
   color: $g20-white;
   text-align: center;

ui/src/style/theme/_tables.scss

@@ -79,7 +79,8 @@ $table--highlight-color: $g4-onyx;
 .table.table-highlight > tbody > tr:hover {background-color: $table--highlight-color;}
 
 .table > tbody > tr .table--show-on-row-hover {visibility: hidden;}
-.table > tbody > tr:hover .table--show-on-row-hover {visibility: visible;}
+.table > tbody > tr:hover .table--show-on-row-hover,
+.table > tbody > tr .table--show-on-row-hover.active {visibility: visible;}
 
 
 // For use in a Status column

ui/src/style/unsorted.scss

@@ -391,6 +391,10 @@ $tick-script-overlay-margin: 30px;
   margin-left: 6px;
 }
 
+.dropdown.dashboard-switcher .dropdown-item {
+  white-space: nowrap;
+}
+
 /*
   Dashboard Name Editing
   -----------------------------------------------------------------------------