Merge branch 'qa' into PROD-1515_sorting

Author: brooketopcoder

.circleci/config.yml

@@ -75,7 +75,8 @@ workflows:
           filters:
             branches:
               only:
-                - develop
+                # - develop
+                - qa
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

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/portal/Portal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 
 interface PortalProps {
     children: ReactNode
+    className?: string,
     portalId?: string
     portalNode?: HTMLElement
     portalRef?: MutableRefObject<HTMLElement>,
@@ -13,6 +14,7 @@ const Portal: FC<PortalProps> = (
     portalId,
     portalNode,
     children,
+    className,
     portalRef,
 }: PortalProps) => {
 
@@ -26,9 +28,12 @@ const Portal: FC<PortalProps> = (
         }
 
         const backupHtmlNode: HTMLElement = document.createElement('div')
+        if (className) {
+            backupHtmlNode.classList.add(className)
+        }
         document.body.appendChild(backupHtmlNode)
         return backupHtmlNode
-    }, [portalNode]) as HTMLElement
+    }, [portalNode, className]) as HTMLElement
 
     useEffect(() => {
         return () => {
@@ -41,6 +46,7 @@ const Portal: FC<PortalProps> = (
     if (portalRef) {
         portalRef.current = portalNode ?? defaultPortalNode
     }
+
     return createPortal(children, portalNode ?? defaultPortalNode)
 }
 

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/lib/styles/variables/_palette.scss

@@ -118,7 +118,8 @@ $blue-100: #2C95D7;
 $blue-75: #50ADE8;
 $blue-50: #83C5EE;
 $blue-25: #BAE1F9;
-$blue-15: #EAF6FD;
+$blue-15: #D6EDFC;
+$blue-10: #EAF6FD;
 // dark
 $blue-120: #2984BD;
 $blue-140: #16679A;

src-ts/lib/svgs/index.ts

@@ -10,9 +10,9 @@ import { ReactComponent as SocialIconLinkedin } from './social-linkedin-icon.svg
 import { ReactComponent as SocialIconTwitter } from './social-tw-icon.svg'
 import { ReactComponent as SocialIconYoutube } from './social-yt-icon.svg'
 import { ReactComponent as TooltipArrowIcon } from './tooltip-arrow.svg'
-import { ReactComponent as WorkTypeDataExplorationIcon } from './work-type-data-exploration.svg'
-import { ReactComponent as WorkTypeUnknownIcon } from './work-type-unknown.svg'
-import { ReactComponent as WorkTypeWebsiteDesignIcon } from './work-type-website-design.svg'
+import { ReactComponent as WorkTypeCategoryDataIcon } from './work-type-category-data.svg'
+import { ReactComponent as WorkTypeCategoryDesignIcon } from './work-type-category-design.svg'
+import { ReactComponent as WorkTypeCategoryUnknownIcon } from './work-type-category-unknown.svg'
 
 export { ActiveTabTipIcon }
 export { IconOutline }
@@ -24,6 +24,6 @@ export { SocialIconLinkedin }
 export { SocialIconTwitter }
 export { SocialIconYoutube }
 export { TooltipArrowIcon }
-export { WorkTypeDataExplorationIcon }
-export { WorkTypeUnknownIcon }
-export { WorkTypeWebsiteDesignIcon }
+export { WorkTypeCategoryDataIcon }
+export { WorkTypeCategoryDesignIcon }
+export { WorkTypeCategoryUnknownIcon }

src-ts/lib/svgs/work-type-data-exploration.svg renamed to src-ts/lib/svgs/work-type-category-data.svg

@@ -3,8 +3,7 @@
 
 .tabs-wrapper {
     display: flex;
-    align-items: center;
-    background: $blue-15;
+    background: $blue-10;
     border-bottom: 1px solid $black-20;
     margin-bottom: $pad-md;
 
@@ -22,17 +21,20 @@
 
     &:global(.active) {
         color: $black-100;
+        background-color: $blue-25;
+
         .tab-label {
             @include font-weight-bold;
         }
     }
 
-    &:hover {
+    &:global(.active) ~ .active-icon > svg path:last-child {
+        fill: $blue-25;
+    }
+
+    &:hover:not(:global(.active)) {
         color: $black-100;
-        background-color: $blue-25;
-        &:global(.active) ~ .active-icon > svg path:last-child {
-            fill: $blue-25;
-        }
+        background-color: $blue-15;
     }
 }
 

src-ts/lib/svgs/work-type-website-design.svg renamed to src-ts/lib/svgs/work-type-category-design.svg

@@ -59,6 +59,7 @@ const TabsNavbar: FC<TabsNavbarProps> = (props: TabsNavbarProps) => {
         if (initialTab && props.tabs.find(tab => tab.id === initialTab)) {
             handleActivateTab(initialTab)
         } else if (props.defaultActive) {
+            setTabOpened(props.defaultActive)
             updateOffset(props.defaultActive)
         }
     }, [handleActivateTab, props.defaultActive])

src-ts/lib/svgs/work-type-unknown.svg renamed to src-ts/lib/svgs/work-type-category-unknown.svg

@@ -1,6 +1,14 @@
 @use '../styles/typography';
 @import '../styles/includes';
 
+.tooltip-portal {
+    position: absolute;
+    top: -100vh;
+    left: -100vw;
+    z-index: 1000;
+    pointer-events: none;
+}
+
 .tooltip {
     display: inline-block;
     position: relative;

src-ts/lib/tabs-navbar/TabsNavbar.module.scss

@@ -45,6 +45,7 @@ const Tooltip: FC<TooltipProps> = ({
 
     const portalRef: MutableRefObject<any> = useRef(undefined)
     const triggerRef: MutableRefObject<any> = useRef(undefined)
+    const tooltipRef: MutableRefObject<any> = useRef(undefined)
     const [tooltipOpen, setTooltipOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const { width: windowWidth, height: windowHeight }: WindowSize = useWindowSize()
 
@@ -58,20 +59,19 @@ const Tooltip: FC<TooltipProps> = ({
 
     useEffect(() => {
 
-        if (!tooltipOpen || !portalRef?.current) {
+        if (!tooltipOpen || !portalRef?.current || !tooltipRef?.current) {
             return
         }
 
         const triggerEl: HTMLElement = triggerRef.current
         const box: DOMRect = triggerEl.getBoundingClientRect()
+        const left: number = Math.max(box.left, windowWidth - (box.left + tooltipRef.current.getBoundingClientRect().width))
+
         Object.assign(portalRef.current.style, {
             height: `${box.width}px`,
-            left: `${box.left}px`,
-            pointerEvents: 'none',
-            position: 'absolute',
+            left: `${left}px`,
             top: `${box.top + window.scrollY}px`,
             width: `${box.width + window.scrollX}px`,
-            zIndex: 1000,
         })
     }, [
         tooltipOpen,
@@ -89,8 +89,8 @@ const Tooltip: FC<TooltipProps> = ({
                 {trigger}
             </div>
             {tooltipOpen && (
-                <Portal portalRef={portalRef}>
-                    <div className={classNames(styles['tooltip-open'], `posy-${positionY}`, `posx-${positionX}`, className)}>
+                <Portal portalRef={portalRef} className={styles['tooltip-portal']}>
+                    <div className={classNames(styles['tooltip-open'], `posy-${positionY}`, `posx-${positionX}`, className)} ref={tooltipRef}>
                         <div className={styles['tooltip-arrow']}>
                             <TooltipArrowIcon />
                         </div>

src-ts/lib/tabs-navbar/TabsNavbar.tsx

@@ -1,12 +1,13 @@
 export {
     type Work,
+    workFactoryCreate,
+    workFactoryGetStatus,
     type WorkProgress,
     type WorkProgressStep,
     type WorkSolution,
     WorkStatus,
     WorkType,
-    workFactoryCreate,
-    workFactoryGetStatus,
+    WorkTypeCategory,
 } from './work-factory'
 export {
     type Challenge,

src-ts/lib/tooltip/Tooltip.module.scss

@@ -2,6 +2,7 @@ export * from './work-progress.model'
 export * from './work-progress-step.model'
 export * from './work-status.enum'
 export * from './work-solution.model'
+export * from './work-type-category.enum'
 export * from './work-type.enum'
 export {
     create as workFactoryCreate,

src-ts/lib/tooltip/Tooltip.tsx

@@ -0,0 +1,7 @@
+export enum WorkTypeCategory {
+    data = 'Data',
+    design = 'Design',
+    dev = 'Development',
+    qa = 'QA',
+    unknown = '',
+}

src-ts/lib/work-provider/work-functions/index.ts

@@ -15,6 +15,7 @@ import { ChallengeStatus } from './challenge-status.enum'
 import { WorkProgressStep } from './work-progress-step.model'
 import { WorkProgress } from './work-progress.model'
 import { WorkStatus } from './work-status.enum'
+import { WorkTypeCategory } from './work-type-category.enum'
 import { WorkType } from './work-type.enum'
 import { Work } from './work.model'
 
@@ -38,6 +39,7 @@ export function create(challenge: Challenge): Work {
         submittedDate,
         title: challenge.name,
         type,
+        typeCategory: getTypeCategory(type),
     }
 }
 
@@ -231,3 +233,20 @@ function getType(challenge: Challenge): WorkType {
     const output: WorkType = !!workTypeKey ? WorkType[workTypeKey] : WorkType.unknown
     return output
 }
+
+function getTypeCategory(type: WorkType): WorkTypeCategory {
+
+    switch (type) {
+
+        case WorkType.data:
+        case WorkType.findData:
+            return WorkTypeCategory.data
+
+        case WorkType.design:
+            return WorkTypeCategory.design
+
+        // TOOD: other categories: qa and dev
+        default:
+            return WorkTypeCategory.unknown
+    }
+}