feat: add experimental button to open vscode locally (#5654)

* feat: add experimental button to open vscode locally

This uses the new Coder extension to open up any workspace
with a single click.

* Update site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.stories.tsx

Co-authored-by: Kira Pilot <kira@coder.com>

Co-authored-by: Kira Pilot <kira@coder.com>

site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.stories.tsx

@@ -0,0 +1,22 @@
+import { Story } from "@storybook/react"
+import { MockWorkspace, MockWorkspaceAgent } from "testHelpers/renderHelpers"
+import {
+  VSCodeDesktopButton,
+  VSCodeDesktopButtonProps,
+} from "./VSCodeDesktopButton"
+
+export default {
+  title: "components/VSCodeDesktopButton",
+  component: VSCodeDesktopButton,
+}
+
+const Template: Story<VSCodeDesktopButtonProps> = (args) => (
+  <VSCodeDesktopButton {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  userName: MockWorkspace.owner_name,
+  workspaceName: MockWorkspace.name,
+  agentName: MockWorkspaceAgent.name,
+}

site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx

@@ -0,0 +1,52 @@
+import Button from "@material-ui/core/Button"
+import { getApiKey } from "api/api"
+import { VSCodeIcon } from "components/Icons/VSCodeIcon"
+import { FC, PropsWithChildren, useState } from "react"
+
+export interface VSCodeDesktopButtonProps {
+  userName: string
+  workspaceName: string
+  agentName?: string
+}
+
+export const VSCodeDesktopButton: FC<
+  PropsWithChildren<VSCodeDesktopButtonProps>
+> = ({ userName, workspaceName, agentName }) => {
+  const [loading, setLoading] = useState(false)
+
+  return (
+    <Button
+      startIcon={<VSCodeIcon />}
+      size="small"
+      disabled={loading}
+      onClick={() => {
+        setLoading(true)
+        getApiKey()
+          .then(({ key }) => {
+            const query = new URLSearchParams({
+              owner: userName,
+              workspace: workspaceName,
+              url: location.origin,
+              token: key,
+            })
+            if (agentName) {
+              query.set("agent", agentName)
+            }
+
+            window.open(
+              `vscode://coder.coder-remote/open?${query.toString()}`,
+              "_blank",
+            )
+          })
+          .catch((ex) => {
+            console.error(ex)
+          })
+          .finally(() => {
+            setLoading(false)
+          })
+      }}
+    >
+      VS Code Desktop
+    </Button>
+  )
+}