Merge branch 'development' into deployment

Author: jolynloh

frontend/src/components/QuestionImage/QuestionImage.test.tsx

@@ -1,12 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import QuestionImage from ".";
 
-Object.assign(navigator, {
-  clipboard: {
-    writeText: jest.fn(),
-  },
-});
-
 describe("Question Image", () => {
   const url = "https://example.com/image.jpg";
   const mockHandleClickOpen = jest.fn();
@@ -15,19 +9,23 @@ describe("Question Image", () => {
     render(<QuestionImage url={url} handleClickOpen={mockHandleClickOpen} />);
 
     const image = screen.getByAltText("question image");
-
     expect(image).toBeInTheDocument();
   });
 
   it("Copy Question Image url", () => {
+    const promptSpy = jest.spyOn(window, "prompt").mockImplementation(() => "");
+
     render(<QuestionImage url={url} handleClickOpen={mockHandleClickOpen} />);
 
     const copyButton = screen.getByLabelText("copy");
     fireEvent.click(copyButton);
 
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+    expect(promptSpy).toHaveBeenCalledWith(
+      "Copy to clipboard: Ctrl+C, Enter",
       `![image](${url})`
     );
+
+    promptSpy.mockRestore();
   });
 
   it("Expand Question Image", () => {

frontend/src/components/QuestionImage/index.tsx

@@ -1,7 +1,6 @@
 import { Box, ImageListItem, IconButton } from "@mui/material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import { toast } from "react-toastify";
 
 interface QuestionImageProps {
   url: string;
@@ -56,8 +55,11 @@ const QuestionImage: React.FC<QuestionImageProps> = ({
       >
         <IconButton
           onClick={() => {
-            navigator.clipboard.writeText(`![image](${url})`);
-            toast.success("Image URL copied to clipboard");
+            // switch to window.prompt since navigator.clipboard.writeText is not supported in HTTP
+            window.prompt(
+              "Copy to clipboard: Ctrl+C, Enter",
+              `![image](${url})`
+            );
           }}
           sx={{ color: "#fff" }}
           aria-label="copy"

frontend/src/theme.ts

@@ -1,4 +1,4 @@
-import grey from "@mui/material/colors/grey";
+import { grey } from "@mui/material/colors";
 import { createTheme } from "@mui/material/styles";
 
 const theme = createTheme({
@@ -47,13 +47,13 @@ const theme = createTheme({
         },
       },
     },
-      MuiListItemText: {
-        styleOverrides: {
-          primary: {
-            fontSize: "14px",
-          },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: {
+          fontSize: "14px",
         },
-      }
+      },
+    },
   },
 });