Create Design System Layout

app/assets/config/manifest.js

@@ -1,3 +1,6 @@
 //= link_tree ../images
 //= link application.js
 //= link application.css
+
+//= link legacy-application.js
+//= link legacy-application.css

app/assets/javascripts/application.js

@@ -1,23 +1,2 @@
-//= require select2
-//= require jquery-ui/widgets/sortable
-//= require moment
-//= require mousetrap
-//= require jquery-ui.custom.min
-//= require_directory ./vendor
-//= require_directory .
-//= require_directory ./modules
-//= require jquery_nested_form
-
-// System wide behaviours
-$(function () {
-  $('a.preview').attr('target', '_blank')
-  $('form.preview').attr('target', '_blank')
-  $('.select2').select2({ allowClear: true })
-})
-
-// System wide library functions
-var GovUKGuideUtils = { // eslint-disable-line no-unused-vars
-  convertToSlug: function (title) {
-    return title.toLowerCase().replace(/[^\w ]+/g, '').replace(/ +/g, '-')
-  }
-}
+//= require govuk_publishing_components/dependencies
+//= require govuk_publishing_components/all_components

app/assets/javascripts/legacy-application.js

@@ -0,0 +1,23 @@
+//= require select2
+//= require jquery-ui/widgets/sortable
+//= require moment
+//= require mousetrap
+//= require jquery-ui.custom.min
+//= require_directory ./vendor
+//= require_directory .
+//= require_directory ./modules
+//= require jquery_nested_form
+
+// System wide behaviours
+$(function () {
+  $('a.preview').attr('target', '_blank')
+  $('form.preview').attr('target', '_blank')
+  $('.select2').select2({ allowClear: true })
+})
+
+// System wide library functions
+var GovUKGuideUtils = { // eslint-disable-line no-unused-vars
+  convertToSlug: function (title) {
+    return title.toLowerCase().replace(/[^\w ]+/g, '').replace(/ +/g, '-')
+  }
+}

app/assets/stylesheets/application.scss

@@ -1,25 +1,2 @@
-@import "govuk_admin_template";
-@import "select2";
-@import "./vendor/select2-bootstrap";
-@import "colors";
-@import "bootstrap_and_overrides";
-@import "forms";
-
-// Components
-@import "sidebar_nav";
-@import "sortable_accordion";
-@import "sortable_table";
-@import "panel_part";
-@import "diff";
-@import "notes";
-@import "workflow";
-@import "broken_links_report";
-@import "error_summary";
-
-// Pages
-@import "downtime";
-@import "smart_answer_builder";
-@import "smart_answer_flowchart";
-
 // GOVUK Design System
 @import "govuk_publishing_components/all_components";

app/assets/stylesheets/legacy-application.scss

@@ -0,0 +1,25 @@
+@import "govuk_admin_template";
+@import "select2";
+@import "./vendor/select2-bootstrap";
+@import "colors";
+@import "bootstrap_and_overrides";
+@import "forms";
+
+// Components
+@import "sidebar_nav";
+@import "sortable_accordion";
+@import "sortable_table";
+@import "panel_part";
+@import "diff";
+@import "notes";
+@import "workflow";
+@import "broken_links_report";
+@import "error_summary";
+
+// Pages
+@import "downtime";
+@import "smart_answer_builder";
+@import "smart_answer_flowchart";
+
+// GOVUK Design System
+@import "govuk_publishing_components/all_components";

app/controllers/application_controller.rb

@@ -1,5 +1,6 @@
 class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
+  layout "legacy_application"
 
   include GDS::SSO::ControllerMethods
 

app/controllers/reports_controller.rb

@@ -1,4 +1,6 @@
 class ReportsController < ApplicationController
+  layout "design_system"
+
   include ActionView::Helpers::TagHelper
 
   before_action :authenticate_user!

app/helpers/navigation_items_helper.rb

@@ -0,0 +1,17 @@
+module NavigationItemsHelper
+  def navigation_items(is_editor: false, user_name: "", path: "")
+    list = [
+      { text: "Publications", href: root_path, active: path.end_with?(root_path) },
+    ]
+
+    if is_editor
+      list << { text: "Add artefact", href: new_artefact_path, active: path.end_with?(new_artefact_path) }
+      list << { text: "Downtime", href: downtimes_path, active: path.end_with?(downtimes_path) }
+    end
+
+    list << { text: "Reports", href: reports_path, active: path.end_with?(reports_path) }
+    list << { text: "Search by user", href: user_search_path, active: path.end_with?(user_search_path) }
+    list << { text: user_name, href:  Plek.new.external_url_for("signon") } if user_name.present?
+    list << { text: "Sign out", href: "/auth/gds/sign_out" }
+  end
+end

app/views/layouts/design_system.html.erb

@@ -0,0 +1,42 @@
+<% environment = GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment %>
+
+<%= render "govuk_publishing_components/components/layout_for_admin", {
+  product_title: "Publisher",
+  browser_title: yield(:page_title),
+  environment: environment
+} do %>
+
+  <% render "layouts/google_tag_manager" %>
+
+  <%= render "govuk_publishing_components/components/skip_link" %>
+
+  <%= render "govuk_publishing_components/components/layout_header", {
+    product_name: "Publisher",
+    environment: environment,
+    navigation_items: navigation_items(is_editor: current_user.govuk_editor?, path: request.path, user_name: current_user.name)
+  } %>
+
+  <div class="govuk-width-container">
+    <main class="govuk-main-wrapper" id="main-content" role="main">
+      <%= yield %>
+    </main>
+  </div>
+
+  <%= render "govuk_publishing_components/components/layout_footer", {
+    navigation: [
+      {
+        title: "Support and feedback",
+        items: [
+          {
+            href: Plek.external_url_for("support"),
+            text: "Raise a support request",
+          },
+          {
+            href: "https://status.publishing.service.gov.uk/",
+            text: "Check if publishing apps are working or if there’s any maintenance planned",
+          },
+        ],
+      },
+    ],
+  } %>
+<% end %>

app/views/layouts/application.html.erb → app/views/layouts/legacy_application.html.erb

@@ -5,7 +5,7 @@
   <%= favicon_link_tag "govuk_admin_template/#{favicon}" %>
 <% end %>
 <% content_for :head do %>
-  <%= stylesheet_link_tag "application", :media => "all" %>
+  <%= stylesheet_link_tag "legacy-application", :media => "all" %>
   <%= csrf_meta_tag %>
   <%= yield :extra_headers %>
 <% end %>
@@ -54,7 +54,7 @@
 <% content_for :footer_version, ENV.fetch("SENTRY_RELEASE", "null")[0..18] %>
 
 <% content_for :body_end do %>
-  <%= javascript_include_tag "application" %>
+  <%= javascript_include_tag "legacy-application" %>
   <%= yield :extra_javascript %>
 <% end %>
 

spec/support/jasmine-browser.json

@@ -2,7 +2,8 @@
   "srcDir": "public/assets/publisher",
   "srcFiles": [
     "govuk-admin-template-*.js",
-    "application-*.js"
+    "application-*.js",
+    "legacy-application-*.js"
   ],
   "cssFiles": [
     "application-*.css"

test/unit/helpers/navigation_items_helper_test.rb

@@ -0,0 +1,60 @@
+require "test_helper"
+
+class NavigationItemsHelperTest < ActionView::TestCase
+  context "NavigationItemsHelper" do
+    should "include editor-only links when user is an editor" do
+      assert_equal [
+        { text: "Publications", href: root_path, active: false },
+        { text: "Add artefact", href: new_artefact_path, active: false },
+        { text: "Downtime", href: downtimes_path, active: false },
+        { text: "Reports", href: reports_path, active: false },
+        { text: "Search by user", href: user_search_path, active: false },
+        { text: "Sign out", href: "/auth/gds/sign_out" },
+      ], navigation_items(is_editor: true)
+    end
+
+    should "not include editor-only links when user is not an editor" do
+      assert_equal [
+        { text: "Publications", href: root_path, active: false },
+        { text: "Reports", href: reports_path, active: false },
+        { text: "Search by user", href: user_search_path, active: false },
+        { text: "Sign out", href: "/auth/gds/sign_out" },
+      ], navigation_items(is_editor: false)
+    end
+
+    should "include user name link if user has name" do
+      assert_equal [
+        { text: "Publications", href: root_path, active: false },
+        { text: "Reports", href: reports_path, active: false },
+        { text: "Search by user", href: user_search_path, active: false },
+        { text: "Name", href: Plek.new.external_url_for("signon") },
+        { text: "Sign out", href: "/auth/gds/sign_out" },
+      ], navigation_items(is_editor: false, user_name: "Name")
+    end
+
+    should "apply set link to active if page is current link" do
+      paths = [
+        root_path,
+        new_artefact_path,
+        downtimes_path,
+        reports_path,
+        user_search_path,
+      ]
+
+      paths.each do |path|
+        returned_items = navigation_items(is_editor: true, path:)
+        path_item = returned_items.find { |item| item[:href] == path }
+        other_items = returned_items.filter { |item| item[:href] != path && item[:href] != "auth/gds/sign_out" }
+        sign_out_item = returned_items.find { |item| item[:href] == "/auth/gds/sign_out" }
+
+        assert path_item[:active]
+
+        other_items.each do |item|
+          assert_not item[:active]
+        end
+
+        assert_nil sign_out_item[:active]
+      end
+    end
+  end
+end