Drop ember-concurrency 1.x support, fix ember-keyboard deprecations (#854)

* Start fixing ember-keyboard deprecations

* Fix import

* Refactor away from keyboard mixins

* Fix lint

* Drop ember-concurrency 1.x support

* Update ember-concurrency

Author: RobbieTheWagner

.github/workflows/ci-cd.yml

@@ -130,7 +130,6 @@ jobs:
           - 'ember-canary'
           - 'ember-default-with-jquery'
           - 'ember-classic'
-          - 'ember-concurrency-1.x'
           - 'ember-concurrency-2.x'
     timeout-minutes: 7
     steps:

addon/components/docs-header/search-box/component.js

@@ -1,46 +1,46 @@
 import Component from '@ember/component';
-import layout from './template';
-import { EKMixin, keyUp } from 'ember-keyboard';
-import { on } from '@ember/object/evented';
+import template from './template';
 import { task } from 'ember-concurrency';
 import config from 'ember-get-config';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { classNames, layout } from '@ember-decorators/component';
 import { formElementHasFocus } from 'ember-cli-addon-docs/keyboard-config';
 
 const projectName = config['ember-cli-addon-docs'].projectName;
 
-export default Component.extend(EKMixin, {
-  layout,
-  store: service(),
+@classNames('docs-ml-auto')
+@layout(template)
+export default class DocsHeaderSearchBoxComponent extends Component {
+  @service store;
 
-  classNames: 'docs-ml-auto',
-
-  query: null,
-
-  keyboardActivated: true,
+  query = null;
 
   didInsertElement() {
-    this._super();
+    super.didInsertElement(...arguments);
 
     this.fetchProject.perform();
-  },
+  }
 
   // TODO: The searchbox doesn't work without the project being fetched.
   // We should move this logic (and everywhere else in the code that's fetching
   // the project) within a new addonDocs service that wires all that up together.
   // I think it's fine if our Docs-* components assume there is a single global
   // project.
-  fetchProject: task(function*() {
+  @task
+  *fetchProject() {
     yield this.store.findRecord('project', projectName);
-  }),
+  }
 
-  focusSearch: on(keyUp('Slash'), function() {
+  @action
+  focusSearch() {
     if (!formElementHasFocus()) {
       this.element.querySelector('input').focus();
     }
-  }),
+  }
 
-  unfocusSearch: on(keyUp('Escape'), function() {
+  @action
+  unfocusSearch() {
     this.get('on-input')(null);
-  })
-});
+  }
+}

addon/components/docs-header/search-box/template.hbs

@@ -1,19 +1,29 @@
 <div class="docs-relative docs-text-grey-darkest" data-search-box>
-  {{svg-jar "search" width=12 height=12 class="docs-absolute docs-top-0 docs-h-full docs-ml-1"}}
+  {{svg-jar
+    "search"
+    width=12
+    height=12
+    class="docs-absolute docs-top-0 docs-h-full docs-ml-1"
+  }}
 
   {{!--
     This is a dumb input - so why not use the {{input}} helper? Because apparently
     it takes over enter and ctrl+n/p keys. We are using those for our own shortcuts
     so we stick with the dumb html element. Maybe there's a way to disable them
     and get the convenient two-way binding.
    --}}
-  <input oninput={{action @on-input value="target.value"}}
+  <input
+    oninput={{action @on-input value="target.value"}}
     value={{@query}}
     type="text"
     disabled={{this.fetchProject.isRunning}}
     placeholder="SEARCH"
     class="docs-w-24 docs-text-xxs docs-p-2 docs-pl-6 docs-rounded focus:docs-bg-grey-lighter outline-none"
     data-search-box-input
     data-test-search-box-input
-    aria-label="search">
+    aria-label="search"
+  />
 </div>
+
+{{on-key "/" this.focusSearch event="keyup"}}
+{{on-key "Escape" this.unfocusSearch event="keyup"}}

addon/components/docs-header/search-results/component.js

@@ -1,150 +1,174 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import layout from './template';
-import { EKMixin, keyUp, keyDown } from 'ember-keyboard';
-import { on } from '@ember/object/evented';
+import { action } from '@ember/object';
+import template from './template';
+import { keyResponder, onKey } from 'ember-keyboard';
+import { layout } from '@ember-decorators/component';
 import { computed } from '@ember/object';
 import { task } from 'ember-concurrency';
 import config from 'ember-get-config';
 
 const projectName = config['ember-cli-addon-docs'].projectName;
 
-export default Component.extend(EKMixin, {
-  layout,
+@keyResponder
+@layout(template)
+export default class DocsHeaderSearchResultsComponent extends Component {
+  @service docsSearch;
+  @service router;
+  @service store;
 
-  docsSearch: service(),
-  router: service(),
-  store: service(),
-
-  query: null, // passed in
-  selectedIndex: null,
-
-  keyboardActivated: true,
+  query = null; // passed in
+  selectedIndex = null;
 
   didInsertElement() {
-    this._super();
+    super.didInsertElement(...arguments);
 
     // Start downloading the search index immediately
     this.docsSearch.loadSearchIndex();
-  },
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     this.search.perform();
-  },
+  }
 
-  project: computed(function() {
+  get project() {
     return this.store.peekRecord('project', projectName);
-  }),
+  }
 
-  trimmedQuery: computed('query', function() {
+  @computed('query')
+  get trimmedQuery() {
     return this.query.trim();
-  }),
+  }
 
-  search: task(function*() {
+  @task({ restartable: true })
+  *search() {
     let results;
 
     if (this.trimmedQuery) {
       results = yield this.docsSearch.search(this.trimmedQuery);
     }
 
-    this.set('selectedIndex', (results.length ? 0 : null));
+    this.set('selectedIndex', results.length ? 0 : null);
     this.set('rawSearchResults', results);
-  }).restartable(),
+  }
 
-  searchResults: computed('project.navigationIndex', 'rawSearchResults.[]', function() {
+  @computed('project.navigationIndex', 'rawSearchResults.[]')
+  get searchResults() {
     let rawSearchResults = this.rawSearchResults;
     let router = this.router;
-    let routerMicrolib = router._router._routerMicrolib || router._router.router;
+    let routerMicrolib =
+      router._router._routerMicrolib || router._router.router;
 
     if (rawSearchResults) {
-      return this.rawSearchResults
-        // If the doc has a route, ensure it exists
-        .filter(({ document }) => {
-          if (document.route) {
-            let routeExists = routerMicrolib.recognizer.names[document.route];
-
-            return routeExists && document.route !== 'not-found' && document.route !== 'application';
-          } else {
-            return true;
-          }
-        })
-
-        // Filter out the templates of the API items' pages, since we handle them separately
-        .filter(({ document }) => {
-          let isApiItemTemplate = (document.route === 'docs.api.item' && document.type === 'template');
-          return !isApiItemTemplate;
-        })
-
-        // Filter out modules that are not in the navigationIndex
-        .filter(({ document }) => {
-          if (document.type === 'module') {
-            let navigableModules = this.get('project.navigationIndex').find(section => section.type === 'modules');
-            let navigableModuleIds = navigableModules ? navigableModules.items.map(item => item.id) : [];
-
-            return navigableModuleIds.includes(document.title);
-          } else {
-            return true;
-          }
-        })
-
-        // Add a reference to the Ember Data model to each API item search result
-        .map(searchResult => {
-          let { document } = searchResult;
-          if (document.type !== 'template') {
-            let store = this.store;
-            searchResult.model = store.peekRecord(document.type, document.item.id)
-          }
-
-          return searchResult;
-        });
+      return (
+        this.rawSearchResults
+          // If the doc has a route, ensure it exists
+          .filter(({ document }) => {
+            if (document.route) {
+              let routeExists = routerMicrolib.recognizer.names[document.route];
+
+              return (
+                routeExists &&
+                document.route !== 'not-found' &&
+                document.route !== 'application'
+              );
+            } else {
+              return true;
+            }
+          })
+
+          // Filter out the templates of the API items' pages, since we handle them separately
+          .filter(({ document }) => {
+            let isApiItemTemplate =
+              document.route === 'docs.api.item' &&
+              document.type === 'template';
+            return !isApiItemTemplate;
+          })
+
+          // Filter out modules that are not in the navigationIndex
+          .filter(({ document }) => {
+            if (document.type === 'module') {
+              let navigableModules = this.get('project.navigationIndex').find(
+                (section) => section.type === 'modules'
+              );
+              let navigableModuleIds = navigableModules
+                ? navigableModules.items.map((item) => item.id)
+                : [];
+
+              return navigableModuleIds.includes(document.title);
+            } else {
+              return true;
+            }
+          })
+
+          // Add a reference to the Ember Data model to each API item search result
+          .map((searchResult) => {
+            let { document } = searchResult;
+            if (document.type !== 'template') {
+              let store = this.store;
+              searchResult.model = store.peekRecord(
+                document.type,
+                document.item.id
+              );
+            }
+
+            return searchResult;
+          })
+      );
     }
-  }),
 
-  gotoSelectedItem: on(keyUp('Enter'), function() {
+    return undefined;
+  }
+
+  @onKey('Enter', { event: 'keyup' })
+  gotoSelectedItem() {
     if (this.selectedIndex !== null) {
       let selectedResult = this.searchResults[this.selectedIndex];
       if (selectedResult.document.type === 'template') {
         this.router.transitionTo(selectedResult.document.route);
       } else {
-        this.router.transitionTo('docs.api.item', selectedResult.model.get('routingId'));
+        this.router.transitionTo(
+          'docs.api.item',
+          selectedResult.model.get('routingId')
+        );
       }
     }
 
     this.get('on-visit')();
-  }),
+  }
 
-  nextSearchResult: on(keyDown('ctrl+KeyN'), keyDown('ArrowDown'), function() {
+  @onKey('ctrl+KeyN')
+  @onKey('ArrowDown')
+  nextSearchResult() {
     let hasSearchResults = this.get('searchResults.length');
-    let lastResultIsSelected = (this.selectedIndex + 1 === this.get('searchResults.length'));
+    let lastResultIsSelected =
+      this.selectedIndex + 1 === this.get('searchResults.length');
 
     if (hasSearchResults && !lastResultIsSelected) {
       this.incrementProperty('selectedIndex');
     }
-  }),
+  }
 
-  previousSearchResult: on(keyDown('ctrl+KeyP'), keyDown('ArrowUp'), function() {
+  @onKey('ctrl+KeyP')
+  @onKey('ArrowUp')
+  previousSearchResult() {
     let hasSearchResults = this.get('searchResults.length');
-    let firstResultIsSelected = (this.selectedIndex === 0);
+    let firstResultIsSelected = this.selectedIndex === 0;
 
     if (hasSearchResults && !firstResultIsSelected) {
       this.decrementProperty('selectedIndex');
     }
-  }),
+  }
 
+  @action
   clearSearch() {
     this.set('query', null);
-  },
-
-  actions: {
-    selectResult(index) {
-      this.set('selectedIndex', index);
-    },
-
-    clearSearch() {
-      this.clearSearch();
-    },
   }
 
-});
+  @action
+  selectResult(index) {
+    this.set('selectedIndex', index);
+  }
+}