ADD Autograde Test Expanded (#270)

web/src/Components/Public/Submission/SubmissionTestExpanded/SubmissionTestExpanded.jsx

@@ -0,0 +1,59 @@
+import {Divider, Typography} from '@material-ui/core';
+import {Close} from '@material-ui/icons';
+import Cancel from '@material-ui/icons/Cancel';
+import CheckCircle from '@material-ui/icons/CheckCircle';
+import React from 'react';
+import {useStyles} from './SubmissionTestExpanded.styles';
+
+export default function SubmissionTestExpanded({
+  testName,
+  submissionID,
+  assignmentName,
+  testSuccess,
+  testExpectedOutput,
+  testActualOutput,
+}) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.submissionTestExpandedContainer}>
+      <div className={classes.testHeader}>
+        <Typography className={classes.testName} variant={'h5'}>
+          {testName}
+        </Typography>
+        <Typography className={classes.submissionIDTitle}>
+          Submission: <span className={classes.submissionID}>{submissionID}</span>
+        </Typography>
+        <Typography className={classes.assignmentNameTitle}>
+          Assignment: <span className={classes.assignmentName}>{assignmentName}</span>
+        </Typography>
+        <Typography className={classes.testStatus}>
+          {testSuccess?
+            <span className={classes.testStatusSuccess}>
+              <CheckCircle className={classes.testStatusIcon} /> Test Successfully Executed
+            </span>:
+            <span className={classes.testStatusFail}>
+              <Cancel className={classes.testStatusIcon} /> Test Execution Failed
+            </span>}
+        </Typography>
+        <Typography className={classes.closeIconWrapper}><Close /></Typography>
+      </div>
+      <Divider></Divider>
+      <div className={classes.testBody}>
+        <Typography className={classes.testOutputTitle}>
+          Expected Result:
+        </Typography>
+        <Typography className={classes.testOutput}>
+          {testExpectedOutput}
+        </Typography>
+        <Typography className={classes.testOutputTitle}>
+          Actual Result:
+        </Typography>
+        <Typography className={classes.testOutput}>
+          {testActualOutput}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+

web/src/Components/Public/Submission/SubmissionTestExpanded/SubmissionTestExpanded.styles.jsx

@@ -0,0 +1,78 @@
+import {makeStyles} from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme) => ({
+  submissionTestExpandedContainer: {
+    color: theme.palette.white,
+    backgroundColor: theme.palette.dark.blue['200'],
+    borderRadius: `${theme.spacing(1.25)}px`,
+  },
+  testHeader: {
+    borderBottom: '1px',
+    borderColor: theme.palette.gray['100'],
+    padding: `${theme.spacing(3)}px ${theme.spacing(6)}px`,
+    verticalAlign: 'middle',
+  },
+  testName: {
+    display: 'inline',
+    color: theme.palette.white,
+    paddingRight: `${theme.spacing(3)}px`,
+    width: 'fit-content',
+  },
+  submissionIDTitle: {
+    color: theme.palette.gray['200'],
+    display: 'inline',
+    fontSize: '14px',
+    padding: `0px ${theme.spacing(3)}px`,
+    width: 'fit-content',
+  },
+  submissionID: {
+    color: theme.palette.white,
+  },
+  assignmentNameTitle: {
+    color: theme.palette.gray['200'],
+    display: 'inline',
+    fontSize: '14px',
+    padding: `0px ${theme.spacing(3)}px`,
+    width: 'fit-content',
+  },
+  assignmentName: {
+    color: theme.palette.white,
+  },
+  testStatus: {
+    display: 'inline',
+    fontSize: '14px',
+    padding: `0px ${theme.spacing(3)}px`,
+    width: 'fit-content',
+  },
+  testStatusSuccess: {
+    color: theme.palette.color.green,
+  },
+  testStatusFail: {
+    color: theme.palette.color.red,
+  },
+  testStatusIcon: {
+    verticalAlign: 'middle',
+    height: '14px',
+    width: '14px',
+  },
+  closeIconWrapper: {
+    display: 'flex',
+    alignContent: 'center',
+    float: 'right',
+    verticalAlign: 'middle',
+  },
+  testBody: {
+    padding: `${theme.spacing(3)}px ${theme.spacing(6)}px`,
+  },
+  testOutputTitle: {
+    color: theme.palette.white,
+    fontSize: '18px',
+    paddingBottom: `${theme.spacing(3)}px`,
+  },
+  testOutput: {
+    color: theme.palette.gray['100'],
+    fontSize: '16px',
+    paddingBottom: `${theme.spacing(3)}px`,
+  },
+}));
+