From c4582db17221876e02f2f5d93a789e625400da12 Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Thu, 14 Apr 2022 13:46:22 -0700 Subject: [PATCH 1/4] PROD-1607 #comment make topnav links not clickable; make the work login/out go to the correct urls #time 1h --- src-ts/profile-selector/ProfileSelector.tsx | 8 ++- .../profile-logged-in/ProfileLoggedIn.tsx | 2 + .../profile-panel/ProfilePanel.tsx | 5 +- .../ProfileNotLoggedIn.tsx | 2 +- src/components/NavBar/index.jsx | 51 +++++++++++++++---- src/components/NavBar/styles.css | 6 ++- 6 files changed, 57 insertions(+), 17 deletions(-) diff --git a/src-ts/profile-selector/ProfileSelector.tsx b/src-ts/profile-selector/ProfileSelector.tsx index 8706669..1438e50 100644 --- a/src-ts/profile-selector/ProfileSelector.tsx +++ b/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 = (props: ProfileSelectorProps) => { @@ -23,7 +24,12 @@ const ProfileSelector: FC = (props: ProfileSelectorProps) return (
{!isLoggedIn && } - {isLoggedIn && } + {isLoggedIn && ( + + )}
) } diff --git a/src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx b/src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx index 0676419..65585d2 100644 --- a/src-ts/profile-selector/profile-logged-in/ProfileLoggedIn.tsx +++ b/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 = (props: ProfileLoggedInProps) => { @@ -61,6 +62,7 @@ const ProfileLoggedIn: FC = (props: ProfileLoggedInProps) profile={profile} refObject={ref} toggleProfilePanel={toggleProfilePanel} + workPath={props.workPath} /> )} diff --git a/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx b/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx index 8ae951e..b15e3a1 100644 --- a/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx +++ b/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx @@ -10,6 +10,7 @@ interface ProfilePanelProps { profile: UserProfile refObject: MutableRefObject toggleProfilePanel: () => void + workPath: string } const ProfilePanel: FC = (props: ProfilePanelProps) => { @@ -21,7 +22,7 @@ const ProfilePanel: FC = (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 (
= (props: ProfilePanelProps) => { props.toggleProfilePanel()} - to='/self-service/account' + to={`'${props.workPath}/account'`} > Account diff --git a/src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx b/src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx index f28e441..275d9fb 100644 --- a/src-ts/profile-selector/profile-not-logged-in/ProfileNotLoggedIn.tsx +++ b/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}®Source=tcBusiness&mode=signUp` return ( diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index cfc12dc..d48ffcc 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -47,6 +47,8 @@ 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( @@ -54,7 +56,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { ); 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 ? ( - Topcoder Logo - ) : ( - + + // 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 = ( + Topcoder Logo + ) + + } else { + + renderTopcoderLogo = ( + Topcoder Logo - ); + ) + } + + // 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 || "" + : ( + + Work + + ) return (
@@ -86,10 +117,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { {renderTopcoderLogo}
- {isSelfService && ( - Work - )} - {!isSelfService && (activeApp?.title || "")} + {renderTitle}
)} @@ -149,6 +177,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { )} diff --git a/src/components/NavBar/styles.css b/src/components/NavBar/styles.css index b1e4acb..68e000a 100644 --- a/src/components/NavBar/styles.css +++ b/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; From ede989033a47810780bd861590d88a051c15f83c Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Thu, 14 Apr 2022 14:16:34 -0700 Subject: [PATCH 2/4] PROD-1607 #comment fix responsive header #time 30m --- src/components/NavBar/index.jsx | 103 +++++++++++++++---------------- src/components/NavBar/styles.css | 6 ++ 2 files changed, 55 insertions(+), 54 deletions(-) diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index d48ffcc..f537cbb 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -105,6 +105,53 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { ) + const renderProfile = !isSelfService + ? ( + <> + + + + ) + : ( + + ) + + const renderLogin = ( + + Log in + + ) + + const renderSignup = ( + + ) + const renderNotLoggedIn = !isSelfService + ? renderLogin + : (isMobile + ? renderSignup + : ( + <> + {renderLogin} + {renderSignup} + + ) + ) + + return (
@@ -134,22 +181,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { {isMobile ? ( {auth.isInitialized && - (auth.tokenV3 ? ( - auth.profile && ( - - - - - ) - ) : ( - - Login - - ))} + (auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))} ) : ( @@ -160,44 +192,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { )} {auth.isInitialized && - (auth.tokenV3 ? ( - auth.profile && ( - - {!isSelfService && ( - <> - - - - )} - {isSelfService && ( - - )} - - ) - ) : ( - - - Login - - {isSelfService && ( - - )} - - ))} + (auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))} )}
diff --git a/src/components/NavBar/styles.css b/src/components/NavBar/styles.css index 68e000a..4d607be 100644 --- a/src/components/NavBar/styles.css +++ b/src/components/NavBar/styles.css @@ -17,6 +17,12 @@ margin-top: -3px; } +@media (max-width: 1023px) { + .navbar .logo-no-link { + margin-top: 0; + } +} + .navbar-left { display: flex; flex-direction: row; From aaa66824a3eaa3e5001b6521344a9de9cd1f3337 Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Thu, 14 Apr 2022 14:56:21 -0700 Subject: [PATCH 3/4] PROD-1607 #comment clean-up #time 5m --- .../profile-logged-in/profile-panel/ProfilePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx b/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx index b15e3a1..a95fe7a 100644 --- a/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx +++ b/src-ts/profile-selector/profile-logged-in/profile-panel/ProfilePanel.tsx @@ -35,7 +35,7 @@ const ProfilePanel: FC = (props: ProfilePanelProps) => { props.toggleProfilePanel()} - to={`'${props.workPath}/account'`} + to={`${props.workPath}/account`} > Account From bde58a72d50f2a9456f246a5335947df0a3a4312 Mon Sep 17 00:00:00 2001 From: brooketopcoder Date: Thu, 14 Apr 2022 17:21:08 -0700 Subject: [PATCH 4/4] PROD-1607 #comment clean-up #time 10m --- src/components/NavBar/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index f537cbb..a27847d 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -77,7 +77,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => { // don't make the logo a link let renderTopcoderLogo - if (hideSwitchTools && isSelfServiceHome) { + if (hideSwitchTools || isSelfServiceHome) { const linkClass = isSelfServiceHome ? 'logo-no-link' : '' renderTopcoderLogo = (