Merge pull request #368 from topcoder-platform/PROD-2014_nav-fixes

PROD-2014 fix tools nav so that it can support new tools -> PROD-1516_work-filter

Author: testflyjets

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
-import { IconOutline, PlatformRoute, routeIsActive } from '../../../../lib'
+import { IconOutline, PlatformRoute, routeContext, RouteContextData, routeIsActive } from '../../../../lib'
 
 import styles from './ToolSelectorNarrow.module.scss'
 
@@ -14,22 +14,23 @@ const isParamRoute: (route: string) => boolean = (route: string) => !!route.matc
 
 const ToolSelectorNarrow: FC<ToolSelectorNarrowProps> = (props: ToolSelectorNarrowProps) => {
 
-    const route: PlatformRoute = props.route
-    const path: string = props.route.route
+    const { getPathFromRoute }: RouteContextData = useContext(routeContext)
+    const toolRoute: PlatformRoute = props.route
+    const toolPath: string = getPathFromRoute(toolRoute)
 
     const baseClass: string = 'tool-selector-narrow'
-    const isActive: boolean = routeIsActive(useLocation().pathname, path)
+    const isActive: boolean = routeIsActive(useLocation().pathname, toolPath)
     const activeIndicaterClass: string = `${baseClass}-${isActive ? '' : 'in'}active`
-    const hasChildren: boolean = !!route.children.some(child => !!child.route && !isParamRoute(child.route))
+    const hasChildren: boolean = !!toolRoute.children.some(child => !!child.route && !isParamRoute(child.route))
 
     return (
         <div className={styles[baseClass]}>
             <Link
                 className={classNames(styles[`${baseClass}-link`], styles[activeIndicaterClass])}
-                key={path}
-                to={path}
+                key={toolPath}
+                to={toolPath}
             >
-                {route.title}
+                {toolRoute.title}
                 {hasChildren && <IconOutline.ChevronRightIcon />}
             </Link>
         </div>

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx

@@ -2,8 +2,13 @@ import classNames from 'classnames'
 import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
-import { ToolTitle } from '../../../../config'
-import { PlatformRoute, routeContext, RouteContextData, routeIsActive, routeIsHome } from '../../../../lib'
+import {
+    PlatformRoute,
+    routeContext,
+    RouteContextData,
+    routeIsActive,
+    routeIsHome,
+} from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
 import styles from './ToolSelectorWide.module.scss'
@@ -14,15 +19,17 @@ interface ToolSelectorWideProps {
 
 const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProps) => {
 
-    const { getPath, getPathFromRoute }: RouteContextData = useContext(routeContext)
-    const currentPath: string = useLocation().pathname
+    const { getPathFromRoute }: RouteContextData = useContext(routeContext)
+    const activePath: string = useLocation().pathname
+    const toolRoute: PlatformRoute = props.route
+    const toolPath: string = getPathFromRoute(toolRoute)
+
+    const isActive: boolean = routeIsActive(activePath, toolPath)
 
-    // for now, the work tool should be active for all pages except the account
-    const isActive: boolean = !routeIsActive(currentPath, getPath(ToolTitle.settings))
     const activeIndicatorClass: string = `tool-selector-wide-${isActive ? '' : 'in'}active`
 
     // the tool link should be usable for all active routes except the home page
-    const isLink: boolean = isActive && !routeIsHome(currentPath)
+    const isLink: boolean = isActive && !routeIsHome(activePath)
 
     return (
         <div className={classNames(
@@ -33,9 +40,9 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
             <Link
                 className='large-tab'
                 tabIndex={-1}
-                to={getPathFromRoute(props.route)}
+                to={toolPath}
             >
-                {props.route.title}
+                {toolRoute.title}
             </Link>
             <div className={styles['active-indicator']}></div>
         </div>

src-ts/lib/functions/authentication-functions/authentication-url.config.ts

@@ -1,12 +1,13 @@
 import { EnvironmentConfig } from '../../../config'
+import { routeSelfServiceRoot } from '../../route-provider'
 
 export const authentication: string = EnvironmentConfig.URL.ACCOUNTS_APP_CONNECTOR
 
 export function login(fallback: string): string {
     return `${authentication}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}`
 }
 
-export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}/self-service`
+export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}${routeSelfServiceRoot}`
 
 export function signup(fallback: string): string {
     return `${login(fallback)}&regSource=tcBusiness&mode=signUp`

src-ts/lib/route-provider/route.utils.ts

@@ -1,11 +1,29 @@
 export const routeRoot: string = '/work/dashboard'
+export const routeSelfServiceRoot: string = '/self-service'
+export const routeSelfServiceStart: string = `${routeSelfServiceRoot}/wizard`
 
 export function routeIsActive(activePath: string, pathName: string, rootPath?: string): boolean {
-    return activePath?.startsWith(pathName)
-        && (pathName !== rootPath || activePath === rootPath)
+    let isActive: boolean = isActivePath(activePath, pathName, rootPath)
+
+    // temporarilily, if the path we're testing against is the work tool
+    // also check if the current path is self-service
+    if (!isActive && pathName.startsWith(routeRoot)) {
+        isActive = isActivePath(activePath, routeSelfServiceRoot)
+    }
+
+    return isActive
 }
 
 export function routeIsHome(activePath: string): boolean {
     // TODO: make the alternate home route configurable
-    return [routeRoot, '/self-service'].some(route => activePath === route)
+    return [routeRoot, routeSelfServiceRoot].some(route => activePath === route)
+}
+
+export function routeWorkDetails(workId: string): string {
+    return `${routeSelfServiceRoot}/work-items/${workId}`
+}
+
+function isActivePath(activePath: string, pathName: string, rootPath?: string): boolean {
+    return activePath?.startsWith(pathName)
+        && (pathName !== rootPath || activePath === rootPath)
 }

src-ts/tools/work/Work.tsx

@@ -15,6 +15,8 @@ import {
     ProfileContextData,
     routeContext,
     RouteContextData,
+    routeSelfServiceRoot,
+    routeSelfServiceStart,
     WorkProvider,
 } from '../../lib'
 
@@ -36,15 +38,15 @@ const Work: FC<{}> = () => {
         }
 
         // if the profile is initialized, go to the self-service login
-        return <Navigate to='/self-service' />
+        return <Navigate to={routeSelfServiceRoot} />
     }
 
     function startWork(): void {
         clearCachedChallengeId()
         clearAutoSavedForm()
         dispatch(resetIntakeForm(true))
         // TODO: add the start work page to the route provider context
-        navigate('/self-service/wizard')
+        navigate(routeSelfServiceStart)
     }
 
     const buttonConfig: ButtonProps = {

src-ts/tools/work/work-table/WorkTable.tsx

@@ -5,6 +5,8 @@ import { cacheChallengeId } from '../../../../src/autoSaveBeforeLogin' // TODO:
 import {
     LoadingSpinner,
     routeRoot,
+    routeSelfServiceStart,
+    routeWorkDetails,
     Table,
     TableColumn,
     TabsNavbar,
@@ -68,7 +70,6 @@ const WorkTable: FC<{}> = () => {
         setColumns(filteredColumns)
     }, [
         initialized,
-        work,
         workStatusFilter,
     ])
 
@@ -93,8 +94,8 @@ const WorkTable: FC<{}> = () => {
 
         // TODO: get these routes from an object/function that's not hard-coded
         const url: string = isDraft
-            ? '/self-service/wizard'
-            : `/self-service/work-items/${selectedWork.id}`
+            ? routeSelfServiceStart
+            : routeWorkDetails(selectedWork.id)
 
         navigate(url)
     }
@@ -162,8 +163,7 @@ function initializeStatusGroups(
     setTabs: Dispatch<SetStateAction<ReadonlyArray<TabsNavItem>>>
 ): void {
 
-    // if we're not initialized or we already have status groups,
-    // nothing else to do
+    // if we're not initialized, nothing else to do
     if (!initialized) {
         return
     }