From 6e94bc9db3b16edcedf6fdb42f67cc401167ea11 Mon Sep 17 00:00:00 2001
From: Jay Hodgson <jay.hodgson@sagebase.org>
Date: Mon, 10 Jun 2024 18:18:59 -0700
Subject: [PATCH 1/3] SWC-6869

---
 .../SynapseNavDrawer.stories.ts               |  3 +
 .../SynapseNavDrawer.test.tsx                 |  1 +
 .../SynapseNavDrawer/SynapseNavDrawer.tsx     | 87 +++++++++++++------
 3 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.stories.ts b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.stories.ts
index ae858ab5ca..9fb154c287 100644
--- a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.stories.ts
+++ b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.stories.ts
@@ -11,5 +11,8 @@ type Story = StoryObj<typeof meta>
 export const Demo: Story = {
   args: {
     initIsOpen: false,
+    gotoPlace: (href: string) => {
+      window.alert(`Nav bar calling back to change route to ${href}`)
+    },
   },
 }
diff --git a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.test.tsx b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.test.tsx
index 6e83879009..c101624625 100644
--- a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.test.tsx
+++ b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.test.tsx
@@ -17,6 +17,7 @@ import { mockSubmittedSubmission } from '../../mocks/dataaccess/MockSubmission'
 const defaultProps: SynapseNavDrawerProps = {
   initIsOpen: false,
   signoutCallback: jest.fn(),
+  gotoPlace: jest.fn(),
 }
 
 function renderComponent(wrapperProps?: Partial<SynapseContextType>) {
diff --git a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx
index 000241bc53..af08baafc0 100644
--- a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx
+++ b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx
@@ -23,13 +23,14 @@ import { useOneSageURL } from '../../utils/hooks/useOneSageURL'
 export type SynapseNavDrawerProps = {
   initIsOpen?: boolean
   signoutCallback?: () => void
+  gotoPlace: (href: string) => void
 }
 
 type MenuItemParams = {
   tooltip: string
   iconName?: IconName
   onClickOpenNavMenu?: NavItem
-  onClickGoToUrl?: string
+  onClickGotoPlace?: () => void
   additionalChildren?: JSX.Element
   badgeContent?: string | number
   isCurrentlySelectedItem?: boolean
@@ -104,7 +105,7 @@ const NavDrawerListItem = (props: MenuItemParams) => {
     tooltip,
     iconName,
     onClickOpenNavMenu,
-    onClickGoToUrl,
+    onClickGotoPlace,
     additionalChildren,
     badgeContent,
     isCurrentlySelectedItem = false,
@@ -112,7 +113,7 @@ const NavDrawerListItem = (props: MenuItemParams) => {
     handleDrawerOpen,
   } = props
   const handler =
-    isCurrentlySelectedItem || onClickGoToUrl
+    isCurrentlySelectedItem || onClickGotoPlace
       ? handleDrawerClose
       : () => {
           handleDrawerOpen(onClickOpenNavMenu)
@@ -140,10 +141,10 @@ const NavDrawerListItem = (props: MenuItemParams) => {
     </Tooltip>
   )
 
-  return onClickGoToUrl ? (
+  return onClickGotoPlace ? (
     <li>
       <a
-        href={onClickGoToUrl}
+        onClick={() => onClickGotoPlace()}
         rel="noopener noreferrer"
         className="SRC-whiteText"
       >
@@ -160,7 +161,7 @@ const NavDrawerListItem = (props: MenuItemParams) => {
  */
 export const SynapseNavDrawer: React.FunctionComponent<
   SynapseNavDrawerProps
-> = ({ initIsOpen = false, signoutCallback }) => {
+> = ({ initIsOpen = false, signoutCallback, gotoPlace }) => {
   const [isOpen, setOpen] = useState(initIsOpen)
   const [selectedItem, setSelectedItem] = useState<NavItem>()
   const [projectSearchText, setProjectSearchText] = useState<string>('')
@@ -225,9 +226,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
 
   const onProjectSearch = (searchTerm: string) => {
     projectSearchJson.queryTerm = searchTerm.split(/[ ,]+/)
-    window.location.href = `/Search:${encodeURI(
-      JSON.stringify(projectSearchJson),
-    )}`
+    gotoPlace(`/Search:${encodeURI(JSON.stringify(projectSearchJson))}`)
   }
 
   const accountSettingsURL = useOneSageURL('/authenticated/myaccount')
@@ -243,7 +242,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
             <a
               className="synapseIcon"
               rel="noopener noreferrer"
-              href="/Home:0"
+              onClick={() => gotoPlace('/Home:0')}
               aria-label="Synapse Home"
             >
               <SynapseIconWhite />
@@ -263,28 +262,38 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <NavDrawerListItem
                   tooltip="Favorites"
                   iconName="favTwoTone"
-                  onClickGoToUrl={`/Profile:${currentUserProfile.ownerId}/favorites`}
+                  onClickGotoPlace={() =>
+                    gotoPlace(
+                      `/Profile:${currentUserProfile.ownerId}/favorites`,
+                    )
+                  }
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
                 />
                 <NavDrawerListItem
                   tooltip="Teams"
                   iconName="peopleTwoTone"
-                  onClickGoToUrl={`/Profile:${currentUserProfile.ownerId}/teams`}
+                  onClickGotoPlace={() =>
+                    gotoPlace(`/Profile:${currentUserProfile.ownerId}/teams`)
+                  }
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
                 />
                 <NavDrawerListItem
                   tooltip="Challenges"
                   iconName="challengesTwoTone"
-                  onClickGoToUrl={`/Profile:${currentUserProfile.ownerId}/challenges`}
+                  onClickGotoPlace={() =>
+                    gotoPlace(
+                      `/Profile:${currentUserProfile.ownerId}/challenges`,
+                    )
+                  }
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
                 />
                 <NavDrawerListItem
                   tooltip="Download Cart"
                   iconName="download"
-                  onClickGoToUrl="/DownloadCart:0"
+                  onClickGotoPlace={() => gotoPlace('/DownloadCart:0')}
                   badgeContent={numberOfFilesInDownloadList}
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
@@ -292,7 +301,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <NavDrawerListItem
                   tooltip="Trash Can"
                   iconName="delete"
-                  onClickGoToUrl="/Trash:0"
+                  onClickGotoPlace={() => gotoPlace('/Trash:0')}
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
                 />
@@ -300,7 +309,9 @@ export const SynapseNavDrawer: React.FunctionComponent<
                   <NavDrawerListItem
                     tooltip="Data Access Management"
                     iconName="accessManagement"
-                    onClickGoToUrl="/DataAccessManagement:default/Submissions"
+                    onClickGotoPlace={() =>
+                      gotoPlace('/DataAccessManagement:default/Submissions')
+                    }
                     badgeContent={countOfOpenSubmissionsForReview}
                     handleDrawerClose={handleDrawerClose}
                     handleDrawerOpen={handleDrawerOpen}
@@ -311,7 +322,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
             <NavDrawerListItem
               tooltip="Search"
               iconName="search"
-              onClickGoToUrl="/Search:"
+              onClickGotoPlace={() => gotoPlace('/Search:')}
               handleDrawerClose={handleDrawerClose}
               handleDrawerOpen={handleDrawerOpen}
             />
@@ -338,7 +349,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
               <NavDrawerListItem
                 tooltip="Sign in"
                 iconName="login"
-                onClickGoToUrl="/LoginPlace:0"
+                onClickGotoPlace={() => gotoPlace('/LoginPlace:0')}
                 handleDrawerClose={handleDrawerClose}
                 handleDrawerOpen={handleDrawerOpen}
               />
@@ -400,35 +411,55 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <div className="linkList" onClick={handleDrawerClose}>
                   <a
                     className="SRC-whiteText"
-                    href={`/Profile:${currentUserProfile?.ownerId}/projects/all`}
+                    onClick={() =>
+                      gotoPlace(
+                        `/Profile:${currentUserProfile?.ownerId}/projects/all`,
+                      )
+                    }
                     rel="noopener noreferrer"
                   >
                     All
                   </a>
                   <a
                     className="SRC-whiteText"
-                    href={`/Profile:${currentUserProfile?.ownerId}/projects/created_by_me`}
+                    onClick={() =>
+                      gotoPlace(
+                        `/Profile:${currentUserProfile?.ownerId}/projects/created_by_me`,
+                      )
+                    }
                     rel="noopener noreferrer"
                   >
                     Created By Me
                   </a>
                   <a
                     className="SRC-whiteText"
-                    href={`/Profile:${currentUserProfile?.ownerId}/projects/favorites`}
+                    onClick={() =>
+                      gotoPlace(
+                        `/Profile:${currentUserProfile?.ownerId}/projects/favorites`,
+                      )
+                    }
                     rel="noopener noreferrer"
                   >
                     Favorite Projects
                   </a>
                   <a
                     className="SRC-whiteText"
-                    href={`/Profile:${currentUserProfile?.ownerId}/projects/shared_directly_with_me`}
+                    onClick={() =>
+                      gotoPlace(
+                        `/Profile:${currentUserProfile?.ownerId}/projects/shared_directly_with_me`,
+                      )
+                    }
                     rel="noopener noreferrer"
                   >
                     Shared With Me
                   </a>
                   <a
                     className="SRC-whiteText"
-                    href={`/Profile:${currentUserProfile?.ownerId}/projects/all_my_team_projects`}
+                    onClick={() =>
+                      gotoPlace(
+                        `/Profile:${currentUserProfile?.ownerId}/projects/all_my_team_projects`,
+                      )
+                    }
                     rel="noopener noreferrer"
                   >
                     Team Projects
@@ -446,7 +477,11 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <div className="linkList" onClick={handleDrawerClose}>
                   <a
                     className="SRC-whiteText"
-                    href={`/Profile:${currentUserProfile?.ownerId}/profile`}
+                    onClick={() =>
+                      gotoPlace(
+                        `/Profile:${currentUserProfile?.ownerId}/profile`,
+                      )
+                    }
                     rel="noopener noreferrer"
                   >
                     View Profile
@@ -461,7 +496,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                   </a>
                   <a
                     className="SRC-whiteText"
-                    href={`/Following:0`}
+                    onClick={() => gotoPlace(`/Following:0`)}
                     rel="noopener noreferrer"
                   >
                     Following
@@ -524,7 +559,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                   </a>
                   <a
                     className="SRC-whiteText"
-                    href="/SynapseForum:default"
+                    onClick={() => gotoPlace('/SynapseForum:default')}
                     rel="noopener noreferrer"
                   >
                     Help Forum

From b3c0aedc42a24f6897860f62420520cbd14210f0 Mon Sep 17 00:00:00 2001
From: Jay Hodgson <jay.hodgson@sagebase.org>
Date: Tue, 11 Jun 2024 12:56:39 -0700
Subject: [PATCH 2/3] rename

---
 .../SynapseNavDrawer/SynapseNavDrawer.tsx     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx
index af08baafc0..dfcda77697 100644
--- a/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx
+++ b/packages/synapse-react-client/src/components/SynapseNavDrawer/SynapseNavDrawer.tsx
@@ -30,7 +30,7 @@ type MenuItemParams = {
   tooltip: string
   iconName?: IconName
   onClickOpenNavMenu?: NavItem
-  onClickGotoPlace?: () => void
+  onClickGoToPlace?: () => void
   additionalChildren?: JSX.Element
   badgeContent?: string | number
   isCurrentlySelectedItem?: boolean
@@ -105,7 +105,7 @@ const NavDrawerListItem = (props: MenuItemParams) => {
     tooltip,
     iconName,
     onClickOpenNavMenu,
-    onClickGotoPlace,
+    onClickGoToPlace,
     additionalChildren,
     badgeContent,
     isCurrentlySelectedItem = false,
@@ -113,7 +113,7 @@ const NavDrawerListItem = (props: MenuItemParams) => {
     handleDrawerOpen,
   } = props
   const handler =
-    isCurrentlySelectedItem || onClickGotoPlace
+    isCurrentlySelectedItem || onClickGoToPlace
       ? handleDrawerClose
       : () => {
           handleDrawerOpen(onClickOpenNavMenu)
@@ -141,10 +141,10 @@ const NavDrawerListItem = (props: MenuItemParams) => {
     </Tooltip>
   )
 
-  return onClickGotoPlace ? (
+  return onClickGoToPlace ? (
     <li>
       <a
-        onClick={() => onClickGotoPlace()}
+        onClick={onClickGoToPlace}
         rel="noopener noreferrer"
         className="SRC-whiteText"
       >
@@ -262,7 +262,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <NavDrawerListItem
                   tooltip="Favorites"
                   iconName="favTwoTone"
-                  onClickGotoPlace={() =>
+                  onClickGoToPlace={() =>
                     gotoPlace(
                       `/Profile:${currentUserProfile.ownerId}/favorites`,
                     )
@@ -273,7 +273,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <NavDrawerListItem
                   tooltip="Teams"
                   iconName="peopleTwoTone"
-                  onClickGotoPlace={() =>
+                  onClickGoToPlace={() =>
                     gotoPlace(`/Profile:${currentUserProfile.ownerId}/teams`)
                   }
                   handleDrawerClose={handleDrawerClose}
@@ -282,7 +282,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <NavDrawerListItem
                   tooltip="Challenges"
                   iconName="challengesTwoTone"
-                  onClickGotoPlace={() =>
+                  onClickGoToPlace={() =>
                     gotoPlace(
                       `/Profile:${currentUserProfile.ownerId}/challenges`,
                     )
@@ -293,7 +293,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <NavDrawerListItem
                   tooltip="Download Cart"
                   iconName="download"
-                  onClickGotoPlace={() => gotoPlace('/DownloadCart:0')}
+                  onClickGoToPlace={() => gotoPlace('/DownloadCart:0')}
                   badgeContent={numberOfFilesInDownloadList}
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
@@ -301,7 +301,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                 <NavDrawerListItem
                   tooltip="Trash Can"
                   iconName="delete"
-                  onClickGotoPlace={() => gotoPlace('/Trash:0')}
+                  onClickGoToPlace={() => gotoPlace('/Trash:0')}
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
                 />
@@ -309,7 +309,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
                   <NavDrawerListItem
                     tooltip="Data Access Management"
                     iconName="accessManagement"
-                    onClickGotoPlace={() =>
+                    onClickGoToPlace={() =>
                       gotoPlace('/DataAccessManagement:default/Submissions')
                     }
                     badgeContent={countOfOpenSubmissionsForReview}
@@ -322,7 +322,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
             <NavDrawerListItem
               tooltip="Search"
               iconName="search"
-              onClickGotoPlace={() => gotoPlace('/Search:')}
+              onClickGoToPlace={() => gotoPlace('/Search:')}
               handleDrawerClose={handleDrawerClose}
               handleDrawerOpen={handleDrawerOpen}
             />
@@ -349,7 +349,7 @@ export const SynapseNavDrawer: React.FunctionComponent<
               <NavDrawerListItem
                 tooltip="Sign in"
                 iconName="login"
-                onClickGotoPlace={() => gotoPlace('/LoginPlace:0')}
+                onClickGoToPlace={() => gotoPlace('/LoginPlace:0')}
                 handleDrawerClose={handleDrawerClose}
                 handleDrawerOpen={handleDrawerOpen}
               />

From 932d7069a0983ee8496cd84b4608fc1fd4b80a9c Mon Sep 17 00:00:00 2001
From: Jay Hodgson <jay.hodgson@sagebase.org>
Date: Tue, 11 Jun 2024 13:56:12 -0700
Subject: [PATCH 3/3] add handler in FullWidthAlert story

---
 .../components/FullWidthAlert/FullWidthAlert.stories.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.stories.tsx b/packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.stories.tsx
index 6c3dbcfa58..30dac7665c 100644
--- a/packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.stories.tsx
+++ b/packages/synapse-react-client/src/components/FullWidthAlert/FullWidthAlert.stories.tsx
@@ -70,7 +70,12 @@ export const SynapseNavDrawerIsShowing: Story = {
   },
   render: args => (
     <>
-      <SynapseNavDrawer initIsOpen={false} />
+      <SynapseNavDrawer
+        initIsOpen={false}
+        gotoPlace={(href: string) => {
+          window.alert(`Nav bar calling back to change route to ${href}`)
+        }}
+      />
       <FullWidthAlert {...args} />
     </>
   ),