From 6c719a336f32eb2b8e99a13827fb19f139a3b940 Mon Sep 17 00:00:00 2001
From: Josh Slaughter <8338893+jdslaugh@users.noreply.github.com>
Date: Mon, 25 Mar 2024 15:49:18 -0700
Subject: [PATCH] frontend: Extending Wizard props and fixing issue with user
 info not breaking (#2960)

---
 frontend/packages/core/src/AppLayout/user.tsx |  2 +
 frontend/packages/wizard/src/wizard.tsx       | 51 ++++++++++++++-----
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx
index 854710e9b0..1ffa0646a4 100644
--- a/frontend/packages/core/src/AppLayout/user.tsx
+++ b/frontend/packages/core/src/AppLayout/user.tsx
@@ -90,6 +90,8 @@ const AvatarListItemIcon = styled(ListItemIcon)({
 const AvatarListItemText = styled(MuiListItemText)(({ theme }: { theme: Theme }) => ({
   paddingLeft: "16px",
   margin: "0px",
+  wordBreak: "break-all",
+  textWrap: "wrap",
   ".MuiTypography-root": {
     color: alpha(theme.palette.secondary[900], 0.9),
     fontSize: "14px",
diff --git a/frontend/packages/wizard/src/wizard.tsx b/frontend/packages/wizard/src/wizard.tsx
index bf08dbeb31..21d65887e0 100644
--- a/frontend/packages/wizard/src/wizard.tsx
+++ b/frontend/packages/wizard/src/wizard.tsx
@@ -31,13 +31,21 @@ import type { WizardStepProps } from "./step";
 interface WizardProps
   extends Pick<ContainerProps, "width" | "className">,
     Pick<MuiStepperProps, "orientation"> {
-  children: React.ReactElement<WizardStepProps> | React.ReactElement<WizardStepProps>[];
+  children:
+    | React.ReactNode
+    | React.ReactElement<WizardStepProps>
+    | React.ReactElement<WizardStepProps>[];
   dataLayout: ManagerLayout;
-  heading?: string;
+  heading?: string | React.ReactElement;
 }
 
 export interface WizardChild {
   name: string;
+  showNPS?: boolean;
+  confirm?: {
+    startOver: boolean;
+    startOverText?: string;
+  };
 }
 
 interface WizardChildren extends JSX.Element {
@@ -145,10 +153,12 @@ const Wizard = ({
       displayWarnings: (warnings: string[]) => {
         setGlobalWarnings(warnings);
       },
-      onBack: (params: { toOrigin: boolean }) => {
+      onBack: ({ toOrigin, keepSearch = false }: { toOrigin: boolean; keepSearch?: boolean }) => {
         setGlobalWarnings([]);
-        setSearchParams({});
-        if (params?.toOrigin && origin) {
+        if (!keepSearch) {
+          setSearchParams({});
+        }
+        if (toOrigin && origin) {
           navigate(origin);
         } else {
           dispatch(WizardAction.BACK);
@@ -166,6 +176,15 @@ const Wizard = ({
   const steps = filteredChildren.map((child: WizardChildren) => {
     const isLoading = wizardStepData[child.type.name]?.isLoading || false;
     const hasError = wizardStepData[child.type.name]?.hasError;
+    const {
+      props: {
+        showNPS = true,
+        confirm = {
+          startOver: true,
+          startOverText: "Start Over",
+        },
+      },
+    } = child;
 
     return (
       <>
@@ -180,15 +199,17 @@ const Wizard = ({
         <Grid container justifyContent="center">
           {((state.activeStep === lastStepIndex && !isLoading) || hasError) && (
             <>
-              <SimpleFeatureFlag feature="npsWizard">
-                <FeatureOn>
-                  <NPSWizard />
-                </FeatureOn>
-              </SimpleFeatureFlag>
-              {(isMultistep || hasError) && (
+              {showNPS && (
+                <SimpleFeatureFlag feature="npsWizard">
+                  <FeatureOn>
+                    <NPSWizard />
+                  </FeatureOn>
+                </SimpleFeatureFlag>
+              )}
+              {(isMultistep || hasError) && confirm.startOver && (
                 <ButtonGroup>
                   <Button
-                    text="Start Over"
+                    text={confirm.startOverText ?? "Start Over"}
                     onClick={() => {
                       dataLayoutManager.reset();
                       setSearchParams({});
@@ -216,7 +237,11 @@ const Wizard = ({
       <MaxHeightGrid container alignItems="stretch" spacing={2}>
         {heading && (
           <Header item $orientation={orientation}>
-            <Typography variant="h2">{heading}</Typography>
+            {React.isValidElement(heading) ? (
+              heading
+            ) : (
+              <Typography variant="h2">{heading}</Typography>
+            )}
           </Header>
         )}
         <MaxHeightGrid