Add search bar to side bar (#197)

Add search bar to side bar

dashboard/app/components/SideBar/SideBar.js

@@ -21,6 +21,7 @@ export default class SideBar extends Component {
 
     constructor(props) {
         super(props)
+        this.state = {keyword: ''}
         if (! this.props.hasLoaded) {
             this.props.dispatch(appActions.fetchSideBarData(this.props.cerberusAuthToken))
         }
@@ -34,19 +35,26 @@ export default class SideBar extends Component {
             this.props.dispatch(vActions.resetVersionBrowserState())
             this.props.dispatch(appActions.loadManageSDBPage(id, path, this.props.cerberusAuthToken))
         }
+        this.handleSearchBoxChange = (event) => {
+            this.setState({keyword: event.target.value})
+        }
     }
 
     render() {
         return (
             <div className='sidebar'>
                 <div className="sidebar-header ncss-brand u-uppercase un-selectable">Safe Deposit Boxes</div>
-                { sideBarContent(this.handleMouseClickAddNewBucket, this.handleSDBClicked, this.props) }
+                <input type='search'
+                       className='sidebar-search-container pt2-sm pr4-sm pb2-sm pl4-sm'
+                       placeholder='Filter SDB'
+                       onChange={this.handleSearchBoxChange}/>
+                { sideBarContent(this.handleMouseClickAddNewBucket, this.handleSDBClicked, this.props, this.state.keyword) }
             </div>
         )
     }
 }
 
-const sideBarContent = (handleMouseClickAddNewBucket, handleSDBClicked, props) => {
+const sideBarContent = (handleMouseClickAddNewBucket, handleSDBClicked, props, keyword) => {
     if (props.isFetching) {
         return (
             <div className='loader'>
@@ -57,12 +65,12 @@ const sideBarContent = (handleMouseClickAddNewBucket, handleSDBClicked, props) =
 
     return (
         <div className='sidebar-categories'>
-            {categories(handleMouseClickAddNewBucket, handleSDBClicked, props.data)}
+            {categories(handleMouseClickAddNewBucket, handleSDBClicked, props.data, keyword)}
         </div>
     )
 }
 
-const categories = (handleMouseClickAddNewBucket, handleSDBClicked, data) => {
+const categories = (handleMouseClickAddNewBucket, handleSDBClicked, data, keyword) => {
     var categories = []
     for (let key in data) {
         if (data.hasOwnProperty(key)) {
@@ -79,24 +87,26 @@ const categories = (handleMouseClickAddNewBucket, handleSDBClicked, data) => {
                         <div className="ncss-glyph-plus-lg icon"></div>
                         <div className="txt">Create a New SDB</div>
                     </div>
-                    {bucketComponents(category.boxes, handleSDBClicked)}
+                    {bucketComponents(category.boxes, handleSDBClicked, keyword)}
                 </div>
             )
         }
     }
     return categories
 }
 
-const bucketComponents = (boxes, handleSDBClicked) => {
+const bucketComponents = (boxes, handleSDBClicked, keyword) => {
     let bucketComponents = []
     for (let box of boxes) {
-        bucketComponents.push(
-            <div className='border-bottom-light-grey sidebar-button un-selectable'
-                 key={box.id}
-                 onClick={handleSDBClicked.bind(this, box.id, box.path)} >
-                <div className='ncss-brand u-uppercase'>{box.name}</div>
-            </div>
-        )
+        if (box.name.toLowerCase().indexOf(keyword) !== -1) {
+            bucketComponents.push(
+                <div className='border-bottom-light-grey sidebar-button un-selectable'
+                     key={box.id}
+                     onClick={handleSDBClicked.bind(this, box.id, box.path)}>
+                    <div className='ncss-brand u-uppercase'>{box.name}</div>
+                </div>
+            )
+        }
     }
     return bucketComponents
 }

dashboard/app/components/SideBar/SideBar.scss

@@ -81,4 +81,8 @@
   &:hover {
     background-color: $snkrs_off_white;
   }
+}
+
+.sidebar-search-container {
+  padding-top: 5px;
 }

gradle.properties

@@ -14,6 +14,6 @@
 # limitations under the License.
 #
 
-version=3.27.1
+version=3.28.0
 groupId=com.nike.cerberus
 artifactId=cms