Create custom error page template (aka Page Not Found (404)) (#1161)

* feat APPS-2388 Page Not Found

* added links

* whitespace removed

* styles update

app/assets/stylesheets/base/base.scss

@@ -18,6 +18,7 @@
 @import 'templates/static-page';
 @import 'templates/item-page';
 @import 'templates/collection-page';
+@import 'templates/error-page';
 @import 'templates/index-page';
 @import 'templates/homepage';
 @import 'components/banner/collection-banner';

app/assets/stylesheets/base/templates/_error-page.scss

@@ -0,0 +1,36 @@
+.content-container--error-page {
+  margin: 0 auto;
+  max-width: 832px;
+
+  .error-page__title-row {
+    margin-bottom: 48px;
+    color: $ucla-darkest-blue;
+
+    h1 {
+      font-size: 52px;
+      font-weight: 700;
+      line-height: 62px;
+      text-align: center;
+    }
+
+    h4 {
+      font-size: 24px;
+      line-height: 36px;
+    }
+  }
+
+  ul {
+    margin-left: 40px;
+
+    li {
+      margin-bottom: 10px;
+
+      a {
+        font-size: 16px;
+        line-height: 24px;
+        text-decoration: underline;
+        color: #000;
+      }
+    }
+  }
+}

app/controllers/application_controller.rb

@@ -52,9 +52,10 @@ def cors_preflight_check
   protect_from_forgery with: :exception
 
   rescue_from Blacklight::AccessControls::AccessDenied, with: :render_404
+  rescue_from Blacklight::Exceptions::RecordNotFound, with: :render_404
 
   def render_404
-    render file: Rails.root.join('public', '404.html'), status: :not_found, layout: false
+    render 'errors/not_found'
   end
 
   def solr_document_path(*args)

app/controllers/errors_controller.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+class ErrorsController < ApplicationController
+  def not_found; end
+end

app/views/errors/not_found.html.erb

@@ -0,0 +1,20 @@
+<div class="content-container--error-page">
+  <div class="error-page__title-row">
+    <h1 class="error-page__title">Page not found.</h1>
+  </div>
+
+  <div class="error-page__title-row">
+    <h4>
+      We can’t find the page you are looking for, but we're here to help. Try
+      these regularly visited links.
+    </h4>
+  </div>
+
+  <ul>
+    <li><a href="https://digital.library.ucla.edu/">UCLA Library Digital Collections Home</a></li>
+    <li><a href="https://www.library.ucla.edu/">UCLA Library Home</a></li>
+    <li><a href="https://www.library.ucla.edu/help/research-help/">Research Help</a></li>
+    <li><a href="https://www.library.ucla.edu/help/services-resources/ask-us/">Ask a Librarian</a></li>
+    <li><a href="https://www.ucla.edu/accessibility/">Accessibility Resources</a></li>
+  </ul>
+</div>

spec/controllers/catalog_controller_spec.rb

@@ -276,9 +276,16 @@
     context 'when the URL contains the ID of a hyrax object without an ark (e.g. a permissions object)' do
       let(:solr_document) { SolrDocument.new(id: 'cba-321') }
 
-      it 'raises an exception' do
+      before do
         allow(SolrDocument).to receive(:find).and_call_original
-        expect { get('/catalog/cba-321') } .to raise_exception(Blacklight::Exceptions::RecordNotFound)
+      end
+
+      it 'catches not_found and renders errors/not_found' do
+        expect(get('/catalog/cba-321')).to render_template('errors/not_found')
+      end
+
+      it 'raises an exception' do
+        expect { get('/catalog/cba-321') }.not_to raise_exception(Blacklight::Exceptions::RecordNotFound)
       end
     end
   end

spec/system/view_unauthorized_work_spec.rb

@@ -23,6 +23,6 @@
 
   it 'denies access' do
     visit "/catalog/#{ark}"
-    expect(page).to have_content 'The page you were looking for doesn\'t exist'
+    expect(page).to have_content 'Page not found'
   end
 end