Placeholder in dropdown for no canned responses #846

Show a placeholder text instead of a search box when there are no
canned responses created yet
Hey @bjfish. What do you think about creating a new variable that holds the "No canned responses yet" list item or the full list so we can swap it out here instead of duplicating the entire `btn-group`. Something like this could work:

```
var cannedResponseDropdown = null;
if(this.state.cannedResponses.length) {
  cannedResponseDropdown = (
    <ul className="dropdown-menu" role="menu">
      <li>
        <input type="text" className="form-control" placeholder="Search by key" onClick={this.ignore} onKeyUp={this.filterCannedResponses} />
      </li>
      <li className="divider"></li>
      {this.renderFilteredCannedResponses()} 
    </ul>
  );
} else {
  cannedResponseDropdown = (
    <ul className="dropdown-menu" role="menu">
      <li className="disabled">
       <a href="#">You haven't created any canned responses yet.</a>
      </li>
      <li className="divider"></li>
      <li>
       <a href="#">Create a canned response</a>
      </li>
    </ul>
  );
}

...

render: function() {
  return (
    <div className="btn-group command-bar-action">
      <button className="btn btn-default dropdown-toggle" data-toggle="dropdown" onClick={this.focusInput}>
        Canned Response {' '}
        <span className="caret"></span>
      </button>
      {cannedResponseDropdown}
    </div>
  );
}
```