Show the server display string that the user is going to connect to after selecting a compute instance and reloading the window. (#13600)

Author: shsuman

news/2 Fixes/13551.md

@@ -0,0 +1 @@
+Show the server display string that the user is going to connect to after selecting a compute instance and reloading the window.

src/datascience-ui/history-react/interactivePanel.tsx

@@ -237,6 +237,7 @@ ${buildSettingsCss(this.props.settings)}`}</style>
                         selectServer={this.props.selectServer}
                         selectKernel={this.props.selectKernel}
                         shouldShowTrustMessage={false}
+                        settings={this.props.settings}
                     />
                 );
             } else if (this.props.kernel.localizedUri === getLocString('DataScience.localJupyterServer', 'local')) {
@@ -252,6 +253,7 @@ ${buildSettingsCss(this.props.settings)}`}</style>
                 selectServer={this.props.selectServer}
                 selectKernel={this.props.selectKernel}
                 shouldShowTrustMessage={false}
+                settings={this.props.settings}
             />
         );
     }

src/datascience-ui/interactive-common/jupyterInfo.tsx

@@ -1,7 +1,9 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 'use strict';
+import { isEmpty, isNil } from 'lodash';
 import * as React from 'react';
+import { IDataScienceExtraSettings } from '../../client/datascience/types';
 import { Image, ImageName } from '../react-common/image';
 import { getLocString } from '../react-common/locReactSide';
 import { IFont, IServerState, ServerStatus } from './mainState';
@@ -14,6 +16,7 @@ export interface IJupyterInfoProps {
     kernel: IServerState;
     isNotebookTrusted?: boolean;
     shouldShowTrustMessage: boolean;
+    settings?: IDataScienceExtraSettings | undefined;
     selectServer(): void;
     launchNotebookTrustPrompt?(): void; // Native editor-specific
     selectKernel(): void;
@@ -33,10 +36,16 @@ export class JupyterInfo extends React.Component<IJupyterInfoProps> {
     }
 
     public render() {
+        let jupyterServerDisplayName: string = this.props.kernel.localizedUri;
+        if (!isNil(this.props.settings) && isEmpty(jupyterServerDisplayName)) {
+            const jupyterServerUriSetting: string = this.props.settings.jupyterServerURI;
+            if (!isEmpty(jupyterServerUriSetting) && this.isUriOfComputeInstance(jupyterServerUriSetting)) {
+                jupyterServerDisplayName = this.getComputeInstanceNameFromId(jupyterServerUriSetting);
+            }
+        }
+
         const serverTextSize =
-            getLocString('DataScience.jupyterServer', 'Jupyter Server').length +
-            this.props.kernel.localizedUri.length +
-            4; // plus 4 for the icon
+            getLocString('DataScience.jupyterServer', 'Jupyter Server').length + jupyterServerDisplayName.length + 4; // plus 4 for the icon
         const displayNameTextSize = this.props.kernel.displayName.length + this.props.kernel.jupyterServerStatus.length;
         const dynamicFont: React.CSSProperties = {
             fontSize: 'var(--vscode-font-size)', // Use the same font and size as the menu
@@ -54,8 +63,8 @@ export class JupyterInfo extends React.Component<IJupyterInfoProps> {
             <div className="kernel-status" style={dynamicFont}>
                 {this.renderTrustMessage()}
                 <div className="kernel-status-section kernel-status-server" style={serverTextWidth} role="button">
-                    <div className="kernel-status-text" title={this.props.kernel.localizedUri}>
-                        {getLocString('DataScience.jupyterServer', 'Jupyter Server')}: {this.props.kernel.localizedUri}
+                    <div className="kernel-status-text" title={jupyterServerDisplayName}>
+                        {getLocString('DataScience.jupyterServer', 'Jupyter Server')}: {jupyterServerDisplayName}
                     </div>
                     <Image
                         baseTheme={this.props.baseTheme}
@@ -120,4 +129,28 @@ export class JupyterInfo extends React.Component<IJupyterInfoProps> {
             ? getLocString('DataScience.disconnected', 'Disconnected')
             : getLocString('DataScience.connected', 'Connected');
     }
+
+    private isUriOfComputeInstance(uri: string): boolean {
+        try {
+            const parsedUrl: URL = new URL(uri);
+            return parsedUrl.searchParams.get('id') === 'azureml_compute_instances';
+        } catch (e) {
+            return false;
+        }
+    }
+
+    private getComputeInstanceNameFromId(id: string | undefined): string {
+        if (isNil(id)) {
+            return '';
+        }
+
+        const res: string[] | null = id.match(
+            /\/providers\/Microsoft.MachineLearningServices\/workspaces\/[^\/]+\/computes\/([^\/]+)(\/)?/
+        );
+        if (isNil(res) || res.length < 2) {
+            return '';
+        }
+
+        return res[1];
+    }
 }

src/datascience-ui/native-editor/toolbar.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { NativeMouseCommandTelemetry } from '../../client/datascience/constants';
+import { IDataScienceExtraSettings } from '../../client/datascience/types';
 import { JupyterInfo } from '../interactive-common/jupyterInfo';
 import {
     getSelectedAndFocusedInfo,
@@ -28,6 +29,7 @@ type INativeEditorDataProps = {
     kernel: IServerState;
     selectionFocusedInfo: SelectionAndFocusedInfo;
     variablesVisible: boolean;
+    settings?: IDataScienceExtraSettings;
 };
 export type INativeEditorToolbarProps = INativeEditorDataProps & {
     sendCommand: typeof actionCreators.sendCommand;
@@ -266,6 +268,7 @@ export class Toolbar extends React.PureComponent<INativeEditorToolbarProps> {
                         shouldShowTrustMessage={true}
                         isNotebookTrusted={this.props.isNotebookTrusted}
                         launchNotebookTrustPrompt={launchNotebookTrustPrompt}
+                        settings={this.props.settings}
                     />
                 </div>
                 <div className="toolbar-divider" />