Merge pull request #1025 from topcoder-platform/feat/new-review-app-init

New Review App UI Prototype (Reviewer Flow)

Author: jmgasper

README.md

@@ -556,6 +556,7 @@ The following summarizes the various [apps](#adding-a-new-platform-ui-applicatio
 - [Gamification Admin](#gamification-admin)
 - [Learn](#learn)
 - [Self Service](#self-service)
+- [Review](#review)
 
 ## Platform App
 
@@ -599,3 +600,10 @@ Application that allows customers to submit/start challenges self-service.
 
 [Work README TBD](./src/apps/self-service/README.md)
 [Work Routes](./src/apps/self-service/src/self-service.routes.tsx)
+
+## Review
+
+The application that allows managing the review submissions.
+
+[Review README TBD](./src/apps/review/README.md)
+[Review Routes](./src/apps/review/src/review-app.routes.tsx)

package.json

@@ -28,6 +28,7 @@
     "@storybook/react": "7.6.10",
     "@stripe/react-stripe-js": "1.13.0",
     "@stripe/stripe-js": "1.41.0",
+    "@types/codemirror": "^5.60.15",
     "apexcharts": "^3.36.0",
     "axios": "^1.7.9",
     "browser-cookies": "^1.2.0",
@@ -43,6 +44,7 @@
     "draft-js-export-html": "^1.2.0",
     "draft-js-markdown-shortcuts-plugin": "^0.3.0",
     "draft-js-plugins-editor": "^2.0.3",
+    "easymde": "^2.20.0",
     "express": "^4.21.2",
     "express-fileupload": "^1.4.0",
     "express-interceptor": "^1.2.0",
@@ -92,9 +94,12 @@
     "redux-promise": "^0.6.0",
     "redux-promise-middleware": "^6.1.3",
     "redux-thunk": "^2.4.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-stringify": "^10.0.1",
     "remark-breaks": "^3.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
+    "remark-parse": "^11.0.0",
     "remove": "^0.1.5",
     "sanitize-html": "^2.12.1",
     "sass": "^1.79.0",

src/apps/platform/src/platform.routes.tsx

@@ -12,6 +12,7 @@ import { walletRoutes } from '~/apps/wallet'
 import { walletAdminRoutes } from '~/apps/wallet-admin'
 import { copilotsRoutes } from '~/apps/copilots'
 import { adminRoutes } from '~/apps/admin'
+import { reviewRoutes } from '~/apps/review'
 
 const Home: LazyLoadedComponent = lazyLoad(
     () => import('./routes/home'),
@@ -41,6 +42,7 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...walletAdminRoutes,
     ...accountsRoutes,
     ...skillsManagerRoutes,
+    ...reviewRoutes,
     ...homeRoutes,
     ...adminRoutes,
 ]

src/apps/review/README.md

@@ -0,0 +1,23 @@
+# Instructions For Running The Review Locally
+
+### Build and run:
+
+- Run this script to start the app, you may have to type the admin password for the `sudo` command:
+
+```bash
+nvm use
+export NVM_DIR=~/.nvm
+yarn install
+sudo yarn start
+```
+
+- If you have any problem when running the above script, please check `README.md` in the root of the project for more info.
+- After running successfully, please open `https://local.topcoder-dev.com/review` in the browser to start the admin app
+
+### Configuration:
+
+- Configuration files are under src/apps/review/src/config
+
+### Mock data:
+
+- Mock data files are under src/apps/review/src/mock-datas

src/apps/review/index.ts

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

src/apps/review/src/ReviewApp.tsx

@@ -0,0 +1,35 @@
+/**
+ * The review app.
+ */
+import { FC, useContext, useEffect, useMemo } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { Layout, SWRConfigProvider } from './lib'
+import { toolTitle } from './review-app.routes'
+import './lib/styles/index.scss'
+
+const ReviewApp: FC = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- missing dependency: getChildRoutes
+    const childRoutes = useMemo(() => getChildRoutes(toolTitle), [])
+
+    useEffect(() => {
+        document.body.classList.add('review-app')
+        return () => {
+            document.body.classList.remove('review-app')
+        }
+    }, [])
+
+    return (
+        <SWRConfigProvider>
+            <Layout>
+                <Outlet />
+                <Routes>{childRoutes}</Routes>
+            </Layout>
+        </SWRConfigProvider>
+    )
+}
+
+export default ReviewApp

src/apps/review/src/config/index.config.ts

@@ -0,0 +1,47 @@
+/**
+ * Common config for ui.
+ */
+
+import { InputSelectOption } from '~/libs/ui'
+
+export const CHALLENGE_TYPE_SELECT_OPTIONS: InputSelectOption[] = [
+    {
+        label: 'All',
+        value: '',
+    },
+    ...[
+        'Design',
+        'Code',
+        'Bug Hunt',
+        'Test Suite',
+        'Copilot Opportunity',
+        'Marathon Match',
+        'First2Finish',
+        'Other',
+    ].map(item => ({ label: item, value: item })),
+]
+export const QUESTION_YES_NO_OPTIONS: InputSelectOption[] = ['Yes', 'No'].map(
+    item => ({ label: item, value: item }),
+)
+export const QUESTION_RESPONSE_OPTIONS: InputSelectOption[] = [
+    {
+        label: 'Comment',
+        value: 'COMMENT',
+    },
+    {
+        label: 'Required',
+        value: 'REQUIRED',
+    },
+    {
+        label: 'Recommended',
+        value: 'RECOMMENDED',
+    },
+]
+export const QUESTION_RESPONSE_TYPE_MAPPING_DISPLAY: { [key: string]: string }
+= {
+    COMMENT: 'Comment',
+    RECOMMENDED: 'Recommended',
+    REQUIRED: 'Required',
+}
+export const TABLE_DATE_FORMAT = 'MMM DD, HH:mm A'
+export const THRESHOLD_SHORT_TIME = 2 * 60 * 60 * 1000 // in miliseconds

src/apps/review/src/config/routes.config.ts

@@ -0,0 +1,13 @@
+/**
+ * Common config for routes in review app.
+ */
+import { AppSubdomain, EnvironmentConfig } from '~/config'
+
+export const rootRoute: string
+    = EnvironmentConfig.SUBDOMAIN === AppSubdomain.review
+        ? ''
+        : `/${AppSubdomain.review}`
+
+export const activeReviewAssigmentsRouteId = 'active-review-assigments'
+export const openOpportunitiesRouteId = 'open-opportunities'
+export const pastReviewAssignmentsRouteId = 'past-review-assignments'

src/apps/review/src/declarations.d.ts

@@ -0,0 +1,2 @@
+export { reviewRoutes } from './review-app.routes'
+export { rootRoute as reviewRootRoute } from './config/routes.config'