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;
+}