KEH-2140 - More visibility to add technologies to the radar

.github/workflows/ci-test.yml

@@ -45,6 +45,8 @@ jobs:
       - name: Install dependencies
         run: make install-dev
       - name: Start app in background
+        env:
+          VITE_TECH_RADAR_SUBMISSIONS_URL: https://example.test/mock-tech-radar-submissions
         run: make dev-ci &
       - name: Export CI variable to enable Playwright config tweaks
         run: echo "CI=true" >> $GITHUB_ENV
@@ -66,6 +68,8 @@ jobs:
       - name: Install dependencies
         run: make install-dev
       - name: Start app in background
+        env:
+          VITE_TECH_RADAR_SUBMISSIONS_URL: https://example.test/mock-tech-radar-submissions
         run: make dev-ci &
       - name: Export CI variable to enable Playwright config tweaks
         run: echo "CI=true" >> $GITHUB_ENV

concourse/scripts/build_image.sh

@@ -25,13 +25,18 @@ if [ -z "$support_mail" ] || [ "$support_mail" = "null" ]; then
 	echo "support_mail variable missing"
 fi
 
+tech_radar_submissions_url=$(echo "$secrets" | jq -r .tech_radar_submissions_url)
+if [ -z "$tech_radar_submissions_url" ] || [ "$tech_radar_submissions_url" = "null" ]; then
+	echo "tech_radar_submissions_url variable missing"
+fi
+
 alerts_channel_id=$(echo "$secrets" | jq -r .alerts_channel_id)
 container_image_frontend=$(echo "$secrets" | jq -r .container_image_frontend)
 container_image_backend=$(echo "$secrets" | jq -r .container_image_backend)
 
 # Build images in parallel
 echo "Building images in parallel..."
-podman build --build-arg "VITE_SUPPORT_MAIL=${support_mail}" --build-arg "VITE_ALERTS_CHANNEL_ID=${alerts_channel_id}" -t "${container_image_frontend}":"${tag}" resource-repo/frontend &
+podman build --build-arg "VITE_SUPPORT_MAIL=${support_mail}" --build-arg "VITE_ALERTS_CHANNEL_ID=${alerts_channel_id}" --build-arg "VITE_TECH_RADAR_SUBMISSIONS_URL=${tech_radar_submissions_url}" -t "${container_image_frontend}":"${tag}" resource-repo/frontend &
 pid1=$!
 podman build -t "${container_image_backend}":"${tag}" resource-repo/backend &
 pid2=$!

concourse/scripts/terraform_infra.sh

@@ -48,6 +48,7 @@ copilot_bucket_name=$(echo "$secrets" | jq -r .copilot_bucket_name)
 
 support_mail=$(echo "$secrets" | jq -r .support_mail)
 alerts_channel_id=$(echo "$secrets" | jq -r .alerts_channel_id)
+tech_radar_submissions_url=$(echo "$secrets" | jq -r .tech_radar_submissions_url)
 
 # Cognito variables for AzureAD SAML
 domain_extension=$(echo "$secrets" | jq -r .domain_extension)
@@ -114,4 +115,5 @@ terraform apply \
 	-var "copilot_bucket_name=$copilot_bucket_name" \
 	-var "support_mail=$support_mail" \
 	-var "alerts_channel_id=$alerts_channel_id" \
+	-var "tech_radar_submissions_url=$tech_radar_submissions_url" \
 	-auto-approve

frontend/.env.example

@@ -1,3 +1,4 @@
 VITE_BACKEND_URL=http://localhost:5001
 VITE_SUPPORT_MAIL=digital-landscape@ons.gov.uk
-VITE_ALERTS_CHANNEL_ID=xxxxxxxxxx
+VITE_ALERTS_CHANNEL_ID=xxxxxxxxxx
+VITE_TECH_RADAR_SUBMISSIONS_URL=https://github.com/ONSdigital/keh-tech-radar-submissions

frontend/Dockerfile

@@ -6,9 +6,11 @@ WORKDIR /app
 ARG VITE_BACKEND_URL 
 ARG VITE_SUPPORT_MAIL
 ARG VITE_ALERTS_CHANNEL_ID
+ARG VITE_TECH_RADAR_SUBMISSIONS_URL
 ENV VITE_BACKEND_URL=$VITE_BACKEND_URL
 ENV VITE_SUPPORT_MAIL=$VITE_SUPPORT_MAIL
 ENV VITE_ALERTS_CHANNEL_ID=$VITE_ALERTS_CHANNEL_ID
+ENV VITE_TECH_RADAR_SUBMISSIONS_URL=$VITE_TECH_RADAR_SUBMISSIONS_URL
 
 # Copy package files first
 COPY package*.json ./
@@ -28,6 +30,8 @@ WORKDIR /app
 
 ENV NODE_ENV=production
 ENV VITE_SUPPORT_MAIL=$VITE_SUPPORT_MAIL
+ENV VITE_ALERTS_CHANNEL_ID=$VITE_ALERTS_CHANNEL_ID
+ENV VITE_TECH_RADAR_SUBMISSIONS_URL=$VITE_TECH_RADAR_SUBMISSIONS_URL
 # Install serve for production
 # kics-scan ignore-block d3499f6d-1651-41bb-a9a7-de925fea487b
 # hadolint ignore=DL3016

frontend/src/components/InfoBox/InfoBox.js

@@ -292,7 +292,10 @@ const InfoBox = ({
             )}
           </button>
         </div>
-        <p>Click a box to show the description of the event</p>
+        <p>
+          Click a date box below to read reasoning behind status changes over
+          time
+        </p>
       </div>
 
       <div className="timeline-container" tabIndex={0}>

frontend/src/pages/RadarPage.js

@@ -27,6 +27,9 @@ import Layout from '../components/Layout/Layout';
  * @returns {JSX.Element} - The RadarPage component.
  */
 function RadarPage() {
+  const techRadarSubmissionsUrl =
+    import.meta.env.VITE_TECH_RADAR_SUBMISSIONS_URL || '';
+
   const fetchedOnce = useRef(false);
   const projectsFetchedOnce = useRef(false);
   const [data, setData] = useState(null);
@@ -865,6 +868,21 @@ function RadarPage() {
             </div>
           </div>
 
+          <div
+            className="disclaimer-banner"
+            style={{ marginTop: '16px', marginBottom: '16px' }}
+          >
+            Want to suggest a technology change on the radar? View this{' '}
+            <a
+              href={techRadarSubmissionsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              repository
+            </a>
+            .
+          </div>
+
           <div className="quadrant-lists">
             <div
               id="top-left-quadrant"

frontend/src/styles/CopilotPage.css

@@ -125,6 +125,18 @@ html:not(.dark)
   width: fit-content;
 }
 
+.disclaimer-banner a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.disclaimer-banner a:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 :root[class~='dark'] .disclaimer-banner {
   background-color: hsl(210deg 50% 20%);
   color: hsl(210deg 100% 90%);

terraform/service/env/dev/example_tfvars.txt

@@ -13,3 +13,4 @@ container_ver                     = "v0.0.1"
 container_ver_backend             = "v0.0.1"
 support_mail                      = "digital-landscape@ons.gov.uk"
 alerts_channel_id                 = "test channel"
+tech_radar_submissions_url        = "https://github.com/ONSdigital/keh-tech-radar-submissions"

terraform/service/env/prod/example_tfvars.txt

@@ -13,3 +13,4 @@ container_ver                     = "v0.0.1"
 container_ver_backend             = "v0.0.1"
 support_mail                      = "digital-landscape@ons.gov.uk"
 alerts_channel_id                 = "test channel"
+tech_radar_submissions_url        = "https://github.com/ONSdigital/keh-tech-radar-submissions"

terraform/service/main.tf

@@ -60,6 +60,10 @@ resource "aws_ecs_task_definition" "ecs_service_definition" {
           name  = "VITE_ALERTS_CHANNEL_ID",
           value = var.alerts_channel_id
         },
+        {
+          name  = "VITE_TECH_RADAR_SUBMISSIONS_URL",
+          value = var.tech_radar_submissions_url
+        },
         {
           name  = "IMAGE_TAG",
           value = data.aws_ecr_image.frontend_image.image_tag

terraform/service/variables.tf

@@ -213,6 +213,11 @@ variable "alerts_channel_id" {
   type        = string
 }
 
+variable "tech_radar_submissions_url" {
+  description = "URL for submitting tech radar updates"
+  type        = string
+}
+
 locals {
   url         = "${var.domain}.${var.domain_extension}"
   service_url = "${var.service_subdomain}.${local.url}"

testing/ui/playwright.config.js

@@ -1,5 +1,22 @@
 import { defineConfig } from 'playwright/test';
 
+const mockTechRadarSubmissionsUrl =
+  process.env.VITE_TECH_RADAR_SUBMISSIONS_URL ||
+  'https://example.test/mock-tech-radar-submissions';
+
+process.env.VITE_TECH_RADAR_SUBMISSIONS_URL = mockTechRadarSubmissionsUrl;
+
+const localWebServer = {
+  command: 'npm run dev -- --host 127.0.0.1',
+  cwd: '../../frontend',
+  port: 3000,
+  reuseExistingServer: true,
+  env: {
+    ...process.env,
+    VITE_TECH_RADAR_SUBMISSIONS_URL: mockTechRadarSubmissionsUrl,
+  },
+};
+
 export default defineConfig({
   timeout: process.env.CI ? 60_000 : 30_000, // Increase default test timeout to 60 seconds on CI (default is 30 seconds)
   expect: {
@@ -8,4 +25,5 @@ export default defineConfig({
   retries: process.env.CI ? 1 : 0, // Retry failed tests once on CI to account for flakiness
 
   workers: process.env.CI ? 1 : undefined, // Limit to 1 worker on CI for stability
+  webServer: process.env.CI ? undefined : localWebServer,
 });

testing/ui/tests/techradar.test.js

@@ -5,6 +5,10 @@ import { nodeBlipCases } from './data/nodeBlipCases';
 import { reviewPositionCases } from './data/reviewPositionCases';
 import { directorateData } from './data/directorateData';
 
+const techRadarSubmissionsUrl =
+  process.env.VITE_TECH_RADAR_SUBMISSIONS_URL ||
+  'https://example.test/mock-tech-radar-submissions';
+
 // Function to intercept and mock the API call
 const interceptAPICall = async ({ page }) => {
   // Function to intercept and mock the API radarData call
@@ -124,6 +128,22 @@ test.describe('Check projects available under Tech Radar', () => {
   });
 });
 
+test('Check technology change suggestion message is displayed with repository link', async ({
+  page,
+}) => {
+  await interceptAPICall({ page });
+
+  await expect(
+    page.getByText(
+      'Want to suggest a technology change on the radar? View this'
+    )
+  ).toBeVisible();
+
+  const suggestionLink = page.getByRole('link', { name: 'repository' });
+  await expect(suggestionLink).toBeVisible();
+  await expect(suggestionLink).toHaveAttribute('href', techRadarSubmissionsUrl);
+});
+
 // Multiple Directorate Support
 
 test('Check that directorate dropdown is present and has expected options', async ({