Allow filter of Proposed work items

src/react/Components/WorkItem/WorkItemListItem.scss

@@ -3,8 +3,8 @@
     flex-direction: row;
     color: white;
     text-align: center;
-    margin-top: 2px;
-    font-size: 15px;
+    margin: 4px;
+    font-size: 12px;
     padding: 2px;
     text-overflow: ellipsis;
     overflow: hidden;

src/react/Components/WorkItemList.scss

@@ -0,0 +1,4 @@
+.work-item-list-container{
+    display: flex;
+    flex-direction: column;
+}

src/react/Components/WorkItemList.tsx

@@ -6,6 +6,7 @@ import { launchWorkItemForm } from '../../redux/store/workitems/actionCreators';
 import { List } from 'office-ui-fabric-react/lib/List';
 import DraggableWorkItemListItemRenderer from './WorkItem/DraggableWorkItemListItemRenderer';
 import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
 
 export interface IWorkItemListItem {
     id: number;
@@ -20,25 +21,58 @@ export interface IWorkItemListProps {
 }
 
 export interface IWorkItemListState {
+    filter: string;
 }
 
 class WorkItemList extends React.Component<IWorkItemListProps, IWorkItemListState> {
+    public constructor(props: IWorkItemListProps) {
+        super(props);
+        this.state = {
+            filter: null
+        }
+    }
+
     public render() {
-        if (this.props.workItems.length === 0) {
+        if (this.props.workItems.length === 0 || !this.props.workItems) {
             return (
                 <MessageBar>No new features to plan.</MessageBar>
             );
         }
+
+        const workItems = this._filteredItems(this.props.workItems);
+        let message = null;
+        if (workItems.length === 0) {
+            message = <MessageBar>Only top 50 Proposed features are available.</MessageBar>;
+        }
         return (
             <div className="work-item-list-container">
+                <TextField placeholder="Search Features" onChanged={this._changeFilter} ></TextField>
                 <List
-                    items={this.props.workItems}
+                    items={workItems}
                     onRenderCell={this._onRenderCell}
                 />
+                {message}
             </div>
         );
     }
 
+    private _changeFilter = (text: string) => {
+        this.setState({
+            filter: text
+        });
+    }
+
+    private _filteredItems = (arg0: IWorkItemListItem[]): IWorkItemListItem[] => {
+        const {
+            filter
+        } = this.state;
+        if (!filter || !arg0) {
+            return arg0;
+        }
+
+        return arg0.filter(w => w.title.toLowerCase().indexOf(filter.toLowerCase()) >= 0);
+    }
+
     private _onRenderCell = (item: IWorkItemListItem, index: number) => {
         return (
             <DraggableWorkItemListItemRenderer {...item} onClick={this.props.launchWorkItemForm} />