Update 404 and 403 pages

11 files changed, 353 insertions, 91 deletions

diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss
new file mode 100644
index 00000000000..658e0ff638e
--- /dev/null
+++ b/app/assets/stylesheets/errors.scss
@@ -0,0 +1,120 @@
+/*
+ * This is a minimal stylesheet, meant to be used for error pages.
+ */
+@import 'framework/variables';
+@import '../../../node_modules/bootstrap/scss/functions';
+@import '../../../node_modules/bootstrap/scss/variables';
+@import '../../../node_modules/bootstrap/scss/mixins';
+@import '../../../node_modules/bootstrap/scss/reboot';
+@import '../../../node_modules/bootstrap/scss/buttons';
+@import '../../../node_modules/bootstrap/scss/forms';
+
+$body-color: #666;
+$header-color: #456;
+
+body {
+  color: $body-color;
+  text-align: center;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: auto;
+  font-size: 14px;
+}
+
+h1 {
+  font-size: 56px;
+  line-height: 100px;
+  font-weight: 400;
+  color: $header-color;
+}
+
+h2 {
+  font-size: 24px;
+  color: $body-color;
+  line-height: 1.5em;
+}
+
+h3 {
+  color: $header-color;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 28px;
+}
+
+img {
+  max-width: 80vw;
+  display: block;
+  margin: 40px auto;
+}
+
+a {
+  text-decoration: none;
+  color: $blue-600;
+}
+
+.page-container {
+  margin: auto 20px;
+}
+
+.container {
+  margin: auto;
+  max-width: 600px;
+  border-bottom: 1px solid $border-color;
+  padding-bottom: 1em;
+}
+
+.action-container {
+  padding: 0.5em 0;
+}
+
+.form-inline-flex {
+  display: flex;
+  flex-wrap: wrap;
+
+  button {
+    display: block;
+    width: 100%;
+  }
+
+  .field {
+    display: block;
+    width: 100%;
+    margin-bottom: 1em;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-wrap: nowrap;
+
+    button {
+      width: auto;
+    }
+
+    .field {
+      margin-bottom: 0;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.error-nav {
+  padding: 0;
+  text-align: center;
+
+  li {
+    display: block;
+    padding-bottom: 1em;
+  }
+
+  @include media-breakpoint-up(sm) {
+
+    li {
+      display: inline-block;
+      padding-bottom: 0;
+
+      &:not(:first-child)::before {
+        content: '\00B7';
+        display: inline-block;
+        padding: 0 1em;
+      }
+    }
+  }
+}
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 2843d70c645..db8a8cdc0d2 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -146,14 +146,15 @@ class ApplicationController < ActionController::Base
   end
 
   def render_403
-    head :forbidden
+    respond_to do |format|
+      format.any { head :forbidden }
+      format.html { render "errors/access_denied", layout: "errors", status: 403 }
+    end
   end
 
   def render_404
     respond_to do |format|
-      format.html do
-        render file: Rails.root.join("public", "404"), layout: false, status: "404"
-      end
+      format.html { render "errors/not_found", layout: "errors", status: 404 }
       # Prevent the Rails CSRF protector from thinking a missing .js file is a JavaScript file
       format.js { render json: '', status: :not_found, content_type: 'application/json' }
       format.any { head :not_found }
diff --git a/app/views/errors/_footer.html.haml b/app/views/errors/_footer.html.haml
new file mode 100644
index 00000000000..e67a3a142f6
--- /dev/null
+++ b/app/views/errors/_footer.html.haml
@@ -0,0 +1,11 @@
+%nav
+  %ul.error-nav
+    %li
+      = link_to s_('Nav|Home'), root_path
+    %li
+      - if current_user
+        = link_to s_('Nav|Sign out and sign in with a different account'), destroy_user_session_path
+      - else
+        = link_to s_('Nav|Sign In / Register'), new_session_path(:user, redirect_to_referer: 'yes')
+    %li
+      = link_to s_('Nav|Help'), help_path
diff --git a/app/views/errors/access_denied.html.haml b/app/views/errors/access_denied.html.haml
index bf540439c79..227c7884915 100644
--- a/app/views/errors/access_denied.html.haml
+++ b/app/views/errors/access_denied.html.haml
@@ -1,15 +1,16 @@
 - message = local_assigns.fetch(:message)
-
 - content_for(:title, 'Access Denied')
-%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
-  %h1
-    403
+
+= image_tag('illustrations/error-403.svg', alt: '403', lazy: false)
 .container
-  %h3 Access Denied
-  %hr
+  %h3
+    = s_("403|You don't have the permission to access this page.")
   - if message
     %p
       = message
-  - else
-    %p You are not allowed to access this page.
-    %p Read more about project permissions #{link_to "here", help_page_path("user/permissions"), class: "vlink"}
+  %p
+    = s_('403|Please contact your GitLab administrator to get the permission.')
+  .action-container.js-go-back{ style: 'display: none' }
+    %a{ href: 'javascript:history.back()', class: 'btn btn-success' }
+      = s_('Go Back')
+= render "errors/footer"
diff --git a/app/views/errors/not_found.html.haml b/app/views/errors/not_found.html.haml
index a0b9a632e22..ae055f398ac 100644
--- a/app/views/errors/not_found.html.haml
+++ b/app/views/errors/not_found.html.haml
@@ -1,8 +1,15 @@
 - content_for(:title, 'Not Found')
-%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
-  %h1
-    404
+= image_tag('illustrations/error-404.svg', alt: '404', lazy: false)
 .container
-  %h3 The resource you were looking for doesn't exist.
-  %hr
-  %p You may have mistyped the address or the page may have moved.
+  %h3
+    = s_('404|Page Not Found')
+  %p
+    = s_("404|Make sure the address is correct and the page hasn't moved.")
+  %p
+    = s_('404|Please contact your GitLab administrator if you think this is a mistake.')
+  .action-container
+    = form_tag search_path, method: :get, class: 'form-inline-flex' do |f|
+      .field
+        = search_field_tag :search, '', placeholder: _('Search for projects, issues, etc.'), class: 'form-control'
+      = button_tag 'Search', class: 'btn btn-success', name: nil, type: 'submit'
+= render 'errors/footer'
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index 9382ee8715e..06069a72951 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -3,57 +3,17 @@
   %head
     %meta{ :content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport" }
     %title= yield(:title)
-    :css
-      body {
-        color: #666;
-        text-align: center;
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        margin: auto;
-        font-size: 14px;
-      }
+    %style
+      = Rails.application.assets_manifest.find_sources('errors.css').first.to_s.html_safe
+  %body
+    .page-container
+      = yield
+    -# haml-lint:disable InlineJavaScript
+    :javascript
+      (function(){
+        var goBackElement = document.querySelector('.js-go-back');
 
-      h1 {
-        font-size: 56px;
-        line-height: 100px;
-        font-weight: 400;
-        color: #456;
-      }
-
-      h2 {
-        font-size: 24px;
-        color: #666;
-        line-height: 1.5em;
-      }
-
-      h3 {
-        color: #456;
-        font-size: 20px;
-        font-weight: 400;
-        line-height: 28px;
-      }
-
-      hr {
-        max-width: 800px;
-        margin: 18px auto;
-        border: 0;
-        border-top: 1px solid #EEE;
-        border-bottom: 1px solid white;
-      }
-
-      img {
-        max-width: 40vw;
-        display: block;
-        margin: 40px auto;
-      }
-
-      .container {
-        margin: auto 20px;
-      }
-
-      ul {
-      margin: auto;
-      text-align: left;
-      display:inline-block;
-      }
-%body
-  = yield
+        if (goBackElement && history.length > 1) {
+          goBackElement.style.display = 'block';
+        }
+      }());
diff --git a/changelogs/unreleased/25955-update-404-pages.yml b/changelogs/unreleased/25955-update-404-pages.yml
new file mode 100644
index 00000000000..121229a77b9
--- /dev/null
+++ b/changelogs/unreleased/25955-update-404-pages.yml
@@ -0,0 +1,5 @@
+---
+title: Update 404 and 403 pages with helpful actions.
+merge_request: 19096
+author:
+type: changed
diff --git a/config/application.rb b/config/application.rb
index 09f706e3d70..1b575f1325d 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -116,6 +116,7 @@ module Gitlab
     config.assets.precompile << "snippets.css"
     config.assets.precompile << "locale/**/app.js"
     config.assets.precompile << "emoji_sprites.css"
+    config.assets.precompile << "errors.css"
 
     # Import gitlab-svgs directly from vendored directory
     config.assets.paths << "#{config.root}/node_modules/@gitlab-org/gitlab-svgs/dist"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9e34eb463ce..035a2275d9f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8,8 +8,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2018-05-23 07:40-0500\n"
-"PO-Revision-Date: 2018-05-23 07:40-0500\n"
+"POT-Creation-Date: 2018-05-29 09:43-0500\n"
+"PO-Revision-Date: 2018-05-29 09:43-0500\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -178,6 +178,21 @@ msgstr ""
 msgid "2FA enabled"
 msgstr ""
 
+msgid "403|Please contact your GitLab administrator to get the permission."
+msgstr ""
+
+msgid "403|You don't have the permission to access this page."
+msgstr ""
+
+msgid "404|Make sure the address is correct and the page hasn't moved."
+msgstr ""
+
+msgid "404|Page Not Found"
+msgstr ""
+
+msgid "404|Please contact your GitLab administrator if you think this is a mistake."
+msgstr ""
+
 msgid "<strong>Removes</strong> source branch"
 msgstr ""
 
@@ -301,6 +316,9 @@ msgstr ""
 msgid "AdminUsers|To confirm, type %{username}"
 msgstr ""
 
+msgid "Advanced"
+msgstr ""
+
 msgid "Advanced settings"
 msgstr ""
 
@@ -484,7 +502,7 @@ msgstr ""
 msgid "Auto Review Apps and Auto Deploy need a domain name to work correctly."
 msgstr ""
 
-msgid "AutoDevOps|Auto DevOps (Beta)"
+msgid "AutoDevOps|Auto DevOps"
 msgstr ""
 
 msgid "AutoDevOps|Auto DevOps documentation"
@@ -505,7 +523,7 @@ msgstr ""
 msgid "AutoDevOps|add a Kubernetes cluster"
 msgstr ""
 
-msgid "AutoDevOps|enable Auto DevOps (Beta)"
+msgid "AutoDevOps|enable Auto DevOps"
 msgstr ""
 
 msgid "Available"
@@ -768,7 +786,7 @@ msgstr ""
 msgid "CICD|An explicit %{ci_file} needs to be specified before you can begin using Continuous Integration and Delivery."
 msgstr ""
 
-msgid "CICD|Auto DevOps (Beta)"
+msgid "CICD|Auto DevOps"
 msgstr ""
 
 msgid "CICD|Auto DevOps will automatically build, test, and deploy your application based on a predefined Continuous Integration and Delivery configuration."
@@ -987,6 +1005,12 @@ msgstr ""
 msgid "ClusterIntegration|Advanced options on this Kubernetes cluster's integration"
 msgstr ""
 
+msgid "ClusterIntegration|An error occured while trying to fetch project zones: %{error}"
+msgstr ""
+
+msgid "ClusterIntegration|An error occured while trying to fetch your projects: %{error}"
+msgstr ""
+
 msgid "ClusterIntegration|Applications"
 msgstr ""
 
@@ -1047,6 +1071,15 @@ msgstr ""
 msgid "ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for new GCP accounts to get started with GitLab's Google Kubernetes Engine Integration."
 msgstr ""
 
+msgid "ClusterIntegration|Fetching machine types"
+msgstr ""
+
+msgid "ClusterIntegration|Fetching projects"
+msgstr ""
+
+msgid "ClusterIntegration|Fetching zones"
+msgstr ""
+
 msgid "ClusterIntegration|GitLab Integration"
 msgstr ""
 
@@ -1143,6 +1176,18 @@ msgstr ""
 msgid "ClusterIntegration|More information"
 msgstr ""
 
+msgid "ClusterIntegration|No machine types matched your search"
+msgstr ""
+
+msgid "ClusterIntegration|No projects found"
+msgstr ""
+
+msgid "ClusterIntegration|No projects matched your search"
+msgstr ""
+
+msgid "ClusterIntegration|No zones matched your search"
+msgstr ""
+
 msgid "ClusterIntegration|Note:"
 msgstr ""
 
@@ -1155,9 +1200,6 @@ msgstr ""
 msgid "ClusterIntegration|Please make sure that your Google account meets the following requirements:"
 msgstr ""
 
-msgid "ClusterIntegration|Project ID"
-msgstr ""
-
 msgid "ClusterIntegration|Project namespace"
 msgstr ""
 
@@ -1188,19 +1230,40 @@ msgstr ""
 msgid "ClusterIntegration|Save changes"
 msgstr ""
 
+msgid "ClusterIntegration|Search machine types"
+msgstr ""
+
+msgid "ClusterIntegration|Search projects"
+msgstr ""
+
+msgid "ClusterIntegration|Search zones"
+msgstr ""
+
 msgid "ClusterIntegration|Security"
 msgstr ""
 
 msgid "ClusterIntegration|See and edit the details for your Kubernetes cluster"
 msgstr ""
 
-msgid "ClusterIntegration|See machine types"
+msgid "ClusterIntegration|See zones"
 msgstr ""
 
-msgid "ClusterIntegration|See your projects"
+msgid "ClusterIntegration|Select machine type"
 msgstr ""
 
-msgid "ClusterIntegration|See zones"
+msgid "ClusterIntegration|Select project"
+msgstr ""
+
+msgid "ClusterIntegration|Select project and zone to choose machine type"
+msgstr ""
+
+msgid "ClusterIntegration|Select project to choose zone"
+msgstr ""
+
+msgid "ClusterIntegration|Select zone"
+msgstr ""
+
+msgid "ClusterIntegration|Select zone to choose machine type"
 msgstr ""
 
 msgid "ClusterIntegration|Service token"
@@ -1233,6 +1296,9 @@ msgstr ""
 msgid "ClusterIntegration|Token"
 msgstr ""
 
+msgid "ClusterIntegration|Validating project billing status"
+msgstr ""
+
 msgid "ClusterIntegration|With a Kubernetes cluster associated to this project, you can use review apps, deploy your applications, run your pipelines, and much more in an easy way."
 msgstr ""
 
@@ -1866,6 +1932,9 @@ msgstr ""
 msgid "Enable group Runners"
 msgstr ""
 
+msgid "Enable or disable certain group features and choose access levels."
+msgstr ""
+
 msgid "Enable or disable version check and usage ping."
 msgstr ""
 
@@ -1953,6 +2022,15 @@ msgstr ""
 msgid "Error fetching usage ping data."
 msgstr ""
 
+msgid "Error loading branch data. Please try again."
+msgstr ""
+
+msgid "Error loading last commit."
+msgstr ""
+
+msgid "Error loading project data. Please try again."
+msgstr ""
+
 msgid "Error occurred when toggling the notification subscription"
 msgstr ""
 
@@ -2129,6 +2207,9 @@ msgstr ""
 msgid "Gitaly Servers"
 msgstr ""
 
+msgid "Go Back"
+msgstr ""
+
 msgid "Go back"
 msgstr ""
 
@@ -2631,6 +2712,18 @@ msgstr ""
 msgid "Name new label"
 msgstr ""
 
+msgid "Nav|Help"
+msgstr ""
+
+msgid "Nav|Home"
+msgstr ""
+
+msgid "Nav|Sign In / Register"
+msgstr ""
+
+msgid "Nav|Sign out and sign in with a different account"
+msgstr ""
+
 msgid "New Issue"
 msgid_plural "New Issues"
 msgstr[0] ""
@@ -2885,12 +2978,18 @@ msgstr ""
 msgid "Pending"
 msgstr ""
 
+msgid "Perform advanced options such as changing path, transferring, or removing the group."
+msgstr ""
+
 msgid "Performance optimization"
 msgstr ""
 
 msgid "Permalink"
 msgstr ""
 
+msgid "Permissions"
+msgstr ""
+
 msgid "Personal Access Token"
 msgstr ""
 
@@ -3050,9 +3149,6 @@ msgstr ""
 msgid "Play"
 msgstr ""
 
-msgid "Please <a href=%{link_to_billing} target=\"_blank\" rel=\"noopener noreferrer\">enable billing for one of your projects to be able to create a Kubernetes cluster</a>, then try again."
-msgstr ""
-
 msgid "Please accept the Terms of Service before continuing."
 msgstr ""
 
@@ -3502,6 +3598,9 @@ msgstr ""
 msgid "Search files"
 msgstr ""
 
+msgid "Search for projects, issues, etc."
+msgstr ""
+
 msgid "Search milestones"
 msgstr ""
 
@@ -3517,7 +3616,7 @@ msgstr ""
 msgid "Seconds to wait for a storage access attempt"
 msgstr ""
 
-msgid "Variables"
+msgid "Select"
 msgstr ""
 
 msgid "Select Archive Format"
@@ -3538,6 +3637,15 @@ msgstr ""
 msgid "Select branch/tag"
 msgstr ""
 
+msgid "Select project"
+msgstr ""
+
+msgid "Select project and zone to choose machine type"
+msgstr ""
+
+msgid "Select project to choose zone"
+msgstr ""
+
 msgid "Select source branch"
 msgstr ""
 
@@ -3636,6 +3744,9 @@ msgstr ""
 msgid "Something went wrong when toggling the button"
 msgstr ""
 
+msgid "Something went wrong while fetching the latest pipeline status."
+msgstr ""
+
 msgid "Something went wrong while fetching the projects."
 msgstr ""
 
@@ -4359,6 +4470,9 @@ msgstr ""
 msgid "Up to date"
 msgstr ""
 
+msgid "Update your group name, description, avatar, and other general settings."
+msgstr ""
+
 msgid "Upload New File"
 msgstr ""
 
@@ -4389,6 +4503,9 @@ msgstr ""
 msgid "User and IP Rate Limits"
 msgstr ""
 
+msgid "Variables"
+msgstr ""
+
 msgid "Variables are applied to environments via the runner. They can be protected by only exposing them to protected branches or tags. You can use variables for passwords, secret keys, or whatever you want."
 msgstr ""
 
@@ -4440,9 +4557,6 @@ msgstr ""
 msgid "Want to see the data? Please ask an administrator for access."
 msgstr ""
 
-msgid "We could not verify that one of your projects on GCP has billing enabled. Please try again."
-msgstr ""
-
 msgid "We don't have enough data to show this stage."
 msgstr ""
 
diff --git a/spec/features/error_pages_spec.rb b/spec/features/error_pages_spec.rb
new file mode 100644
index 00000000000..cd7bcf29cc9
--- /dev/null
+++ b/spec/features/error_pages_spec.rb
@@ -0,0 +1,42 @@
+require 'spec_helper'
+
+describe 'Error Pages' do
+  let(:user) { create(:user) }
+  let(:project) { create(:project, :public) }
+
+  before do
+    sign_in(user)
+  end
+
+  shared_examples 'shows nav links' do
+    it 'shows nav links' do
+      expect(page).to have_link("Home", href: root_path)
+      expect(page).to have_link("Help", href: help_path)
+      expect(page).to have_link(nil, href: destroy_user_session_path)
+    end
+  end
+
+  describe '404' do
+    before do
+      visit '/not-a-real-page'
+    end
+
+    it 'allows user to search' do
+      fill_in 'search', with: 'something'
+      click_button 'Search'
+
+      expect(page).to have_current_path(%r{^/search\?.*search=something.*})
+    end
+
+    it_behaves_like 'shows nav links'
+  end
+
+  describe '403' do
+    before do
+      visit '/'
+      visit edit_project_path(project)
+    end
+
+    it_behaves_like 'shows nav links'
+  end
+end
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index af2a9567a47..35776a5f23b 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -379,7 +379,7 @@ describe 'Pipeline', :js do
         end
 
         it 'fails to access the page' do
-          expect(page).to have_content('Access Denied')
+          expect(page).to have_title('Access Denied')
         end
       end
     end