Refactor label text logic into function. Add stories for testing label text logic function. Add fancy ellipsis to long item lists.

ui/src/shared/components/MultiSelectDropdown.js

@@ -3,6 +3,23 @@ import OnClickOutside from 'shared/components/OnClickOutside'
 import classNames from 'classnames'
 import _ from 'lodash'
 
+const labelText = ({localSelectedItems, isOpen, label}) => {
+  if (label) {
+    return label
+  }
+  else if (localSelectedItems.length) {
+    return localSelectedItems.map((s) => s).join(', ')
+  }
+  else {
+    if (isOpen) {
+      return '0 Selected'
+    }
+    else {
+      return 'Apply Function'
+    }
+  }
+}
+
 class MultiSelectDropdown extends Component {
   constructor(props) {
     super(props)
@@ -62,16 +79,13 @@ class MultiSelectDropdown extends Component {
   render() {
     const {localSelectedItems, isOpen} = this.state
     const {label} = this.props
-    const labelText = isOpen ? "0 Selected" : "Apply Function"
 
     return (
       <div className={classNames('dropdown multi-select-dropdown', {open: isOpen})}>
         <div onClick={::this.toggleMenu} className="btn btn-xs btn-info dropdown-toggle" type="button">
           <span className="multi-select-dropdown__label">
             {
-              label ?
-              label :
-              localSelectedItems.length ? localSelectedItems.map((s) => s).join(', ') : labelText
+              labelText({localSelectedItems, isOpen, label})
             }
           </span>
           <span className="caret"></span>

ui/src/style/components/multi-select-dropdown.scss

@@ -56,3 +56,9 @@
     opacity: 1;
   }
 }
+.multi-select-dropdown__label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-right: 10px;
+}

ui/stories/admin.js

@@ -6,7 +6,7 @@ import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 import Tooltip from 'shared/components/Tooltip'
 
 storiesOf('MultiSelectDropdown', module)
-  .add('Select Roles', () => (
+  .add('Select Roles w/label', () => (
     <Center>
       <MultiSelectDropdown
         items={[
@@ -25,6 +25,39 @@ storiesOf('MultiSelectDropdown', module)
       />
     </Center>
   ))
+  .add('Selected Item list', () => (
+    <Center>
+      <MultiSelectDropdown
+        items={[
+          'Admin',
+          'User',
+          'Chrono Giraffe',
+          'Prophet',
+          'Susford',
+        ]}
+        selectedItems={[
+          'User',
+          'Chrono Giraffe',
+        ]}
+        onApply={action('onApply')}
+      />
+    </Center>
+  ))
+  .add('0 selected items', () => (
+    <Center>
+      <MultiSelectDropdown
+        items={[
+          'Admin',
+          'User',
+          'Chrono Giraffe',
+          'Prophet',
+          'Susford',
+        ]}
+        selectedItems={[]}
+        onApply={action('onApply')}
+      />
+    </Center>
+  ))
 
 storiesOf('Tooltip', module)
   .add('Delete', () => (