Show status of Jupyter server (Connected/Disconnected) when the user hovers over the status icon (microsoft#13544)

shsuman · web-flow · commit ac899520ceb6 · 2020-08-20T12:43:32.000-07:00
diff --git a/news/2 Fixes/13543.md b/news/2 Fixes/13543.md
@@ -0,0 +1 @@
+Added tooltip to indicate status of server connection
diff --git a/package.nls.json b/package.nls.json
@@ -179,6 +179,8 @@
     "DataScience.connectingToJupyter": "Connecting to Jupyter server",
     "DataScience.connectingToIPyKernel": "Connecting to IPython kernel",
     "DataScience.connectedToIPyKernel": "Connected.",
+    "DataScience.connected": "Connected",
+    "DataScience.disconnected": "Disconnected",
     "Experiments.inGroup": "User belongs to experiment group '{0}'",
     "Interpreters.RefreshingInterpreters": "Refreshing Python Interpreters",
     "Interpreters.entireWorkspace": "Entire workspace",
diff --git a/src/client/common/utils/localize.ts b/src/client/common/utils/localize.ts
@@ -1106,6 +1106,8 @@ export namespace DataScience {
         'DataScience.previewNotebookOnlySupportedInVSCInsiders',
         'The Preview Notebook Editor is supported only in the Insiders version of Visual Studio Code.'
     );
+    export const connected = localize('DataScience.connected', 'Connected');
+    export const disconnected = localize('DataScience.disconnected', 'Disconnected');
 }
 
 export namespace StartPage {
diff --git a/src/datascience-ui/interactive-common/jupyterInfo.tsx b/src/datascience-ui/interactive-common/jupyterInfo.tsx
@@ -61,6 +61,7 @@ export class JupyterInfo extends React.Component<IJupyterInfoProps> {
                         baseTheme={this.props.baseTheme}
                         class="image-button-image kernel-status-icon"
                         image={this.getIcon()}
+                        title={this.getStatus()}
                     />
                 </div>
                 <div className="kernel-status-divider" />
@@ -113,4 +114,10 @@ export class JupyterInfo extends React.Component<IJupyterInfoProps> {
             ? ImageName.JupyterServerDisconnected
             : ImageName.JupyterServerConnected;
     }
+
+    private getStatus() {
+        return this.props.kernel.jupyterServerStatus === ServerStatus.NotStarted
+            ? getLocString('DataScience.disconnected', 'Disconnected')
+            : getLocString('DataScience.connected', 'Connected');
+    }
 }
diff --git a/src/datascience-ui/react-common/image.tsx b/src/datascience-ui/react-common/image.tsx
@@ -238,6 +238,7 @@ interface IImageProps {
     baseTheme: string;
     image: ImageName;
     class: string;
+    title?: string;
 }
 
 export class Image extends React.Component<IImageProps> {
@@ -249,6 +250,6 @@ export class Image extends React.Component<IImageProps> {
         const key = ImageName[this.props.image].toString();
         const image = images.hasOwnProperty(key) ? images[key] : images.Cancel; // Default is cancel.
         const source = this.props.baseTheme.includes('dark') ? image.dark : image.light;
-        return <InlineSVG className={this.props.class} src={source} />;
+        return <InlineSVG className={this.props.class} src={source} title={this.props.title} />;
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Added tooltip to indicate status of server connection`
Original file line number	Diff line number	Diff line change
`@@ -1106,6 +1106,8 @@ export namespace DataScience {`
`1106`	`1106`	`'DataScience.previewNotebookOnlySupportedInVSCInsiders',`
`1107`	`1107`	`'The Preview Notebook Editor is supported only in the Insiders version of Visual Studio Code.'`
`1108`	`1108`	`);`
	`1109`	`+ export const connected = localize('DataScience.connected', 'Connected');`
	`1110`	`+ export const disconnected = localize('DataScience.disconnected', 'Disconnected');`
`1109`	`1111`	`}`
`1110`	`1112`
`1111`	`1113`	`export namespace StartPage {`
Original file line number	Diff line number	Diff line change
`@@ -238,6 +238,7 @@ interface IImageProps {`
`238`	`238`	`baseTheme: string;`
`239`	`239`	`image: ImageName;`
`240`	`240`	`class: string;`
	`241`	`+ title?: string;`
`241`	`242`	`}`
`242`	`243`
`243`	`244`	`export class Image extends React.Component<IImageProps> {`
`@@ -249,6 +250,6 @@ export class Image extends React.Component<IImageProps> {`
`249`	`250`	`const key = ImageName[this.props.image].toString();`
`250`	`251`	`const image = images.hasOwnProperty(key) ? images[key] : images.Cancel; // Default is cancel.`
`251`	`252`	`const source = this.props.baseTheme.includes('dark') ? image.dark : image.light;`
`252`		`- return <InlineSVG className={this.props.class} src={source} />;`
	`253`	`+ return <InlineSVG className={this.props.class} src={source} title={this.props.title} />;`
`253`	`254`	`}`
`254`	`255`	`}`