Initial universal nav implementation

Author: jmgasper

.circleci/config.yml

@@ -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

config/constants/dev.js

@@ -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',
@@ -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`
 }

config/constants/master.js

@@ -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',
@@ -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`
 }

config/constants/qa.js

@@ -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',
@@ -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`
 }

src/components/Layout/Layout.scss

@@ -2,8 +2,8 @@
 
 :global {
   .main-wrapper {
-    min-height: calc(100vh - 60px); // minus height
-    padding-top: 60px;
+    min-height: calc(100vh - 120px); // minus height
+    padding-top: 120px;
     overflow: hidden;
 
     @media screen and (max-width: $screen-md - 1px) {

src/components/TopBar/ProjectsToolBar.js

@@ -1,13 +1,12 @@
 require('./ProjectsToolBar.scss')
-
+/* global tcUniNav */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import querystring from 'query-string'
 import { withRouter, Prompt } from 'react-router-dom'
 import { connect } from 'react-redux'
 import _ from 'lodash'
 import SearchBar from 'appirio-tech-react-components/components/SearchBar/SearchBar'
-import NotificationsDropdown from '../NotificationsDropdown/NotificationsDropdownContainer'
 import NewProjectNavLink from './NewProjectNavLink'
 import MobileMenu from '../MobileMenu/MobileMenu'
 import MobileMenuToggle from '../MobileMenu/MobileMenuToggle'
@@ -16,21 +15,34 @@ import { loadProjectsMetadata } from '../../actions/templates'
 import { getNewProjectLink } from '../../helpers/projectHelper'
 import { hasPermission } from '../../helpers/permissions'
 import { PERMISSIONS } from '../../config/permissions'
+import { HEADER_AUTH_URLS_HREF, HEADER_AUTH_URLS_LOCATION, DOMAIN } from '../../config/constants'
+import { getInitials } from '../../helpers/format'
+
+const HEADER_AUTH_URLS = {
+  href: HEADER_AUTH_URLS_HREF,
+  location: HEADER_AUTH_URLS_LOCATION
+}
+const BASE = `https://www.${DOMAIN}`
+
+let uniqueId = 0
 
 class ProjectsToolBar extends Component {
 
   constructor(props) {
     super(props)
+    uniqueId += 1
     this.state = {
       errorCreatingProject: false,
       isMobileMenuOpen: false,
-      isMobileSearchVisible: false
+      isMobileSearchVisible: false,
+      headerId: uniqueId,
     }
     this.applyFilters = this.applyFilters.bind(this)
     this.handleTermChange = this.handleTermChange.bind(this)
     this.handleSearch = this.handleSearch.bind(this)
     this.toggleMobileMenu = this.toggleMobileMenu.bind(this)
     this.onLeave = this.onLeave.bind(this)
+    this.uniNavInitialized = false
   }
 
   componentWillMount() {
@@ -71,6 +83,43 @@ class ProjectsToolBar extends Component {
     window.addEventListener('beforeunload', this.onLeave)
   }
 
+  componentDidUpdate() {
+    if (!!this.state.headerId && !this.uniNavInitialized) {
+      const user = this.props.user
+      const navigationUserInfo = {
+        ...user,
+        initials: getInitials(user.firstName, user.lastName)
+      }
+      const authToken = user ? user.token : null
+      this.uniNavInitialized = true
+      const headerId = this.state.headerId
+      const isAuthenticated = !!authToken
+      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: isAuthenticated ? navigationUserInfo : null,
+        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}`
+        }
+      })
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('beforeunload', this.onLeave)
     const contentDiv = document.getElementById('wrapper-main')
@@ -146,8 +195,8 @@ class ProjectsToolBar extends Component {
   }
 
   render() {
-    const { renderLogoSection, userMenu, userRoles, user, mobileMenu, location, orgConfig } = this.props
-    const { isMobileMenuOpen, isMobileSearchVisible } = this.state
+    const { userRoles, user, mobileMenu, orgConfig } = this.props
+    const { isMobileMenuOpen, isMobileSearchVisible, headerId } = this.state
     const isLoggedIn = !!(userRoles && userRoles.length)
 
     const onLeaveMessage = this.onLeave() || ''
@@ -158,8 +207,8 @@ class ProjectsToolBar extends Component {
           when={!!onLeaveMessage}
           message={onLeaveMessage}
         />
+        <div id={`headerNav-${headerId}`} />
         <div className="primary-toolbar">
-          { renderLogoSection() }
           { isLoggedIn && !hasPermission(PERMISSIONS.SEARCH_PROJECTS) && <div className="projects-title-mobile">MY PROJECTS</div> }
           {
             isLoggedIn && hasPermission(PERMISSIONS.SEARCH_PROJECTS) &&
@@ -176,10 +225,6 @@ class ProjectsToolBar extends Component {
           }
           <div className="actions">
             {isLoggedIn && <NewProjectNavLink 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 */}
-            { isLoggedIn && <NotificationsDropdown location={location} /> }
             { isLoggedIn && <MobileMenuToggle onToggle={this.toggleMobileMenu}/> }
           </div>
         </div>

src/components/TopBar/ProjectsToolBar.scss

@@ -15,6 +15,8 @@
       height: 60px;
       justify-content: space-between;
       user-select: none;
+      padding: 0 20px;
+
       @media screen and (max-width: $screen-md - 1px) {
         height: auto;
         min-height: 50px;

src/components/TopBar/TopBarContainer.scss

@@ -96,14 +96,14 @@
 
     &.tc-header__connect {
       padding: 0;
-      min-height: 60px;
+      min-height: 120px;
       height: auto;
       @media screen and (max-width: $screen-md - 1px) {
         min-height: 50px;
       }
 
       .top-bar {
-        height: 60px;
+        height: 120px;
         background-color: $tc-black;
         position: relative;
         @media screen and (max-width: $screen-md - 1px) {

src/config/constants.js

@@ -1235,3 +1235,7 @@ export const DEFAULT_NDA_UUID = process.env.DEFAULT_NDA_UUID
  * The minimal duration of a TaaS Job in weeks
  */
 export const TAAS_MIN_JOB_DURATION = 4
+
+export const UNIVERSAL_NAV_URL = process.env.UNIVERSAL_NAV_URL || '//uni-nav.topcoder-dev.com/v1/tc-universal-nav.js'
+export const HEADER_AUTH_URLS_HREF = process.env.HEADER_AUTH_URLS_HREF || `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`
+export const HEADER_AUTH_URLS_LOCATION = process.env.HEADER_AUTH_URLS_LOCATION || `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`

src/helpers/format.js

@@ -11,3 +11,13 @@
 export function formatNumberWithCommas(value) {
   return (value || 0 ).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 }
+
+/**
+ * Get initials from user profile
+ * @param {String} firstName first name
+ * @param {String} lastName last name
+ * @returns {String}
+ */
+export function getInitials(firstName = '', lastName = '') {
+  return `${firstName.slice(0, 1)}${lastName.slice(0, 1)}`
+}