Feat/review into feat/v6

.circleci/config.yml

@@ -228,6 +228,7 @@ workflows:
                               - dev
                               - LVT-256
                               - CORE-635
+                              - feat/review
                               - feat/system-admin
                               - feat/v6
 
@@ -248,4 +249,4 @@ workflows:
                   filters: &filters-prod
                       branches:
                           only:
-                              - master
+                              - master

.gitignore

@@ -4,6 +4,7 @@
 node_modules
 /.pnp
 .pnp.js
+.yarn
 
 # testing
 /coverage

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@datadog/browser-logs": "^4.21.2",
+    "@hello-pangea/dnd": "^18.0.1",
     "@heroicons/react": "^1.0.6",
     "@hookform/resolvers": "^4.1.2",
     "@popperjs/core": "^2.11.8",
@@ -96,9 +97,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/admin/src/lib/components/common/ActionLoading/ActionLoading.module.scss

@@ -6,7 +6,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    bottom: 0;
+    bottom: -20px;
     height: 64px;
     left: $sp-8;
 

src/apps/admin/src/lib/components/common/Pagination/Pagination.module.scss

@@ -6,18 +6,49 @@
     justify-content: flex-end;
     align-items: center;
     padding: 16px 0;
-    gap: $sp-4;
+    gap: $sp-2;
+
+    .pageNumbers button,
+    .previous,
+    .disabled,
+    .first,
+    .last,
+    .next {
+        box-shadow: none;
+        border: 1px solid #E9ECEF;
+        border-radius: 4px;
+        color: #0A0A0A;
+        font-weight: 400;
+        font-size: 14px;
+    }
+
+    .previous,
+    .first,
+    .last,
+    .next {
+        padding: 7px 11px;
+
+        &:disabled {
+            background-color: #E9ECEF !important;
+        }
+    }
+
 
     .pageNumbers {
         display: flex;
         justify-content: center;
         align-items: center;
-        gap: $sp-1;
+        gap: $sp-2;
+
+        button {
+         padding: 3px 12px;
+        }
 
         button.active {
             color: $black-60;
             pointer-events: none;
-            box-shadow: inset 0 0 0 2px #{$black-60};
+            background-color: $teal-160;
+            color: white;
         }
     }
 
@@ -35,4 +66,8 @@
     @media (max-width: #{$mobile-max}) {
         justify-content: center;
     }
+
+    :global(.btn-style-secondary) {
+        box-shadow: none !important;
+    }
 }

src/apps/admin/src/lib/components/common/Pagination/Pagination.tsx

@@ -74,7 +74,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronDoubleLeftIcon}
                 iconToLeft
-                label='FIRST'
                 disabled={props.page === 1 || props.disabled}
                 className={styles.first}
             />
@@ -84,7 +83,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronLeftIcon}
                 iconToLeft
-                label='PREVIOUS'
                 disabled={props.page === 1 || props.disabled}
                 className={styles.previous}
             />
@@ -93,7 +91,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                     <Button
                         key={`page-${i}`}
                         secondary
-                        variant='round'
                         label={`${i}`}
                         onClick={createHandlePageClick(i)}
                         className={i === props.page ? styles.active : ''}
@@ -107,7 +104,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                 size='md'
                 icon={IconOutline.ChevronRightIcon}
                 iconToRight
-                label='NEXT'
                 disabled={props.page === totalPages || props.disabled}
                 className={styles.next}
             />
@@ -118,7 +114,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
                     size='md'
                     icon={IconOutline.ChevronDoubleRightIcon}
                     iconToRight
-                    label='LAST'
                     disabled={props.page === totalPages || props.disabled}
                     className={styles.last}
                 />

src/apps/admin/src/lib/hooks/useTableFilterLocal.ts

@@ -23,11 +23,13 @@ export interface useTableFilterLocalProps<T> {
  * @param allDatas all table datas
  * @param defaultSort default sort
  * @param mappingSortField mapping from property field to sort field
+ * @param disablePagination should disable pagination
  */
 export function useTableFilterLocal<T>(
     allDatas: T[],
     defaultSort?: Sort,
     mappingSortField?: { [key: string]: string },
+    disablePagination?: boolean,
 ): useTableFilterLocalProps<T> {
     const [page, setPage] = useState(1)
     const [sort, setSort] = useState<Sort | undefined>(defaultSort)
@@ -109,6 +111,8 @@ export function useTableFilterLocal<T>(
         let datas = sortedDatas
         if (!datas.length) {
             setResults([])
+        } else if (disablePagination) {
+            setResults(datas)
         } else {
             const pageFrom0 = (page || 1) - 1
             const itemOffset

src/apps/admin/src/platform-management/PlatformManagement.tsx

@@ -26,7 +26,7 @@ function useChildRoutes(): Array<JSX.Element> | undefined {
         () => adminRoutes[0].children
             ?.find(r => r.id === platformRouteId)
             ?.children?.map(getRouteElement),
-        [], // eslint-disable-line react-hooks/exhaustive-deps -- missing dependency: getRouteElement
+        [getRouteElement],
     )
     return childRoutes
 }

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

@@ -10,6 +10,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'),
@@ -37,6 +38,7 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...walletRoutes,
     ...walletAdminRoutes,
     ...accountsRoutes,
+    ...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,36 @@
+/**
+ * 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, ReviewAppContextProvider, SWRConfigProvider } from './lib'
+import { toolTitle } from './review-app.routes'
+import './lib/styles/index.scss'
+
+const ReviewApp: FC = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    const childRoutes = useMemo(() => getChildRoutes(toolTitle), [getChildRoutes])
+
+    useEffect(() => {
+        document.body.classList.add('review-app')
+        return () => {
+            document.body.classList.remove('review-app')
+        }
+    }, [])
+
+    return (
+        <ReviewAppContextProvider>
+            <SWRConfigProvider>
+                <Layout>
+                    <Outlet />
+                    <Routes>{childRoutes}</Routes>
+                </Layout>
+            </SWRConfigProvider>
+        </ReviewAppContextProvider>
+    )
+}
+
+export default ReviewApp

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

@@ -0,0 +1,78 @@
+/**
+ * Common config for ui.
+ */
+
+import { SelectOption } from '../lib/models'
+
+export const DESIGN = 'Design'
+export const TRACK_CHALLENGE = 'Challenge'
+export const CODE = 'Code'
+export const BUG_HUNT = 'Bug Hunt'
+export const TEST_SUITE = 'Test Suite'
+export const COPILOT_OPPORTUNITY = 'Copilot Opportunity'
+export const MARATHON_MATCH = 'Marathon Match'
+export const FIRST2FINISH = 'First2Finish'
+export const OTHER = 'Other'
+
+export const CHALLENGE_TYPE_SELECT_ALL_OPTION: SelectOption = {
+    label: 'All',
+    value: '',
+}
+
+export const CHALLENGE_TYPE_SELECT_OPTIONS: SelectOption[] = [
+    CHALLENGE_TYPE_SELECT_ALL_OPTION,
+    ...[
+        DESIGN,
+        CODE,
+        BUG_HUNT,
+        TEST_SUITE,
+        COPILOT_OPPORTUNITY,
+        MARATHON_MATCH,
+        FIRST2FINISH,
+        OTHER,
+    ].map(item => ({ label: item, value: item })),
+]
+export const QUESTION_YES_NO_OPTIONS: SelectOption[] = ['Yes', 'No'].map(
+    item => ({ label: item, value: item }),
+)
+export const QUESTION_RESPONSE_OPTIONS: SelectOption[] = [
+    {
+        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 TABLE_PAGINATION_ITEM_PER_PAGE = 100
+export const THRESHOLD_SHORT_TIME = 2 * 60 * 60 * 1000 // in miliseconds
+
+export const ORDINAL_SUFFIX = new Map([[1, '1st'], [2, '2nd'], [3, '3rd']])
+
+export const REVIEWER = 'Reviewer'
+export const SUBMITTER = 'Submitter'
+export const COPILOT = 'Copilot'
+export const ADMIN = 'Admin'
+
+export const MOCKHANDLE = 'stevenfrog'
+export const REVIEWCOUNT = 3
+
+export const ITERATIVE_REVIEW = 'Iterative Review'
+export const APPROVAL = 'Approval'
+export const WINNERS = 'Winners'
+
+export const TAB = 'tab'
+export const FINISHTAB = [WINNERS]
+export const WITHOUT_APPEAL = [DESIGN, FIRST2FINISH]

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

@@ -0,0 +1,16 @@
+/**
+ * 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'
+export const challengeDetailRouteId = ':challengeId'
+export const scorecardRouteId = 'scorecard'
+export const viewScorecardRouteId = ':scorecardId'

src/apps/review/src/index.ts

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

src/apps/review/src/lib/assets/icons/editor/bold.ts

@@ -0,0 +1,5 @@
+/* eslint-disable max-len */
+export const IconBold
+= `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.06649 17.4168C7.56232 17.4168 7.13072 17.2373 6.7717 16.8783C6.41267 16.5193 6.23315 16.0877 6.23315 15.5835V6.41683C6.23315 5.91266 6.41267 5.48107 6.7717 5.12204C7.13072 4.76301 7.56232 4.5835 8.06649 4.5835H11.2977C12.2908 4.5835 13.2075 4.88905 14.0477 5.50016C14.888 6.11127 15.3082 6.95919 15.3082 8.04391C15.3082 8.82308 15.1325 9.42273 14.7811 9.84287C14.4297 10.263 14.1012 10.5647 13.7957 10.7481C14.1776 10.9161 14.6016 11.2293 15.0675 11.6877C15.5335 12.146 15.7665 12.8335 15.7665 13.7502C15.7665 15.1099 15.27 16.0609 14.2769 16.6033C13.2838 17.1456 12.3519 17.4168 11.4811 17.4168H8.06649ZM9.00607 14.8502H11.3894C12.1227 14.8502 12.5696 14.663 12.73 14.2887C12.8904 13.9144 12.9707 13.6432 12.9707 13.4752C12.9707 13.3071 12.8904 13.0359 12.73 12.6616C12.5696 12.2873 12.0998 12.1002 11.3207 12.1002H9.00607V14.8502ZM9.00607 9.62516H11.1373C11.6415 9.62516 12.0082 9.4953 12.2373 9.23558C12.4665 8.97586 12.5811 8.68558 12.5811 8.36475C12.5811 7.99808 12.4512 7.70016 12.1915 7.471C11.9318 7.24183 11.5957 7.12725 11.1832 7.12725H9.00607V9.62516Z" fill="#767676"/>
+</svg>`

src/apps/review/src/lib/assets/icons/editor/code.ts

@@ -0,0 +1,5 @@
+/* eslint-disable max-len */
+export const IconCode = `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.42266 11.0229L7.97474 14.575C8.1428 14.7431 8.22682 14.957 8.22682 15.2167C8.22682 15.4764 8.1428 15.6903 7.97474 15.8584C7.80668 16.0264 7.5928 16.1104 7.33307 16.1104C7.07335 16.1104 6.85946 16.0264 6.69141 15.8584L2.47474 11.6417C2.38307 11.55 2.31814 11.4507 2.27995 11.3438C2.24175 11.2368 2.22266 11.1223 2.22266 11C2.22266 10.8778 2.24175 10.7632 2.27995 10.6563C2.31814 10.5493 2.38307 10.45 2.47474 10.3584L6.69141 6.1417C6.87474 5.95837 7.09245 5.8667 7.34453 5.8667C7.59661 5.8667 7.81432 5.95837 7.99766 6.1417C8.18099 6.32503 8.27266 6.54274 8.27266 6.79482C8.27266 7.04691 8.18099 7.26462 7.99766 7.44795L4.42266 11.0229ZM17.5768 10.9771L14.0247 7.42503C13.8567 7.25698 13.7727 7.04309 13.7727 6.78337C13.7727 6.52364 13.8567 6.30975 14.0247 6.1417C14.1928 5.97364 14.4067 5.88962 14.6664 5.88962C14.9261 5.88962 15.14 5.97364 15.3081 6.1417L19.5247 10.3584C19.6164 10.45 19.6813 10.5493 19.7195 10.6563C19.7577 10.7632 19.7768 10.8778 19.7768 11C19.7768 11.1223 19.7577 11.2368 19.7195 11.3438C19.6813 11.4507 19.6164 11.55 19.5247 11.6417L15.3081 15.8584C15.1247 16.0417 14.9109 16.1295 14.6664 16.1219C14.422 16.1143 14.2081 16.0188 14.0247 15.8354C13.8414 15.6521 13.7497 15.4344 13.7497 15.1823C13.7497 14.9302 13.8414 14.7125 14.0247 14.5292L17.5768 10.9771Z" fill="#767676"/>
+</svg>
+`

src/apps/review/src/lib/assets/icons/editor/heading-1.ts

@@ -0,0 +1,5 @@
+/* eslint-disable max-len */
+export const IconHeading1 = `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.49992 15.5832C5.2402 15.5832 5.02249 15.4953 4.84679 15.3196C4.6711 15.1439 4.58325 14.9262 4.58325 14.6665V7.33317C4.58325 7.07345 4.6711 6.85574 4.84679 6.68005C5.02249 6.50435 5.2402 6.4165 5.49992 6.4165C5.75964 6.4165 5.97735 6.50435 6.15304 6.68005C6.32874 6.85574 6.41659 7.07345 6.41659 7.33317V10.0832H10.0833V7.33317C10.0833 7.07345 10.1711 6.85574 10.3468 6.68005C10.5225 6.50435 10.7402 6.4165 10.9999 6.4165C11.2596 6.4165 11.4773 6.50435 11.653 6.68005C11.8287 6.85574 11.9166 7.07345 11.9166 7.33317V14.6665C11.9166 14.9262 11.8287 15.1439 11.653 15.3196C11.4773 15.4953 11.2596 15.5832 10.9999 15.5832C10.7402 15.5832 10.5225 15.4953 10.3468 15.3196C10.1711 15.1439 10.0833 14.9262 10.0833 14.6665V11.9165H6.41659V14.6665C6.41659 14.9262 6.32874 15.1439 6.15304 15.3196C5.97735 15.4953 5.75964 15.5832 5.49992 15.5832ZM16.4999 15.5832C16.2402 15.5832 16.0225 15.4953 15.8468 15.3196C15.6711 15.1439 15.5833 14.9262 15.5833 14.6665V8.24984H14.6666C14.4069 8.24984 14.1892 8.16199 14.0135 7.9863C13.8378 7.8106 13.7499 7.59289 13.7499 7.33317C13.7499 7.07345 13.8378 6.85574 14.0135 6.68005C14.1892 6.50435 14.4069 6.4165 14.6666 6.4165H16.4999C16.7596 6.4165 16.9773 6.50435 17.153 6.68005C17.3287 6.85574 17.4166 7.07345 17.4166 7.33317V14.6665C17.4166 14.9262 17.3287 15.1439 17.153 15.3196C16.9773 15.4953 16.7596 15.5832 16.4999 15.5832Z" fill="#767676"/>
+</svg>
+`

src/apps/review/src/lib/assets/icons/editor/heading-2.ts

@@ -0,0 +1,4 @@
+/* eslint-disable max-len */
+export const IconHeading2 = `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.66667 15.5832C3.40694 15.5832 3.18924 15.4953 3.01354 15.3196C2.83785 15.1439 2.75 14.9262 2.75 14.6665V7.33317C2.75 7.07345 2.83785 6.85574 3.01354 6.68005C3.18924 6.50435 3.40694 6.4165 3.66667 6.4165C3.92639 6.4165 4.1441 6.50435 4.31979 6.68005C4.49549 6.85574 4.58333 7.07345 4.58333 7.33317V10.0832H8.25V7.33317C8.25 7.07345 8.33785 6.85574 8.51354 6.68005C8.68924 6.50435 8.90694 6.4165 9.16667 6.4165C9.42639 6.4165 9.6441 6.50435 9.81979 6.68005C9.99549 6.85574 10.0833 7.07345 10.0833 7.33317V14.6665C10.0833 14.9262 9.99549 15.1439 9.81979 15.3196C9.6441 15.4953 9.42639 15.5832 9.16667 15.5832C8.90694 15.5832 8.68924 15.4953 8.51354 15.3196C8.33785 15.1439 8.25 14.9262 8.25 14.6665V11.9165H4.58333V14.6665C4.58333 14.9262 4.49549 15.1439 4.31979 15.3196C4.1441 15.4953 3.92639 15.5832 3.66667 15.5832ZM12.8333 15.5832C12.5736 15.5832 12.3559 15.4953 12.1802 15.3196C12.0045 15.1439 11.9167 14.9262 11.9167 14.6665V11.9165C11.9167 11.4123 12.0962 10.9807 12.4552 10.6217C12.8142 10.2627 13.2458 10.0832 13.75 10.0832H17.4167V8.24984H12.8333C12.5736 8.24984 12.3559 8.16199 12.1802 7.9863C12.0045 7.8106 11.9167 7.59289 11.9167 7.33317C11.9167 7.07345 12.0045 6.85574 12.1802 6.68005C12.3559 6.50435 12.5736 6.4165 12.8333 6.4165H17.4167C17.9208 6.4165 18.3524 6.59602 18.7115 6.95505C19.0705 7.31407 19.25 7.74567 19.25 8.24984V10.0832C19.25 10.5873 19.0705 11.0189 18.7115 11.378C18.3524 11.737 17.9208 11.9165 17.4167 11.9165H13.75V13.7498H18.3333C18.5931 13.7498 18.8108 13.8377 18.9865 14.0134C19.1622 14.1891 19.25 14.4068 19.25 14.6665C19.25 14.9262 19.1622 15.1439 18.9865 15.3196C18.8108 15.4953 18.5931 15.5832 18.3333 15.5832H12.8333Z" fill="#767676"/>
+</svg>`