Merge pull request #814 from geneukum/update-search-input-component-to-glimmer

Update search input component to glimmer

Author: chriskrycho

.eslintrc.js

@@ -23,12 +23,9 @@ module.exports = {
     'no-console': 'off',
     'ember/no-new-mixins': 'off',
     'ember/no-mixins': 'off',
-    'ember/native-classes': 'off',
     'ember/require-tagless-components': 'off',
-    'ember/no-test-this-render': 'off',
     'ember/no-classic-classes': 'off',
     'ember/no-get': 'off',
-    'ember/no-actions-hash': 'off',
     'ember/no-classic-components': 'off',
     'ember/no-private-routing-service': 'off',
   },

app/components/search-input.hbs

@@ -0,0 +1,33 @@
+<div class='search-input'>
+  <input
+    id='search-input'
+    type='search'
+    value={{this.value}}
+    oninput={{perform this.search value='target.value'}}
+    onfocus={{action 'onfocus'}}
+    onblur={{action 'onblur'}}
+    placeholder='Search'
+    data-test-search-input
+  />
+  {{! Search results dropdown }}
+  <EmberTether
+    @target='#search-input'
+    @targetAttachment='bottom left'
+    @attachment='top left'
+    @constraints={{this._resultTetherConstraints}}
+    @class='ds-dropdown-results'
+  >
+    <SearchInput::Dropdown
+      @isVisible={{this._focused}}
+      @results={{this.searchService.results}}
+      @noResults={{if
+        (and
+          (and (not this.searchService.search.isRunning) this.queryIsPresent)
+          (eq this.searchService.results.length 0)
+        )
+        true
+        false
+      }}
+    />
+  </EmberTether>
+</div>

app/components/search-input.js

@@ -1,75 +1,65 @@
-import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
-import { get, set, computed } from '@ember/object';
-import { isPresent, isEmpty } from '@ember/utils';
+import Component from '@glimmer/component';
+import { get } from '@ember/object';
+import { isPresent } from '@ember/utils';
 import { task, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 const SEARCH_DEBOUNCE_PERIOD = 300;
 const SEARCH_CLOSE_PERIOD = 200;
 
-export default Component.extend({
-  query: '',
+export default class SearchInput extends Component {
+  @tracked query = '';
+  @tracked _focused = false;
 
-  classNames: ['search-input'],
-  searchService: service('search'),
+  @service('search') searchService;
 
-  _results: A(),
-  _focused: false,
-  _resultTetherConstraints: null,
+  _resultTetherConstraints = null;
+
+  constructor() {
+    super(...arguments);
 
-  init() {
     this._resultTetherConstraints = [
       {
         to: 'window',
         pin: ['left', 'right'],
       },
     ];
-    this._super(...arguments);
-  },
-
-  noResults: computed(
-    'query',
-    'searchService.{results.[],search.isRunning}',
-    function () {
-      if (get(this, 'searchService.search.isRunning')) {
-        return false;
-      }
-      return (
-        isPresent(this.query) && isEmpty(get(this, 'searchService.results'))
-      );
-    }
-  ),
+  }
+
+  get queryIsPresent() {
+    return isPresent(this.query);
+  }
 
-  search: task(function* (query) {
+  @task({ restartable: true }) *search(query) {
     yield timeout(SEARCH_DEBOUNCE_PERIOD);
 
-    set(this, 'query', query);
+    this.query = query;
 
     // Hide and don't run query if there's no search query
     if (!query) {
-      return set(this, '_focused', false);
+      this._focused = false;
+      return;
     }
 
     // ensure search results are visible if the menu was previously closed above
-    set(this, '_focused', true);
+    this._focused = true;
 
     yield get(this, 'searchService.search').perform(query);
-  }).restartable(),
+  }
 
-  closeMenu: task(function* () {
+  @task *closeMenu() {
     yield timeout(SEARCH_CLOSE_PERIOD);
 
-    set(this, '_focused', false);
-  }),
+    this._focused = false;
+  }
 
-  actions: {
-    onfocus() {
-      set(this, '_focused', true);
-    },
+  @action onfocus() {
+    this._focused = true;
+  }
 
-    onblur() {
-      this.closeMenu.perform();
-    },
-  },
-});
+  @action onblur() {
+    this.closeMenu.perform();
+  }
+}

app/templates/components/search-input.hbs

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { fillIn, waitFor } from '@ember/test-helpers';
+import { fillIn, render, waitFor } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 import { set } from '@ember/object';
 
@@ -155,7 +155,7 @@ module('Integration | Component | search input', function (hooks) {
       ];
     });
 
-    await this.render(hbs`{{search-input}}`);
+    await render(hbs`<SearchInput/>`);
 
     await fillIn('#search-input', 'model');
 
@@ -171,7 +171,7 @@ module('Integration | Component | search input', function (hooks) {
       return [];
     });
 
-    await this.render(hbs`{{search-input}}`);
+    await render(hbs`<SearchInput/>`);
 
     await fillIn('#search-input', 'model');