Merge pull request Sage-Bionetworks#999 from jay-hodgson/SWC-6869

SWC-6869
jay-hodgson · Jun 14, 2024 · 918c1c9 · 918c1c9
2 parents caf0e4c + 932d706
commit 918c1c9
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 27 deletions.
diff --git 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} />
     </>
   ),

diff --git 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
@@ -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
@@ -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,15 +105,15 @@ const NavDrawerListItem = (props: MenuItemParams) => {
     tooltip,
     iconName,
     onClickOpenNavMenu,
-    onClickGoToUrl,
+    onClickGoToPlace,
     additionalChildren,
     badgeContent,
     isCurrentlySelectedItem = false,
     handleDrawerClose,
     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,44 +262,56 @@ 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}
                 />
                 <NavDrawerListItem
                   tooltip="Trash Can"
                   iconName="delete"
-                  onClickGoToUrl="/Trash:0"
+                  onClickGoToPlace={() => gotoPlace('/Trash:0')}
                   handleDrawerClose={handleDrawerClose}
                   handleDrawerOpen={handleDrawerOpen}
                 />
                 {currentUserBundle?.isARReviewer && (
                   <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