Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit f871f98

Browse files
testflyjetstestflyjets
authoredApr 15, 2022
Merge pull request #84 from topcoder-platform/PROD-1607
PROD-1607 Header PR Feedback - PROD-1551_header
2 parents fac6b63 + bde58a7 commit f871f98

File tree

6 files changed

+111
-70
lines changed

6 files changed

+111
-70
lines changed
 

‎src-ts/profile-selector/ProfileSelector.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { UserProfile } from './user-profile.model'
88
interface ProfileSelectorProps {
99
initialized: boolean
1010
profile: UserProfile
11+
workPath: string
1112
}
1213

1314
const ProfileSelector: FC<ProfileSelectorProps> = (props: ProfileSelectorProps) => {
@@ -23,7 +24,12 @@ const ProfileSelector: FC<ProfileSelectorProps> = (props: ProfileSelectorProps)
2324
return (
2425
<div className={styles['profile-selector']}>
2526
{!isLoggedIn && <ProfileNotLoggedIn />}
26-
{isLoggedIn && <ProfileLoggedIn profile={profile} />}
27+
{isLoggedIn && (
28+
<ProfileLoggedIn
29+
profile={profile}
30+
workPath={props.workPath}
31+
/>
32+
)}
2733
</div>
2834
)
2935
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import styles from './ProfileLoggedIn.module.scss'
88

99
interface ProfileLoggedInProps {
1010
profile: UserProfile
11+
workPath: string
1112
}
1213

1314
const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps) => {
@@ -61,6 +62,7 @@ const ProfileLoggedIn: FC<ProfileLoggedInProps> = (props: ProfileLoggedInProps)
6162
profile={profile}
6263
refObject={ref}
6364
toggleProfilePanel={toggleProfilePanel}
65+
workPath={props.workPath}
6466
/>
6567
)}
6668
</>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface ProfilePanelProps {
1010
profile: UserProfile
1111
refObject: MutableRefObject<any>
1212
toggleProfilePanel: () => void
13+
workPath: string
1314
}
1415

1516
const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
@@ -21,7 +22,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
2122
return <></>
2223
}
2324

24-
const authUrlLogout: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}`
25+
const authUrlLogout: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?logout=true&retUrl=${encodeURIComponent(`https://${window.location.host}${props.workPath}`)}`
2526

2627
return (
2728
<div
@@ -34,7 +35,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
3435
<Link
3536
className={styles.profile}
3637
onClick={() => props.toggleProfilePanel()}
37-
to='/self-service/account'
38+
to={`${props.workPath}/account`}
3839
>
3940
Account
4041
</Link>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import styles from './ProfileNotLoggedIn.module.scss'
77

88
const ProfileNotLoggedIn: FC<{}> = () => {
99

10-
const login: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}`
10+
const login: string = `${config.URL.ACCOUNTS_APP_CONNECTOR}?retUrl=${encodeURIComponent(window.location.href)}`
1111
const signup: string = `${login}&regSource=tcBusiness&mode=signUp`
1212

1313
return (

‎src/components/NavBar/index.jsx

Lines changed: 88 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,16 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
4747
const loginUrl = isSelfService ? getSelfServiceLoginUrl() : getLoginUrl();
4848
const signupUrl = isSelfService ? getSelfServiceSignupUrl() : "";
4949

50+
const workPath = '/self-service'
51+
5052
// Check app title with route activated
5153
useEffect(() => {
5254
const activeApp = apps.find(
5355
(f) => routerLocation.pathname.indexOf(f.path) !== -1
5456
);
5557
setActiveApp(activeApp);
5658

57-
setIsSelfService(routerLocation.pathname.indexOf("/self-service") !== -1);
59+
setIsSelfService(routerLocation.pathname.indexOf(workPath) !== -1);
5860
}, [routerLocation, apps]);
5961

6062
// Change micro-app callback
@@ -65,14 +67,90 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
6567
[setActiveApp]
6668
);
6769

68-
const renderTopcoderLogo =
69-
hideSwitchTools && !isSelfService ? (
70-
<img src={TCLogo} alt="Topcoder Logo" />
71-
) : (
72-
<Link to={isSelfService ? "/self-service" : "/"}>
70+
71+
// if this is work app, we only want to show the link as clickable
72+
// if we're not on the page to which the link goes
73+
const isSelfServiceHome = [workPath, `${workPath}/dashboard`].includes(routerLocation.pathname)
74+
75+
// if the consuming app has requested that we disable the navigation
76+
// or we're on the work app home page,
77+
// don't make the logo a link
78+
let renderTopcoderLogo
79+
80+
if (hideSwitchTools || isSelfServiceHome) {
81+
82+
const linkClass = isSelfServiceHome ? 'logo-no-link' : ''
83+
renderTopcoderLogo = (
84+
<img
85+
className={linkClass}
86+
src={TCLogo} alt="Topcoder Logo" />
87+
)
88+
89+
} else {
90+
91+
renderTopcoderLogo = (
92+
<Link to={isSelfService ? workPath : "/"}>
7393
<img src={TCLogo} alt="Topcoder Logo" />
7494
</Link>
75-
);
95+
)
96+
}
97+
98+
// if this is not the self service app or it's the self service home,
99+
// make the title not clickable
100+
const renderTitle = !isSelfService || isSelfServiceHome
101+
? activeApp?.title || ""
102+
: (
103+
<Link to={workPath}>
104+
Work
105+
</Link>
106+
)
107+
108+
const renderProfile = !isSelfService
109+
? (
110+
<>
111+
<NotificationsMenu />
112+
<UserMenu
113+
profileUrl={profileUrl}
114+
profile={auth.profile}
115+
hideSwitchTools={hideSwitchTools}
116+
/>
117+
</>
118+
)
119+
: (
120+
<ProfileSelector
121+
initialized={auth.isInitialized}
122+
profile={auth.profile}
123+
workPath={workPath}
124+
/>
125+
)
126+
127+
const renderLogin = (
128+
<a href={loginUrl} className="navbar-login">
129+
Log in
130+
</a>
131+
)
132+
133+
const renderSignup = (
134+
<Button
135+
href={signupUrl}
136+
className="navbar-signup"
137+
type={BUTTON_TYPE.SECONDARY}
138+
>
139+
SIGN UP
140+
</Button>
141+
)
142+
const renderNotLoggedIn = !isSelfService
143+
? renderLogin
144+
: (isMobile
145+
? renderSignup
146+
: (
147+
<>
148+
{renderLogin}
149+
{renderSignup}
150+
</>
151+
)
152+
)
153+
76154

77155
return (
78156
<div className="navbar">
@@ -86,10 +164,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
86164
{renderTopcoderLogo}
87165
<div className="navbar-divider"></div>
88166
<div className="navbar-app-title">
89-
{isSelfService && (
90-
<Link to='/self-service'>Work</Link>
91-
)}
92-
{!isSelfService && (activeApp?.title || "")}
167+
{renderTitle}
93168
</div>
94169
</Fragment>
95170
)}
@@ -106,22 +181,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
106181
{isMobile ? (
107182
<Fragment>
108183
{auth.isInitialized &&
109-
(auth.tokenV3 ? (
110-
auth.profile && (
111-
<Fragment>
112-
<NotificationsMenu />
113-
<UserMenu
114-
profileUrl={profileUrl}
115-
profile={auth.profile}
116-
hideSwitchTools={hideSwitchTools}
117-
/>
118-
</Fragment>
119-
)
120-
) : (
121-
<a href={loginUrl} className="navbar-login">
122-
Login
123-
</a>
124-
))}
184+
(auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))}
125185
</Fragment>
126186
) : (
127187
<Fragment>
@@ -132,43 +192,7 @@ const NavBar = ({ hideSwitchTools, profileUrl }) => {
132192
</Fragment>
133193
)}
134194
{auth.isInitialized &&
135-
(auth.tokenV3 ? (
136-
auth.profile && (
137-
<Fragment>
138-
{!isSelfService && (
139-
<>
140-
<NotificationsMenu />
141-
<UserMenu
142-
profileUrl={profileUrl}
143-
profile={auth.profile}
144-
hideSwitchTools={hideSwitchTools}
145-
/>
146-
</>
147-
)}
148-
{isSelfService && (
149-
<ProfileSelector
150-
initialized={auth.isInitialized}
151-
profile={auth.profile}
152-
/>
153-
)}
154-
</Fragment>
155-
)
156-
) : (
157-
<Fragment>
158-
<a href={loginUrl} className="navbar-login">
159-
Login
160-
</a>
161-
{isSelfService && (
162-
<Button
163-
href={signupUrl}
164-
className="navbar-signup"
165-
type={BUTTON_TYPE.SECONDARY}
166-
>
167-
SIGN UP
168-
</Button>
169-
)}
170-
</Fragment>
171-
))}
195+
(auth.tokenV3 ? (auth.profile && (renderProfile)) : (renderNotLoggedIn))}
172196
</Fragment>
173197
)}
174198
</div>

‎src/components/NavBar/styles.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,20 @@
99
position: relative;
1010
z-index: 1;
1111
font-family: "Roboto", Arial, Helvetica, sans-serif;
12-
}
13-
.navbar {
1412
padding: 0 24px;
1513
background-color: #0C0C0C;
1614
}
1715

16+
.navbar .logo-no-link {
17+
margin-top: -3px;
18+
}
19+
20+
@media (max-width: 1023px) {
21+
.navbar .logo-no-link {
22+
margin-top: 0;
23+
}
24+
}
25+
1826
.navbar-left {
1927
display: flex;
2028
flex-direction: row;

0 commit comments

Comments
 (0)
This repository has been archived.