fix: resolve the issue with incorrect header for forms preview TCKT-566 (#636)

kalasgarov · web-flow · commit f2df2b4915c3 · 2025-04-30T07:29:18.000-07:00
* fix: resolve the issue with incorrect header for forms preview TCKT-566

* fix: capitalize step indicator labels in TopNavigation TCKT-566
diff --git a/packages/design/src/FormManager/FormManager.tsx b/packages/design/src/FormManager/FormManager.tsx
@@ -119,8 +119,9 @@ export default function FormManager(props: FormManagerProps) {
               >
                 <FormManagerLayout
                   step={NavPage.preview}
-                  preview={AppRoutes.Preview.getUrl(formId)}
                   back={AppRoutes.Create.getUrl(formId)}
+                  previewPath={AppRoutes.Preview.getUrl(formId)}
+                  currentPath={AppRoutes.Preview.getUrl(formId)}
                 >
                   <FormPreview />
                 </FormManagerLayout>
@@ -155,7 +156,8 @@ export default function FormManager(props: FormManagerProps) {
                   step={NavPage.edit}
                   back={AppRoutes.GuidedFormCreation.getUrl()}
                   next={AppRoutes.Configure.getUrl(formId)}
-                  preview={AppRoutes.Preview.getUrl(formId)}
+                  previewPath={AppRoutes.Preview.getUrl(formId)}
+                  currentPath={AppRoutes.Create.getUrl(formId)}
                 >
                   <FormEdit />
                 </FormManagerLayout>
@@ -184,7 +186,8 @@ export default function FormManager(props: FormManagerProps) {
                   step={NavPage.settings}
                   back={AppRoutes.Create.getUrl(formId)}
                   next={AppRoutes.Publish.getUrl(formId)}
-                  preview={AppRoutes.Preview.getUrl(formId)}
+                  previewPath={AppRoutes.Preview.getUrl(formId)}
+                  currentPath={AppRoutes.Configure.getUrl(formId)}
                 >
                   <div className={`${styles.progressPage} grid-container`}>
                     <div className="grid-row">
@@ -280,7 +283,8 @@ export default function FormManager(props: FormManagerProps) {
                   step={NavPage.publish}
                   back={AppRoutes.Configure.getUrl(formId)}
                   close={AppRoutes.MyForms.getUrl()}
-                  preview={AppRoutes.Preview.getUrl(formId)}
+                  previewPath={AppRoutes.Preview.getUrl(formId)}
+                  currentPath={AppRoutes.Publish.getUrl(formId)}
                 >
                   <div className={`${styles.progressPage} grid-container`}>
                     <div className="grid-row">
diff --git a/packages/design/src/FormManager/FormManagerLayout/FormManagerLayout.tsx b/packages/design/src/FormManager/FormManagerLayout/FormManagerLayout.tsx
@@ -14,7 +14,8 @@ type FormManagerLayoutProps = {
   back?: string;
   close?: string;
   next?: string;
-  preview?: string;
+  previewPath?: string;
+  currentPath?: string;
 };
 
 export const FormManagerLayout = ({
@@ -23,7 +24,8 @@ export const FormManagerLayout = ({
   back,
   close,
   next,
-  preview,
+  previewPath,
+  currentPath,
 }: FormManagerLayoutProps) => {
   const location = useLocation();
   const { addNotification } = useFormManagerStore();
@@ -37,7 +39,14 @@ export const FormManagerLayout = ({
   return (
     <>
       <Notifications />
-      {step && <TopNavigation curPage={step} preview={preview} />}
+      {step && (
+        <TopNavigation
+          curPage={step}
+          previewPath={previewPath}
+          currentPath={currentPath}
+          back={back}
+        />
+      )}
       <section className={`${styles.editPage} position-relative`}>
         <div className="grid-row flex-justify-center">
           <div className="grid-col-12">
diff --git a/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx b/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-
 import { MyForms } from '../routes.js';
 import { useFormManagerStore } from '../store.js';
 import styles from './formManagerStyles.module.css';
@@ -12,35 +11,76 @@ export enum NavPage {
   preview = 4,
 }
 
-const stepClass = (page: NavPage, curPage: NavPage) => {
-  if (page < curPage) {
-    return 'usa-step-indicator__segment--complete';
-  } else if (page === curPage) {
-    return 'usa-step-indicator__segment--current';
-  } else {
-    return '';
-  }
-};
+const stepClass = (page: NavPage, curPage: NavPage) =>
+  page < curPage
+    ? 'usa-step-indicator__segment--complete'
+    : page === curPage
+      ? 'usa-step-indicator__segment--current'
+      : '';
 
-const srHint = (page: NavPage, curPage: NavPage) => {
-  if (page < curPage) {
-    return <span className="usa-sr-only">completed</span>;
-  } else if (page === curPage) {
-    return;
-  } else {
-    return <span className="usa-sr-only">not completed</span>;
-  }
-};
+const srHint = (page: NavPage, curPage: NavPage) =>
+  page < curPage ? (
+    <span className="usa-sr-only">completed</span>
+  ) : page > curPage ? (
+    <span className="usa-sr-only">not completed</span>
+  ) : null;
 
 export const TopNavigation = ({
   curPage,
-  preview,
+  previewPath,
+  currentPath,
+  back,
 }: {
   curPage: NavPage;
-  preview?: string;
+  previewPath?: string;
+  currentPath?: string;
+  back?: string;
 }) => {
+  const isPreview = previewPath === currentPath;
   const uswdsRoot = useFormManagerStore(state => state.context.uswdsRoot);
   const lastSaved = useFormManagerStore(state => state.saveStatus.lastSaved);
+  const capitalize = (value: string) =>
+    value.charAt(0).toUpperCase() + value.slice(1);
+
+  const renderStepIndicator = (isPreview: boolean) => (
+    <ol className="usa-step-indicator__segments desktop:grid-col-6 tablet:grid-col-5">
+      {!isPreview ? (
+        [NavPage.edit, NavPage.settings, NavPage.publish].map(page => (
+          <li
+            key={page}
+            className={classNames(
+              'usa-step-indicator__segment font-body-xs',
+              stepClass(page, curPage)
+            )}
+            aria-current={page === curPage ? 'true' : undefined}
+          >
+            <span className="usa-step-indicator__segment-label">
+              {capitalize(NavPage[page])} {srHint(page, curPage)}
+            </span>
+          </li>
+        ))
+      ) : (
+        <li className="placeholder" aria-hidden="true"></li> // Placeholder for consistent layout
+      )}
+    </ol>
+  );
+
+  const renderSavedStatus = () => (
+    <span
+      className={`text-base font-ui-3xs padding-left-1 display-inline-block text-middle ${styles.savedStatus}`}
+    >
+      {lastSaved
+        ? `Saved ${lastSaved.toLocaleDateString('en-us', {
+            month: 'short',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+          })}`
+        : 'Blueprint loaded'}
+    </span>
+  );
+
   return (
     <div className="position-sticky top-0 z-100 bg-white border-bottom border-bottom-width-1px border-base-lighter padding-1">
       <div className="grid-container grid-row margin-bottom-105 display-block tablet:display-none">
@@ -50,76 +90,35 @@ export const TopNavigation = ({
           </div>
           <div className="grid-col-6 text-base text-right font-ui-3xs padding-left-4">
             <span className="padding-right-2">Saved</span>
-            {preview && <PreviewIconLink url={preview} uswdsRoot={uswdsRoot} />}
+            {previewPath && (
+              <PreviewIconLink url={previewPath} uswdsRoot={uswdsRoot} />
+            )}
           </div>
         </div>
         <MobileStepIndicator curPage={curPage} />
       </div>
       <div className="display-none tablet:display-block margin-top-1 margin-bottom-1">
         <div className="grid-container">
           <div
-            className="grid-row margin-bottom-0 classes usa-step-indicator "
+            className="grid-row margin-bottom-0 classes usa-step-indicator"
             aria-label="progress"
           >
             <div className="margin-top-1 grid-col-2">
-              <MyFormsLink uswdsRoot={uswdsRoot} />
+              {isPreview ? (
+                <EditFormsLink uswdsRoot={uswdsRoot} path={back} />
+              ) : (
+                <MyFormsLink uswdsRoot={uswdsRoot} path={MyForms.getUrl()} />
+              )}
             </div>
-            <ol className="usa-step-indicator__segments desktop:grid-col-6 tablet:grid-col-5">
-              <li
-                className={classNames(
-                  'usa-step-indicator__segment font-body-xs',
-                  stepClass(NavPage.edit, curPage)
-                )}
-              >
-                <span className="usa-step-indicator__segment-label">
-                  Edit {srHint(NavPage.edit, curPage)}
-                </span>
-              </li>
-              <li
-                className={classNames(
-                  'usa-step-indicator__segment font-body-xs',
-                  stepClass(NavPage.settings, curPage)
-                )}
-                aria-current="true"
-              >
-                <span className="usa-step-indicator__segment-label">
-                  Settings {srHint(NavPage.settings, curPage)}
-                </span>
-              </li>
-              <li
-                className={classNames(
-                  'usa-step-indicator__segment font-body-xs',
-                  stepClass(NavPage.publish, curPage)
-                )}
-              >
-                <span className="usa-step-indicator__segment-label">
-                  Publish {srHint(NavPage.publish, curPage)}
-                </span>
-              </li>
-            </ol>
+            {renderStepIndicator(isPreview)}
             <div className="desktop:grid-col-4 tablet:grid-col-5 text-right">
-              <span
-                className={`text-base font-ui-3xs padding-left-1 display-inline-block text-middle ${styles.savedStatus}`}
+              {renderSavedStatus()}
+              <a
+                href={isPreview ? back : previewPath}
+                className="usa-button usa-button--outline margin-left-1 display-inline-block text-middle"
               >
-                {lastSaved
-                  ? 'Saved ' +
-                    lastSaved.toLocaleDateString('en-us', {
-                      month: 'short',
-                      day: 'numeric',
-                      hour: 'numeric',
-                      minute: 'numeric',
-                      second: 'numeric',
-                    })
-                  : 'Blueprint loaded'}
-              </span>
-              {preview && (
-                <a
-                  href={preview}
-                  className="usa-button usa-button--outline margin-left-1 display-inline-block text-middle"
-                >
-                  Preview
-                </a>
-              )}
+                {isPreview ? 'Exit preview' : 'Preview'}
+              </a>
             </div>
           </div>
         </div>
@@ -128,8 +127,14 @@ export const TopNavigation = ({
   );
 };
 
-const MyFormsLink = ({ uswdsRoot }: { uswdsRoot: `${string}/` }) => (
-  <a href={MyForms.getUrl()} className="usa-link margin-right-1 display-block">
+const MyFormsLink = ({
+  uswdsRoot,
+  path,
+}: {
+  uswdsRoot: `${string}/`;
+  path?: string;
+}) => (
+  <a href={path} className="usa-link margin-right-1 display-block">
     <svg
       className="usa-icon usa-icon--size-3 text-middle margin-right-1"
       aria-hidden="true"
@@ -142,25 +147,43 @@ const MyFormsLink = ({ uswdsRoot }: { uswdsRoot: `${string}/` }) => (
   </a>
 );
 
+const EditFormsLink = ({
+  uswdsRoot,
+  path,
+}: {
+  uswdsRoot: `${string}/`;
+  path?: string;
+}) => (
+  <a href={path} className="usa-link margin-right-1 display-block">
+    <svg
+      className="usa-icon usa-icon--size-3 text-middle margin-right-1"
+      aria-hidden="true"
+      focusable="false"
+      role="img"
+    >
+      <use xlinkHref={`${uswdsRoot}img/sprite.svg#arrow_back`}></use>
+    </svg>
+    Edit form
+  </a>
+);
+
 const PreviewIconLink = ({
   url,
   uswdsRoot,
 }: {
   url: string;
   uswdsRoot: `${string}/`;
-}) => {
-  return (
-    <a
-      href={url}
-      className="usa-link tablet:margin-right-4"
-      aria-label="Preview this blueprint"
-    >
-      <svg className="usa-icon" aria-hidden="true" focusable="false" role="img">
-        <use xlinkHref={`${uswdsRoot}img/sprite.svg#visibility`}></use>
-      </svg>
-    </a>
-  );
-};
+}) => (
+  <a
+    href={url}
+    className="usa-link tablet:margin-right-4"
+    aria-label="Preview this blueprint"
+  >
+    <svg className="usa-icon" aria-hidden="true" focusable="false" role="img">
+      <use xlinkHref={`${uswdsRoot}img/sprite.svg#visibility`}></use>
+    </svg>
+  </a>
+);
 
 const MobileStepIndicator = ({ curPage }: { curPage: NavPage }) => (
   <div className="grid-row grid-gap flex-align-center">
@@ -170,7 +193,7 @@ const MobileStepIndicator = ({ curPage }: { curPage: NavPage }) => (
         <span className="usa-step-indicator__current-step">1</span>
         <span className="usa-step-indicator__total-steps margin-left-05">
           of 3
-        </span>{' '}
+        </span>
       </span>
     </div>
     <div className="grid-col grid-col-8">
@@ -187,3 +210,5 @@ const MobileStepIndicator = ({ curPage }: { curPage: NavPage }) => (
     </div>
   </div>
 );
+
+export default TopNavigation;
