[dashboard] support ssh copy-paste with ssh keys

Author: mustard-mh

components/dashboard/src/workspaces/ConnectToSSHModal.tsx

@@ -4,12 +4,12 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Modal from "../components/Modal";
 import Tooltip from "../components/Tooltip";
 import copy from "../images/copy.svg";
-import AlertBox from "../components/AlertBox";
-import InfoBox from "../components/InfoBox";
+import Alert from "../components/Alert";
+import { getGitpodService } from "../service/service";
 
 function InputWithCopy(props: { value: string; tip?: string; className?: string }) {
     const [copied, setCopied] = useState<boolean>(false);
@@ -35,7 +35,7 @@ function InputWithCopy(props: { value: string; tip?: string; className?: string
                 autoFocus
                 className="w-full pr-8 overscroll-none"
                 type="text"
-                defaultValue={props.value}
+                value={props.value}
             />
             <div className="cursor-pointer" onClick={() => copyToClipboard(props.value)}>
                 <div className="absolute top-1/3 right-3">
@@ -55,39 +55,46 @@ interface SSHProps {
 }
 
 function SSHView(props: SSHProps) {
-    const sshCommand = `ssh '${props.workspaceId}#${props.ownerToken}@${props.ideUrl.replace(
-        props.workspaceId,
-        props.workspaceId + ".ssh",
-    )}'`;
+    const [hasSSHKey, setHasSSHKey] = useState(false);
+
+    useEffect(() => {
+        getGitpodService()
+            .server.hasSSHPublicKey()
+            .then((d) => {
+                setHasSSHKey(d);
+            })
+            .catch(console.error);
+    }, []);
+
+    const host = props.ideUrl.replace(props.workspaceId, props.workspaceId + ".ssh");
+    const sshPswCommand = `ssh '${props.workspaceId}#${props.ownerToken}@${host}'`;
+    const sshKeyCommand = `ssh '${props.workspaceId}@${host}'`;
+
     return (
-        <div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-6">
-            <div className="mt-1 mb-4">
-                <AlertBox>
-                    <p className="text-red-500 whitespace-normal text-base">
-                        <b>Anyone</b> on the internet with this command can access the running workspace. The command
-                        includes a generated access token that resets on every workspace restart.
-                    </p>
-                </AlertBox>
-                <InfoBox className="mt-4">
-                    <p className="text-gray-500 whitespace-normal text-base">
-                        Before connecting via SSH, make sure you have an existing SSH private key on your machine. You
-                        can create one using&nbsp;
-                        <a
-                            href="https://en.wikipedia.org/wiki/Ssh-keygen"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="gp-link"
-                        >
-                            ssh-keygen
-                        </a>
-                        .
-                    </p>
-                </InfoBox>
-                <p className="mt-4 text-gray-500 whitespace-normal text-base">
+        <div>
+            <div className="space-y-4">
+                <Alert type="warning" className="whitespace-normal">
+                    <b>Anyone</b> on the internet with this command can access the running workspace. The command
+                    includes a generated access token that resets on every workspace restart.
+                </Alert>
+                <Alert type="info" className="whitespace-normal">
+                    Before connecting via SSH, make sure you have an existing SSH private key on your machine. You can
+                    create one using&nbsp;
+                    <a
+                        href="https://en.wikipedia.org/wiki/Ssh-keygen"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="gp-link"
+                    >
+                        ssh-keygen
+                    </a>
+                    .
+                </Alert>
+                <p className="text-gray-500 whitespace-normal text-base">
                     The following shell command can be used to SSH into this workspace.
                 </p>
             </div>
-            <InputWithCopy value={sshCommand} tip="Copy SSH Command" />
+            <InputWithCopy className="my-2" value={hasSSHKey ? sshKeyCommand : sshPswCommand} tip="Copy SSH Command" />
         </div>
     );
 }
@@ -99,15 +106,17 @@ export default function ConnectToSSHModal(props: {
     onClose: () => void;
 }) {
     return (
-        // TODO: Use title and buttons props
-        <Modal visible={true} onClose={props.onClose}>
-            <h3 className="mb-4">Connect via SSH</h3>
-            <SSHView workspaceId={props.workspaceId} ownerToken={props.ownerToken} ideUrl={props.ideUrl} />
-            <div className="flex justify-end mt-6">
+        <Modal
+            title="Connect via SSH"
+            buttons={
                 <button className={"ml-2 secondary"} onClick={() => props.onClose()}>
                     Close
                 </button>
-            </div>
+            }
+            visible={true}
+            onClose={props.onClose}
+        >
+            <SSHView workspaceId={props.workspaceId} ownerToken={props.ownerToken} ideUrl={props.ideUrl} />
         </Modal>
     );
 }