Merge pull request #2816 from alphagov/3015-create-edit-finder-form-b…

…asic-details-2

Introduce form to edit finder metadata

app/assets/javascripts/application.js

@@ -1,3 +1,5 @@
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/lib
 //= require govuk_publishing_components/components/copy-to-clipboard
+
+//= require components/autocomplete

app/assets/javascripts/components/autocomplete.js

@@ -0,0 +1,46 @@
+//= require accessible-autocomplete-multiselect/dist/accessible-autocomplete.min.js
+'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+;(function (Modules) {
+  function Autocomplete ($module) {
+    this.$module = $module
+  }
+
+  Autocomplete.prototype.init = function () {
+    const $select = this.$module.querySelector('select')
+
+    const defaultOptions = {
+      selectElement: $select,
+      minLength: 3,
+      showAllValues: $select.multiple,
+      showNoOptionsFound: true,
+      onConfirm: function (query) {
+        let matchingOption
+        if (query) {
+          matchingOption = [].filter.call($select.options, function (option) {
+            return (option.textContent || option.innerText) === query
+          })[0]
+        } else {
+          matchingOption = [].filter.call($select.options, function (option) {
+            return option.value === ''
+          })[0]
+        }
+        if (matchingOption) {
+          matchingOption.selected = true
+        }
+      }
+    }
+
+    const assignedOptions = JSON.parse(
+      this.$module.dataset.autocompleteConfigurationOptions
+    )
+
+    const configurationOptions = Object.assign(defaultOptions, assignedOptions)
+
+    // disabled eslint because we can not control the name of the constructor (expected to be EnhanceSelectElement)
+    new window.accessibleAutocomplete.enhanceSelectElement(configurationOptions) // eslint-disable-line no-new, new-cap
+  }
+
+  Modules.Autocomplete = Autocomplete
+})(window.GOVUK.Modules)

app/assets/javascripts/es6-components.js

@@ -1,4 +1,6 @@
 //= require govuk_publishing_components/components/button
+//= require govuk_publishing_components/components/checkboxes
 //= require govuk_publishing_components/components/character-count
 //= require govuk_publishing_components/components/layout-header
+//= require govuk_publishing_components/components/radio
 //= require govuk_publishing_components/components/skip-link

app/assets/stylesheets/application.scss

@@ -4,6 +4,8 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/component_support';
 @import 'govuk_publishing_components/components/breadcrumbs';
 @import 'govuk_publishing_components/components/button';
+@import 'govuk_publishing_components/components/checkboxes';
+@import 'govuk_publishing_components/components/details';
 @import 'govuk_publishing_components/components/error-message';
 @import 'govuk_publishing_components/components/govspeak';
 @import 'govuk_publishing_components/components/hint';
@@ -13,9 +15,13 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/components/layout-footer';
 @import 'govuk_publishing_components/components/layout-for-admin';
 @import 'govuk_publishing_components/components/layout-header';
+@import 'govuk_publishing_components/components/radio';
 @import 'govuk_publishing_components/components/search';
 @import 'govuk_publishing_components/components/secondary-navigation';
+@import 'govuk_publishing_components/components/select';
 @import 'govuk_publishing_components/components/skip-link';
 @import 'govuk_publishing_components/components/summary-card';
 @import 'govuk_publishing_components/components/textarea';
 @import 'govuk_publishing_components/components/title';
+
+@import "./components/autocomplete";

app/assets/stylesheets/components/_autocomplete.scss

@@ -0,0 +1,115 @@
+// stylelint-disable-next-line scss/at-import-partial-extension
+@import "accessible-autocomplete-multiselect/dist/accessible-autocomplete.min";
+
+$app-focus-colour: $govuk-focus-colour;
+
+.app-c-autocomplete {
+  margin-bottom: govuk-spacing(6);
+}
+
+.app-c-autocomplete--search {
+  .autocomplete__input {
+    // Styles copied from https://github.com/alphagov/govuk_publishing_components/blame/b78280bc84da81e30f63faf47bcd3c9e5935dcde/app/assets/stylesheets/govuk_publishing_components/components/_input.scss#L4-L5
+    background: govuk-colour("white")
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E")
+      no-repeat -5px -3px;
+    padding-left: govuk-spacing(6);
+  }
+}
+
+.autocomplete__wrapper {
+  background: govuk-colour("white");
+}
+
+.autocomplete__input {
+  @include govuk-font(19);
+  z-index: 1;
+  color: $govuk-text-colour;
+}
+
+.autocomplete__input:focus,
+.autocomplete__input--focused {
+  outline: $govuk-focus-width solid $govuk-focus-colour;
+  outline-offset: $govuk-border-width-form-element;
+  box-shadow: $govuk-input-border-colour 0 0 0 $govuk-border-width-form-element;
+}
+
+.autocomplete__hint {
+  @include govuk-font(19);
+  z-index: 1;
+  color: $govuk-secondary-text-colour;
+}
+
+.autocomplete__dropdown-arrow-down {
+  z-index: 0;
+}
+
+.autocomplete__option {
+  @include govuk-font(19);
+  color: $govuk-text-colour;
+
+  mark {
+    border-bottom: 3px solid $govuk-focus-text-colour;
+    background: $app-focus-colour;
+  }
+}
+
+.autocomplete__list {
+  margin-top: 0;
+
+  .autocomplete__option,
+  .autocomplete__option:hover {
+    padding: 5px 6px;
+
+    &::before {
+      position: relative;
+      top: 3px;
+      padding-top: 2px;
+    }
+  }
+
+  .autocomplete__selected-option,
+  .autocomplete__selected-option:hover {
+    @include govuk-font(19);
+    margin: govuk-spacing(2) 0 0;
+    color: $govuk-text-colour;
+  }
+
+  .autocomplete__remove-option {
+    @include govuk-font(16);
+    @extend %govuk-link;
+  }
+}
+
+.autocomplete__option-hint {
+  display: block;
+  @include govuk-font(16);
+  color: $govuk-secondary-text-colour;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  color: govuk-colour("white");
+
+  .autocomplete__option-hint {
+    color: govuk-colour("white");
+  }
+}
+
+.js-enabled {
+  .app-c-autocomplete {
+    .govuk-select[multiple] {
+      height: 40px;
+    }
+  }
+
+  .app-c-autocomplete__multiselect-instructions {
+    display: none;
+  }
+
+  .app-c-autocomplete--search {
+    .govuk-label {
+      @include govuk-visually-hidden;
+    }
+  }
+}

app/controllers/admin_controller.rb

@@ -5,6 +5,39 @@ class AdminController < ApplicationController
 
   def summary; end
 
+  def edit_metadata; end
+
+  def confirm_metadata
+    @params = params.permit(
+      :name,
+      :base_path,
+      :description,
+      :summary,
+      :document_noun,
+      organisations: [],
+      related: [],
+    )
+
+    @params[:organisations].reject!(&:empty?)
+    @params[:related].reject!(&:empty?)
+
+    @proposed_schema = @current_format.finder_schema.schema.merge(@params.to_unsafe_h)
+
+    @proposed_schema["signup_copy"] = "You'll get an email each time a #{@params[:document_noun]} is updated or a new #{@params[:document_noun]} is published."
+
+    if params[:include_related] != "true"
+      @proposed_schema.delete("related")
+    end
+
+    if @proposed_schema["show_summaries"] == "true"
+      @proposed_schema["show_summaries"] = true
+    else
+      @proposed_schema.delete("show_summaries")
+    end
+
+    render :confirm_metadata
+  end
+
 private
 
   def check_authorisation

app/policies/document_policy.rb

@@ -16,6 +16,9 @@ def can_request_edits_to_finder?
     publish?
   end
   alias_method :summary?, :can_request_edits_to_finder?
+  alias_method :edit_metadata?, :can_request_edits_to_finder?
+  alias_method :confirm_metadata?, :can_request_edits_to_finder?
+
   def publish?
     document_type_editor? || gds_editor? || departmental_editor?
   end

app/views/admin/_metadata_summary_card.html.erb

@@ -0,0 +1,54 @@
+<%
+  summary_card_actions ||= []
+%>
+
+<% related_links_value = capture do %>
+  <% if schema["related"] %>
+    Yes
+    <% schema["related"].each_with_index do |content_id, index| %>
+      <p>Link <%= index + 1 %>: <%= content_id %></p>
+    <% end %>
+  <% else %>
+    No
+  <% end %>
+<% end %>
+
+<%= render "govuk_publishing_components/components/summary_card", {
+  title: "Finder details",
+  rows: [
+    ({
+      key: "Title of the finder",
+      value: schema["name"]
+    } if !(defined? previous_schema) || schema["name"] != previous_schema["name"]),
+    ({
+      key: "Slug or URL",
+      value: schema["base_path"]
+    } if !(defined? previous_schema) || schema["base_path"] != previous_schema["base_path"]),
+    ({
+      key: "Organisations the finder should be attached to",
+      value: schema["organisations"].map { |content_id| organisation_name(content_id)  }.compact.join(",")
+    } if !(defined? previous_schema) || schema["organisations"] != previous_schema["organisations"]),
+    ({
+      key: "Short description (For search engines)",
+      value: schema["description"]
+    } if !(defined? previous_schema) || schema["description"] != previous_schema["description"]),
+    ({
+      key: "Summary of the finder (Longer description shown below title)",
+      value: sanitize("<div class='govspeak'>#{schema["summary"]}</div>")
+    } if !(defined? previous_schema) || schema["summary"] != previous_schema["summary"]),
+    ({
+      key: "Any related links on GOV.UK?",
+      value: related_links_value,
+    } if !(defined? previous_schema) || schema["related"] != previous_schema["related"]),
+    ({
+      key: "Should summary of each content show under the title in the finder list page?",
+      value: schema["show_summaries"] ? "Yes" : "No"
+    } if !(defined? previous_schema) || schema["show_summaries"] != previous_schema["show_summaries"]),
+    ({
+      key: "The document noun (How the documents on the finder are referred to)",
+      value: schema["document_noun"].humanize
+    } if !(defined? previous_schema) || schema["document_noun"] != previous_schema["document_noun"]),
+  ].compact,
+  summary_card_actions:,
+  margin_top: 6,
+} %>

app/views/admin/confirm_metadata.html.erb

@@ -0,0 +1,57 @@
+<% content_for :breadcrumbs do %>
+  <%= render "govuk_publishing_components/components/breadcrumbs", {
+  collapse_on_mobile: true,
+    breadcrumbs: [
+      {
+        title: "All finders",
+        url: root_path
+      },
+      {
+        title: "#{current_format.title} finder",
+        url: "/admin/#{current_format.admin_slug}"
+      },
+      {
+        title: "Request change",
+        url: "/admin/metadata/#{current_format.admin_slug}"
+      },
+      {
+        title: "Check changes",
+        url: request.original_url
+      }
+    ]
+  } %>
+<% end %>
+<% content_for :page_title, "Edit #{current_format.title} finder" %>
+<% content_for :title, "Check your changes before submitting" %>
+<% content_for :context, "#{current_format.title} finder" %>
+
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds govuk-body govuk-!-margin-top-8">
+    <%= render "metadata_summary_card", {
+      schema: @proposed_schema,
+      previous_schema: @current_format.finder_schema.schema,
+    } %>
+
+    <%= render "govuk_publishing_components/components/details", {
+      title: "Proposed JSON",
+    } do %>
+      <% capture do %>
+        <pre><%= JSON.pretty_generate(@proposed_schema) %></pre>
+      <% end %>
+    <% end %>
+
+    <p class="govuk-body govuk-body govuk-!-margin-top-7">
+      By submitting you are confirming that these changes are required to the specialist finder.
+    </p>
+
+    <div class="govuk-button-group govuk-!-margin-top-7">
+      <%= render "govuk_publishing_components/components/button", {
+        text: "Submit changes",
+        href: "/admin/#{current_format.admin_slug}"
+      } %>
+
+      <%= link_to("Cancel", "/admin/#{current_format.admin_slug}", class: "govuk-link govuk-link--no-visited-state") %>
+    </div>
+  </div>
+</div>