PROD-397 punch list - dev

src/config/constants.ts

@@ -1 +1,5 @@
-export const SETTINGS_TITLE: string = 'Profile Settings'
+export enum ToolTitle {
+    designLib = 'Design Library',
+    settings = 'Profile Settings',
+    work = 'Work',
+}

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

@@ -1,10 +1,14 @@
 import { GlobalConfig } from '../../lib'
+import { ToolTitle } from '../constants'
 
 import { AppHostEnvironment } from './app-host-environment.enum'
 import { EnvironmentConfigDefault } from './environment.default.config'
 
 export const EnvironmentConfigDev: GlobalConfig = {
     ...EnvironmentConfigDefault,
+    DISABLED_TOOLS: [
+        ToolTitle.designLib,
+    ],
     ENV: AppHostEnvironment.dev,
     TAG_MANAGER_ID: 'GTM-W7B537Z',
 }

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

@@ -1,4 +1,5 @@
 import { GlobalConfig } from '../../lib'
+import { ToolTitle } from '../constants'
 
 import { AppHostEnvironment } from './app-host-environment.enum'
 import { EnvironmentConfigDefault } from './environment.default.config'
@@ -9,6 +10,9 @@ export const EnvironmentConfigProd: GlobalConfig = {
         V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
+    DISABLED_TOOLS: [
+        ToolTitle.designLib,
+    ],
     ENV: AppHostEnvironment.prod,
     TAG_MANAGER_ID: 'GTM-MXXQHG8',
     URL: {

src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 
-import { SETTINGS_TITLE } from '../../../../config'
+import { ToolTitle } from '../../../../config'
 import { profileContext, ProfileContextData } from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
@@ -24,7 +24,7 @@ const ProfileSelector: FC<{}> = () => {
     return (
         <div className={styles['profile-selector']}>
             {!isLoggedIn && <ProfileNotLoggedIn />}
-            {isLoggedIn && <ProfileLoggedIn settingsTitle={SETTINGS_TITLE} />}
+            {isLoggedIn && <ProfileLoggedIn settingsTitle={ToolTitle.settings} />}
         </div>
     )
 }

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 
 import { default as App } from './App'
+import { EnvironmentConfig } from './config'
 import './index.scss'
 import { RouteProvider } from './lib'
 import reportWebVitals from './reportWebVitals'
@@ -11,7 +12,11 @@ import { UtilsRoutes } from './utils'
 
 ReactDOM.render(
     <BrowserRouter>
-        <RouteProvider toolsRoutes={[...ToolsRoutes]} utilsRoutes={[...UtilsRoutes]}>
+        <RouteProvider
+            config={EnvironmentConfig}
+            toolsRoutes={[...ToolsRoutes]}
+            utilsRoutes={[...UtilsRoutes]}
+        >
             <StrictMode>
                 <App />
             </StrictMode>

src/lib/global-config.model.ts

@@ -3,6 +3,7 @@ export interface GlobalConfig {
         V3: string
         V5: string
     }
+    DISABLED_TOOLS?: Array<string>
     ENV: string
     LOGGING: {
         PUBLIC_TOKEN: string

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

@@ -1,12 +1,15 @@
 import { Dispatch, FC, ReactElement, ReactNode, SetStateAction, useEffect, useState } from 'react'
 import { Route } from 'react-router-dom'
 
+import { GlobalConfig } from '../global-config.model'
+
 import { PlatformRoute } from './platform-route.model'
 import { RouteContextData } from './route-context-data.model'
 import { default as routeContext, defaultRouteContextData } from './route.context'
 
 interface RouteProviderProps {
     children: ReactNode
+    config: GlobalConfig
     toolsRoutes: Array<PlatformRoute>
     utilsRoutes: Array<PlatformRoute>
 }
@@ -22,9 +25,13 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
 
         const getAndSetRoutes: () => void = () => {
 
+            function routeDisabled(route: PlatformRoute): boolean {
+                return !route.enabled || !!props.config.DISABLED_TOOLS?.includes(route.title)
+            }
+
             // TODO: try to make these prop names configurable instead of hard-codded
-            const toolsRoutes: Array<PlatformRoute> = props.toolsRoutes.filter(route => route.enabled)
-            const utilsRoutes: Array<PlatformRoute> = props.utilsRoutes.filter(route => route.enabled)
+            const toolsRoutes: Array<PlatformRoute> = props.toolsRoutes.filter(route => !routeDisabled(route))
+            const utilsRoutes: Array<PlatformRoute> = props.utilsRoutes.filter(route => !routeDisabled(route))
             allRoutes = [
                 ...toolsRoutes,
                 ...utilsRoutes,
@@ -58,8 +65,7 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
 
         getAndSetRoutes()
     }, [
-        props.toolsRoutes,
-        props.utilsRoutes,
+        props,
     ])
 
     return (

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

@@ -1,8 +1,6 @@
-export const routeRoot: string = '/'
+export const routeRoot: string = '/work'
 
-export const routeIsActive: (activePath: string, pathName: string, rootPath?: string) => boolean
-    = (activePath: string, pathName: string, rootPath: string = routeRoot) => {
-
-        return activePath?.startsWith(pathName)
-            && (pathName !== rootPath || activePath === rootPath)
-    }
+export function routeIsActive(activePath: string, pathName: string, rootPath?: string): boolean {
+    return activePath?.startsWith(pathName)
+        && (pathName !== rootPath || activePath === rootPath)
+}

src/tools/design-lib/DesignLib.tsx

@@ -1,9 +1,10 @@
 import { FC, useContext } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
+import { ToolTitle } from '../../config'
 import { ContentLayout, routeContext, RouteContextData } from '../../lib'
 
-export const toolTitle: string = 'Design Library'
+export const toolTitle: string = ToolTitle.designLib
 
 const DesignLib: FC<{}> = () => {
 

src/tools/tools.routes.ts

@@ -1,15 +1,13 @@
 import { PlatformRoute } from '../lib'
 
 import { designLibRoutes } from './design-lib/'
-import { selfServiceRoutes } from './self-service'
-import { workIntakeRoutes } from './work-intake'
+import { workRoutes } from './work'
 
 const toolRoutes: Array<PlatformRoute> = [
     // NOTE: these will be displayed in the order they are defined in this array
     // TODO: support ordering
+    ...workRoutes,
     ...designLibRoutes,
-    ...selfServiceRoutes,
-    ...workIntakeRoutes,
 ]
 
 export default toolRoutes

src/tools/work/Work.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Work />', () => {
+
+    test('it should render the work page', () => {})
+})

src/tools/work/Work.tsx

@@ -0,0 +1,25 @@
+import { FC, useContext } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { ToolTitle } from '../../config'
+import { ContentLayout, routeContext, RouteContextData } from '../../lib'
+
+export const toolTitle: string = ToolTitle.work
+
+const Work: FC<{}> = () => {
+
+    const { getChildRoutes }: RouteContextData = useContext(routeContext)
+
+    return (
+        <ContentLayout title={toolTitle}>
+            <>
+                <Outlet />
+                <Routes>
+                    {getChildRoutes(toolTitle)}
+                </Routes>
+            </>
+        </ContentLayout>
+    )
+}
+
+export default Work

src/tools/work/dashboard/Dashboard.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Dashboard />', () => {
+
+    test('it should render the Dashboard', () => {})
+})

src/tools/work/dashboard/Dashboard.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import { Link } from 'react-router-dom'
+
+const Dashboard: FC<{}> = () => {
+    return (
+        <>
+            <h2>
+                Dashboard
+            </h2>
+            <div>
+                <Link to='create'>
+                    Create Data Exploration
+                </Link>
+            </div>
+        </>
+    )
+}
+
+export default Dashboard

src/tools/work/dashboard/index.ts

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

src/tools/work/index.ts

@@ -0,0 +1 @@
+export * from './work.routes'

src/tools/work-intake/WorkIntake.test.tsx → src/tools/work/work-intake/WorkIntake.test.tsx

@@ -2,5 +2,5 @@ import '@testing-library/jest-dom'
 
 describe('<WorkIntake />', () => {
 
-    test('it should render the title prop', () => {})
+    test('it should render the work intake form', () => {})
 })

src/tools/work/work-intake/WorkIntake.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+
+import { Form } from '../../../lib'
+
+import { workIntakeDef } from './work-intake-form.config'
+
+const WorkIntake: FC<{}> = () => {
+
+    function requestGenerator(): any { // TODO
+        return {}
+    }
+
+    function save(): any { // TODO
+        return {}
+    }
+
+    return (
+        <Form
+            formDef={workIntakeDef}
+            requestGenerator={requestGenerator}
+            resetOnError={false}
+            save={save}
+        />
+    )
+}
+
+export default WorkIntake

src/tools/work/work-intake/index.ts

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

src/tools/work-intake/work-intake-form.config.ts → src/tools/work/work-intake/work-intake-form.config.ts

@@ -3,7 +3,7 @@ import {
     inputOptional,
     validatorRequired,
     validatorSslUrl,
-} from '../../lib'
+} from '../../../lib'
 
 export const workIntakeDef: FormDefinition = {
     buttons: [

src/tools/work/work.routes.tsx

@@ -0,0 +1,32 @@
+import { EnvironmentConfig } from '../../config'
+import { IconOutline, PlatformRoute } from '../../lib'
+
+import { Dashboard } from './dashboard'
+import { default as Work, toolTitle } from './Work'
+import { WorkIntake } from './work-intake'
+
+export const workRoutes: Array<PlatformRoute> = [
+    {
+        children: [
+            {
+                children: [],
+                element: <Dashboard />,
+                enabled: true,
+                icon: IconOutline.MailIcon,
+                route: '',
+                title: 'Home',
+            },
+            {
+                children: [],
+                element: <WorkIntake />,
+                enabled: true,
+                route: '/create',
+                title: toolTitle,
+            },
+        ],
+        element: <Work />,
+        enabled: !EnvironmentConfig.DISABLED_TOOLS?.includes(toolTitle),
+        route: '/work',
+        title: toolTitle,
+    },
+]