Merge pull request #758 from wri/feat/TM-1576-site-report-banner

[TM-1576] Update form header content for site reports.
wri · Dec 18, 2024 · 94605d6 · 94605d6
2 parents 5227a43 + 19b9898
commit 94605d6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/components/extensive/WizardForm/FormHeader.tsx b/src/components/extensive/WizardForm/FormHeader.tsx
@@ -11,11 +11,15 @@ export interface WizardFormHeaderProps {
   errorMessage?: string;
   onClickSaveAndCloseButton?: () => void;
   title?: string;
+  subtitle?: string;
 }
 
 export const WizardFormHeader = (props: WizardFormHeaderProps) => {
   const t = useT();
 
+  const subtitle =
+    props.subtitle ?? t("Progress: {number} steps complete", { number: `${props.currentStep}/${props.numberOfSteps}` });
+
   return (
     <div className="sticky top-[74px] z-40 flex border-neutral-150 bg-treesHeaderWithOverlay bg-cover bg-no-repeat px-10 py-3 md:py-8">
       <div className="mx-auto flex w-full min-w-0 max-w-[82vw] items-center gap-8">
@@ -27,9 +31,9 @@ export const WizardFormHeader = (props: WizardFormHeaderProps) => {
           )}
           <div className="flex">
             <Text variant="text-14-light" className="overflow-hidden text-ellipsis whitespace-nowrap">
-              <T _str="Progress: {number} steps complete" number={`${props.currentStep}/${props.numberOfSteps}`} />
+              {subtitle}
             </Text>
-            <Text variant="text-14-light">
+            <Text variant="text-14-light" className="pl-1">
               <Switch>
                 <Case condition={!props.formStatus}>{t("Unsaved")}</Case>
                 <Case condition={props.formStatus === "saving"}>{t("Saving…")}</Case>

diff --git a/src/components/extensive/WizardForm/index.tsx b/src/components/extensive/WizardForm/index.tsx
@@ -32,6 +32,7 @@ export interface WizardFormProps {
 
   formStatus?: "saving" | "saved";
   title?: string;
+  subtitle?: string;
   errors?: ErrorWrapper<null>;
   summaryOptions?: FormSummaryOptions & {
     downloadButtonText?: string;
@@ -267,6 +268,7 @@ function WizardForm(props: WizardFormProps) {
           errorMessage={props.errors && t("Something went wrong")}
           onClickSaveAndCloseButton={!props.hideSaveAndCloseButton ? onClickSaveAndClose : undefined}
           title={props.title}
+          subtitle={props.subtitle}
         />
       </When>
       <div className={twMerge("mx-auto mt-0 max-w-[82vw] px-6 py-10 xl:px-0", props.className)}>

diff --git a/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx b/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx
@@ -64,7 +64,12 @@ const EditEntityForm = ({ entityName, entityUUID, entity, formData }: EditEntity
   );
 
   const reportingWindow = useReportingWindow(entity?.due_at);
-  const formTitle = `${formData.form?.title} ${isReport ? reportingWindow : ""}`;
+  const formTitle =
+    entityName === "site-reports"
+      ? t("{siteName} Site Report", { siteName: entity.site.name })
+      : `${formData.form?.title} ${isReport ? reportingWindow : ""}`;
+  const formSubtitle =
+    entityName === "site-reports" ? t("Reporting Period: {reportingWindow}", { reportingWindow }) : undefined;
 
   const saveAndCloseModalMapping: any = {
     projects: t(
@@ -117,6 +122,7 @@ const EditEntityForm = ({ entityName, entityUUID, entity, formData }: EditEntity
         submitButtonDisable={isSubmitting}
         defaultValues={defaultValues}
         title={formTitle}
+        subtitle={formSubtitle}
         tabOptions={{
           markDone: true,
           disableFutureTabs: true