Merge branch 'dev' into PROD-2321_bug-hunt-intake-form

Author: Maria Mattlin

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

@@ -7,7 +7,7 @@ export const EnvironmentConfigDev: GlobalConfig = {
     ...EnvironmentConfigDefault,
     DISABLED_TOOLS: [],
     ENV: AppHostEnvironment.dev,
-    LEARN_SRC: 'https://freecodecamp.topcoder-dev.com/',
+    LEARN_SRC: 'https://freecodecamp.topcoder-dev.com',
     // TODO: Move stripe creds to .env file
     STRIPE: {
         ADMIN_TOKEN:

src-ts/header/logo/Logo.tsx

@@ -3,8 +3,6 @@ import { Link, useLocation } from 'react-router-dom'
 
 import {
     LogoIcon,
-    profileContext,
-    ProfileContextData,
     routeContext,
     RouteContextData,
 } from '../../lib'
@@ -14,16 +12,11 @@ import styles from './Logo.module.scss'
 
 const Logo: FC<{}> = () => {
 
-    const { isLoggedIn }: ProfileContextData = useContext<ProfileContextData>(profileContext)
-    const {
-        isRootRoute,
-        rootLoggedInRoute,
-        rootLoggedOutRoute,
-    }: RouteContextData = useContext(routeContext)
+    const routeContextData: RouteContextData = useContext(routeContext)
 
     // the logo should be a link to the home page for all pages except the home page
-    const isLink: boolean = !isRootRoute(useLocation().pathname)
-    const rootRoute: string = isLoggedIn ? rootLoggedInRoute : rootLoggedOutRoute
+    const isLink: boolean = !routeContextData.isRootRoute(useLocation().pathname)
+    const rootRoute: string = routeContextData.rootLoggedInRoute || ''
 
     return (
         <div className={styles[`logo-${!isLink ? 'no-' : ''}link`]}>

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -21,10 +21,7 @@ interface ProfilePanelProps {
 const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
 
     const { profile }: ProfileContextData = useContext(profileContext)
-    const {
-        getPath,
-        rootLoggedOutRoute,
-    }: RouteContextData = useContext(routeContext)
+    const { getPath }: RouteContextData = useContext(routeContext)
 
     const navigate: NavigateFunction = useNavigate()
 
@@ -61,7 +58,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
                     </span>
                 </div>
                 <a
-                    href={authUrlLogout(rootLoggedOutRoute)}
+                    href={authUrlLogout}
                     className={classNames(styles.logout, styles['nav-item'])}
                 >
                     <span className={styles.icon}>

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx

@@ -23,7 +23,7 @@ const ProfileNotLoggedIn: FC<{}> = () => {
                 label='Sign Up'
                 size='md'
                 tabIndex={-1}
-                url={authUrlSignup()}
+                url={authUrlSignup}
             />
         </>
     )

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -12,23 +12,16 @@
     margin: 0 auto;
     @include pagePaddings;
 
+    @include ltemd {
+        padding-top: $pad-xs;
+        padding-bottom: $pad-xs;
+    }
+
     ol {
         display: flex;
         padding-left: 0px;
         margin: 0;
 
-        &.hidden-mobile {
-            @include ltemd {
-                display: none;
-            }
-        }
-
-        &.show-mobile {
-            @include gtemd {
-                display: none;
-            }
-        }
-
         >li {
             display: inline-flex;
             align-items: center;

src-ts/lib/breadcrumb/Breadcrumb.tsx

@@ -18,7 +18,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
     return createPortal((
         <div className={styles['breadcrumb-wrap']}>
             <nav className={styles.breadcrumb}>
-                <ol className={styles['show-mobile']}>
+                <ol className='desktop-hide'>
                     <>
                         {
                             props.items.length <= 2 && props.items.map((item, index) =>
@@ -55,7 +55,7 @@ const Breadcrumb: FC<BreadcrumbProps> = (props: BreadcrumbProps) => {
                         }
                     </>
                 </ol>
-                <ol className={styles['hidden-mobile']}>
+                <ol className='mobile-hide'>
                     {props.items.map((item, index) =>
                         <BreadcrumbItem
                             index={index + 1}

src-ts/lib/contact-support-form/contact-support-form.config.ts

@@ -82,3 +82,5 @@ export const contactSupportFormDef: FormDefinition = {
     ],
     successMessage: 'Your request has been submitted.',
 }
+
+export const contactSupportPath: string = '/support'

src-ts/lib/contact-support-form/index.ts

@@ -1,2 +1,2 @@
 export { default as ContactSupportForm } from './ContactSupportForm'
-export { contactSupportFormDef } from './contact-support-form.config'
+export { contactSupportFormDef, contactSupportPath } from './contact-support-form.config'

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

@@ -4,10 +4,6 @@ export const authentication: string = EnvironmentConfig.URL.ACCOUNTS_APP_CONNECT
 
 export const login: string = `${authentication}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || window.location.host)}`
 
-export function logout(loggedOutRoute: string): string {
-    return `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}${loggedOutRoute}`
-}
+export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}`
 
-export function signup(): string {
-    return `${login}&regSource=tcBusiness&mode=signUp`
-}
+export const signup: string = `${login}&regSource=tcBusiness&mode=signUp`

src-ts/lib/loading-spinner/LoadingSpinner.tsx

@@ -16,7 +16,7 @@ export interface LoadingSpinnerProps {
 
 const LoadingSpinner: FC<LoadingSpinnerProps> = ({ show = false, className }: LoadingSpinnerProps) => {
     return (
-        <div className={classNames(styles['loading-spinner'], show ? 'show' : 'hide', className)}>
+        <div className={classNames(styles['loading-spinner'], styles[show ? 'show' : 'hide'], className)}>
             <PuffLoader color={'#2196f3'} loading={true} size={100} />
         </div>
     )

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react'
+import { FC, ReactElement } from 'react'
 
 import { PlatformRoute } from './platform-route.model'
 
@@ -9,10 +9,11 @@ export interface RouteContextData {
     getPath: (routeTitle: string) => string
     getPathFromRoute: (route: PlatformRoute) => string
     getRouteElement: (route: PlatformRoute) => JSX.Element
+    initialized: boolean
     isActiveTool: (activePath: string, toolRoute: PlatformRoute) => boolean
     isRootRoute: (activePath: string) => boolean
     rootLoggedInRoute: string
-    rootLoggedOutRoute: string
+    rootLoggedOutFC: FC<{}>
     toolsRoutes: Array<PlatformRoute>
     toolsRoutesForNav: Array<PlatformRoute>
     utilsRoutes: Array<PlatformRoute>

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

@@ -9,10 +9,11 @@ export const defaultRouteContextData: RouteContextData = {
     getPath: () => '',
     getPathFromRoute: () => '',
     getRouteElement: () => <></>,
+    initialized: false,
     isActiveTool: () => false,
     isRootRoute: () => false,
     rootLoggedInRoute: '',
-    rootLoggedOutRoute: '',
+    rootLoggedOutFC: () => <></>,
     toolsRoutes: [],
     toolsRoutesForNav: [],
     utilsRoutes: [],

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

@@ -22,14 +22,15 @@ interface RouteProviderProps {
     children: ReactNode
     rootCustomer: string
     rootLoggedOut: string
+    rootLoggedOutFC: FC<{}>
     rootMember: string
     toolsRoutes: Array<PlatformRoute>
     utilsRoutes: Array<PlatformRoute>
 }
 
 export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps) => {
 
-    const { profile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
+    const { initialized, profile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
 
     const [routeContextData, setRouteContextData]: [RouteContextData, Dispatch<SetStateAction<RouteContextData>>]
         = useState<RouteContextData>(defaultRouteContextData)
@@ -68,18 +69,23 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             ...utilsRoutes,
         ]
         // TODO: support additional roles and landing pages
-        const loggedInRoot: string = !!profile?.isCustomer ? props.rootCustomer : props.rootMember
+        const loggedInRoot: string = !profile
+            ? ''
+            : profile.isCustomer
+                ? props.rootCustomer
+                : props.rootMember
         const contextData: RouteContextData = {
             allRoutes,
             getChildRoutes,
             getChildren,
             getPath,
             getPathFromRoute,
             getRouteElement,
+            initialized,
             isActiveTool,
             isRootRoute: isRootRoute(loggedInRoot, props.rootLoggedOut),
             rootLoggedInRoute: loggedInRoot,
-            rootLoggedOutRoute: props.rootLoggedOut,
+            rootLoggedOutFC: props.rootLoggedOutFC,
             toolsRoutes,
             toolsRoutesForNav,
             utilsRoutes,
@@ -135,7 +141,10 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
 
     useEffect(() => {
         getAndSetRoutes()
+        // THIS WILL BE FIXED IN https://github.com/topcoder-platform/platform-ui/tree/PROD-2321_bug-hunt-intake-form
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
+        initialized,
         profile,
         props.toolsRoutes,
         props.utilsRoutes,
@@ -155,9 +164,7 @@ function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
     )
 }
 
-function isRootRoute(rootLoggedIn: string, rootLoggedOut: string):
-    (activePath: string) => boolean {
-
+function isRootRoute(rootLoggedIn: string | undefined, rootLoggedOut: string): (activePath: string) => boolean {
     return (activePath: string) => {
         return [rootLoggedIn, rootLoggedOut].some(route => activePath === route)
     }

src-ts/lib/styles/_layout.scss

@@ -4,9 +4,11 @@
 html {
     --header-height: 80px;
     --footer-height: 51px;
+    --breadcrumb-height: 64px;
 
     @include ltemd {
         --header-height: 64px;
+        --breadcrumb-height: 48px;
     }
 
     @include ltesm {

src-ts/tools/index.ts

@@ -6,7 +6,6 @@ export { default as toolsRoutes, } from './tools.routes'
 export {
     ChallengeMetadataName,
     dashboardRoute as routeRootCustomer,
-    rootRoute as routeRootLoggedOut,
     workContext,
     WorkDetailDetails,
     WorkDetailDetailsPane,