PROD-1607 Header PR Feedback - PROD-1551_header

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,90 @@ 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>
+    )
+
+  const renderProfile = !isSelfService
+    ? (
+      <>
+        <NotificationsMenu />
+        <UserMenu
+          profileUrl={profileUrl}
+          profile={auth.profile}
+          hideSwitchTools={hideSwitchTools}
+        />
+      </>
+    )
+    : (
+      <ProfileSelector
+        initialized={auth.isInitialized}
+        profile={auth.profile}
+        workPath={workPath}
+      />
+    )
+
+  const renderLogin = (
+    <a href={loginUrl} className="navbar-login">
+      Log in
+    </a>
+  )
+
+  const renderSignup = (
+    <Button
+      href={signupUrl}
+      className="navbar-signup"
+      type={BUTTON_TYPE.SECONDARY}
+    >
+      SIGN UP
+    </Button>
+  )
+  const renderNotLoggedIn = !isSelfService
+    ? renderLogin
+    : (isMobile
+      ? renderSignup
+      : (
+        <>
+          {renderLogin}
+          {renderSignup}
+        </>
+      )
+    )
+
 
   return (
     <div className="navbar">
@@ -86,10 +164,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>
         )}
@@ -106,22 +181,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
         {isMobile ? (
           <Fragment>
             {auth.isInitialized &&
-              (auth.tokenV3 ? (
-                auth.profile && (
-                  <Fragment>
-                    <NotificationsMenu />
-                    <UserMenu
-                      profileUrl={profileUrl}
-                      profile={auth.profile}
-                      hideSwitchTools={hideSwitchTools}
-                    />
-                  </Fragment>
-                )
-              ) : (
-                <a href={loginUrl} className="navbar-login">
-                  Login
-                </a>
-              ))}
+              (auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))}
           </Fragment>
         ) : (
           <Fragment>
@@ -132,43 +192,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
               </Fragment>
             )}
             {auth.isInitialized &&
-              (auth.tokenV3 ? (
-                auth.profile && (
-                  <Fragment>
-                    {!isSelfService && (
-                      <>
-                        <NotificationsMenu />
-                        <UserMenu
-                          profileUrl={profileUrl}
-                          profile={auth.profile}
-                          hideSwitchTools={hideSwitchTools}
-                        />
-                      </>
-                    )}
-                    {isSelfService && (
-                      <ProfileSelector
-                        initialized={auth.isInitialized}
-                        profile={auth.profile}
-                      />
-                    )}
-                  </Fragment>
-                )
-              ) : (
-                <Fragment>
-                  <a href={loginUrl} className="navbar-login">
-                    Login
-                  </a>
-                  {isSelfService && (
-                    <Button
-                      href={signupUrl}
-                      className="navbar-signup"
-                      type={BUTTON_TYPE.SECONDARY}
-                    >
-                      SIGN UP
-                    </Button>
-                  )}
-                </Fragment>
-              ))}
+              (auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))}
           </Fragment>
         )}
       </div>

src/components/NavBar/styles.css

@@ -9,12 +9,20 @@
   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;
+}
+
+@media (max-width: 1023px) {
+  .navbar .logo-no-link {
+    margin-top: 0;
+  }
+}
+
 .navbar-left {
   display: flex;
   flex-direction: row;