✨ Add extension state and analysis placeholders (#29)

ibolton336 · web-flow · commit a87c73402f9c · 2024-09-27T16:51:21.000-04:00
- Add placeholder menu items for analyzing specific files from the
explorer view
- Add placeholder startAnalysis command 
- Create utility function for getting the webview content since it is
being used in panel and sidebar webviews
- Create extension state to hold any new webview providers. Allows
access to the state without having to change function signatures to pass
in any new webviews to the registerCommand function as they are created.

Signed-off-by: Ian Bolton &lt;ibolton@redhat.com&gt;
diff --git a/vscode/package.json b/vscode/package.json
@@ -40,6 +40,17 @@
         "title": "Toggle Fullscreen",
         "category": "Konveyor",
         "icon": "$(fullscreen)"
+      },
+      {
+        "command": "konveyor.startAnalysis",
+        "title": "Start Analysis",
+        "category": "Konveyor"
+      }
+    ],
+    "submenus": [
+      {
+        "id": "konveyor.submenu",
+        "label": "Konveyor Actions"
       }
     ],
     "viewsContainers": {
@@ -74,6 +85,22 @@
           "command": "konveyor.toggleFullScreen",
           "group": "navigation@1",
           "when": "activeWebviewPanelId == konveyor.konveyorGUIView"
+        },
+        {
+          "command": "konveyor.startAnalysis",
+          "group": "navigation@1"
+        }
+      ],
+      "explorer/context": [
+        {
+          "submenu": "konveyor.submenu",
+          "group": "navigation@1"
+        }
+      ],
+      "konveyor.submenu": [
+        {
+          "command": "konveyor.startAnalysis",
+          "group": "navigation@1"
         }
       ]
     }
diff --git a/vscode/src/KonveyorGUIWebviewViewProvider.ts b/vscode/src/KonveyorGUIWebviewViewProvider.ts
@@ -1,5 +1,6 @@
 import * as vscode from "vscode";
 import { getNonce } from "./getNonce";
+import { getWebviewContent } from "./webviewContent";
 
 export class KonveyorGUIWebviewViewProvider
   implements vscode.WebviewViewProvider
@@ -24,6 +25,7 @@ export class KonveyorGUIWebviewViewProvider
   get webview() {
     return this._webview;
   }
+
   onWebviewReady(callback: (webview: vscode.Webview) => void) {
     this.webviewReadyCallback = callback;
     if (this._webview) {
@@ -47,55 +49,14 @@ export class KonveyorGUIWebviewViewProvider
       ],
     };
 
-    webviewView.webview.html = this.getSidebarContent(
+    webviewView.webview.html = getWebviewContent(
       this.extensionContext,
-      webviewView,
-      true,
+      webviewView.webview,
+      true
     );
 
     if (this.webviewReadyCallback) {
       this.webviewReadyCallback(webviewView.webview);
     }
   }
-
-  getSidebarContent(
-    context: vscode.ExtensionContext,
-    panel: vscode.WebviewPanel | vscode.WebviewView,
-    isFullScreen: boolean = false,
-  ): string {
-    const webview = panel.webview;
-    const extensionUri = context.extensionUri;
-    const scriptUri = webview.asWebviewUri(
-      vscode.Uri.joinPath(extensionUri, "out", "webview", "main.wv.js"),
-    );
-    const styleUri = webview.asWebviewUri(
-      vscode.Uri.joinPath(extensionUri, "media", "styles.css"),
-    );
-    const nonce = getNonce();
-
-    return `<!DOCTYPE html>
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${
-          webview.cspSource
-        }; script-src 'nonce-${nonce}' ${webview.cspSource} 'unsafe-inline';">
-        <title>Konveyor</title>
-        <link rel="stylesheet" href="${styleUri}">
-      </head>
-      <body>
-        <div id="root"></div>
-        <script nonce="${nonce}">
-          const vscode = acquireVsCodeApi();
-          window.addEventListener('load', function() {
-            vscode.postMessage({ command: 'startup', isFullScreen: ${isFullScreen} });
-            console.log('HTML started up. Full screen:', ${isFullScreen});
-          });
-        </script>
-        ${`<script nonce="${nonce}" src="${scriptUri}"></script>`}
-      </body>
-    </html>
-    `;
-  }
 }
diff --git a/vscode/src/VsCodeExtension.ts b/vscode/src/VsCodeExtension.ts
@@ -3,16 +3,18 @@ import { v4 as uuidv4 } from "uuid";
 import { KonveyorGUIWebviewViewProvider } from "./KonveyorGUIWebviewViewProvider";
 import { registerAllCommands } from "./commands";
 import { setupWebviewMessageListener } from "./webviewMessageHandler";
+import { ExtensionState } from "./extensionState";
 
 export class VsCodeExtension {
   private extensionContext: vscode.ExtensionContext;
-  private sidebar: KonveyorGUIWebviewViewProvider;
   private windowId: string;
+  private state: ExtensionState;
 
   constructor(context: vscode.ExtensionContext) {
     this.extensionContext = context;
     this.windowId = uuidv4();
-    this.sidebar = new KonveyorGUIWebviewViewProvider(
+
+    const sidebarProvider = new KonveyorGUIWebviewViewProvider(
       this.windowId,
       this.extensionContext,
     );
@@ -24,11 +26,15 @@ export class VsCodeExtension {
       );
     }
 
+    this.state = {
+      sidebarProvider,
+    };
+
     // Sidebar
     context.subscriptions.push(
       vscode.window.registerWebviewViewProvider(
         "konveyor.konveyorGUIView",
-        this.sidebar,
+        sidebarProvider,
         {
           webviewOptions: {
             retainContextWhenHidden: true,
@@ -37,12 +43,11 @@ export class VsCodeExtension {
       ),
     );
 
-    // Set up message listener when the webview is ready
-    this.sidebar.onWebviewReady((webview) => {
+    sidebarProvider.onWebviewReady((webview) => {
       setupWebviewMessageListener(webview);
     });
 
     // Commands
-    registerAllCommands(context, this.sidebar);
+    registerAllCommands(this.extensionContext, this.state);
   }
 }
diff --git a/vscode/src/commands.ts b/vscode/src/commands.ts
@@ -1,6 +1,8 @@
 import * as vscode from "vscode";
 import { KonveyorGUIWebviewViewProvider } from "./KonveyorGUIWebviewViewProvider";
 import { setupWebviewMessageListener } from "./webviewMessageHandler";
+import { ExtensionState } from "./extensionState";
+import { getWebviewContent } from "./webviewContent";
 
 let fullScreenPanel: vscode.WebviewPanel | undefined;
 
@@ -13,12 +15,39 @@ function getFullScreenTab() {
 
 const commandsMap: (
   extensionContext: vscode.ExtensionContext,
-  sidebar: KonveyorGUIWebviewViewProvider,
-) => { [command: string]: (...args: any) => any } = (
-  extensionContext,
-  sidebar,
+  state: ExtensionState
 ) => {
+  [command: string]: (...args: any) => any;
+} = (extensionContext, state) => {
+  const { sidebarProvider } = state;
   return {
+    "konveyor.startAnalysis": async (resource: vscode.Uri) => {
+      if (!resource) {
+        vscode.window.showErrorMessage("No file selected for analysis.");
+        return;
+      }
+
+      // Get the file path
+      const filePath = resource.fsPath;
+
+      // Perform your analysis logic here
+      try {
+        // For example, read the file content
+        const fileContent = await vscode.workspace.fs.readFile(resource);
+        const contentString = Buffer.from(fileContent).toString("utf8");
+
+        console.log(contentString, fileContent);
+
+        // TODO: Analyze the file content
+        vscode.window.showInformationMessage(`Analyzing file: ${filePath}`);
+
+        // Call your analysis function/module
+        // analyzeFileContent(contentString);
+      } catch (error) {
+        vscode.window.showErrorMessage(`Failed to analyze file: ${error}`);
+      }
+    },
+
     "konveyor.focusKonveyorInput": async () => {
       const fullScreenTab = getFullScreenTab();
       if (!fullScreenTab) {
@@ -28,14 +57,14 @@ const commandsMap: (
         // focus fullscreen
         fullScreenPanel?.reveal();
       }
-      // sidebar.webviewProtocol?.request("focusContinueInput", undefined);
+      // sidebar.webviewProtocol?.request("focusInput", undefined);
       // await addHighlightedCodeToContext(sidebar.webviewProtocol);
     },
     "konveyor.toggleFullScreen": () => {
       // Check if full screen is already open by checking open tabs
       const fullScreenTab = getFullScreenTab();
 
-      // Check if the active editor is the Continue GUI View
+      // Check if the active editor is the GUI View
       if (fullScreenTab && fullScreenTab.isActive) {
         //Full screen open and focused - close it
         vscode.commands.executeCommand("workbench.action.closeActiveEditor"); //this will trigger the onDidDispose listener below
@@ -61,10 +90,10 @@ const commandsMap: (
       fullScreenPanel = panel;
 
       //Add content to the panel
-      panel.webview.html = sidebar.getSidebarContent(
+      panel.webview.html = getWebviewContent(
         extensionContext,
-        panel,
-        true,
+        sidebarProvider?.webview || panel.webview,
+        true
       );
 
       setupWebviewMessageListener(panel.webview);
@@ -83,10 +112,10 @@ const commandsMap: (
 
 export function registerAllCommands(
   context: vscode.ExtensionContext,
-  sidebar: KonveyorGUIWebviewViewProvider
+  state: ExtensionState
 ) {
   for (const [command, callback] of Object.entries(
-    commandsMap(context, sidebar)
+    commandsMap(context, state)
   )) {
     context.subscriptions.push(
       vscode.commands.registerCommand(command, callback),
diff --git a/vscode/src/extensionState.ts b/vscode/src/extensionState.ts
@@ -0,0 +1,7 @@
+// extensionState.ts
+import { KonveyorGUIWebviewViewProvider } from "./KonveyorGUIWebviewViewProvider";
+
+export interface ExtensionState {
+  sidebarProvider: KonveyorGUIWebviewViewProvider;
+  // Add other shared components as needed
+}
diff --git a/vscode/src/webview/components/App.tsx b/vscode/src/webview/components/App.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+// Global variable vscode pulled from the window object.
 interface vscode {
   postMessage(message: any): void;
 }
diff --git a/vscode/src/webviewContent.ts b/vscode/src/webviewContent.ts
@@ -0,0 +1,42 @@
+import * as vscode from "vscode";
+import { getNonce } from "./getNonce";
+
+export function getWebviewContent(
+  context: vscode.ExtensionContext,
+  webview: vscode.Webview,
+  isFullScreen: boolean = false
+): string {
+  const extensionUri = context.extensionUri;
+  const scriptUri = webview.asWebviewUri(
+    vscode.Uri.joinPath(extensionUri, "out", "webview", "main.wv.js")
+  );
+  const styleUri = webview.asWebviewUri(
+    vscode.Uri.joinPath(extensionUri, "media", "styles.css")
+  );
+  const nonce = getNonce();
+
+  return `<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${
+          webview.cspSource
+        }; script-src 'nonce-${nonce}' ${webview.cspSource} 'unsafe-inline';">
+        <title>Konveyor</title>
+        <link rel="stylesheet" href="${styleUri}">
+      </head>
+      <body>
+        <div id="root"></div>
+        <script nonce="${nonce}">
+          const vscode = acquireVsCodeApi();
+          window.addEventListener('load', function() {
+            vscode.postMessage({ command: 'startup', isFullScreen: ${isFullScreen} });
+            console.log('HTML started up. Full screen:', ${isFullScreen});
+          });
+        </script>
+        ${`<script nonce="${nonce}" src="${scriptUri}"></script>`}
+      </body>
+    </html>
+    `;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`import * as React from "react";`
`2`	`2`
	`3`	`+// Global variable vscode pulled from the window object.`
`3`	`4`	`interface vscode {`
`4`	`5`	`postMessage(message: any): void;`
`5`	`6`	`}`