From 98eb0119a5ced4f39dca52dc5ab18dbcf941aa32 Mon Sep 17 00:00:00 2001
From: Manny Dinssa <44172848+Dinssa@users.noreply.github.com>
Date: Tue, 8 Apr 2025 09:37:26 +0100
Subject: [PATCH] Add testing tools section with links in testing environments

---
 .../create_log_actions_component.html.erb     | 14 +++++++++----
 app/frontend/styles/_testing-tools.scss       | 20 +++++++++++++++++++
 app/frontend/styles/application.scss          |  1 +
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 app/frontend/styles/_testing-tools.scss

diff --git a/app/components/create_log_actions_component.html.erb b/app/components/create_log_actions_component.html.erb
index 2c3b75aea..8c962fc02 100644
--- a/app/components/create_log_actions_component.html.erb
+++ b/app/components/create_log_actions_component.html.erb
@@ -9,10 +9,16 @@
     <% end %>
 
     <% if FeatureToggle.create_test_logs_enabled? %>
-      <%= govuk_link_to "New test log", create_test_log_href %>
-      <%= govuk_link_to "New test log (setup only)", create_setup_test_log_href %>
-      <%= govuk_link_to "24 BU test file", create_test_bulk_upload_href(2024) %>
-      <%= govuk_link_to "25 BU test file", create_test_bulk_upload_href(2025) %>
+      <div class="govuk-inset-text app-testing-tools">
+        <span class="govuk-tag app-testing-tools__tag">Testing tools</span>
+        <span class="govuk-body govuk-body-s">These links can only be seen and be used in testing environments.</span>
+        <div>
+          <%= govuk_link_to "New test log", create_test_log_href, class: "app-testing-tools-link" %>
+          <%= govuk_link_to "New test log (setup only)", create_setup_test_log_href, class: "app-testing-tools-link" %>
+          <%= govuk_link_to "24 BU test file", create_test_bulk_upload_href(2024), class: "app-testing-tools-link" %>
+          <%= govuk_link_to "25 BU test file", create_test_bulk_upload_href(2025), class: "app-testing-tools-link" %>
+        </div>
+      </div>
     <% end %>
   <% end %>
 </div>
diff --git a/app/frontend/styles/_testing-tools.scss b/app/frontend/styles/_testing-tools.scss
new file mode 100644
index 000000000..f4b21b763
--- /dev/null
+++ b/app/frontend/styles/_testing-tools.scss
@@ -0,0 +1,20 @@
+.app-testing-tools {
+  border-left-color: #f47738;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.app-testing-tools-link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+}
+
+.app-testing-tools__tag {
+  @include govuk-font(14);
+  background-color: #fcd6c3;
+  margin-top: 0;
+  margin-bottom: 10px;
+  margin-right: 15px;
+}
diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss
index 370592640..33574bf9b 100644
--- a/app/frontend/styles/application.scss
+++ b/app/frontend/styles/application.scss
@@ -49,6 +49,7 @@ $govuk-breakpoints: (
 @import "sub-navigation";
 @import "unread-notification";
 @import "red-link";
+@import "testing-tools";
 @import "custom-rails-admin";
 @import "node_modules/@ministryofjustice/frontend/moj/components/date-picker/date-picker";