Merge pull request #1993 from alphagov/render-simple-smart-answer-dia…

…gram

Open diagram for smart answer in new tab

app/assets/javascripts/modules/smart_answer_flowchart.js

@@ -0,0 +1,25 @@
+//= require mermaid/dist/mermaid
+
+(function (Modules) {
+  'use strict'
+
+  Modules.SmartAnswerFlowchart = function () {
+    this.start = function (element) {
+      var diagram = element.find('.flowchart')
+      var flowchartLoading = element.find('.flowchart__loading')
+
+      // eslint-disable-next-line
+      mermaid.initialize(
+        {
+          startOnLoad: true,
+          flowchart: {
+            useMaxWidth: false
+          }
+        }
+      )
+
+      diagram.removeClass('flowchart--hidden')
+      flowchartLoading.addClass('flowchart__loading--hidden')
+    }
+  }
+})(window.GOVUKAdmin.Modules)

app/assets/stylesheets/application.scss

@@ -19,6 +19,7 @@
 // Pages
 @import "downtime";
 @import "smart_answer_builder";
+@import "smart_answer_flowchart";
 
 // GOVUK Design System
 @import "govuk_publishing_components/all_components";

app/assets/stylesheets/smart_answer_flowchart.scss

@@ -0,0 +1,14 @@
+.smart-answer-flowchart {
+  .mermaid {
+    background-color: #ffffff;
+  }
+
+  .flowchart--hidden,
+  .flowchart__loading--hidden {
+    display: none;
+  }
+
+  pre {
+    word-break: normal;
+  }
+}

app/controllers/editions_controller.rb

@@ -235,6 +235,13 @@ def process_unpublish
     end
   end
 
+  def diagram
+    # [MT] TODO: What's the best way to handle requests for a diagram for a non-simple smart answer?
+    if @resource.format != "SimpleSmartAnswer"
+      render plain: "404 Not Found", status: :not_found
+    end
+  end
+
 protected
 
   def permitted_params(subtype: nil)

app/views/editions/diagram.html.erb

@@ -0,0 +1,11 @@
+<%= render 'shared/edition_header' %>
+
+<div class="smart-answer-flowchart" data-module="smart-answer-flowchart">
+  <pre class="mermaid flowchart flowchart--hidden">
+    <%= @resource.generate_mermaid %>
+  </pre>
+
+  <p class="flowchart__loading">Generating diagram ...</p>
+</div>
+
+<% content_for :page_title, "Diagram for #{@resource.title}" %>

app/views/editions/show.html.erb

@@ -27,6 +27,12 @@
     <div class="tab-content add-top-margin">
         <div role="tabpanel" class="tab-pane <% if active_tab.name == 'edit'%>active<% end %>" id="edit">
           <div class="link-check-report col-md-4">
+            <% if @edition.class.to_s == "SimpleSmartAnswerEdition" %>
+              <p>
+                View the <%= link_to "flow diagram (opens in a new tab)", diagram_edition_path(@edition), target: '_blank' %>
+              </p>
+            <% end %>
+
             <%= render 'link_check_reports/link_check_report', edition: @edition, report: @edition.latest_link_check_report %>
 
             <% if @edition.class.to_s.in?(Edition::HAS_GOVSPEAK_FIELDS) %>

config/routes.rb

@@ -25,6 +25,7 @@
       get "tagging", to: "editions#linking"
       get "related_external_links", to: "editions#linking"
       get "unpublish"
+      get "diagram"
       post "duplicate"
       post "update_tagging"
       post "process_unpublish"

package.json

@@ -46,6 +46,7 @@
     "stylelint-config-gds": "^1.1.0"
   },
   "dependencies": {
+    "mermaid": "10.5.1",
     "paste-html-to-govspeak": "^0.4.0"
   },
   "resolutions": {

test/functional/editions_controller_test.rb

@@ -1032,6 +1032,32 @@ class EditionsControllerTest < ActionController::TestCase
       assert_response :success
       assert_not_nil assigns(:resource)
     end
+
+    should "render a link to the diagram when edition is a simple smart answer" do
+      simple_smart_answer_artefact = FactoryBot.create(
+        :artefact,
+        slug: "my-simple-smart-answer",
+        kind: "guide",
+        name: "test",
+        owning_app: "publisher",
+      )
+      simple_smart_answer = SimpleSmartAnswerEdition.create!(
+        title: "test ssa",
+        panopticon_id: simple_smart_answer_artefact.id,
+      )
+
+      get :show, params: { id: simple_smart_answer.id }
+
+      assert_select ".link-check-report p", { text: "View the flow diagram (opens in a new tab)" } do
+        assert_select "a[href=?]", diagram_edition_path(simple_smart_answer).to_s,
+                      { count: 1, text: "flow diagram (opens in a new tab)" }
+      end
+    end
+
+    should "not render a link to the diagram when edition is not a simple smart answer" do
+      get :show, params: { id: @guide.id }
+      assert_select "p", { count: 0, text: "View the flow diagram (opens in a new tab)" }
+    end
   end
 
   context "#admin" do
@@ -1204,4 +1230,32 @@ class EditionsControllerTest < ActionController::TestCase
       assert_equal "Option One", question.options.first.label
     end
   end
+
+  context "#diagram" do
+    context "given a simple smart answer exists" do
+      setup do
+        @artefact = FactoryBot.create(:artefact, slug: "foo", name: "Foo", kind: "simple_smart_answer", owning_app: "publisher")
+        @edition = FactoryBot.create(:simple_smart_answer_edition, body: "blah", state: "draft", slug: "foo", panopticon_id: @artefact.id)
+        @edition.save!
+      end
+
+      should "render a diagram page for it" do
+        get :diagram, params: { id: @edition.id }
+
+        assert_response :success
+        assert_select "title", "Diagram for #{@edition.title} | GOV.UK Publisher"
+      end
+    end
+
+    context "given a non-simple smart answer exists" do
+      setup do
+        @welsh_guide = FactoryBot.create(:guide_edition, :welsh, :in_review)
+      end
+
+      should "return a 404" do
+        get :diagram, params: { id: @welsh_guide.id }
+        assert_response :not_found
+      end
+    end
+  end
 end