fix(ggshield-view-provider): switch to WebviewView for customization (#2

)

* fix(ggshield-view-provider): switch to WebviewView for customization

media/main.css

@@ -0,0 +1,33 @@
+body {
+    height: 100vh;
+}
+
+body.vscode-light {
+    color: black;
+}
+
+body.vscode-dark {
+    color: white;
+}
+
+p {
+    font-size: 16px;
+}
+
+.anonymous {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+button.large {
+    background-color: #2200fb;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 5px;
+    margin: 2em 0;
+}

package.json

@@ -58,6 +58,7 @@
     "views": {
       "gitguardian": [
         {
+          "type": "webview",
           "id": "gitguardianView",
           "name": "gitguardian",
           "when": "gitguardian.isAuthenticated == false"

src/extension.ts

@@ -24,7 +24,7 @@ import {
 } from "vscode";
 import { GGShieldResolver } from "./lib/ggshield-resolver";
 import { isGitInstalled } from "./utils";
-import { GGShieldViewProvider } from "./ggshield-view";
+import { GitGuardianWebviewProvider } from "./ggshield-webview/gitguardian-webview-view";
 import { StatusBarStatus, updateStatusBarItem } from "./status-bar-utils";
 
 /**
@@ -83,8 +83,11 @@ export function activate(context: ExtensionContext) {
     context,
     configuration
   );
-  const ggshieldViewProvider = new GGShieldViewProvider(ggshieldResolver);
-  window.registerTreeDataProvider("gitguardianView", ggshieldViewProvider);
+  const ggshieldViewProvider = new GitGuardianWebviewProvider(
+    configuration,
+    context.extensionUri
+  );
+  window.registerWebviewViewProvider("gitguardianView", ggshieldViewProvider);
   context.subscriptions.push(ggshieldViewProvider);
 
   statusBar = window.createStatusBarItem(StatusBarAlignment.Left, 0);

src/ggshield-webview/gitguardian-webview-view.ts

@@ -0,0 +1,123 @@
+import * as vscode from "vscode";
+import { GGShieldConfiguration } from "../lib/ggshield-configuration";
+import { ggshieldAuthStatus } from "../lib/ggshield-api";
+
+const documentationUri = vscode.Uri.parse(
+  "https://docs.gitguardian.com/ggshield-docs/getting-started"
+);
+const feedbackFormUri = vscode.Uri.parse(
+  "https://docs.google.com/forms/d/e/1FAIpQLSc_BemGrdQfxp6lg7KgeDoB32XZg8yMfapk2gbemu0mVfskDQ/viewform"
+);
+
+export class GitGuardianWebviewProvider implements vscode.WebviewViewProvider {
+  public static readonly viewType = "gitguardian.gitguardianView";
+  private _view?: vscode.WebviewView;
+  private isAuthenticated: boolean = false;
+
+  constructor(
+    private ggshieldConfiguration: GGShieldConfiguration,
+    private readonly _extensionUri: vscode.Uri
+  ) {
+    this.checkAuthenticationStatus();
+  }
+
+  public async resolveWebviewView(
+    webviewView: vscode.WebviewView,
+    context: vscode.WebviewViewResolveContext,
+    _token: vscode.CancellationToken
+  ) {
+    this._view = webviewView;
+
+    webviewView.webview.options = {
+      enableScripts: true,
+      localResourceRoots: [vscode.Uri.joinPath(this._extensionUri, "media"), vscode.Uri.joinPath(this._extensionUri, "images")],
+    };
+
+    this.updateWebViewContent(webviewView);
+
+    webviewView.webview.onDidReceiveMessage(async (data) => {
+      if (data.type === "authenticate") {
+        vscode.commands.executeCommand("gitguardian.authenticate");
+      }
+    });
+  }
+
+  private async checkAuthenticationStatus() {
+    this.isAuthenticated = await ggshieldAuthStatus(this.ggshieldConfiguration);
+    this.updateWebViewContent(this._view);
+  }
+
+  private updateWebViewContent(webviewView?: vscode.WebviewView) {
+    if (webviewView) {
+      webviewView.webview.html = this.getHtmlForWebview(webviewView.webview);
+    }
+  }
+
+  private getHtmlForWebview(webview: vscode.Webview): string {
+    const styleUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionUri, "media", "main.css")
+    );
+    const logoUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this._extensionUri, "images", "gitguardian-icon-primary700-background.svg")
+    );
+
+    if (this.isAuthenticated) {
+      return `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <link href="${styleUri}" rel="stylesheet">
+          <title>GitGuardian - Authenticated</title>
+        </head>
+        <body>
+          <h2>How it works</h2>
+          <p>Each time you save a document, it will undergo automatic scanning, and any detected secrets will be highlighted as errors.</p>
+          <p><a href="${documentationUri}" target="_blank">Open documentation</a></p>
+
+          <h2>Feedback</h2>
+          <p>This extension is in beta.</p>
+          <p>Please share any issues or suggestions <a href="${feedbackFormUri}" target="_blank"> using the following feedback form</a>.</p>
+        </body>
+        </html>`;
+    } else {
+      return `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <link href="${styleUri}" rel="stylesheet">
+          <title>GitGuardian - Welcome</title>
+        </head>
+        <body>
+          <div class="anonymous">
+            <img src="${logoUri}" alt="GitGuardian Logo" height="100px"; />
+            <h1 style="margin-bottom:0px;">Welcome to GitGuardian</h1>
+            <p>Protect your code from secrets leakage</p>
+            <button class="button large" id="authenticate">Link your IDE to your account</button>
+          </div>
+          <script>
+            const vscode = acquireVsCodeApi();
+            document.getElementById('authenticate').addEventListener('click', () => {
+              vscode.postMessage({ type: 'authenticate' });
+            });
+          </script>
+        </body>
+        </html>`;
+    }
+  }
+
+  public refresh() {
+    this.checkAuthenticationStatus();
+  }
+
+  dispose(): void {
+    if (this._view) {
+      this._view.webview.onDidReceiveMessage(() => { });
+      this._view.webview.html = "";
+      this._view = undefined;
+    }
+  }
+}

src/status-bar-utils.ts

@@ -21,33 +21,39 @@ export function getStatusBarConfig(status: StatusBarStatus): StatusBarConfig {
       return {
         text: "Gitguardian - Initializing...",
         color: "statusBar.foreground",
+        // TODO: onclick open output channel if the bar is frozen and I want to see what's going on
       };
     case StatusBarStatus.unauthenticated:
       return {
         text: "Gitguardian - Please authenticate",
         color: "statusBarItem.warningBackground",
+        // TODO: onclick open sidebar
       };
     case StatusBarStatus.ready:
       return { text: "Gitguardian is ready", color: "statusBar.foreground" };
     case StatusBarStatus.scanning:
       return {
-        text: "Gitguardian - Scanning...",
+        text: "GitGuardian - scanning...",
         color: "statusBar.foreground",
+        // TODO: onclick open output channel if the bar is frozen and I want to see what's going on
       };
     case StatusBarStatus.secretFound:
       return {
-        text: "Gitguardian - Secret found",
+        text: "GitGuardian - found secret",
         color: "statusBarItem.errorBackground",
+        // TODO: onclick open problems panel
       };
     case StatusBarStatus.noSecretFound:
       return {
-        text: "Gitguardian - No secret found",
+        text: "GitGuardian - no secret found",
         color: "statusBar.foreground",
+        // TODO: onclick open sidebar
       };
     case StatusBarStatus.error:
       return {
-        text: "Gitguardian - error",
+        text: "GitGuardian - error",
         color: "statusBarItem.errorBackground",
+        // TODO: onclick open output channel panel
       };
     default:
       return { text: "", color: "statusBar.foreground" };