Merge pull request #1197 from topcoder-platform/feat/review-detail-page-integation-2

Feat/review detail page integation 2

Author: jmgasper

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/review/src/config/index.config.ts

@@ -5,6 +5,7 @@
 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'

src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx

@@ -3,92 +3,70 @@
  */
 import { FC } from 'react'
 
-import { TableLoading } from '~/apps/admin/src/lib'
+import { ActionLoading } from '~/apps/admin/src/lib'
 
+import { Screening, SubmissionInfo } from '../../models'
 import {
-    ProjectResult,
-    RegistrationInfo,
-    Screening,
-    SubmissionInfo,
-} from '../../models'
-import { TableRegistration } from '../TableRegistration'
-import { TableNoRecord } from '../TableNoRecord'
-import { TableSubmissionScreening } from '../TableSubmissionScreening'
-import { TableReviewAppeals } from '../TableReviewAppeals'
-import { TableWinners } from '../TableWinners'
-import { useRole, useRoleProps } from '../../hooks'
-import { APPROVAL, MOCKHANDLE, REVIEWER, SUBMITTER } from '../../../config/index.config'
-import { TableReviewAppealsForSubmitter } from '../TableReviewAppealsForSubmitter'
+    useDownloadSubmission,
+    useDownloadSubmissionProps,
+} from '../../hooks'
+import {
+    useFetchChallengeResults,
+    useFetchChallengeResultsProps,
+} from '../../hooks/useFetchChallengeResults'
+
+import TabContentRegistration from './TabContentRegistration'
+import TabContentReview from './TabContentReview'
+import TabContentScreening from './TabContentScreening'
+import TabContentWinners from './TabContentWinners'
 
 interface Props {
     selectedTab: string
-    type?: string
-    registrations: RegistrationInfo[]
-    isLoadingRegistrants: boolean
-    submissions: SubmissionInfo[]
-    projectResults: ProjectResult[]
+    isLoadingSubmission: boolean
     screening: Screening[]
-    firstSubmissions: SubmissionInfo | undefined
+    review: SubmissionInfo[]
 }
 
 export const ChallengeDetailsContent: FC<Props> = (props: Props) => {
-    const selectedTab = props.selectedTab
-    const type = props.type
-    const registrations = props.registrations
-    const submissions = props.submissions
-    const firstSubmissions = props.firstSubmissions
-    const projectResults = props.projectResults
-    const { actionChallengeRole }: useRoleProps = useRole()
-    const screening
-        = actionChallengeRole === REVIEWER
-            ? props.screening
-            : props.screening.filter(s => s.handle === MOCKHANDLE)
-
-    // show ui for Registration tab
-    if (selectedTab === 'Registration') {
-        // show loading ui when fetching registrants
-        if (props.isLoadingRegistrants) {
-            return <TableLoading />
-        }
-
-        // show no record message
-        if (!registrations.length) {
-            return <TableNoRecord />
-        }
-
-        // show registrants table
-        return <TableRegistration datas={registrations} />
-    }
-
-    if (
-        !submissions.length
-        || !projectResults.length
-        || !screening.length
-    ) {
-        return <TableNoRecord />
-    }
+    const {
+        isLoading: isDownloadingSubmission,
+        isLoadingBool: isDownloadingSubmissionBool,
+        downloadSubmission,
+    }: useDownloadSubmissionProps = useDownloadSubmission()
+    const {
+        isLoading: isLoadingProjectResult,
+        projectResults,
+    }: useFetchChallengeResultsProps = useFetchChallengeResults(props.review)
 
     return (
         <>
-            {selectedTab === 'Submission / Screening' ? (
-                <TableSubmissionScreening datas={screening} />
-            ) : selectedTab === 'Winners' ? (
-                <TableWinners datas={projectResults} />
-            ) : (actionChallengeRole !== SUBMITTER || selectedTab === APPROVAL) ? (
-                <TableReviewAppeals
-                    datas={submissions}
-                    tab={selectedTab}
-                    type={type}
-                    firstSubmissions={firstSubmissions}
+            {props.selectedTab === 'Registration' ? (
+                <TabContentRegistration />
+            ) : props.selectedTab === 'Submission / Screening' ? (
+                <TabContentScreening
+                    screening={props.screening}
+                    isLoadingScreening={props.isLoadingSubmission}
+                    isDownloading={isDownloadingSubmission}
+                    downloadSubmission={downloadSubmission}
+                />
+            ) : props.selectedTab === 'Winners' ? (
+                <TabContentWinners
+                    isLoading={isLoadingProjectResult}
+                    projectResults={projectResults}
+                    isDownloading={isDownloadingSubmission}
+                    downloadSubmission={downloadSubmission}
                 />
             ) : (
-                <TableReviewAppealsForSubmitter
-                    datas={submissions}
-                    tab={selectedTab}
-                    type={type}
-                    firstSubmissions={firstSubmissions}
+                <TabContentReview
+                    selectedTab={props.selectedTab}
+                    reviews={props.review}
+                    isLoadingReview={props.isLoadingSubmission}
+                    isDownloading={isDownloadingSubmission}
+                    downloadSubmission={downloadSubmission}
                 />
             )}
+
+            {isDownloadingSubmissionBool && <ActionLoading />}
         </>
     )
 }

src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentRegistration.tsx

@@ -0,0 +1,34 @@
+/**
+ * Content of registration tab.
+ */
+import { FC, useContext } from 'react'
+
+import { TableLoading } from '~/apps/admin/src/lib'
+
+import { ChallengeDetailContextModel } from '../../models'
+import { TableRegistration } from '../TableRegistration'
+import { TableNoRecord } from '../TableNoRecord'
+import { ChallengeDetailContext } from '../../contexts'
+
+export const TabContentRegistration: FC = () => {
+    // get challenge info from challenge detail context
+    const {
+        isLoadingChallengeResources,
+        registrants,
+    }: ChallengeDetailContextModel = useContext(ChallengeDetailContext)
+
+    // show loading ui when fetching registrants
+    if (isLoadingChallengeResources) {
+        return <TableLoading />
+    }
+
+    // show no record message
+    if (!registrants.length) {
+        return <TableNoRecord />
+    }
+
+    // show registrants table
+    return <TableRegistration datas={registrants} />
+}
+
+export default TabContentRegistration

src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentReview.tsx

@@ -0,0 +1,67 @@
+/**
+ * Content of review tab.
+ */
+import { FC, useMemo } from 'react'
+import { maxBy } from 'lodash'
+
+import { TableLoading } from '~/apps/admin/src/lib'
+import { IsRemovingType } from '~/apps/admin/src/lib/models'
+
+import { SubmissionInfo } from '../../models'
+import { TableNoRecord } from '../TableNoRecord'
+import { TableReviewAppeals } from '../TableReviewAppeals'
+import { useRole, useRoleProps } from '../../hooks'
+import {
+    APPROVAL,
+    SUBMITTER,
+} from '../../../config/index.config'
+import { TableReviewAppealsForSubmitter } from '../TableReviewAppealsForSubmitter'
+
+interface Props {
+    selectedTab: string
+    reviews: SubmissionInfo[]
+    isLoadingReview: boolean
+    isDownloading: IsRemovingType
+    downloadSubmission: (submissionId: string) => void
+}
+
+export const TabContentReview: FC<Props> = (props: Props) => {
+    const selectedTab = props.selectedTab
+    const reviews = props.reviews
+    const firstSubmissions = useMemo(
+        () => maxBy(reviews, 'review.initialScore'),
+        [reviews],
+    )
+    const { actionChallengeRole }: useRoleProps = useRole()
+
+    // show loading ui when fetching data
+    if (
+        props.isLoadingReview
+    ) {
+        return <TableLoading />
+    }
+
+    // show no record message
+    if (!reviews.length) {
+        return <TableNoRecord />
+    }
+
+    return actionChallengeRole !== SUBMITTER || selectedTab === APPROVAL ? (
+        <TableReviewAppeals
+            datas={reviews}
+            tab={selectedTab}
+            firstSubmissions={firstSubmissions}
+            isDownloading={props.isDownloading}
+            downloadSubmission={props.downloadSubmission}
+        />
+    ) : (
+        <TableReviewAppealsForSubmitter
+            datas={reviews}
+            firstSubmissions={firstSubmissions}
+            isDownloading={props.isDownloading}
+            downloadSubmission={props.downloadSubmission}
+        />
+    )
+}
+
+export default TabContentReview

src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentScreening.tsx

@@ -0,0 +1,40 @@
+/**
+ * Content of screening tab.
+ */
+import { FC } from 'react'
+
+import { TableLoading } from '~/apps/admin/src/lib'
+import { IsRemovingType } from '~/apps/admin/src/lib/models'
+
+import { Screening } from '../../models'
+import { TableNoRecord } from '../TableNoRecord'
+import { TableSubmissionScreening } from '../TableSubmissionScreening'
+
+interface Props {
+    screening: Screening[]
+    isLoadingScreening: boolean
+    isDownloading: IsRemovingType
+    downloadSubmission: (submissionId: string) => void
+}
+
+export const TabContentScreening: FC<Props> = (props: Props) => {
+    // show loading ui when fetching data
+    if (props.isLoadingScreening) {
+        return <TableLoading />
+    }
+
+    // show no record message
+    if (!props.screening.length) {
+        return <TableNoRecord />
+    }
+
+    return (
+        <TableSubmissionScreening
+            datas={props.screening}
+            isDownloading={props.isDownloading}
+            downloadSubmission={props.downloadSubmission}
+        />
+    )
+}
+
+export default TabContentScreening

src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentWinners.tsx

@@ -0,0 +1,40 @@
+/**
+ * Content of winners tab.
+ */
+import { FC } from 'react'
+
+import { TableLoading } from '~/apps/admin/src/lib'
+import { IsRemovingType } from '~/apps/admin/src/lib/models'
+
+import { ProjectResult } from '../../models'
+import { TableNoRecord } from '../TableNoRecord'
+import { TableWinners } from '../TableWinners'
+
+interface Props {
+    projectResults: ProjectResult[]
+    isLoading: boolean
+    isDownloading: IsRemovingType
+    downloadSubmission: (submissionId: string) => void
+}
+
+export const TabContentWinners: FC<Props> = (props: Props) => {
+    // show loading ui when fetching data
+    if (props.isLoading) {
+        return <TableLoading />
+    }
+
+    // show no record message
+    if (!props.projectResults.length) {
+        return <TableNoRecord />
+    }
+
+    return (
+        <TableWinners
+            datas={props.projectResults}
+            isDownloading={props.isDownloading}
+            downloadSubmission={props.downloadSubmission}
+        />
+    )
+}
+
+export default TabContentWinners

src/apps/review/src/lib/components/ChallengePhaseInfo/ChallengePhaseInfo.tsx

@@ -13,6 +13,7 @@ import styles from './ChallengePhaseInfo.module.scss'
 interface Props {
     className?: string
     challengeInfo: ChallengeInfo
+    reviewProgress: number
 }
 
 export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
@@ -54,10 +55,10 @@ export const ChallengePhaseInfo: FC<Props> = (props: Props) => {
             {
                 title: 'Review Progress',
                 type: PROGRESS_TYPE,
-                value: data.reviewProgress,
+                value: props.reviewProgress,
             },
         ]
-    }, [props.challengeInfo, myChallengeRoles])
+    }, [props.challengeInfo, myChallengeRoles, props.reviewProgress])
     return (
         <div className={classNames(styles.container, props.className)}>
             {uiItems.map(item => {

src/apps/review/src/lib/components/ScorecardQuestionView/ScorecardQuestionView.tsx

@@ -170,6 +170,7 @@ export const ScorecardQuestionView: FC<Props> = (props: Props) => {
                         </td>
                     </tr>
                     {!includes(WITHOUT_APPEAL, challengeInfo?.type)
+                        && !includes(WITHOUT_APPEAL, challengeInfo?.track)
                         && (includes([REVIEWER, COPILOT, ADMIN], actionChallengeRole) ? (
                             props.mappingAppeals[commentItem.id] && (
                                 <tr

src/apps/review/src/lib/components/SubmissionBarInfo/SubmissionBarInfo.module.scss

@@ -49,3 +49,13 @@
         line-height: 20px;
     }
 }
+
+.blockMyRoles {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+
+    span {
+        color: var(--FontColor);
+    }
+}