PM-1905 - mobile view

Author: vas3a

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

@@ -61,3 +61,30 @@
         }
     }
 }
+
+.mobileCard {
+    border-top: 1px solid #A8A8A8;
+    margin-top: $sp-2;
+}
+
+.mobileRow {
+    display: flex;
+    padding-top: $sp-2;
+    padding-left: $sp-4;
+    padding-right: $sp-4;
+    > * {
+        flex: 1 1 50%;
+    }
+}
+.label {
+    font-weight: bold;
+}
+.value {
+
+    svg {
+        display: inline;
+        vertical-align: middle;
+        margin-right: $sp-1;
+    }
+
+}

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

@@ -2,6 +2,7 @@ import { FC, useMemo } from 'react'
 import moment from 'moment'
 
 import { CheckIcon, MinusCircleIcon } from '@heroicons/react/outline'
+import { useWindowSize, WindowSize } from '~/libs/shared'
 
 import { AiWorkflowRunsResponse, useFetchAiWorkflowsRuns } from '../../hooks'
 import { IconAiReview } from '../../assets/icons'
@@ -18,6 +19,85 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
     const aiWorkflowIds = useMemo(() => props.reviewers.map(r => r.aiWorkflowId), [props.reviewers])
     const { runs, isLoading }: AiWorkflowRunsResponse = useFetchAiWorkflowsRuns(props.submissionId, aiWorkflowIds)
 
+    const windowSize: WindowSize = useWindowSize()
+    const isTablet = useMemo(
+        () => (windowSize.width ?? 0) <= 984,
+        [windowSize.width],
+    )
+
+    if (isTablet) {
+        return (
+            <div className={styles.wrap}>
+                {!runs.length && isLoading && (
+                    <div className={styles.mobileLoading}>Loading...</div>
+                )}
+
+                {!runs.length && !isLoading && (
+                    <div className={styles.mobileLoading}>No reviews</div>
+                )}
+
+                {runs.map(run => (
+                    <div key={run.id} className={styles.mobileCard}>
+                        <div className={styles.mobileRow}>
+                            <div className={styles.label}>Reviewer</div>
+                            <div className={styles.value}>
+                                <span className={styles.icon}>
+                                    <IconAiReview />
+                                </span>
+                                <span className={styles.workflowName} title={run.workflow.name}>
+                                    {run.workflow.name}
+                                </span>
+                            </div>
+                        </div>
+
+                        <div className={styles.mobileRow}>
+                            <div className={styles.label}>Review Date</div>
+                            <div className={styles.value}>
+                                {run.status === 'SUCCESS'
+                                    ? moment(run.completedAt)
+                                        .local()
+                                        .format(TABLE_DATE_FORMAT)
+                                    : '-'}
+                            </div>
+                        </div>
+
+                        <div className={styles.mobileRow}>
+                            <div className={styles.label}>Score</div>
+                            <div className={styles.value}>
+                                {run.status === 'SUCCESS' ? run.score : '-'}
+                            </div>
+                        </div>
+
+                        <div className={styles.mobileRow}>
+                            <div className={styles.label}>Result</div>
+                            <div className={`${styles.value} ${styles.resultCol}`}>
+                                {run.status === 'SUCCESS' ? (
+                                    <div className={styles.result}>
+                                        {run.score >= run.workflow.scorecard.minimumPassingScore ? (
+                                            <>
+                                                <CheckIcon className='icon icon-xl passed' />
+                                                {' '}
+                                                Passed
+                                            </>
+                                        ) : (
+                                            <>
+                                                <MinusCircleIcon className='icon icon-xl' />
+                                                {' '}
+                                                Failed
+                                            </>
+                                        )}
+                                    </div>
+                                ) : (
+                                    '-'
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )
+    }
+
     return (
         <div className={styles.wrap}>
             <table className={styles.reviewsTable}>

src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentSubmissions.module.scss

@@ -126,3 +126,13 @@
         pointer-events: none;
     }
 }
+
+.aiReviewerRow {
+    @include ltelg {
+        tr:has(&) {
+            td:first-child {
+                display: none;
+            }
+        }
+    }
+}

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

@@ -343,7 +343,9 @@ export const TabContentSubmissions: FC<Props> = props => {
                     type: 'element',
                 },
                 ...(!props.aiReviewers?.length ? [] : [{
+                    className: styles.aiReviewerRow,
                     label: 'Reviewer',
+                    mobileColSpan: 2,
                     propertyName: 'submittedDate',
                     renderer: (submission: BackendSubmission) => (
                         <CollapsibleAiReviewsRow
@@ -418,6 +420,7 @@ export const TabContentSubmissions: FC<Props> = props => {
                 },
                 {
                     ...column,
+                    colSpan: column.mobileColSpan,
                     mobileType: 'last-value',
                 },
             ] as MobileTableColumn<BackendSubmission>[],

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

@@ -9,6 +9,12 @@
     display: flex;
     align-items: center;
     gap: $sp-2;
+    cursor: pointer;
+
+    @include ltelg {
+        justify-content: space-between;
+        font-weight: 600;
+    }
 
     svg {
         color: #767676;
@@ -18,4 +24,13 @@
 .table {
     margin-top: $sp-2;
     margin-left: -1 * $sp-4;
+    @include ltelg {
+        margin-top: 0;
+        margin-left: -1 * $sp-4;
+        margin-right: -1 * $sp-4;
+    }
+}
+
+.rotated {
+    transform: rotate(180deg);
 }

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

@@ -1,4 +1,5 @@
 import { FC, useCallback, useState } from 'react'
+import classNames from 'classnames'
 
 import { IconOutline } from '~/libs/ui'
 
@@ -27,7 +28,7 @@ const CollapsibleAiReviewsRow: FC<CollapsibleAiReviewsRowProps> = props => {
                 {' '}
                 AI Reviewer
                 {aiReviewersCount === 1 ? '' : 's'}
-                <IconOutline.ChevronDownIcon className='icon-xl' />
+                <IconOutline.ChevronDownIcon className={classNames('icon-xl', isOpen && styles.rotated)} />
             </span>
             {isOpen && (
                 <div className={styles.table}>

src/libs/ui/lib/components/table/table-column.model.ts

@@ -13,4 +13,5 @@ export interface TableColumn<T> {
     readonly type: TableCellType
     readonly isSortable?: boolean
     readonly columnId?: string
+    readonly mobileColSpan?: number
 }