Fixes for appeals response, submission ID showing, tab layouts

Author: jmgasper

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

@@ -174,7 +174,7 @@ export const AppealComment: FC<Props> = (props: Props) => {
                     onSubmit={handleSubmit(onSubmit)}
                 >
                     <div className={styles.blockReaponseAppealHeader}>
-                        <label>Respond Appeal</label>
+                        <label>Respond to Appeal</label>
 
                         <Select
                             className={classNames('react-select-container')}
@@ -223,7 +223,7 @@ export const AppealComment: FC<Props> = (props: Props) => {
                             type='submit'
                             disabled={isSavingAppealResponse}
                         >
-                            Submit Appeal
+                            Submit Response
                         </button>
                         <button
                             type='button'

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

@@ -34,12 +34,13 @@ export const SubmissionBarInfo: FC<Props> = (props: Props) => {
         [resourceMemberIdMapping, props.submission],
     )
     const { myChallengeRoles }: useRoleProps = useRole()
+    const submissionIdValue = props.submission?.id ?? submissionId
     const uiItems = useMemo(() => [
         {
             icon: 'icon-file',
             title: 'Submission ID',
             type: 'link',
-            value: submissionId,
+            value: submissionIdValue,
         },
         {
             icon: 'icon-handle',
@@ -62,7 +63,7 @@ export const SubmissionBarInfo: FC<Props> = (props: Props) => {
             type: 'link',
             value: useInfo?.memberHandle ?? '',
         },
-    ], [myChallengeRoles, submissionId, useInfo])
+    ], [myChallengeRoles, submissionIdValue, useInfo])
 
     return (
         <div className={classNames(styles.container, props.className)}>

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

@@ -309,7 +309,7 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
             }
 
             // mode === 'review'
-            return [
+            const reviewColumns: TableColumn<Screening>[] = [
                 ...baseColumns,
                 {
                     label: 'Review Score',
@@ -366,6 +366,54 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
                     type: 'element',
                 },
             ]
+
+            const hasAnyMyAssignment = (props.datas || []).some(d => !!d.myReviewResourceId)
+            if (!hasAnyMyAssignment) {
+                return reviewColumns
+            }
+
+            const actionColumn: TableColumn<Screening> = {
+                label: 'Action',
+                propertyName: 'action',
+                renderer: (data: Screening) => {
+                    const status = (data.myReviewStatus || '').toUpperCase()
+                    if (['COMPLETED', 'SUBMITTED'].includes(status)) {
+                        return (
+                            <div
+                                aria-label='Review completed'
+                                className={styles.completedAction}
+                                title='Review completed'
+                            >
+                                <span className={styles.completedIcon} aria-hidden='true'>
+                                    <IconOutline.CheckIcon />
+                                </span>
+                                <span className={styles.completedPill}>Review Complete</span>
+                            </div>
+                        )
+                    }
+
+                    const reviewId = data.myReviewId
+                    if (!reviewId) {
+                        return undefined
+                    }
+
+                    return (
+                        <Link
+                            to={`./../review/${reviewId}`}
+                            className={classNames(styles.submit, 'last-element')}
+                        >
+                            <i className='icon-upload' />
+                            Complete Review
+                        </Link>
+                    )
+                },
+                type: 'element',
+            }
+
+            return [
+                ...reviewColumns,
+                actionColumn,
+            ]
         },
         [
             props,

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

@@ -774,10 +774,6 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
                 const finishedAppeals = reviewDetail?.finishedAppeals ?? 0
                 const unresolvedAppeals = reviewDetail?.unresolvedAppeals
                     ?? Math.max(totalAppeals - finishedAppeals, 0)
-                const primaryAppealsCount = tab === 'Appeals Response'
-                    ? finishedAppeals
-                    : unresolvedAppeals
-
                 if (!totalAppeals && (reviewInfo.status ?? '').toUpperCase() !== 'COMPLETED') {
                     return (
                         <span className={styles.notReviewed}>
@@ -786,6 +782,19 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
                     )
                 }
 
+                if (tab === 'Appeals Response') {
+                    return (
+                        <Link
+                            to={`./../review/${reviewInfo.id}`}
+                            className={styles.appealsLink}
+                        >
+                            <span className={styles.textBlue}>{totalAppeals}</span>
+                        </Link>
+                    )
+                }
+
+                const primaryAppealsCount = unresolvedAppeals
+
                 return (
                     <Link
                         to={`./../review/${reviewInfo.id}`}
@@ -1328,6 +1337,19 @@ export const TableReviewAppeals: FC<Props> = (props: Props) => {
                     return undefined
                 }
 
+                if (tab === 'Appeals Response') {
+                    return (
+                        <Link
+                            to={`./../review/${reviewId}`}
+                            className={styles.appealsLink}
+                        >
+                            <span className={styles.textBlue}>
+                                {appealInfo.totalAppeals}
+                            </span>
+                        </Link>
+                    )
+                }
+
                 return (
                     <>
                         [

src/apps/review/src/lib/services/reviews.service.ts

@@ -505,7 +505,7 @@ export const updateAppealResponse = async (
     appealResponseId: string,
     data: BackendRequestAppealResponse,
 ): Promise<BackendAppealResponse> => {
-    const result = await xhrPostAsync<
+    const result = await xhrPatchAsync<
         BackendRequestAppealResponse,
         BackendAppealResponse
     >(`${EnvironmentConfig.API.V6}/appeals/response/${appealResponseId}`, data)

src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx

@@ -958,6 +958,9 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
         myResources,
         mappingReviewAppeal,
         phaseOrderingOptions,
+        screening,
+        checkpoint,
+        checkpointReview,
     ])
 
     // Add completion indicators for active challenges on relevant tabs
@@ -1074,6 +1077,9 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
         mappingReviewAppeal,
         challengeInfo,
         approvalReviews,
+        screening,
+        checkpoint,
+        checkpointReview,
     ])
 
     // Determine if current user should see the Resources section