Auto merge of #4481 - Turbo87:keyword-error, r=Turbo87

keyword: Show error page if data loading fails

... or empty list if no crates match or keyword does not exist

Author: bors

app/controllers/keyword/index.js renamed to app/controllers/keyword.js

@@ -3,15 +3,15 @@ import { tracked } from '@glimmer/tracking';
 
 import { reads } from 'macro-decorators';
 
-import { pagination } from '../../utils/pagination';
+import { pagination } from '../utils/pagination';
 
 export default class KeywordIndexController extends Controller {
   queryParams = ['page', 'per_page', 'sort'];
   @tracked page = '1';
   @tracked per_page = 10;
   @tracked sort = 'recent-downloads';
 
-  @reads('model.meta.total') totalItems;
+  @reads('model.crates.meta.total') totalItems;
 
   @pagination() pagination;
 

app/routes/keyword.js

@@ -1,22 +1,24 @@
-import { NotFoundError } from '@ember-data/adapter/error';
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
-export default class KeywordRoute extends Route {
-  @service notifications;
+export default class KeywordIndexRoute extends Route {
   @service router;
   @service store;
 
-  async model({ keyword_id }) {
+  queryParams = {
+    page: { refreshModel: true },
+    sort: { refreshModel: true },
+  };
+
+  async model(params, transition) {
+    let { keyword_id: keyword, page, sort } = params;
+
     try {
-      return await this.store.find('keyword', keyword_id);
+      let crates = await this.store.query('crate', { keyword, page, sort });
+      return { keyword, crates };
     } catch (error) {
-      if (error instanceof NotFoundError) {
-        this.notifications.error(`Keyword '${keyword_id}' does not exist`);
-        return this.router.replaceWith('index');
-      }
-
-      throw error;
+      let title = `${keyword}: Failed to load crates`;
+      this.router.replaceWith('catch-all', { transition, error, title, tryAgain: true });
     }
   }
 }

app/routes/keyword/index.js

@@ -165,7 +165,7 @@
           {{#each this.model.popular_keywords as |keyword|}}
             <li>
               <FrontPageList::Item
-                @link={{link "keyword" keyword}}
+                @link={{link "keyword" keyword.id}}
                 @title={{keyword.id}}
                 @subtitle="{{format-num keyword.crates_cnt}} crates"
               />

app/templates/index.hbs

@@ -1,6 +1,6 @@
-{{page-title this.keyword.keyword ' - Keywords'}}
+{{page-title @model.keyword ' - Keywords'}}
 
-<PageHeader @title="All Crates" @suffix="for keyword '{{this.keyword.keyword}}'"/>
+<PageHeader @title="All Crates" @suffix="for keyword '{{@model.keyword}}'"/>
 
 <div local-class="results-meta">
   <ResultsCount
@@ -22,6 +22,6 @@
   </div>
 </div>
 
-<CrateList @crates={{this.model}} local-class="list" />
+<CrateList @crates={{@model.crates}} local-class="list" />
 
 <Pagination @pagination={{this.pagination}} />

app/templates/keyword/index.hbs renamed to app/templates/keyword.hbs

@@ -8,17 +8,20 @@ import { visit } from '../helpers/visit-ignoring-abort';
 module('Route | keyword', function (hooks) {
   setupApplicationTest(hooks);
 
-  test("shows an error message if the keyword can't be found", async function (assert) {
-    await visit('/keywords/unknown');
-    assert.equal(currentURL(), '/');
-    assert.dom('[data-test-notification-message]').hasText("Keyword 'unknown' does not exist");
+  test('shows an empty list if the keyword does not exist on the server', async function (assert) {
+    await visit('/keywords/foo');
+    assert.equal(currentURL(), '/keywords/foo');
+    assert.dom('[data-test-crate-row]').doesNotExist();
   });
 
   test('server error causes the error page to be shown', async function (assert) {
-    this.server.get('/api/v1/keywords/:keywordId', {}, 500);
+    this.server.get('/api/v1/crates', {}, 500);
 
-    await visit('/keywords/error');
-    assert.equal(currentURL(), '/keywords/error');
-    assert.dom('[data-test-error-message]').includesText('GET /api/v1/keywords/error returned a 500');
+    await visit('/keywords/foo');
+    assert.equal(currentURL(), '/keywords/foo');
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('foo: Failed to load crates');
+    assert.dom('[data-test-go-back]').doesNotExist();
+    assert.dom('[data-test-try-again]').exists();
   });
 });