PROD-1607 #comment make topnav links not clickable;

make the work login/out go to the correct urls #time 1h

Author: brooketopcoder

src-ts/profile-selector/ProfileSelector.tsx

@@ -8,6 +8,7 @@ import { UserProfile } from './user-profile.model'
 interface ProfileSelectorProps {
     initialized: boolean
     profile: UserProfile
+    workPath: string
 }
 
 const ProfileSelector: FC<ProfileSelectorProps> = (props: ProfileSelectorProps) => {
@@ -23,7 +24,12 @@ const ProfileSelector: FC<ProfileSelectorProps> = (props: ProfileSelectorProps)
     return (
         <div className={styles['profile-selector']}>
             {!isLoggedIn && <ProfileNotLoggedIn />}
-            {isLoggedIn && <ProfileLoggedIn profile={profile} />}
+            {isLoggedIn && (
+                <ProfileLoggedIn
+                    profile={profile}
+                    workPath={props.workPath}
+                />
+            )}
         </div>
     )
 }

src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx

@@ -8,6 +8,7 @@ import styles from './ProfileLoggedIn.module.scss'
 
 interface ProfileLoggedInProps {
     profile: UserProfile
+    workPath: string
 }
 
 const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps) => {
@@ -61,6 +62,7 @@ const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps)
                     profile={profile}
                     refObject={ref}
                     toggleProfilePanel={toggleProfilePanel}
+                    workPath={props.workPath}
                 />
             )}
         </>

src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -10,6 +10,7 @@ interface ProfilePanelProps {
     profile: UserProfile
     refObject: MutableRefObject<any>
     toggleProfilePanel: () => void
+    workPath: string
 }
 
 const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
@@ -21,7 +22,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
         return <></>
     }
 
-    const authUrlLogout: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}`
+    const authUrlLogout: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?logout=true&retUrl=${encodeURIComponent(`https://${window.location.host}${props.workPath}`)}`
 
     return (
         <div
@@ -34,7 +35,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to='/self-service/account'
+                to={`'${props.workPath}/account'`}
             >
                 Account
             </Link>

src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx

@@ -7,7 +7,7 @@ import styles from './ProfileNotLoggedIn.module.scss'
 
 const ProfileNotLoggedIn: FC<{}> = () => {
 
-    const login: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}`
+    const login: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?retUrl=${encodeURIComponent(window.location.href)}`
     const signup: string = `${login}&regSource=tcBusiness&mode=signUp`
 
     return (

src/components/NavBar/index.jsx

@@ -47,14 +47,16 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
   const loginUrl = isSelfService ? getSelfServiceLoginUrl() : getLoginUrl();
   const signupUrl = isSelfService ? getSelfServiceSignupUrl() : "";
 
+  const workPath = '/self-service'
+
   // Check app title with route activated
   useEffect(() => {
     const activeApp = apps.find(
       (f) => routerLocation.pathname.indexOf(f.path) !== -1
     );
     setActiveApp(activeApp);
 
-    setIsSelfService(routerLocation.pathname.indexOf("/self-service") !== -1);
+    setIsSelfService(routerLocation.pathname.indexOf(workPath) !== -1);
   }, [routerLocation, apps]);
 
   // Change micro-app callback
@@ -65,14 +67,43 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
     [setActiveApp]
   );
 
-  const renderTopcoderLogo =
-    hideSwitchTools && !isSelfService ? (
-      <img src={TCLogo} alt="Topcoder Logo" />
-    ) : (
-      <Link to={isSelfService ? "/self-service" : "/"}>
+
+  // if this is work app, we only want to show the link as clickable
+  // if we're not on the page to which the link goes
+  const isSelfServiceHome = [workPath, `${workPath}/dashboard`].includes(routerLocation.pathname)
+
+  // if the consuming app has requested that we disable the navigation
+  // or we're on the work app home page,
+  // don't make the logo a link
+  let renderTopcoderLogo
+
+  if (hideSwitchTools && isSelfServiceHome) {
+
+    const linkClass = isSelfServiceHome ? 'logo-no-link' : ''
+    renderTopcoderLogo = (
+      <img
+        className={linkClass}
+        src={TCLogo} alt="Topcoder Logo" />
+    )
+
+  } else {
+
+    renderTopcoderLogo = (
+      <Link to={isSelfService ? workPath : "/"}>
         <img src={TCLogo} alt="Topcoder Logo" />
       </Link>
-    );
+    )
+  }
+
+  // if this is not the self service app or it's the self service home,
+  // make the title not clickable
+  const renderTitle = !isSelfService || isSelfServiceHome
+    ? activeApp?.title || ""
+    : (
+      <Link to={workPath}>
+        Work
+      </Link>
+    )
 
   return (
     <div className="navbar">
@@ -86,10 +117,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
             {renderTopcoderLogo}
             <div className="navbar-divider"></div>
             <div className="navbar-app-title">
-              {isSelfService && (
-                <Link to='/self-service'>Work</Link>
-              )}
-              {!isSelfService && (activeApp?.title || "")}
+              {renderTitle}
             </div>
           </Fragment>
         )}
@@ -149,6 +177,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
                       <ProfileSelector
                         initialized={auth.isInitialized}
                         profile={auth.profile}
+                        workPath={workPath}
                       />
                     )}
                   </Fragment>

src/components/NavBar/styles.css

@@ -9,12 +9,14 @@
   position: relative;
   z-index: 1;
   font-family: "Roboto", Arial, Helvetica, sans-serif;
-}
-.navbar {
   padding: 0 24px;
   background-color: #0C0C0C;
 }
 
+.navbar .logo-no-link {
+  margin-top: -3px;
+}
+
 .navbar-left {
   display: flex;
   flex-direction: row;