Merge pull request #116 from topcoder-platform/PROD-2333_work-link

PROD 2333 work link not having underline -> Dev

Author: hentrymartin

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

@@ -22,7 +22,7 @@ const ToolSelectorNarrow: FC<ToolSelectorNarrowProps> = (props: ToolSelectorNarr
     const toolPath: string = getPathFromRoute(toolRoute)
 
     const baseClass: string = 'tool-selector-narrow'
-    const isActive: boolean = isActiveRoute(useLocation().pathname, toolPath)
+    const isActive: boolean = isActiveRoute(useLocation().pathname, toolRoute)
     const activeIndicaterClass: string = `${baseClass}-${isActive ? '' : 'in'}active`
     const hasChildren: boolean = !!toolRoute.children.some(child => !!child.route && !isParamRoute(child.route))
 

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

@@ -26,7 +26,7 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
     const toolRoute: PlatformRoute = props.route
     const toolPath: string = getPathFromRoute(toolRoute)
 
-    const isActive: boolean = isActiveRoute(activePath, toolPath)
+    const isActive: boolean = isActiveRoute(activePath, toolRoute)
 
     const activeIndicatorClass: string = `tool-selector-wide-${isActive ? '' : 'in'}active`
 

src-ts/lib/route-provider/platform-route.model.ts

@@ -1,6 +1,7 @@
 import { FC, SVGProps } from 'react'
 
 export interface PlatformRoute {
+    alternativePaths?: Array<string>
     children?: Array<PlatformRoute>
     disabled?: boolean
     element: JSX.Element

src-ts/lib/route-provider/route-context-data.model.ts

@@ -9,7 +9,7 @@ export interface RouteContextData {
     getPath: (routeTitle: string) => string
     getPathFromRoute: (route: PlatformRoute) => string
     getRouteElement: (route: PlatformRoute) => JSX.Element
-    isActiveRoute: (activePath: string, pathName: string, rootPath?: string) => boolean
+    isActiveRoute: (activePath: string, toolRoute: PlatformRoute) => boolean
     isRootRoute: (activePath: string) => boolean
     rootLoggedInRoute: string
     rootLoggedOutRoute: string

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

@@ -40,7 +40,7 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             getPath,
             getPathFromRoute,
             getRouteElement,
-            isActiveRoute: isActiveRoute(props.rootLoggedIn, props.rootLoggedOut),
+            isActiveRoute,
             isRootRoute: isRootRoute(props.rootLoggedIn, props.rootLoggedOut),
             rootLoggedInRoute: props.rootLoggedIn,
             rootLoggedOutRoute: props.rootLoggedOut,
@@ -111,26 +111,11 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
     )
 }
 
-function isActivePath(activePath: string, pathName: string, rootPath?: string): boolean {
-    return activePath?.startsWith(pathName)
-        && (pathName !== rootPath || activePath === rootPath)
-}
-
-function isActiveRoute(rootLoggedIn: string, rootLoggedOut: string):
-    (activePath: string, pathName: string, rootPath?: string) => boolean {
-
-    return (activePath: string, pathName: string, rootPath?: string) => {
-
-        let isActive: boolean = isActivePath(activePath, pathName, rootPath)
-
-        // if this is the root logged in route,
-        // also check the root logged out route
-        if (!isActive && pathName.startsWith(rootLoggedIn)) {
-            isActive = isActivePath(activePath, rootLoggedOut)
-        }
-
-        return isActive
-    }
+function isActiveRoute(activePath: string, toolRoute: PlatformRoute): boolean {
+    return !!(
+        activePath?.startsWith(toolRoute.route)
+        || toolRoute.alternativePaths?.some(path => activePath?.startsWith(path))
+    )
 }
 
 function isRootRoute(rootLoggedIn: string, rootLoggedOut: string):

src-ts/tools/work/work.routes.tsx

@@ -30,6 +30,7 @@ export const workRoutes: Array<PlatformRoute> = [
         title: 'Logged Out Landing',
     },
     {
+        alternativePaths: [selfServiceRootRoute],
         children: [
             {
                 element: <WorkTable />,