Update 404 and 403 pages

app/assets/stylesheets/errors.scss

+/*
+ * 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;
+      }
+    }
+  }
+}

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 }

app/views/errors/_footer.html.haml

+%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

app/views/errors/access_denied.html.haml

 - 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"

app/views/errors/not_found.html.haml

 - 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'

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;
-      }
-
-      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;
-      }
+    %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');
 
-      ul {
-      margin: auto;
-      text-align: left;
-      display:inline-block;
+        if (goBackElement && history.length > 1) {
+          goBackElement.style.display = 'block';
         }
-%body
-  = yield
+      }());

changelogs/unreleased/25955-update-404-pages.yml

+---
+title: Update 404 and 403 pages with helpful actions.
+merge_request: 19096
+author:
+type: changed

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"

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 ""
 

spec/features/error_pages_spec.rb

+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

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