adds VS Code launch button (#5)

* adds VSCode connection button

* removes nonfunctional password param from uri

* make clipboard toast easier to see

Author: dzsquared

ui/package-lock.json

@@ -13,6 +13,7 @@
     "@mui/icons-material": "6.1.9",
     "@mui/material": "6.1.9",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0"
   },
   "scripts": {

ui/package.json

@@ -0,0 +1,64 @@
+import { osName } from 'react-device-detect';
+import { IconButton, Tooltip } from '@mui/material';
+import { DvrRounded } from '@mui/icons-material';
+import { copyToClipboard } from './ContainerList';
+
+// copies the password to the clipboard, then opens the connectionURI
+const openURI = (connectionURI: string, saPassword: string) => {
+    copyToClipboard(saPassword);
+    // wait 1 second
+    setTimeout(() => {
+        window.location.href = connectionURI;
+    }, 1000);
+}
+
+export const ConnectionOptions = ({ container, trackEvent }) => {
+
+if (osName !== "Windows") {
+    return (
+        <>
+            <Tooltip title="Connect in Azure Data Studio">
+                <IconButton size="small" aria-label='connect' disabled={!(container.Status === "running")}
+                    onClick={() => {
+                        trackEvent('OpenADS', { containerId: container.Id });
+                        openURI(container.adsConnectionURI(), container.SApassword);
+                    }}>
+                    <DvrRounded />
+                </IconButton>
+            </Tooltip>
+            <Tooltip title="Connect in VS Code">
+                <IconButton size="small" aria-label='connect' disabled={!(container.Status === "running")}
+                    onClick={() => {
+                        trackEvent('OpenVSC', { containerId: container.Id });
+                        openURI(container.vscConnectionURI(), container.SApassword);
+                    }}>
+                    <DvrRounded />
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+} else {
+    return (
+        <>
+        <Tooltip title="Connect in Azure Data Studio">
+            <IconButton size="small" aria-label='connect' disabled={!(container.Status === "running")}
+                onClick={() => {
+                    trackEvent('OpenADS', { containerId: container.Id });
+                    openURI(container.adsConnectionURI(), container.SApassword);
+                }}>
+                <DvrRounded />
+            </IconButton>
+        </Tooltip>
+            <Tooltip title="Connect in VS Code">
+                <IconButton size="small" aria-label='connect' disabled={!(container.Status === "running")}
+                    onClick={() => {
+                        trackEvent('OpenVSC', { containerId: container.Id });
+                        openURI(container.vscConnectionURI(), container.SApassword);
+                    }}>
+                    <DvrRounded />
+                </IconButton>
+            </Tooltip>
+        </>
+    );
+}
+}

ui/src/components/ConnectionOptions.tsx

@@ -1,25 +1,22 @@
 import * as React from 'react';
 import { AppBar, Box, Button, Chip, CircularProgress, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControl, IconButton, InputLabel, List, ListItem, ListItemIcon, ListItemText, OutlinedInput, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Toolbar, Tooltip, Typography } from '@mui/material';
-import { AddCircleRounded, ArticleRounded, ContentCopyRounded, StopRounded, PlayArrowRounded, KeyboardArrowUpRounded, KeyboardArrowDownRounded, TerminalRounded, DvrRounded, CloseRounded, DeleteRounded } from "@mui/icons-material";
+import { AddCircleRounded, ArticleRounded, ContentCopyRounded, StopRounded, PlayArrowRounded, KeyboardArrowUpRounded, KeyboardArrowDownRounded, TerminalRounded, CloseRounded, DeleteRounded } from "@mui/icons-material";
 
 import { SqlContainer } from '../models/SqlContainer';
+import { ConnectionOptions } from './ConnectionOptions';
 import { useDockerDesktopClient } from '../App';
 
-const copyToClipboard = (text: string) => {
+export const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
+    const ddClient = useDockerDesktopClient();
+    ddClient.desktopUI.toast.success("Password copied to clipboard");
 }
 
 const navigateToContainer = (containerId: string) => {
     const ddClient = useDockerDesktopClient();
     ddClient.desktopUI.navigate.viewContainerLogs(containerId);
 }
 
-// copies the password to the clipboard, then opens the connectionURI
-const openADS = (connectionURI: string, saPassword: string) => {
-    copyToClipboard(saPassword);
-    window.location.href = connectionURI;
-}
-
 var ContainerStatus = ({ status }) => {
     if (status === "running") {
         return (
@@ -205,15 +202,7 @@ var ContainerRow = ({ container, startContainer, stopContainer, deleteContainer,
                                 <ContentCopyRounded />
                             </IconButton>
                         </Tooltip>
-                        <Tooltip title="Connect in Azure Data Studio">
-                            <IconButton size="small" aria-label='connect' disabled={!(container.Status === "running")}
-                                onClick={() => {
-                                    trackEvent('OpenADS', { containerId: container.Id });
-                                    openADS(container.adsConnectionURI(), container.SApassword);
-                                }}>
-                                <DvrRounded />
-                            </IconButton>
-                        </Tooltip>
+                        <ConnectionOptions container={container} trackEvent={trackEvent} />
                         <Tooltip title="Container logs">
                             <IconButton size="small" aria-label='logs' onClick={() => {
                                 trackEvent('ViewLogs', { containerId: container.Id });

ui/src/components/ContainerList.tsx

@@ -41,7 +41,11 @@ export class SqlContainer {
     }
 
     public adsConnectionURI(): string {
-        return `azuredatastudio://openConnectionDialog?connectionName=${this.Name}&server=localhost,${this.Port1433}&authenticationType=SqlLogin&user=sa&password=${this.SApassword}&database=master&connectionProperties={"trustServerCertificate":"true"}`;
+        return `azuredatastudio://openConnectionDialog?connectionName=${this.Name}&server=localhost,${this.Port1433}&authenticationType=SqlLogin&user=sa&database=master&connectionProperties={"trustServerCertificate":"true"}`;
+    }
+
+    public vscConnectionURI(): string {
+        return `vscode://ms-mssql.mssql/connect?profileName=${this.Name}&server=localhost,${this.Port1433}&database=master&authenticationType=SqlLogin&user=sa&trustServerCertificate=true&persistSecurityInfo=true&savePassword=true`;
     }
 
 }