Merge pull request #389 from topcoder-platform/PROD-1516_work-filter

PROD-1516 work filter -> qa

Author: brooketopcoder

src-ts/header/Header.module.scss

@@ -1,4 +1,4 @@
-@import '../lib/styles';
+@import '../lib/styles/includes';
 
 .header-wrap {
     display: block;
@@ -19,10 +19,6 @@
         grid-template-columns: $header-height 1fr $header-height;
         align-items: center;
     }
-
-    @include ltesm {
-        height: $header-height;
-    }
 }
 
 .subheader {

src-ts/header/logo/Logo.module.scss

@@ -1,4 +1,4 @@
-@import '../../lib/styles';
+@import '../../lib/styles/includes';
 
 .logo-no-link,
 .logo-link {

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss

@@ -1,4 +1,4 @@
-@import '../../../lib/styles';
+@import '../../../lib/styles/includes';
 
 .tool-selectors-narrow {
     display: none;
@@ -22,6 +22,7 @@
         top: $header-height;
         left: 0;
         bottom: 0;
+        height: $content-height;
         width: calc(100% - calc(2 * $pad-xxl));
         z-index: 100;
         background-color: $black-100;

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles';
+@import '../../../../lib/styles/includes';
 
 .tool-selector-narrow {
 
@@ -13,7 +13,7 @@
         border-top: 1px solid $black-60;
         padding: $pad-lg 0;
         color: $tc-white;
-        @include font-weight-medium;
+        font-weight: $font-weight-medium;
         background-color: $black-100;
 
         svg {

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

@@ -1,33 +1,36 @@
 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'
 
 interface ToolSelectorNarrowProps {
     route: PlatformRoute
 }
 
+const isParamRoute: (route: string) => boolean = (route: string) => !!route.match(/^:[^/]+$/)
+
 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)
+    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/ToolSelectorsWide.module.scss

@@ -1,4 +1,4 @@
-@import '../../../lib/styles/';
+@import '../../../lib/styles/includes';
 
 .tool-selectors-wide {
     display: flex;

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles/';
+@import '../../../../lib/styles/includes';
 
 .tool-selector-wide {
     padding-right: 0;

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/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles';
+@import '../../../../lib/styles/includes';
 
 .profile-selector {
     display: flex;

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles';
+@import '../../../../../lib/styles/includes';
 
 $overlaySquare: $pad-xxxxl;