Files
tesseract/web/src/workspaces/workspace-info-dialog.tsx

63 lines
1.6 KiB
TypeScript

import {
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useContext } from "react";
import { WorkspaceTableRowContext } from "./workspace-table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PortInfoTab } from "./workspace-port-info-tab";
function WorkspaceInfoDialog() {
const workspace = useContext(WorkspaceTableRowContext);
return (
<DialogContent>
<DialogHeader>
<DialogTitle>{workspace.name}</DialogTitle>
<DialogDescription>{workspace.imageTag}</DialogDescription>
</DialogHeader>
<Tabs defaultValue="ssh">
<TabsList>
<TabsTrigger value="ssh">SSH Information</TabsTrigger>
<TabsTrigger value="ports">Forwarded Ports</TabsTrigger>
</TabsList>
<TabsContent value="ssh">
<SshTab />
</TabsContent>
<TabsContent value="ports">
<PortInfoTab />
</TabsContent>
</Tabs>
</DialogContent>
);
}
function TabContainer({ children }: React.PropsWithChildren) {
return <div className="pt-4">{children}</div>;
}
function SshTab() {
const workspace = useContext(WorkspaceTableRowContext);
if (!workspace.sshPort) {
return (
<p>SSH server is not running in this workspace, so SSH is unavailable.</p>
);
}
return (
<TabContainer>
<p className="text-sm text-muted-foreground">SSH Port</p>
<pre>{workspace.sshPort}</pre>
<p className="text-sm text-muted-foreground mt-4">Command</p>
<pre>
ssh -p {workspace.sshPort} testuser@{import.meta.env.VITE_HOST_NAME}
</pre>
</TabContainer>
);
}
export { WorkspaceInfoDialog };