Skip to content

Commit

Permalink
Merge pull request #4594 from appirio-tech/dev
Browse files Browse the repository at this point in the history
Universal Nav implementation
  • Loading branch information
jpeg22 committed Feb 14, 2023
2 parents c12e0b8 + 448236a commit b438f57
Show file tree
Hide file tree
Showing 22 changed files with 220 additions and 132 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ workflows:
- build-dev
filters: &filters-dev
branches:
only: ['dev', 'feature/milestone-customer-approval', 'reskin']
only: ['dev', 'universal_nav', 'feature/milestone-customer-approval', 'reskin']

- deployTest01:
context : org-global
Expand Down
7 changes: 6 additions & 1 deletion config/constants/dev.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const DOMAIN = 'topcoder-dev.com'

module.exports = {
API_URL : 'https://api.topcoder-dev.com/v3',
API_URL_V2 : 'https://api.topcoder-dev.com/v2',
Expand Down Expand Up @@ -59,5 +61,8 @@ module.exports = {
CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,

TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas',
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900'
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900',
UNIVERSAL_NAV_URL: '//uni-nav.topcoder-dev.com/v1/tc-universal-nav.js',
HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`
}
7 changes: 6 additions & 1 deletion config/constants/master.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const DOMAIN = 'topcoder.com'

module.exports = {
API_URL : 'https://api.topcoder.com/v3',
API_URL_V2 : 'https://api.topcoder.com/v2',
Expand Down Expand Up @@ -59,5 +61,8 @@ module.exports = {
CONTENTFUL_SPACE_ID : process.env.CONTENTFUL_SPACE_ID,

TAAS_APP_URL: 'https://platform.topcoder.com/taas',
DEFAULT_NDA_UUID: 'c41e90e5-4d0e-4811-bd09-38ff72674490'
DEFAULT_NDA_UUID: 'c41e90e5-4d0e-4811-bd09-38ff72674490',
UNIVERSAL_NAV_URL: '//uni-nav.topcoder.com/v1/tc-universal-nav.js',
HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`
}
7 changes: 6 additions & 1 deletion config/constants/qa.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
const DOMAIN = 'topcoder-dev.com'

module.exports = {
API_URL : 'https://api.topcoder-qa.com/v3',
API_URL_V2 : 'https://api.topcoder-qa.com/v2',
Expand Down Expand Up @@ -54,5 +56,8 @@ module.exports = {
TC_CDN_URL: process.env.TC_CDN_URL,

TAAS_APP_URL: 'https://platform.topcoder-dev.com/taas',
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900'
DEFAULT_NDA_UUID: 'e5811a7b-43d1-407a-a064-69e5015b4900',
UNIVERSAL_NAV_URL: '//uni-nav.topcoder-dev.com/v1/tc-universal-nav.js',
HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`
}
77 changes: 32 additions & 45 deletions src/components/Footer/Footer.jsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,35 @@
import React from 'react'
//import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
import moment from 'moment'
import MediaQuery from 'react-responsive'
//import FooterV2 from '../FooterV2/FooterV2'
import { NEW_PROJECT_PATH, SCREEN_BREAKPOINT_MD } from '../../config/constants'

require('./Footer.scss')

const Footer = () => {
const currentYear = moment().format('YYYY')
/*const otherNavigationItems = [
{img: '', text: 'Aboutss', link: 'https://www.topcoder.com/company/', target: '_blank'},
{img: '', text: 'Contact us', link: 'https://www.topcoder.com/contact-us/', target: '_blank'},
{img: '', text: 'Privacy', link: 'https://www.topcoder.com/privacy-policy/', target: '_blank'},
{img: '', text: 'Terms', link: 'https://connect.topcoder.com/terms', target: '_blank'},
{img: '', text: 'Our Process', link: 'https://www.topcoder.com/solutions/how-it-works/', target: '_blank'}
]*/
const isProjectDetails = /projects\/\d+/.test(window.location.pathname)
const isCreateProject = window.location.pathname.startsWith(NEW_PROJECT_PATH)
const isNotificationsPage = window.location.pathname.startsWith('/notifications')
const isSettingsPage = window.location.pathname.startsWith('/settings/')

// TODO this looks like a bad way of doing it, I think it should be re-factored
const shouldHideOnDesktop = isProjectDetails || isCreateProject || isNotificationsPage || isSettingsPage

return (
<MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
{(matches) => {
if (matches) {
return (shouldHideOnDesktop ? null :
<div className="Footer">
<p className="copyright-notice">© Topcoder { currentYear }</p>
{/*<div className="footer-menu">
<MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={SCREEN_BREAKPOINT_MD - 1} />
</div>*/}
</div>
)
} else {
{/* never show footer on mobile */}
return null
}
}}
</MediaQuery>
)
/* global tcUniNav */
import React, { Component } from 'react'

import './styles.scss'

let uniqueId = 0

class Footer extends Component {
constructor(props) {
super(props)
uniqueId += 1
this.footerIdRef = uniqueId
this.uniNavInitialized = false
}

componentDidMount() {
if (!!this.footerIdRef && !this.uniNavInitialized) {
this.uniNavInitialized = true
tcUniNav('init', `footerNav-${this.footerIdRef}`, {
fullFooter: false,
type: 'footer',
})
}
}

render() {
return <div styleName="footer-conatiner" id={`footerNav-${this.footerIdRef}`} />
}
}

Footer.propTypes = {}

Footer.defaultProps = {}

export default Footer
34 changes: 0 additions & 34 deletions src/components/Footer/Footer.scss

This file was deleted.

10 changes: 10 additions & 0 deletions src/components/Footer/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@import '~tc-ui/src/styles/tc-includes';

.footer-conatiner {
display: flex;
width: 100%;

footer {
width: 100%;
}
}
1 change: 1 addition & 0 deletions src/components/Grid/GridView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@

.gridview-load-more {
text-align: center;
margin-bottom: 20px;

@media screen and (max-width: $screen-md - 1px) {
padding: 2 * $base-unit 0;
Expand Down
4 changes: 1 addition & 3 deletions src/components/Layout/Layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@

:global {
.main-wrapper {
min-height: calc(100vh - 60px); // minus height
padding-top: 60px;
overflow: hidden;
min-height: calc(100vh - 120px); // minus height

@media screen and (max-width: $screen-md - 1px) {
padding-top: 0;
Expand Down
70 changes: 70 additions & 0 deletions src/components/TopBar/NavBar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/* global tcUniNav */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
HEADER_AUTH_URLS_HREF,
HEADER_AUTH_URLS_LOCATION,
DOMAIN,
} from '../../config/constants'

const HEADER_AUTH_URLS = {
href: HEADER_AUTH_URLS_HREF,
location: HEADER_AUTH_URLS_LOCATION,
}
const BASE = `https://www.${DOMAIN}`

let uniqueId = 0

class NavBar extends Component {
constructor(props) {
super(props)
uniqueId += 1
this.headerIdRef = uniqueId
this.uniNavInitialized = false
}

componentDidMount() {
if (!!this.headerIdRef && !this.uniNavInitialized) {
this.uniNavInitialized = true
const headerId = this.headerIdRef
const authURLs = HEADER_AUTH_URLS

const regSource = window.location.pathname.split('/')[1]
const retUrl = encodeURIComponent(window.location.href)
tcUniNav('init', `headerNav-${headerId}`, {
type: 'tool',
toolName: 'Connect',
toolRoot: '/',
user: 'auto',
signOut: () => {
window.location = `${BASE}/logout?ref=nav`
},
signIn: () => {
window.location = `${authURLs.location
.replace('%S', retUrl)
.replace('member?', '#!/member?')}&regSource=${regSource}`
},
signUp: () => {
window.location = `${authURLs.location
.replace('%S', retUrl)
.replace(
'member?',
'#!/member?'
)}&mode=signUp&regSource=${regSource}`
},
})
}
}

render() {
return <div id={`headerNav-${this.headerIdRef}`} />
}
}

NavBar.propTypes = {
user : PropTypes.object,
}

NavBar.defaultProps = {}

export default NavBar
11 changes: 2 additions & 9 deletions src/components/TopBar/ProjectToolBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import ReactDOM from 'react-dom'
import { getNewProjectLink } from '../../helpers/projectHelper'
import NotificationsDropdown from '../NotificationsDropdown/NotificationsDropdownContainer'
import NewProjectNavLink from './NewProjectNavLink'
import MobileMenu from '../MobileMenu/MobileMenu'
import MobileMenuToggle from '../MobileMenu/MobileMenuToggle'
Expand Down Expand Up @@ -53,26 +52,20 @@ class ProjectToolBar extends React.Component {
}

render() {
const { renderLogoSection, userMenu, project, user, mobileMenu, location, orgConfig } = this.props
const { project, user, mobileMenu, orgConfig } = this.props
const { isTooltipVisible, isMobileMenuOpen } = this.state

return (
<div className="ProjectToolBar">
<div className="tool-bar">
<div className="bar-column">
{renderLogoSection()}
</div>
<div className="bar-column" />
{project && project.name && <div className="bar-column project-name">
<span ref="name" onMouseEnter={this.onNameEnter} onMouseLeave={this.onNameLeave}>{_.unescape(project.name)}</span>
{isTooltipVisible && <div className="breadcrumb-tooltip">{_.unescape(project.name)}</div>}
</div>}
{project && project.name && <div className="bar-column project-name mobile"><span>{_.unescape(project.name)}</span></div>}
<div className="bar-column">
<NewProjectNavLink compact link={getNewProjectLink(orgConfig)} />
{userMenu}
{/* pass location, to make sure that component is re-rendered when location is changed
it's necessary to hide notification dropdown on mobile when users uses browser history back/forward buttons */}
<NotificationsDropdown location={location} />
<MobileMenuToggle onToggle={this.toggleMobileMenu}/>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions src/components/TopBar/ProjectToolBar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
justify-content: space-between;
width: 100%;
height: 60px;
background-color: $tc-black;
background: $tc-gray-05;
padding: 0 20px;

@media screen and (max-width: $screen-md - 1px) {
height: 50px;
Expand Down Expand Up @@ -54,7 +55,7 @@

span {
@include tc-heading-small;
color: $tc-gray-10;
color: $tc-black;
display: block;
text-overflow: ellipsis;
overflow: hidden;
Expand Down
Loading

0 comments on commit b438f57

Please sign in to comment.