PROD-3115 Integrate Universal Nav -> dev

package.json

@@ -70,6 +70,7 @@
         "swr": "^1.3.0",
         "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.26",
         "typescript": "^4.8.4",
+        "universal-navigation": "https://github.com/topcoder-platform/universal-navigation",
         "uuid": "^9.0.0"
     },
     "devDependencies": {

src-ts/.eslintrc.js

@@ -76,6 +76,7 @@ module.exports = {
             11
         ],
         'import/extensions': 'off',
+        'import/no-named-default':  'off',
         'import/prefer-default-export': 'off',
         'indent': [
             2,
@@ -105,6 +106,7 @@ module.exports = {
             120,
         ],
         'no-extra-boolean-cast': 'off',
+        'no-nested-ternary': 'off',
         'no-null/no-null': 'error',
         'no-param-reassign': [
             'error',

src-ts/App.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, ReactElement, SetStateAction, useContext, useEffect, useState } from 'react'
+import { FC, ReactElement, useContext } from 'react'
 import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
@@ -7,22 +7,11 @@ import { routeContext, RouteContextData } from './lib'
 
 const App: FC<{}> = () => {
 
-    const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const { allRoutes, getRouteElement }: RouteContextData = useContext(routeContext)
 
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => getRouteElement(route))
 
-    useEffect(() => {
-        setReady(true)
-    }, [])
-
-    useEffect(() => {
-        if (ready) {
-            document.getElementById('root')?.classList.add('app-ready')
-        }
-    }, [ready])
-
     return (
         <>
             <Header />

src-ts/config/constants.ts

@@ -1,5 +1,10 @@
 export enum ToolTitle {
-    learn = 'Learn',
+    dev = 'Dev Center',
+    game = 'Gamification Admin',
     settings = 'Account Settings',
-    work = 'Work',
+    support = 'Support',
+    tca = 'Topcoder Academy',
+    work = 'Self-Service Challenges',
 }
+
+export const PageSubheaderPortalId: string = 'page-subheader-portal-el'

src-ts/config/environments/environment.default.config.ts

@@ -14,6 +14,9 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },
+    AUTH: {
+        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com',
+    },
     ENV: 'default',
     LOGGING: {
         PUBLIC_TOKEN: 'puba0825671e469d16f940c5a30dc738f11',
@@ -41,7 +44,7 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
     },
-    URL: {
-        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com',
+    UNIVERSAL_NAV: {
+        URL: 'https://uni-nav.topcoder-dev.com/v1/tc-universal-nav.js',
     },
 }

src-ts/config/environments/environment.prod.config.ts

@@ -16,6 +16,9 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
         V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
+    AUTH: {
+        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com',
+    },
     DISABLED_TOOLS: [],
     ENV: 'prod',
     SPRIG: {
@@ -39,7 +42,7 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,
     },
-    URL: {
-        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com',
+    UNIVERSAL_NAV: {
+        URL: 'https://uni-nav.topcoder.com/v1/tc-universal-nav.js',
     },
 }

src-ts/header/Header.tsx

@@ -1,20 +1,136 @@
-import { FC } from 'react'
-
-import { Logo } from './logo'
-import { ToolSelectors } from './tool-selectors'
-import { UtilitySelectors } from './utility-selectors'
-import styles from './Header.module.scss'
-
-const Header: FC<{}> = () => (
-    <div className={styles['header-wrap']}>
-        <header className={styles.header}>
-            <ToolSelectors isWide={false} />
-            <Logo />
-            <ToolSelectors isWide />
-            <UtilitySelectors />
-        </header>
-        <div id='page-subheader-portal-el' className={styles.subheader} />
-    </div>
-)
+import {
+    Dispatch,
+    FC,
+    MutableRefObject,
+    SetStateAction,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from 'react'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { type TcUniNavFn } from 'universal-navigation'
+import classNames from 'classnames'
+
+import { EnvironmentConfig, PageSubheaderPortalId } from '../config'
+import {
+    authUrlLogin,
+    authUrlLogout,
+    authUrlSignup,
+    LoadingSpinner,
+    profileContext,
+    ProfileContextData,
+    routeContext,
+    RouteContextData,
+} from '../lib'
+
+import UniNavSnippet from './universal-nav-snippet'
+
+declare let tcUniNav: TcUniNavFn
+UniNavSnippet(EnvironmentConfig.UNIVERSAL_NAV.URL)
+
+interface NavigationRequest {
+    label: string
+    path: string
+}
+
+const Header: FC = () => {
+
+    const { activeToolName, activeToolRoute }: RouteContextData = useContext(routeContext)
+    const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
+    const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const headerInit: MutableRefObject<boolean> = useRef(false)
+    const navElementId: string = 'main-nav-el'
+    const navigate: NavigateFunction = useNavigate()
+
+    const navigationHandler: (request: NavigationRequest) => void
+        = useCallback((request: NavigationRequest) => {
+
+            try {
+                // strip the domain and navigate to the path
+                navigate(new URL(request.path).pathname)
+            } catch (error) {
+                // if we couldn't navigate to the path, just go to the route of the currently active tool
+                navigate(new URL(activeToolRoute || '/').pathname)
+            }
+
+        }, [
+            activeToolRoute,
+            navigate,
+        ])
+
+    useEffect(() => {
+
+        if (headerInit.current || !profileReady) {
+            return
+        }
+
+        headerInit.current = true
+
+        tcUniNav(
+            'init',
+            navElementId,
+            {
+                handleNavigation: navigationHandler,
+                onReady() {
+                    setReady(true)
+                    document.getElementById('root')?.classList.add('app-ready')
+                },
+                signIn() { window.location.href = authUrlLogin() },
+                signOut() { window.location.href = authUrlLogout },
+                signUp() { window.location.href = authUrlSignup() },
+                toolName: activeToolName,
+                toolRoot: activeToolRoute,
+                type: 'tool',
+                user: profile ? {
+                    email: profile.email,
+                    firstName: profile.firstName,
+                    handle: profile.handle,
+                    lastName: profile.lastName,
+                    photoUrl: profile.photoURL,
+                    userId: profile.userId,
+                } : undefined,
+            },
+        )
+    }, [
+        activeToolName,
+        activeToolRoute,
+        navigationHandler,
+        profile,
+        profileReady,
+    ])
+
+    useEffect(() => {
+
+        if (!profileReady) {
+            return
+        }
+
+        tcUniNav(
+            'update',
+            navElementId,
+            {
+                toolName: activeToolName,
+                toolRoot: activeToolRoute,
+            },
+        )
+    }, [
+        activeToolName,
+        activeToolRoute,
+        profileReady,
+    ])
+
+    return (
+        <>
+            <LoadingSpinner hide={ready} />
+            <div id={navElementId} />
+            <div
+                id={PageSubheaderPortalId}
+                className={classNames('full-width-relative')}
+            />
+        </>
+    )
+}
 
 export default Header

src-ts/header/README.md

@@ -0,0 +1,28 @@
+# Topcoder Universal Navigation
+
+The Platform UI project uses the Topcoder Universal navigation ([README](https://github.com/topcoder-platform/universal-navigation)).
+
+## Uni-nav Versions
+
+The Uni-nav is a hosted JS library. There are currently dev and prod versions of the library located at:
+
+https://uni-nav.topcoder.com/v1/tc-universal-nav.js
+
+https://uni-nav.topcoder-dev.com/v1/tc-universal-nav.js
+
+The URL is set at build time with the [Global Config](../lib/global-config.model.ts) `UNIVERSAL_NAV.URL` property.
+
+>See the [Local Environment Setup](../../README.md#local-environment-setup) section of the main README for instructions on how to set your environment configuration.
+
+>See the [Uni-Nav Version README](https://github.com/topcoder-platform/universal-navigation#versioning) for more information about versioning.
+
+## Uni-nav Initialization
+
+The Header uses the `tcUniNav` method to initialize the nav with:
+
+- active tool name
+- active tool root route
+- current user, if logged in
+- action handler callbacks (e.g. navigation, log in, log out, sign up)
+
+Because the Platform UI hosts multiple tools, each time the user navigates to a new tool, the Header updates the uni-nav w/the active tool info.