Merge pull request #3048 from influxdata/bugfix/multi-select-dropdown

Prevent Multi-Select Dropdown in InfluxDB Admin Users and Roles tabs from losing selection state

CHANGELOG.md

@@ -18,6 +18,7 @@
 1.  [#2919](https://github.com/influxdata/chronograf/pull/2919): Automatically add graph type 'line' to any graph missing a type
 1.  [#2970](https://github.com/influxdata/chronograf/pull/2970): Fix hanging browser on docker host dashboard
 1.  [#3006](https://github.com/influxdata/chronograf/pull/3006): Fix Kapacitor Rules task enabled checkboxes to only toggle exactly as clicked
+1.  [#3048](https://github.com/influxdata/chronograf/pull/3048): Prevent Multi-Select Dropdown in InfluxDB Admin Users and Roles tabs from losing selection state
 
 ## v1.4.2.3 [2018-03-08]
 

ui/src/admin/components/RoleRow.js

@@ -77,6 +77,7 @@ const RoleRow = ({
             customClass={classnames(`dropdown-${ROLES_TABLE.colPermissions}`, {
               'admin-table--multi-select-empty': !permissions.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         ) : null}
       </td>
@@ -92,6 +93,7 @@ const RoleRow = ({
             customClass={classnames(`dropdown-${ROLES_TABLE.colUsers}`, {
               'admin-table--multi-select-empty': !users.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         ) : null}
       </td>

ui/src/admin/components/UserRow.js

@@ -96,6 +96,7 @@ const UserRow = ({
             customClass={classnames(`dropdown-${USERS_TABLE.colRoles}`, {
               'admin-table--multi-select-empty': !roles.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         </td>
       ) : null}
@@ -113,6 +114,7 @@ const UserRow = ({
             customClass={classnames(`dropdown-${USERS_TABLE.colPermissions}`, {
               'admin-table--multi-select-empty': !permissions.length,
             })}
+            resetStateOnReceiveProps={false}
           />
         ) : null}
       </td>

ui/src/shared/components/MultiSelectDropdown.js

@@ -40,7 +40,10 @@ class MultiSelectDropdown extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!_.isEqual(this.props.selectedItems, nextProps.selectedItems)) {
+    if (
+      !this.props.resetStateOnReceiveProps ||
+      !_.isEqual(this.props.selectedItems, nextProps.selectedItems)
+    ) {
       return
     }
 
@@ -106,17 +109,16 @@ class MultiSelectDropdown extends Component {
 
   renderMenu() {
     const {items, isApplyShown} = this.props
-    const applyButton = isApplyShown ? (
+
+    return (
+      <ul className="dropdown-menu">
+        {isApplyShown && (
           <li className="multi-select--apply">
             <button className="btn btn-xs btn-info" onClick={this.handleApply}>
               Apply
             </button>
           </li>
-    ) : null
+        )}
-
-    return (
-      <ul className="dropdown-menu">
-        {applyButton}
         <FancyScrollbar
           autoHide={false}
           autoHeight={true}
@@ -162,6 +164,7 @@ MultiSelectDropdown.propTypes = {
   customClass: string,
   iconName: string,
   isApplyShown: bool,
+  resetStateOnReceiveProps: bool,
 }
 
 MultiSelectDropdown.defaultProps = {
@@ -170,6 +173,7 @@ MultiSelectDropdown.defaultProps = {
   customClass: 'dropdown-160',
   selectedItems: [],
   isApplyShown: true,
+  resetStateOnReceiveProps: true,
 }
 
 export default OnClickOutside(MultiSelectDropdown)