Deprecation banner for data viewer. (#15786)

* Deprecation banner for data viewer. * fix border * fix linter * fix prettier format
microsoft · Jun 21, 2024 · 8db6ecf · 8db6ecf
1 parent f18f386
commit 8db6ecf
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 2 deletions.
diff --git a/src/messageTypes.ts b/src/messageTypes.ts
@@ -157,6 +157,7 @@ export type LocalizedMessages = {
     deletePlot: string;
     selectedImageListLabel: string;
     selectedImageLabel: string;
+    dvDeprecationWarning: string;
 };
 // Map all messages to specific payloads
 export class IInteractiveWindowMapping {

diff --git a/src/platform/common/utils/localize.ts b/src/platform/common/utils/localize.ts
@@ -795,6 +795,9 @@ export namespace WebViews {
             'Do not translate the the Hyperlink text "<a href={0}>size limit</a>" and "<a href={1}>in a text editor</a>". However the text inside those tags can be translated'
         ]
     });
+    export const dvDeprecationWarning = l10n.t(
+        'The built-in data viewer will be deprecated and no longer usable starting with Visual Studio Code 1.92. Please <a href="command:workbench.extensions.search?%22@tag:jupyterVariableViewers%22">install other data viewing extensions</a> to continue inspecting data'
+    );
 }
 
 export namespace Deprecated {

diff --git a/src/platform/webviews/webviewHost.ts b/src/platform/webviews/webviewHost.ts
@@ -257,7 +257,8 @@ export abstract class WebviewHost<IMapping> implements IDisposable {
             exportPlot: localize.WebViews.exportPlot,
             deletePlot: localize.WebViews.deletePlot,
             selectedImageListLabel: localize.WebViews.selectedImageListLabel,
-            selectedImageLabel: localize.WebViews.selectedImageLabel
+            selectedImageLabel: localize.WebViews.selectedImageLabel,
+            dvDeprecationWarning: localize.WebViews.dvDeprecationWarning
         };
         this.postMessageInternal(SharedMessages.LocInit, JSON.stringify(locStrings)).catch(noop);
     }

diff --git a/src/webviews/extension-side/dataviewer/dataViewer.ts b/src/webviews/extension-side/dataviewer/dataViewer.ts
@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { inject, injectable, named } from 'inversify';
-import { EventEmitter, Memento, Uri, ViewColumn, env, window } from 'vscode';
+import { commands, EventEmitter, Memento, Uri, ViewColumn, env, window } from 'vscode';
 
 import { capturePerfTelemetry, sendTelemetryEvent } from '../../../telemetry';
 import { JupyterDataRateLimitError } from '../../../platform/errors/jupyterDataRateLimitError';
@@ -201,6 +201,10 @@ export class DataViewer extends WebviewPanelHost<IDataViewerMapping> implements
                 });
                 break;
 
+            case DataViewerMessages.DeprecationWarningClicked:
+                commands.executeCommand('workbench.extensions.search', '@tag:jupyterVariableViewers').then(noop, noop);
+                break;
+
             default:
                 break;
         }

diff --git a/src/webviews/extension-side/dataviewer/types.ts b/src/webviews/extension-side/dataviewer/types.ts
@@ -32,6 +32,7 @@ export namespace DataViewerMessages {
     export const GetSliceRequest = 'get_slice_request';
     export const RefreshDataViewer = 'refresh_data_viewer';
     export const SliceEnablementStateChanged = 'slice_enablement_state_changed';
+    export const DeprecationWarningClicked = 'deprecation_warning_clicked';
 }
 
 export interface IGetRowsRequest {
@@ -64,6 +65,7 @@ export type IDataViewerMapping = {
     [DataViewerMessages.GetSliceRequest]: IGetSliceRequest;
     [DataViewerMessages.RefreshDataViewer]: never | undefined;
     [DataViewerMessages.SliceEnablementStateChanged]: { newState: boolean };
+    [DataViewerMessages.DeprecationWarningClicked]: never | undefined;
 };
 
 export interface IDataFrameInfo {

diff --git a/src/webviews/webview-side/data-explorer/mainPanel.css b/src/webviews/webview-side/data-explorer/mainPanel.css
@@ -44,3 +44,23 @@
 .breadcrumb-codicon {
     color: var(--vscode-breadcrumb-foreground);
 }
+
+.custom-editor-banner {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--vscode-inputValidation-warningBackground);
+    color: var(--vscode-inputValidation-warningForeground, --vscode-foreground);
+    text-align: center;
+    overflow: hidden;
+    padding: 2px 6px;
+    background-color: var(--vscode-inputValidation-warningBackground);
+    grid-area: banner;
+    line-height: 26px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.custom-editor-banner a {
+    color: var(--vscode-textLink-foreground);
+}
diff --git a/src/webviews/webview-side/data-explorer/mainPanel.tsx b/src/webviews/webview-side/data-explorer/mainPanel.tsx
@@ -61,6 +61,7 @@ interface IMainPanelState {
     variableName?: string;
     fileName?: string;
     sliceExpression?: string;
+    deprecationBannerDismissed?: boolean;
 }
 
 export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState> implements IMessageHandler {
@@ -150,13 +151,41 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
         return (
             <div className="main-panel" ref={this.container}>
                 {progressBar}
+                {!this.state.deprecationBannerDismissed && this.renderDeprecationWarning()}
                 {this.renderBreadcrumb()}
                 {this.renderSliceControls()}
                 {this.state.totalRowCount > 0 && this.renderGrid()}
             </div>
         );
     };
 
+    public renderDeprecationWarning() {
+        return (
+            <div className="custom-editor-banner">
+                <div
+                    dangerouslySetInnerHTML={{
+                        __html: getLocString(
+                            'dvDeprecationWarning',
+                            'The built-in data viewer will be deprecated and no longer usable after the 1.92 build of Visual Studio Code. Please <a href="command:workbench.extensions.search?%22@tag:jupyterVariableViewers%22">install other data viewing extensions</a> to keep the ability to inspect data'
+                        )
+                    }}
+                    onClick={this.handleDeprecationWarningClick}
+                ></div>
+                <div
+                    className="codicon codicon-close"
+                    onClick={() => this.setState({ deprecationBannerDismissed: true })}
+                    style={{ cursor: 'pointer' }}
+                />
+            </div>
+        );
+    }
+
+    private handleDeprecationWarningClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (event.target instanceof HTMLAnchorElement) {
+            this.sendMessage(DataViewerMessages.DeprecationWarningClicked);
+        }
+    };
+
     public renderSliceControls = () => {
         if (
             this.state.isSliceDataEnabled &&