Convert `<search-input>` to a component

src/sidebar/app.js

@@ -146,6 +146,7 @@ module.exports = angular.module('h', [
   .component('loginControl', require('./directive/login-control'))
   .component('loginForm', require('./directive/login-form').component)
   .component('publishAnnotationBtn', require('./directive/publish-annotation-btn'))
+  .component('searchInput', require('./directive/search-input'))
   .component('searchStatusBar', require('./directive/search-status-bar'))
   .component('sidebarTutorial', require('./directive/sidebar-tutorial').component)
   .component('shareDialog', require('./directive/share-dialog'))
@@ -159,7 +160,6 @@ module.exports = angular.module('h', [
   .directive('hOnTouch', require('./directive/h-on-touch'))
   .directive('hTooltip', require('./directive/h-tooltip'))
   .directive('markdown', require('./directive/markdown'))
-  .directive('searchInput', require('./directive/search-input'))
   .directive('selectionTabs', require('./directive/selection-tabs'))
   .directive('sortDropdown', require('./directive/sort-dropdown'))
   .directive('spinner', require('./directive/spinner'))

src/sidebar/directive/search-input.js

@@ -32,14 +32,10 @@ function SearchInputController($element, $http, $scope) {
   };
 }
 
-// @ngInject
-module.exports = function () {
-  return {
-    bindToController: true,
+module.exports = {
   controller: SearchInputController,
   controllerAs: 'vm',
-    restrict: 'E',
-    scope: {
+  bindings: {
     // Specifies whether the search input field should always be expanded,
     // regardless of whether the it is focused or has an active query.
     //
@@ -49,5 +45,4 @@ module.exports = function () {
     onSearch: '&',
   },
   template: require('../templates/search_input.html'),
-  };
 };

src/sidebar/directive/test/search-input-test.js

@@ -9,7 +9,7 @@ describe('searchInput', function () {
 
   before(function () {
     angular.module('app', [])
-      .directive('searchInput', require('../search-input'));
+      .component('searchInput', require('../search-input'));
   });
 
   beforeEach(function () {