feat(submission): add copy code button for programming files

client/app/bundles/course/assessment/submission/components/ReadOnlyEditor/index.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 
 import { annotationShape, fileShape } from '../../propTypes';
 import translations from '../../translations';
+import CopyCodeButton from '../answers/Programming/CopyCodeButton';
 import ProgrammingFileDownloadChip from '../answers/Programming/ProgrammingFileDownloadChip';
 
 import NarrowEditor from './NarrowEditor';
@@ -212,7 +213,10 @@ class ReadOnlyEditor extends Component {
     return (
       <>
         <div className="flex items-center justify-between mt-2">
-          <ProgrammingFileDownloadChip file={file} />
+          <div className="flex items-center gap-2">
+            <ProgrammingFileDownloadChip file={file} />
+            <CopyCodeButton file={file} />
+          </div>
           <div>
             {this.renderShowCommentsPanel()}
             {this.renderExpandAllToggle()}

client/app/bundles/course/assessment/submission/components/answers/Programming/CopyCodeButton.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { ContentCopy } from '@mui/icons-material';
+import { Chip } from '@mui/material';
+import { ProgrammingContent } from 'types/course/assessment/submission/answer/programming';
+
+import toast from 'lib/hooks/toast';
+
+interface Props {
+  file: ProgrammingContent;
+}
+
+const CopyCodeButton: FC<Props> = (props) => {
+  const { file } = props;
+
+  const handleCopy = (): void => {
+    navigator.clipboard.writeText(file.content).then(() => {
+      toast.success('Copied to clipboard');
+    });
+  };
+
+  return (
+    <Chip
+      className="copy-code-button"
+      icon={<ContentCopy />}
+      label="Copy"
+      onClick={handleCopy}
+      size="small"
+      variant="outlined"
+    />
+  );
+};
+
+export default CopyCodeButton;