kernelboard/frontend/src/pages/leaderboard/components/CodeDialog.tsx at 1397f422aacc875272a57e4a36882584b4636d7f · gpu-mode/kernelboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  Stack,
  Typography,
} from "@mui/material";
import { useState } from "react";
import CodeBlock from "../../../components/codeblock/CodeBlock";
import { onDeleteSubmission } from "../../../api/api";

export function CodeDialog({
  code,
  submissionId = undefined,
  fileName = "file",
  title = "Submission",
}: {
  code: any;
  title?: string;
  submissionId?: number;
  fileName?: string;
}) {
  const [open, setOpen] = useState(false);

  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);

  const handleConfirmDelete = () => {
     onDeleteSubmission(submissionId);
    setConfirmDeleteOpen(false);
  };

  if (!code) return <Box>{fileName}</Box>;

  return (
    <>
      <Button
        variant="text"
        size="small"
        onClick={() => setOpen(true)}
        sx={{ textTransform: "none" }}
      >
        {fileName}
      </Button>
      <Dialog
        open={open}
        onClose={() => setOpen(false)}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>{title}</DialogTitle>
        <DialogContent dividers>
          <Box>
            <Typography variant="h6">
              Information
            </Typography>
            <Stack direction="row" spacing={2}>
              <Box>
                <Typography variant="body2" color="text.secondary">
                  File Name
                </Typography>
                <Typography variant="body1" fontWeight={200}>
                  {fileName}
                </Typography>
              </Box>
              <Box>
                <Typography variant="body2" color="text.secondary">
                  Submission ID
                </Typography>
                <Typography variant="body1" fontWeight={200}>
                  {submissionId}
                </Typography>
              </Box>
            </Stack>
            <Box marginBottom={1}>
              <Typography variant="h6">
                Admin Operations
              </Typography>
              <Stack direction="row" spacing={2}>
                <Box> Delete submission:</Box>
                <Button
                  color="error"
                  size="small"
                  variant="outlined"
                  onClick={() => setConfirmDeleteOpen(true)}
                >
                  delete
                </Button>
              </Stack>
            </Box>
          </Box>
          <Box>
            <CodeBlock code={code} />
          </Box>
        </DialogContent>
      </Dialog>

      {/* Confirm delete dialog */}
      <Dialog
        open={confirmDeleteOpen}
        onClose={() => setConfirmDeleteOpen(false)}
      >
        <DialogTitle>Delete submission?</DialogTitle>
        <DialogContent>
          <Typography variant="body2">
            Are you sure to delete submission {submissionId}, file {fileName}?
            This action cannot be undone. The submission and all related data
            will be permanently removed.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setConfirmDeleteOpen(false)}>Cancel</Button>

          <Button
            color="error"
            variant="contained"
            onClick={handleConfirmDelete}
          >
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
}