Merge pull request #7560 from jrjohnson/5127-deleted-report

Catch missing model 404s

app/controllers/error.js

@@ -6,4 +6,12 @@ export default class ErrorController extends Controller {
   forceRefresh() {
     location.reload();
   }
+
+  get isA404() {
+    if (this.model?.errors.length > 0) {
+      return Number(this.model.errors[0].status) === 404;
+    }
+
+    return false;
+  }
 }

app/styles/components.scss

@@ -7,6 +7,7 @@
 @import "components/course-director-manager";
 @import "components/course-search-result";
 @import "components/dashboard-loading";
+@import "components/error";
 @import "components/filter-tools";
 @import "components/flash-messages";
 @import "components/global-search";

app/styles/components/error.scss

@@ -0,0 +1,5 @@
+@use "../ilios-common/mixins" as cm;
+
+.full-screen-error {
+  @include cm.main-section;
+}

app/templates/error.hbs

@@ -1,10 +1,14 @@
-<div class="error-main">
-  <h2>
-    {{t "general.finalErrorDisplayMessage"}}
-  </h2>
-  <p class="clear-errors">
-    <button type="button" {{on "click" this.forceRefresh}}>
-      {{t "general.refreshTheBrowser"}}
-    </button>
-  </p>
+<div class="full-screen-error">
+  {{#if this.isA404}}
+    <NotFound />
+  {{else}}
+    <h2>
+      {{t "general.finalErrorDisplayMessage"}}
+    </h2>
+    <p class="clear-errors">
+      <button type="button" {{on "click" this.forceRefresh}}>
+        {{t "general.refreshTheBrowser"}}
+      </button>
+    </p>
+  {{/if}}
 </div>

ember-cli-build.js

@@ -74,7 +74,7 @@ module.exports = function (defaults) {
       'dashboard.activities',
       'dashboard.calendar',
       'dashboard.materials',
-      'error',
+      // 'error', don't ever split the error route, it will break error handling
       'events',
       'four-oh-four',
       /instructor[a-z-]*/,

tests/acceptance/four-oh-four-test.js

@@ -30,4 +30,22 @@ module('Acceptance | FourOhFour', function (hooks) {
     await visit('/nothing');
     assert.strictEqual(currentRouteName(), 'four-oh-four');
   });
+
+  test('visiting missing course', async function (assert) {
+    await visit('/courses/1337');
+    assert
+      .dom('.full-screen-error')
+      .hasText(
+        "Rats! I couldn't find that. Please check your page address, and try again. Back to Dashboard",
+      );
+  });
+
+  test('visiting missing report #5127', async function (assert) {
+    await visit('/reports/subjects/1989');
+    assert
+      .dom('.full-screen-error')
+      .hasText(
+        "Rats! I couldn't find that. Please check your page address, and try again. Back to Dashboard",
+      );
+  });
 });