From d85289fe101765d39e134abc41443dcca36a9657 Mon Sep 17 00:00:00 2001
From: Jonathan Johnson <jon.johnson@ucsf.edu>
Date: Mon, 8 Jan 2024 15:05:25 -0800
Subject: [PATCH 1/2] Catch missing model 404s

I'm not sure if this broke or was never working but we're not displaying
a nice error when a model is missing. This doesn't happen that often for
us, but when something is deleted we need to do better than or standard
error message because refreshing the page will just continue to be
broken.  Instead we now display our "Rats!" message with a link back to
the dashboard.
---
 app/controllers/error.js              |  8 ++++++++
 app/styles/components.scss            |  1 +
 app/styles/components/error.scss      |  5 +++++
 app/templates/error.hbs               | 22 +++++++++++++---------
 tests/acceptance/four-oh-four-test.js | 18 ++++++++++++++++++
 5 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 app/styles/components/error.scss

diff --git a/app/controllers/error.js b/app/controllers/error.js
index eaac28d01f..fe1c611f84 100644
--- a/app/controllers/error.js
+++ b/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;
+  }
 }
diff --git a/app/styles/components.scss b/app/styles/components.scss
index c0e2dba098..214154ab3a 100644
--- a/app/styles/components.scss
+++ b/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";
diff --git a/app/styles/components/error.scss b/app/styles/components/error.scss
new file mode 100644
index 0000000000..0be49497dc
--- /dev/null
+++ b/app/styles/components/error.scss
@@ -0,0 +1,5 @@
+@use "../ilios-common/mixins" as cm;
+
+.full-screen-error {
+  @include cm.main-section;
+}
diff --git a/app/templates/error.hbs b/app/templates/error.hbs
index 81912058de..f221a0386d 100644
--- a/app/templates/error.hbs
+++ b/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>
diff --git a/tests/acceptance/four-oh-four-test.js b/tests/acceptance/four-oh-four-test.js
index 3331003039..e68dc3afb0 100644
--- a/tests/acceptance/four-oh-four-test.js
+++ b/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",
+      );
+  });
 });

From 1d2bfe09e9acca6b46abcc6f46b8f818eb6d3611 Mon Sep 17 00:00:00 2001
From: Jonathan Johnson <jon.johnson@ucsf.edu>
Date: Tue, 30 Jan 2024 21:51:38 -0800
Subject: [PATCH 2/2] Remove error from route splitting

If we split this route then ember's default error substate system
doesn't work anymore.
---
 ember-cli-build.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ember-cli-build.js b/ember-cli-build.js
index 5f386fb6d1..dc279c959a 100644
--- a/ember-cli-build.js
+++ b/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-]*/,