Handle more lints, modernize a component and some tests

Author: kategengler

app/components/api-index-filter.hbs

@@ -1 +1,3 @@
-{{yield this.filteredData}}
+<div class="api-index-filter">
+  {{yield this.filteredData}}
+</div>

app/components/api-index-filter.js

@@ -1,12 +1,6 @@
-/* eslint-disable ember/no-computed-properties-in-native-classes */
-import { classNames } from '@ember-decorators/component';
-import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import sortBy from 'lodash.sortby';
 
-const filterDataComputedParams =
-  'filterData.{showInherited,showProtected,showPrivate,showDeprecated}';
-
 /**
  * @typedef Args
  * @property {object} model
@@ -21,44 +15,41 @@ const filterDataComputedParams =
 /**
  * @extends Component<{ Args: Args, Blocks: Blocks }>
  */
-@classNames('api-index-filter')
 export default class ApiIndexFilter extends Component {
-  @computed('model.methods.[]', filterDataComputedParams)
   get filteredMethods() {
     return this.filterItems('methods');
   }
 
-  @computed('model.events.[]', filterDataComputedParams)
   get filteredEvents() {
     return this.filterItems('events');
   }
 
-  @computed('model.properties.[]', filterDataComputedParams)
   get filteredProperties() {
     return this.filterItems('properties');
   }
 
   filterItems(itemType) {
     let items =
-      this.model[itemType] === undefined ? [] : this.model[`${itemType}`];
-    if (!this.filterData.showInherited) {
+      this.args.model[itemType] === undefined
+        ? []
+        : this.args.model[`${itemType}`];
+    if (!this.args.filterData.showInherited) {
       items = items.filter((item) => item.inherited !== true);
     }
-    if (!this.filterData.showProtected) {
+    if (!this.args.filterData.showProtected) {
       items = items.filter((item) => item.access !== 'protected');
     }
-    if (!this.filterData.showPrivate) {
+    if (!this.args.filterData.showPrivate) {
       items = items.filter((item) => item.access !== 'private');
     }
-    if (!this.filterData.showDeprecated) {
+    if (!this.args.filterData.showDeprecated) {
       items = items.filter((item) => item.deprecated !== true);
     }
 
     let sortedItems = sortBy(items, (item) => item.name);
     return this.filterMultipleInheritance(sortedItems);
   }
 
-  @computed('filteredMethods', 'filteredProperties', 'filteredEvents')
   get filteredData() {
     return {
       methods: this.filteredMethods,
@@ -103,8 +94,8 @@ export default class ApiIndexFilter extends Component {
    * @method findMostLocal
    */
   findMostLocal(currentItem, nextItem) {
-    let currentScope = this.model.file;
-    let parentClassScope = this.model.get('parentClass').get('file');
+    let currentScope = this.args.model.file;
+    let parentClassScope = this.args.model.parentClass.get('file');
     if (currentScope === currentItem.file) {
       // if the item belongs to the class, keep it
       return currentItem;

app/components/api-search.gjs

@@ -8,21 +8,21 @@ import { on } from '@ember/modifier';
 import Search from './search';
 
 const SearchResultGroupHeader = <template>
-  <div class='search-results--group-header' ...attributes>
+  <div class="search-results--group-header" ...attributes>
     {{yield}}
   </div>
 </template>;
 
 const SearchResultLinkContents = <template>
-  <span class='screen-reader-text'>{{@groupName}}</span>
+  <span class="screen-reader-text">{{@groupName}}</span>
   {{htmlSafe @result._highlightResult.hierarchy.lvl2.value}}
   {{! Do these ever display in API Docs? }}
   {{#if @result._highlightResult.hierarchy.lvl3}}
-    <span aria-hidden='true'> › </span>
+    <span aria-hidden="true"> › </span>
     {{htmlSafe @result._highlightResult.hierarchy.lvl3.value}}
   {{/if}}
   {{#if @result._highlightResult.hierarchy.lvl4}}
-    <span aria-hidden='true'> › </span>
+    <span aria-hidden="true"> › </span>
     {{htmlSafe @result._highlightResult.hierarchy.lvl4.value}}
   {{/if}}
 </template>;
@@ -54,23 +54,23 @@ const SearchResult = class SearchResult extends Component {
   };
 
   <template>
-    <div class='search-results--result'>
-      <div class='search-results--subcategory-column' aria-hidden='true'>
+    <div class="search-results--result">
+      <div class="search-results--subcategory-column" aria-hidden="true">
         {{#if (eq @groupPosition 0)}}
           {{@groupName}}
         {{/if}}
       </div>
-      <div class='search-results--content'>
+      <div class="search-results--content">
         {{#if @result.static}}
           <LinkTo
-            @route='project-version.functions.function'
+            @route="project-version.functions.function"
             @models={{array
               this.module
               this.version
               @result.class
               @result.name
             }}
-            {{on 'click' @closeMenu}}
+            {{on "click" @closeMenu}}
             data-test-search-result
           >
             <SearchResultLinkContents
@@ -79,7 +79,7 @@ const SearchResult = class SearchResult extends Component {
             />
           </LinkTo>
         {{else}}
-          <a href='{{this.urlForClass @result}}' data-test-search-result>
+          <a href="{{this.urlForClass @result}}" data-test-search-result>
             <SearchResultLinkContents
               @result={{@result}}
               @groupName={{@groupName}}
@@ -141,7 +141,7 @@ const SearchResults = class SearchBox extends Component {
 
   <template>
     {{#each-in this.groupedResults as |lvl0section _lvl0results|}}
-      <SearchResultGroupHeader aria-hidden='true'>
+      <SearchResultGroupHeader aria-hidden="true">
         {{lvl0section}}
       </SearchResultGroupHeader>
 

app/components/scroll-to-top-button.gjs

@@ -24,10 +24,10 @@ function scrollToTopOfPageOnClick() {
 
 <template>
   <button
-    type='button'
+    type="button"
     {{showOnScroll}}
-    {{on 'click' scrollToTopOfPageOnClick}}
-    class='scroll-to-top'
-    alt='Scroll to top'
+    {{on "click" scrollToTopOfPageOnClick}}
+    class="scroll-to-top"
+    alt="Scroll to top"
   ></button>
 </template>

app/components/search.gjs

@@ -138,52 +138,52 @@ export default class Search extends Component {
 
   <template>
     <div
-      class='search-wrapper'
+      class="search-wrapper"
       {{closeOnFocusOutside this.closeMenu.perform}}
       {{closeOnEscape this.closeMenu.perform this.isOpen}}
       {{closeOnClickOutside this.closeMenu.perform}}
       ...attributes
     >
       <form
-        role='search'
-        {{on 'submit' this.submitSearch}}
+        role="search"
+        {{on "submit" this.submitSearch}}
         data-test-search-form
       >
         <label
-          for='{{this.searchInputId}}'
-          class='screen-reader-text'
+          for="{{this.searchInputId}}"
+          class="screen-reader-text"
           data-test-search-label
         >
-          {{yield to='searchInputScreenReaderLabel'}}
+          {{yield to="searchInputScreenReaderLabel"}}
         </label>
         <input
-          class='search-input'
-          id='{{this.searchInputId}}'
-          type='search'
-          {{on 'input' this.search.perform}}
-          {{on 'focus' this.onfocus}}
-          autocomplete='off'
-          autocorrect='off'
-          autocapitalize='off'
+          class="search-input"
+          id="{{this.searchInputId}}"
+          type="search"
+          {{on "input" this.search.perform}}
+          {{on "focus" this.onfocus}}
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
           spellcheck={{false}}
-          placeholder='Search'
+          placeholder="Search"
           aria-controls={{if this.isOpen this.resultsId}}
           aria-owns={{if this.isOpen this.resultsId}}
-          aria-expanded={{if this.isOpen 'true' 'false'}}
+          aria-expanded={{if this.isOpen "true" "false"}}
           data-test-search-input
         />
       </form>
       {{#if this.isOpen}}
         <div
-          id='{{this.resultsId}}'
-          class='search-results'
-          aria-label='Search Results'
+          id="{{this.resultsId}}"
+          class="search-results"
+          aria-label="Search Results"
           data-test-search-dropdown
         >
           <div
-            class='screen-reader-text'
-            aria-live='polite'
-            aria-atomic='true'
+            class="screen-reader-text"
+            aria-live="polite"
+            aria-atomic="true"
             data-test-screen-reader
           >
             {{#if this.noResults}}
@@ -194,38 +194,38 @@ export default class Search extends Component {
             {{/if}}
           </div>
           {{#if this.searchService.search.isRunning}}
-            <div class='search-results--searching'>
+            <div class="search-results--searching">
               Searching...
             </div>
           {{else if this.noResults}}
-            <div class='search-results--no-results' data-test-search-no-results>
+            <div class="search-results--no-results" data-test-search-no-results>
               No Results Found.
               <p>Try searching the
                 <a
-                  href='https://www.emberjs.com/deprecations/'
-                  target='_deprecations'
+                  href="https://www.emberjs.com/deprecations/"
+                  target="_deprecations"
                 >deprecations guide</a>.</p>
             </div>
           {{else if this.queryIsPresent}}
             {{yield
               this.searchService.results
               this.closeMenu.perform
-              to='results'
+              to="results"
             }}
           {{else}}
-            <div class='search-results--instructions'>
-              {{yield to='instructions'}}
+            <div class="search-results--instructions">
+              {{yield to="instructions"}}
             </div>
           {{/if}}
-          <div class='powered-by-algolia'>
+          <div class="powered-by-algolia">
             <a
-              href='https://www.algolia.com/'
-              target='_blank'
-              rel='noopener noreferrer'
+              href="https://www.algolia.com/"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <img
-                src='/assets/images/search-by-algolia.svg'
-                alt='Search Powered by Algolia'
+                src="/assets/images/search-by-algolia.svg"
+                alt="Search Powered by Algolia"
               />
             </a>
           </div>

app/controllers/project-version.js

@@ -71,8 +71,7 @@ export default class ProjectVersionController extends Controller {
   }
 
   getRelationshipIDs(relationship) {
-    // eslint-disable-next-line ember/classic-decorator-no-classic-methods
-    const projectId = this.get('model.project.id');
+    const projectId = this.model.project.id;
     const classes = this.model.hasMany(relationship);
     const sorted = A(classes.ids()).sort();
     //ids come in as ember-2.16.0-@ember/object/promise-proxy-mixin or ember-4.12.0-alpha.23-@ember/object/promise-proxy-mixin

app/controllers/project-version/classes/class.js

@@ -58,24 +58,22 @@ export default class ClassController extends Controller {
   @computed('legacyModuleMappings.mappings', 'model.{module,name}')
   get hasImportExample() {
     return this.legacyModuleMappings.hasClassMapping(
-      this.get('model.name'),
-      this.get('model.module'),
+      this.model.name,
+      this.model.module,
     );
   }
 
   @computed('legacyModulemappings.mappings', 'model.{module,name}')
   get module() {
     return this.legacyModuleMappings.getModule(
-      this.get('model.name'),
-      this.get('model.module'),
+      this.model.name,
+      this.model.module,
     );
   }
 
   @computed('metaStore.availableProjectVersions', 'model.project.id')
   get allVersions() {
-    return this.get('metaStore.availableProjectVersions')[
-      this.get('model.project.id')
-    ];
+    return this.metaStore.availableProjectVersions[this.model.project.id];
   }
 
   get parentName() {
@@ -84,6 +82,6 @@ export default class ClassController extends Controller {
 
   @action
   updateFilter(filter) {
-    this.toggleProperty(`filterData.${filter}`);
+    this.filterData[filter] = !this.filterData[filter];
   }
 }