feat: personalise alert settings page with target user's name

When an approver edits another user's alert settings, display the
user's first name in the title and full name in the description
instead of generic text. Fetch the target user by ID and pass to
the form component. Also adds breadcrumb for the alert settings
edit route.

Made-with: Cursor

Author: Philip

src/app/(auth)/account/alert-settings/[id]/page.tsx

@@ -3,7 +3,8 @@ import { notFound } from 'next/navigation';
 
 import type { TypeAlertSettingsIn } from '@/__generated__/data-contracts';
 import { getAlertsUserUserId } from '@/actions/getAlertsUserUserId';
-import { getUsersMe } from '@/actions/getUsersMe';
+import { getSession } from '@/actions/getSession';
+import { getUsersById } from '@/actions/getUserById';
 import { patchAlertsUserUserId } from '@/actions/patchAlertsUserUserId';
 import { AlertSettingsForm } from '@/components/account/alert-settings/AlertSettingsForm';
 import { isAgencyApprover } from '@/utils/Roles';
@@ -20,10 +21,11 @@ export default async function EditUserAlertSettingsPage({
 }) {
   const { id } = await params;
 
-  const user = await getUsersMe();
+  const session = await getSession();
   const alertSettings = await getAlertsUserUserId(id);
+  const user = await getUsersById(id);
 
-  if (!isAgencyApprover(user.role)) {
+  if (!isAgencyApprover(session?.user.role)) {
     notFound();
   }
 
@@ -45,6 +47,7 @@ export default async function EditUserAlertSettingsPage({
   return (
     <div>
       <AlertSettingsForm
+        user={user}
         defaultValues={defaultValues}
         selfEdit={false}
         onSubmit={onSubmit}

src/app/@breadcrumb/account/alert-settings/[id]/page.tsx

@@ -0,0 +1,35 @@
+import { getTranslations } from 'next-intl/server';
+
+import { getUsersById } from '@/actions/getUserById';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from '@/ui/breadcrumbs/breadcrumbs';
+
+export default async function BreadcrumbOrganisationSlot({
+  params,
+}: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const t = await getTranslations('Breadcrumb');
+  const user = await getUsersById(id);
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/account">{t('account')}</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/account/distribution-list">{t('distribution-list')}</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbPage>
+            {user.first_name}
+            {' '}
+            {user.last_name}
+          </BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

src/components/account/alert-settings/AlertSettingsForm.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import type { SubmitHandler, UseFormRegister } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import type { TypeAlertSettingsIn } from '@/__generated__/data-contracts';
+import type { TypeAlertSettingsIn, TypeUserOut } from '@/__generated__/data-contracts';
 import Accordion from '@/ui/accordion/accordion';
 import Button from '@/ui/button/button';
 import Checkboxes from '@/ui/checkboxes/checkboxes';
@@ -49,12 +49,13 @@ function Option({
 }
 
 type AlertSettingsFormProps = {
+  user?: TypeUserOut;
   defaultValues: AlertSettingsSchema;
   selfEdit?: boolean;
   onSubmit: (data: TypeAlertSettingsIn) => Promise<void>;
 };
 
-const AlertSettingsForm = ({ defaultValues, selfEdit = true, onSubmit: onSubmitAction }: AlertSettingsFormProps) => {
+const AlertSettingsForm = ({ user, defaultValues, selfEdit = true, onSubmit: onSubmitAction }: AlertSettingsFormProps) => {
   const t = useTranslations('Forms.Alert_settings');
   const tCommon = useTranslations('Common');
 
@@ -105,8 +106,8 @@ const AlertSettingsForm = ({ defaultValues, selfEdit = true, onSubmit: onSubmitA
           )
         : (
             <>
-              <h1 className="govuk-heading-xl">{t('title', { whose: selfEdit ? 'your' : 'user\'s' })}</h1>
-              <p className="govuk-body">{t('description')}</p>
+              <h1 className="govuk-heading-xl">{t('title', { whose: selfEdit ? 'your' : user?.first_name ? `${user.first_name}'s` : 'user\'s' })}</h1>
+              <p className="govuk-body">{t('description', { to: user?.first_name ? `${user.first_name} ${user.last_name}` : 'you' })}</p>
               {selfEdit && (
                 <WarningText>
                   {t('warning')}

src/locales/en.json

@@ -1772,7 +1772,7 @@
     },
     "Alert_settings": {
       "title": "Edit {whose} alert settings",
-      "description": "We will send you notifications according to the settings selected on this page.",
+      "description": "We will send {to} notifications according to the settings selected on this page.",
       "warning": "Changing these settings is only recommended if advised by the National Space Operations Centre.",
       "conjunction_alerts": "Conjunction alerts",
       "self_which": "Which {type} alerts would you like to receive?",