From dc551632bbee66ad15b8802757ac03585af7d95c Mon Sep 17 00:00:00 2001 From: Manny Dinssa <44172848+Dinssa@users.noreply.github.com> Date: Fri, 16 Aug 2024 13:24:29 +0100 Subject: [PATCH] Create success notification and amend tabs behaviour with js controller --- app/controllers/merge_requests_controller.rb | 3 +- app/frontend/controllers/index.js | 4 +++ app/frontend/controllers/tabs_controller.js | 30 +++++++++++++++++++ app/helpers/merge_requests_helper.rb | 2 +- app/views/layouts/application.html.erb | 3 +- app/views/merge_requests/show.html.erb | 2 +- app/views/organisations/index.html.erb | 2 +- spec/requests/merge_request_spec.rb | 2 +- .../merge_requests_controller_spec.rb | 2 +- 9 files changed, 43 insertions(+), 7 deletions(-) create mode 100644 app/frontend/controllers/tabs_controller.js diff --git a/app/controllers/merge_requests_controller.rb b/app/controllers/merge_requests_controller.rb index f19224a92..b9def67bc 100644 --- a/app/controllers/merge_requests_controller.rb +++ b/app/controllers/merge_requests_controller.rb @@ -54,7 +54,8 @@ class MergeRequestsController < ApplicationController def delete @merge_request.discard! - redirect_to organisations_path(anchor: "merge-requests") + flash[:notice] = "The merge request has been deleted" + redirect_to organisations_path(tab: "merge-requests") end def merging_organisations diff --git a/app/frontend/controllers/index.js b/app/frontend/controllers/index.js index ece539d15..7638f26a7 100644 --- a/app/frontend/controllers/index.js +++ b/app/frontend/controllers/index.js @@ -14,9 +14,13 @@ import GovukfrontendController from './govukfrontend_controller.js' import NumericQuestionController from './numeric_question_controller.js' import FilterLayoutController from './filter_layout_controller.js' + +import TabsController from './tabs_controller.js' + application.register('accessible-autocomplete', AccessibleAutocompleteController) application.register('conditional-filter', ConditionalFilterController) application.register('conditional-question', ConditionalQuestionController) application.register('govukfrontend', GovukfrontendController) application.register('numeric-question', NumericQuestionController) application.register('filter-layout', FilterLayoutController) +application.register('tabs', TabsController) diff --git a/app/frontend/controllers/tabs_controller.js b/app/frontend/controllers/tabs_controller.js new file mode 100644 index 000000000..775b14fe5 --- /dev/null +++ b/app/frontend/controllers/tabs_controller.js @@ -0,0 +1,30 @@ +document.addEventListener("DOMContentLoaded", function() { + const urlParams = new URLSearchParams(window.location.search); + const tab = urlParams.get("tab"); + + function activateTab(tabId) { + const tabElement = document.getElementById(tabId); + if (tabElement) { + tabElement.click(); + } + history.replaceState(null, null, `${window.location.pathname}?${urlParams.toString()}`); + } + + function handleTabClick(event) { + event.preventDefault(); + const targetId = this.getAttribute('href').substring(1); + activateTab(targetId); + urlParams.set("tab", targetId); + history.replaceState(null, null, `${window.location.pathname}?${urlParams.toString()}`); + } + + if (tab) { + activateTab(`tab_${tab}`); + } + + window.scrollTo(0, 0); + + document.querySelectorAll('.govuk-tabs__tab').forEach(tabElement => { + tabElement.addEventListener('click', handleTabClick); + }); +}); diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb index 4d7408349..c018a99df 100644 --- a/app/helpers/merge_requests_helper.rb +++ b/app/helpers/merge_requests_helper.rb @@ -59,7 +59,7 @@ module MergeRequestsHelper case page when "absorbing_organisation" - organisations_path(anchor: "merge-requests") + organisations_path(tab: "merge-requests") when "merging_organisations" absorbing_organisation_merge_request_path(merge_request) when "merge_date" diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 1ed5014c3..210e5c73e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -126,7 +126,8 @@ <%= govuk_notification_banner( title_text: "Success", success: true, title_heading_level: 3, - title_id: "flash-notice" + title_id: "flash-notice", + role: "alert", ) do |notification_banner| notification_banner.with_heading(text: flash.notice.html_safe) if flash[:notification_banner_body] diff --git a/app/views/merge_requests/show.html.erb b/app/views/merge_requests/show.html.erb index c93e99738..a211da034 100644 --- a/app/views/merge_requests/show.html.erb +++ b/app/views/merge_requests/show.html.erb @@ -1,7 +1,7 @@ <% content_for :before_content do %> <% title = "Merge details: #{@merge_request.absorbing_organisation_name}" %> <% content_for :title, title %> - <%= govuk_back_link href: organisations_path(anchor: "merge-requests") %> + <%= govuk_back_link href: organisations_path(tab: "merge-requests") %> <% end %> <%= render partial: "notification_banners" %> diff --git a/app/views/organisations/index.html.erb b/app/views/organisations/index.html.erb index 64c311472..3b96288f1 100644 --- a/app/views/organisations/index.html.erb +++ b/app/views/organisations/index.html.erb @@ -5,7 +5,7 @@ <%= render partial: "organisations/headings", locals: request.path == organisations_path ? { main: "Organisations", sub: nil } : { main: @organisation.name, sub: "Organisations" } %> -
+
<%= govuk_tabs(title: "Collection resources", classes: %w[app-tab__large-headers]) do |c| %> <% c.with_tab(label: "All organisations") do %> <%= govuk_button_link_to "Create a new organisation", new_organisation_path, html: { method: :get } %> diff --git a/spec/requests/merge_request_spec.rb b/spec/requests/merge_request_spec.rb index 3666244dd..c7302b632 100644 --- a/spec/requests/merge_request_spec.rb +++ b/spec/requests/merge_request_spec.rb @@ -20,7 +20,7 @@ RSpec.describe MergeRequest, type: :request do it "redirects to the merge request list" do delete delete_merge_request_path(merge_request) - expect(response).to redirect_to(organisations_path(anchor: "merge-requests")) + expect(response).to redirect_to(organisations_path(tab: "merge-requests")) follow_redirect! expect(page).to have_content("Merge requests") end diff --git a/spec/requests/merge_requests_controller_spec.rb b/spec/requests/merge_requests_controller_spec.rb index 899def900..8b7a577a7 100644 --- a/spec/requests/merge_requests_controller_spec.rb +++ b/spec/requests/merge_requests_controller_spec.rb @@ -202,7 +202,7 @@ RSpec.describe MergeRequestsController, type: :request do end it "has the correct back button" do - expect(page).to have_link("Back", href: organisations_path(anchor: "merge-requests")) + expect(page).to have_link("Back", href: organisations_path(tab: "merge-requests")) end end