feat(fe): add testcase judge results not available alert when testcas…

…e is outdated (#2235)

feat(fe): add Testcase Judge Results Not Available Alert when testcase is outdated

apps/frontend/app/admin/contest/[contestId]/_components/SubmissionDetailAdmin.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import CodeEditor from '@/components/CodeEditor'
+import { Alert, AlertDescription, AlertTitle } from '@/components/shadcn/alert'
 import { ScrollArea, ScrollBar } from '@/components/shadcn/scroll-area'
 import {
   Table,
@@ -15,6 +16,7 @@ import { GET_SUBMISSION } from '@/graphql/submission/queries'
 import { dateFormatter, getResultColor } from '@/libs/utils'
 import type { Language } from '@/types/type'
 import { useLazyQuery, useQuery } from '@apollo/client'
+import { IoWarning } from 'react-icons/io5'
 
 export default function SubmissionDetailAdmin({
   submissionId
@@ -125,9 +127,10 @@ export default function SubmissionDetailAdmin({
             </div>
             <ScrollBar orientation="horizontal" />
           </ScrollArea>
-          {submission?.testcaseResult.length !== 0 && (
-            <div>
-              <h2 className="font-bold">Testcase</h2>
+
+          <h2 className="mt-4 font-bold">Testcase</h2>
+          {submission?.testcaseResult.length !== 0 ? (
+            <div className="flex flex-col gap-4">
               <table>
                 <tbody className="text-sm font-light">
                   <tr>
@@ -201,16 +204,22 @@ export default function SubmissionDetailAdmin({
                 </TableBody>
               </Table>
             </div>
+          ) : (
+            <Alert variant="default">
+              <IoWarning className="mr-2 h-4 w-4" />
+              <AlertTitle>Testcase Judge Results Not Available</AlertTitle>
+              <AlertDescription>
+                The testcases have been recently updated and are now outdated.
+              </AlertDescription>
+            </Alert>
           )}
-          <div>
-            <h2 className="mb-3 font-bold">Source Code</h2>
-            <CodeEditor
-              value={submission?.code}
-              language={submission?.language as Language}
-              readOnly
-              className="max-h-96 min-h-16 w-full"
-            />
-          </div>
+          <h2 className="mt-4 font-bold">Source Code</h2>
+          <CodeEditor
+            value={submission?.code}
+            language={submission?.language as Language}
+            readOnly
+            className="max-h-96 min-h-16 w-full"
+          />
         </div>
       )}
     </ScrollArea>

apps/frontend/components/shadcn/alert.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@/libs/utils'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border border-gray-200 px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-gray-950 [&>svg~*]:pl-7 dark:border-gray-800 dark:[&>svg]:text-gray-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50',
+        destructive:
+          'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }