Merge branch 'qa' into PROD-1532_upgrade_node_version

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.

babel.config.js

@@ -26,7 +26,18 @@ module.exports = function (api) {
           generateScopedName,
         },
       ],
-      "inline-react-svg",
+      [
+        "inline-react-svg",
+        {
+          "svgo": {
+            "plugins": [
+              {
+                "cleanupIDs": false
+              }
+            ]
+          }
+        }
+      ],
     ],
     env: {
       test: {

package.json

@@ -27,7 +27,9 @@
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^9.4.0",
     "@types/jest": "^25.2.3",
+    "@types/lodash": "^4.14.182",
     "@types/node": "^17.0.24",
+    "@types/reach__router": "^1.3.10",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@types/react-redux-toastr": "^7.6.2",

src-ts/App.tsx

@@ -0,0 +1,36 @@
+import { FC, ReactElement, useContext } from 'react'
+import { Routes } from 'react-router-dom'
+import { toast, ToastContainer } from 'react-toastify'
+
+import { Header } from './header'
+import { routeContext, RouteContextData } from './lib'
+
+const App: FC<{}> = () => {
+
+    const { allRoutes, getRouteElement }: RouteContextData = useContext(routeContext)
+
+    const routeElements: Array<ReactElement> = allRoutes
+        .map(route => getRouteElement(route))
+
+    return (
+        <>
+            <Header />
+            <Routes>
+                {routeElements}
+            </Routes >
+            <ToastContainer
+                position={toast.POSITION.TOP_RIGHT}
+                autoClose={3000}
+                hideProgressBar={false}
+                newestOnTop
+                closeOnClick
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+            />
+        </>
+    )
+}
+
+export default App

src-ts/config/constants.ts

@@ -1,5 +1,12 @@
 export enum ToolTitle {
-    designLib = 'Design Library',
-    settings = 'Profile Settings',
+    settings = 'Account Settings',
     work = 'Work',
 }
+
+export enum FooterSocialConfig {
+    facebook = 'https://www.facebook.com/topcoder',
+    youtube = 'https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA',
+    linkedin = 'https://www.linkedin.com/company/topcoder',
+    twitter = 'https://twitter.com/topcoder',
+    instagram = 'https://www.instagram.com/topcoder',
+}

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

@@ -8,10 +8,6 @@ import { EnvironmentConfigProd } from './environment.prod.config'
 
 function getEnvironmentConfig(): GlobalConfig {
 
-    // switch (process.env.REACT_APP_HOST_ENV) {
-    // TODO: allow the use of a separate
-    // process var (REACT_APP_HOST_ENV)
-    // so that we can have more than just local/dev/prod
     switch (process.env.APPENV) {
 
         case AppHostEnvironment.bsouza:

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

@@ -4,13 +4,15 @@ import { AppHostEnvironment } from './app-host-environment.enum'
 
 export const EnvironmentConfigDefault: GlobalConfig = {
     API: {
+        FORUM_ACCESS_TOKEN: 'va.JApNvUOx3549h20I6tnl1kOQDc75NDIp.0jG3dA.EE3gZgV',
+        FORUM_V2: 'https://vanilla.topcoder-dev.com/api/v2',
         V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },
     ENV: AppHostEnvironment.default,
     LOGGING: {
         PUBLIC_TOKEN: 'puba0825671e469d16f940c5a30dc738f11',
-        SERVICE: 'platform-ui',
+        SERVICE: 'mfe-customer-work',
     },
     REAUTH_OFFSET: 55,
     TAG_MANAGER_ID: undefined,

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

@@ -7,6 +7,7 @@ import { EnvironmentConfigDefault } from './environment.default.config'
 export const EnvironmentConfigProd: GlobalConfig = {
     ...EnvironmentConfigDefault,
     API: {
+        FORUM_V2: 'https://vanilla.topcoder.com/api/v2',
         V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },

src-ts/declarations.d.ts

@@ -8,8 +8,17 @@ declare module '*.scss' {
     export = scssFile
 }
 
-declare module 'tc-auth-lib'
+declare module '*.svg' {
+    import * as React from 'react'
+
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<
+        SVGSVGElement
+    > & { title?: string }>
+
+    const src: string
+    export default src
+}
 
 declare module '@topcoder/mfe-header'
 
-declare module 'react-redux-toastr'
+declare module 'tc-auth-lib'

src-ts/header/Header.module.scss

@@ -0,0 +1,27 @@
+@import '../lib/styles/includes';
+
+.header-wrap {
+    display: block;
+    background-color: $tc-black;
+}
+
+.header {
+    display: grid;
+    height: $header-height;
+    align-items: center;
+    width: 100%;
+    margin: 0 auto;
+    max-width: $xxl-min;
+    @include pagePaddings;
+    grid-template-columns: 78px 1fr auto;
+
+    @include ltemd {
+        grid-template-columns: $header-height 1fr $header-height;
+        align-items: center;
+    }
+}
+
+.subheader {
+    width: 100%;
+    position: relative;
+}

src-ts/header/Header.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+import styles from './Header.module.scss'
+import { Logo } from './logo'
+import { ToolSelectors } from './tool-selectors'
+import { UtilitySelectors } from './utility-selectors'
+
+const Header: FC<{}> = () => {
+    return (
+        <div className={styles['header-wrap']}>
+            <header className={styles.header}>
+                <ToolSelectors isWide={false} />
+                <Logo />
+                <ToolSelectors isWide={true} />
+                <UtilitySelectors />
+            </header>
+            <div id='page-subheader-portal-el' className={styles.subheader}></div>
+        </div>
+    )
+}
+
+export default Header

src-ts/header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header'

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

@@ -0,0 +1,33 @@
+@import '../../lib/styles/includes';
+
+.logo-no-link,
+.logo-link {
+    display: flex;
+
+    a {
+        display: flex;
+    }
+
+    svg {
+        width: calc($pad-xxl + $pad-xxxxl);
+        height: $pad-xl;
+        fill: none;
+
+        path {
+            fill: $tc-white;
+        }
+
+        @include ltemd {
+            padding: 0;
+        }
+    }  
+    @include ltemd {
+        margin: 0 auto;
+    }
+}
+
+.logo-no-link {
+    a {
+        cursor: default;
+    }
+}

src-ts/header/logo/Logo.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+
+import { LogoIcon, routeIsHome, routeRoot } from '../../lib'
+import '../../lib/styles/index.scss'
+
+import styles from './Logo.module.scss'
+
+const Logo: FC<{}> = () => {
+
+    // the logo should be a link to the home page for all pages except the home page(
+    const isLink: boolean = !routeIsHome(useLocation().pathname)
+
+    return (
+        <div className={styles[`logo-${!isLink ? 'no-' : ''}link`]}>
+            <Link
+                tabIndex={-1}
+                to={routeRoot}
+            >
+                <LogoIcon />
+            </Link>
+        </div>
+    )
+}
+
+export default Logo

src-ts/header/logo/index.ts

@@ -0,0 +1 @@
+export { default as Logo } from './Logo'

src-ts/header/tool-selectors/ToolSelectors.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+
+import { ToolSelectorsNarrow } from './tool-selectors-narrow'
+import { ToolSelectorsWide } from './tool-selectors-wide'
+
+interface ToolSelectorsProps {
+    isWide: boolean
+}
+
+const ToolSelectors: FC<ToolSelectorsProps> = (props: ToolSelectorsProps) => {
+    return props.isWide ? <ToolSelectorsWide /> : <ToolSelectorsNarrow />
+}
+
+export default ToolSelectors

src-ts/header/tool-selectors/index.ts

@@ -0,0 +1 @@
+export { default as ToolSelectors } from './ToolSelectors'

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

@@ -0,0 +1,31 @@
+@import '../../../lib/styles/includes';
+
+.tool-selectors-narrow {
+    display: none;
+
+    @include ltemd {
+        display: flex;
+    }
+
+    svg {
+        @include icon-xxxxl;
+        fill: none;
+
+        path {
+            stroke: $tc-white;
+            stroke-width: $border;
+        }
+    }
+
+    .tool-selectors-narrow-container {
+        position: absolute;
+        top: $header-height;
+        left: 0;
+        bottom: 0;
+        height: $content-height;
+        width: calc(100% - calc(2 * $pad-xxl));
+        z-index: 100;
+        background-color: $black-100;
+        padding: $pad-xxl;
+    }
+}

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames'
+import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
+
+import { IconOutline, routeContext, RouteContextData } from '../../../lib'
+
+import { ToolSelectorNarrow } from './tool-selector-narrow'
+import styles from './ToolSelectorsNarrow.module.scss'
+
+const ToolSelectorsNarrow: FC<{}> = () => {
+
+    const { toolsRoutes }: RouteContextData = useContext(routeContext)
+    const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+
+    const toolSelectors: Array<JSX.Element> = toolsRoutes
+        .map(route => (
+            <ToolSelectorNarrow
+                key={route.title}
+                route={route}
+            />
+        ))
+
+    const closed: JSX.Element = <IconOutline.MenuIcon />
+
+    const open: JSX.Element = (
+        <>
+            <IconOutline.XIcon />
+            <div className={styles['tool-selectors-narrow-container']}>
+                {toolSelectors}
+            </div>
+        </>
+    )
+
+    return (
+        <div
+            className={classNames(styles['tool-selectors-narrow'], 'font-tc-white')}
+            onClick={() => setIsOpen(!isOpen)}
+        >
+            {isOpen ? open : closed}
+        </div>
+    )
+}
+
+export default ToolSelectorsNarrow

src-ts/header/tool-selectors/tool-selectors-narrow/index.ts

@@ -0,0 +1 @@
+export { default as ToolSelectorsNarrow } from './ToolSelectorsNarrow'

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

@@ -0,0 +1,33 @@
+@import '../../../../lib/styles/includes';
+
+.tool-selector-narrow {
+
+    a:last-of-type {
+        border-bottom: 1px solid $black-60;
+    }
+
+    .tool-selector-narrow-link {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 1px solid $black-60;
+        padding: $pad-lg 0;
+        color: $tc-white;
+        font-weight: $font-weight-medium;
+        background-color: $black-100;
+
+        svg {
+            @include icon-lg;
+            fill: $tc-white;
+
+            path {
+                stroke-width: 1.13px;
+                fill: none;
+            }
+        }
+
+        &.tool-selector-narrow-active {
+            color: $turq-100;
+        }
+    }
+}