initial commit. Very rough

frontend/src/metabase/App.tsx

@@ -33,6 +33,7 @@ import { AppContainer, AppContent, AppContentContainer } from "./App.styled";
 import ErrorBoundary from "./ErrorBoundary";
 import { NewModals } from "./new/components/NewModals/NewModals";
 import { Palette } from "./palette/components/Palette";
+import { DebugModal } from "./debug/DebugModal";
 
 const getErrorComponent = ({ status, data, context }: AppErrorDescriptor) => {
   if (status === 403 || data?.error_code === "unauthorized") {
@@ -117,6 +118,7 @@ function App({
               <UndoListing />
               <StatusListing />
               <NewModals />
+              <DebugModal />
             </AppContentContainer>
           </AppContainer>
           <Palette />

frontend/src/metabase/debug/DebugModal.tsx

@@ -0,0 +1,35 @@
+import TextArea from "metabase/core/components/TextArea";
+import { useSelector, useDispatch } from "metabase/lib/redux";
+import { closeModal } from "metabase/redux/diagnostic";
+import { Modal, Image, Text, Button, Flex, Box } from "metabase/ui";
+
+export const DebugModal = () => {
+  const modalOpen = useSelector(state => state.debug.modalOpen);
+  const image = useSelector(state => state.debug.screenshot);
+
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    dispatch(closeModal());
+  };
+
+  return (
+    <Modal
+      opened={modalOpen}
+      title="Send diagnostic info"
+      size="xl"
+      onClose={handleClose}
+    >
+      <Flex direction="column">
+        <Text>Screenshot: </Text>
+        <Image src={image} height={400} fit="contain" />
+
+        <Text>Additional info to reproduce:</Text>
+        <Box mb="1rem">
+          <TextArea defaultValue={""}></TextArea>
+        </Box>
+        <Button>Send to Ryan to fix</Button>
+      </Flex>
+    </Modal>
+  );
+};

frontend/src/metabase/palette/hooks/useCommandPaletteBasicActions.tsx

@@ -17,6 +17,7 @@ import {
   getHasNativeWrite,
   getHasDatabaseWithActionsEnabled,
 } from "metabase/selectors/data";
+import { takeScreenshot } from "metabase/redux/diagnostic";
 
 export const useCommandPaletteBasicActions = ({
   isLoggedIn,
@@ -164,7 +165,17 @@ export const useCommandPaletteBasicActions = ({
       },
     ];
 
-    return [...actions, ...browseActions];
+    const diagnosticAction: Action = {
+      id: "bug_report",
+      name: "Bug Report",
+      section: "basic",
+      icon: "warning",
+      perform: () => {
+        dispatch(takeScreenshot());
+      },
+    };
+
+    return [...actions, ...browseActions, diagnosticAction];
   }, [
     dispatch,
     hasDataAccess,

frontend/src/metabase/reducers-common.ts

@@ -16,6 +16,8 @@ import undo from "metabase/redux/undo";
 import upload from "metabase/redux/uploads";
 import { currentUser } from "metabase/redux/user";
 
+import { debugReducer } from "./redux/diagnostic";
+
 export const commonReducers = {
   // global reducers
   app,
@@ -32,4 +34,5 @@ export const commonReducers = {
   modal,
   dashboard,
   parameters: combineReducers(parameters),
+  debug: debugReducer
 };

frontend/src/metabase/redux/diagnostic.ts

@@ -0,0 +1,60 @@
+import { createReducer, createAction, createAsyncThunk } from "@reduxjs/toolkit";
+
+const OPEN_MODAL = "metabase/debug/OPEN_MODAL"
+export const openModal = createAction(OPEN_MODAL)
+
+const CLOSE_MODAL = "metabase/debug/CLOSE_MODAL";
+export const closeModal = createAction(CLOSE_MODAL);
+
+const TAKE_SCREENSHOT = "metabase/debug/TAKE_SCREENSHOT"
+export const takeScreenshot = createAsyncThunk(TAKE_SCREENSHOT, async (_, {dispatch}) => {
+
+  const canvas = document.createElement("canvas");
+  canvas.height = window.innerHeight;
+  canvas.width = window.innerWidth
+  const context = canvas.getContext("2d");
+  const screenshot = document.createElement("video");
+
+  screenshot.height = window.innerHeight;
+  screenshot.width = window.innerWidth
+
+  // document.appendChild(screenshot)
+
+  try {
+      const captureStream = await navigator.mediaDevices.getDisplayMedia({preferCurrentTab: true});
+      screenshot.srcObject = captureStream;
+      await screenshot.play();
+      context.drawImage(screenshot, 0, 0, window.innerWidth, window.innerHeight);
+      
+      const frame = canvas.toDataURL("image/png");
+      captureStream.getTracks().forEach(track => track.stop());
+      // window.location.href = frame;
+      console.log(frame)
+      dispatch(openModal({screenshotUrl: frame}))
+    
+     
+
+  } catch (err) {
+      console.error("Error: " + err);
+  }
+
+});
+
+const initialState = {
+  screenshot: null,
+  modalOpen: false
+}
+
+
+export const debugReducer = createReducer(initialState, builder => {
+  builder.addCase(openModal, (state, {payload}) => {
+    console.log(payload)
+    state.screenshot = payload.screenshotUrl;
+    state.modalOpen = true;
+  })
+
+  builder.addCase(closeModal, (state) => {
+    state.screenshot = null;
+    state.modalOpen = false;
+  })
+})