chore(desktop): add debug tool to simplify investigating workspace

import related issues
loft-sh · Jan 23, 2025 · 0e6e4e9 · 0e6e4e9
1 parent 52664d0
commit 0e6e4e9
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 25 deletions.
diff --git a/desktop/src/client/client.ts b/desktop/src/client/client.ts
@@ -133,6 +133,12 @@ class Client {
     }
   }
 
+  // emitEvent publishes to a given channel and invokes the corresponding handler.
+  // This is only intended to be used for debugging right now.
+  public emitEvent<T extends TChannelName>(e: TChannels[T]) {
+    event.emit("event", e)
+  }
+
   public fetchPlatform(): TPlatform {
     return os.platform()
   }

diff --git a/desktop/src/components/Layout/StatusBar.tsx b/desktop/src/components/Layout/StatusBar.tsx
@@ -1,19 +1,28 @@
 import { CheckIcon, StarIcon } from "@chakra-ui/icons"
 import {
   BoxProps,
+  Button,
   Checkbox,
   HStack,
   Icon,
   IconButton,
+  Input,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
   Text,
   Tooltip,
   useColorModeValue,
+  useDisclosure,
 } from "@chakra-ui/react"
-import { useMemo } from "react"
+import { useMemo, useRef } from "react"
 import { FaBug } from "react-icons/fa"
 import { HiDocumentMagnifyingGlass, HiMagnifyingGlassPlus } from "react-icons/hi2"
 import { client } from "../../client"
@@ -133,7 +142,9 @@ function OSSReportIssue() {
 }
 
 function DebugMenu() {
+  const inputRef = useRef<HTMLInputElement>(null)
   const debug = useDebug()
+  const { isOpen, onClose, onOpen: openModal } = useDisclosure()
 
   if (!debug.isEnabled) {
     return null
@@ -145,31 +156,82 @@ function DebugMenu() {
       e.stopPropagation()
     }
 
+  const handleImportLinkClicked = () => {
+    const rawLink = inputRef.current?.value
+    if (!rawLink) {
+      return
+    }
+    const url = new URL(rawLink.replace(/#/g, "?"))
+    const workspaceUID = url.searchParams.get("workspace-uid")
+    const workspaceID = url.searchParams.get("workspace-id")
+    const host = url.searchParams.get("devpod-pro-host")
+    const project = url.searchParams.get("project")
+    if (!workspaceUID || !workspaceID || !host || !project) {
+      console.error(
+        "Some parameters are missing for import",
+        url,
+        Array.from(url.searchParams.entries())
+      )
+
+      return
+    }
+    client.emitEvent({
+      type: "ImportWorkspace",
+      workspace_uid: workspaceUID,
+      workspace_id: workspaceID,
+      devpod_pro_host: host,
+      project,
+      options: {},
+    })
+    onClose()
+  }
+
   return (
-    <Menu>
-      <MenuButton>Debug</MenuButton>
-      <MenuList>
-        <MenuItem onClick={handleMenuItemClicked("commands")}>
-          <Checkbox isChecked={debug.options.commands} />
-          <Text paddingLeft="4">Print command logs</Text>
-        </MenuItem>
-        <MenuItem onClick={handleMenuItemClicked("actions")}>
-          <Checkbox isChecked={debug.options.actions} />
-          <Text paddingLeft="4">Print action logs</Text>
-        </MenuItem>
-        <MenuItem onClick={handleMenuItemClicked("workspaces")}>
-          <Checkbox isChecked={debug.options.workspaces} />
-          <Text paddingLeft="4">Print workspace logs</Text>
-        </MenuItem>
-        <MenuItem
-          onClick={(e) => {
-            client.openDir("AppData")
-            e.stopPropagation()
-          }}>
-          <Text paddingLeft="4">Open app_dir</Text>
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <>
+      <Menu>
+        <MenuButton>Debug</MenuButton>
+        <MenuList>
+          <MenuItem onClick={handleMenuItemClicked("commands")}>
+            <Checkbox isChecked={debug.options.commands} />
+            <Text paddingLeft="4">Print command logs</Text>
+          </MenuItem>
+          <MenuItem onClick={handleMenuItemClicked("actions")}>
+            <Checkbox isChecked={debug.options.actions} />
+            <Text paddingLeft="4">Print action logs</Text>
+          </MenuItem>
+          <MenuItem onClick={handleMenuItemClicked("workspaces")}>
+            <Checkbox isChecked={debug.options.workspaces} />
+            <Text paddingLeft="4">Print workspace logs</Text>
+          </MenuItem>
+          <MenuItem
+            onClick={(e) => {
+              client.openDir("AppData")
+              e.stopPropagation()
+            }}>
+            <Text paddingLeft="4">Open app_dir</Text>
+          </MenuItem>
+          <MenuItem
+            onClick={(e) => {
+              openModal()
+              e.stopPropagation()
+            }}>
+            <Text paddingLeft="4">Open import tool</Text>
+          </MenuItem>
+        </MenuList>
+      </Menu>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalHeader>Import workspace</ModalHeader>
+          <ModalBody pb="8">
+            <Text mb="4">Paste a platform import link here</Text>
+            <Input mb="4" ref={inputRef} type="text" />
+            <Button onClick={handleImportLinkClicked}>Import</Button>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   )
 }
 

diff --git a/desktop/src/images/codium_insiders.svg b/desktop/src/images/codium_insiders.svg