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,22 +32,17 @@ function SearchInputController($element, $http, $scope) {
   };
 }
 
-// @ngInject
-module.exports = function () {
-  return {
-    bindToController: true,
-    controller: SearchInputController,
-    controllerAs: 'vm',
-    restrict: 'E',
-    scope: {
-      // Specifies whether the search input field should always be expanded,
-      // regardless of whether the it is focused or has an active query.
-      //
-      // If false, it is only expanded when focused or when 'query' is non-empty
-      alwaysExpanded: '<',
-      query: '<',
-      onSearch: '&',
-    },
-    template: require('../templates/search_input.html'),
-  };
+module.exports = {
+  controller: SearchInputController,
+  controllerAs: 'vm',
+  bindings: {
+    // Specifies whether the search input field should always be expanded,
+    // regardless of whether the it is focused or has an active query.
+    //
+    // If false, it is only expanded when focused or when 'query' is non-empty
+    alwaysExpanded: '<',
+    query: '<',
+    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 () {