Auto merge of #2940 - Turbo87:rev-deps, r=locks

crate.reverse-dependencies: Show error notification if data loading fails

Instead of showing an empty error page, this PR adjusts the code to show an error message popup through our regular `notifications` service system:

<img width="633" alt="Bildschirmfoto 2020-10-21 um 16 16 52" src="https://user-images.githubusercontent.com/141300/96732693-ea417280-13b8-11eb-96fc-b7aa5dae0042.png">

Related to #187

r? `@locks`

Author: bors

app/routes/crate/reverse-dependencies.js

@@ -1,15 +1,31 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ReverseDependenciesRoute extends Route {
+  @service notifications;
+
   queryParams = {
     page: { refreshModel: true },
   };
 
-  model(params) {
+  async model(params) {
     params.reverse = true;
     params.crate = this.modelFor('crate');
+    let crateName = params.crate.name;
+
+    try {
+      return await this.store.query('dependency', params);
+    } catch (error) {
+      let message = `Could not load reverse dependencies for the "${crateName}" crate`;
+
+      let details = error.errors?.[0]?.detail;
+      if (details && details !== '[object Object]') {
+        message += `: ${details}`;
+      }
 
-    return this.store.query('dependency', params);
+      this.notifications.error(message);
+      this.replaceWith('index');
+    }
   }
 
   setupController(controller) {

app/templates/crate/reverse-dependencies.hbs

@@ -11,11 +11,14 @@
   />
 </div>
 
-<div local-class="list">
-  {{#each this.model as |dependency|}}
-    <div local-class="row">
+<div local-class="list" data-test-list>
+  {{#each this.model as |dependency index|}}
+    <div local-class="row" data-test-row={{index}}>
       <div>
-        <LinkTo @route="crate" @model={{dependency.version.crateName}}>{{dependency.version.crateName}}</LinkTo> requires {{dependency.req}}
+        <LinkTo @route="crate" @model={{dependency.version.crateName}} data-test-crate-name>
+          {{dependency.version.crateName}}
+        </LinkTo>
+        requires {{dependency.req}}
       </div>
       <div local-class="stats downloads">
         {{svg-jar "download-arrow" local-class="download-icon"}}

tests/acceptance/reverse-dependencies-test.js

@@ -0,0 +1,90 @@
+import { click, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+import setupMirage from '../helpers/setup-mirage';
+import { visit } from '../helpers/visit-ignoring-abort';
+
+module('Acceptance | /crates/:crate_id/reverse_dependencies', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  function prepare({ server }) {
+    let foo = server.create('crate', { name: 'foo' });
+    server.create('version', { crate: foo });
+
+    let bar = server.create('crate', { name: 'bar' });
+    server.create('version', { crate: bar });
+
+    let baz = server.create('crate', { name: 'baz' });
+    server.create('version', { crate: baz });
+
+    server.create('dependency', { crate: foo, version: bar.versions.models[0] });
+    server.create('dependency', { crate: foo, version: baz.versions.models[0] });
+
+    return { foo, bar, baz };
+  }
+
+  test('shows a list of crates depending on the selected crate', async function (assert) {
+    let { foo, bar, baz } = prepare(this);
+
+    await visit(`/crates/${foo.name}/reverse_dependencies`);
+    assert.equal(currentURL(), `/crates/${foo.name}/reverse_dependencies`);
+    assert.dom('[data-test-row]').exists({ count: 2 });
+    assert.dom('[data-test-row="0"] [data-test-crate-name]').hasText(bar.name);
+    assert.dom('[data-test-row="1"] [data-test-crate-name]').hasText(baz.name);
+  });
+
+  test('supports pagination', async function (assert) {
+    let { foo } = prepare(this);
+
+    for (let i = 0; i < 20; i++) {
+      let crate = this.server.create('crate');
+      let version = this.server.create('version', { crate });
+      this.server.create('dependency', { crate: foo, version });
+    }
+
+    await visit(`/crates/${foo.name}/reverse_dependencies`);
+    assert.equal(currentURL(), `/crates/${foo.name}/reverse_dependencies`);
+    assert.dom('[data-test-row]').exists({ count: 10 });
+    assert.dom('[data-test-current-rows]').hasText('1-10');
+    assert.dom('[data-test-total-rows]').hasText('22');
+
+    await click('[data-test-pagination-next]');
+    assert.equal(currentURL(), `/crates/${foo.name}/reverse_dependencies?page=2`);
+    assert.dom('[data-test-row]').exists({ count: 10 });
+    assert.dom('[data-test-current-rows]').hasText('11-20');
+    assert.dom('[data-test-total-rows]').hasText('22');
+
+    await click('[data-test-pagination-next]');
+    assert.equal(currentURL(), `/crates/${foo.name}/reverse_dependencies?page=3`);
+    assert.dom('[data-test-row]').exists({ count: 2 });
+    assert.dom('[data-test-current-rows]').hasText('21-22');
+    assert.dom('[data-test-total-rows]').hasText('22');
+  });
+
+  test('shows an error if the server is broken', async function (assert) {
+    let { foo } = prepare(this);
+
+    this.server.get('/api/v1/crates/:crate_id/reverse_dependencies', {}, 500);
+
+    await visit(`/crates/${foo.name}/reverse_dependencies`);
+    assert.equal(currentURL(), '/');
+    assert
+      .dom('[data-test-notification-message="error"]')
+      .hasText('Could not load reverse dependencies for the "foo" crate');
+  });
+
+  test('shows an error if the server is broken', async function (assert) {
+    let { foo } = prepare(this);
+
+    let payload = { errors: [{ detail: 'cannot request more than 100 items' }] };
+    this.server.get('/api/v1/crates/:crate_id/reverse_dependencies', payload, 400);
+
+    await visit(`/crates/${foo.name}/reverse_dependencies`);
+    assert.equal(currentURL(), '/');
+    assert
+      .dom('[data-test-notification-message="error"]')
+      .hasText('Could not load reverse dependencies for the "foo" crate: cannot request more than 100 items');
+  });
+});