Update version to 0.0.4 in package files, enhance sidebar functionality with new commands, and add ZenML tutorial view. Adjust Dockerfile and .vscodeignore for new versioning. Improve logging for extension activation.

safoinme · safoinme · commit 64def8afc265 · 2025-07-10T22:37:50.000+01:00
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -6,7 +6,10 @@
       "Bash(npm run compile:*)",
       "Bash(npm run lint)",
       "Bash(rm:*)",
-      "Bash(npm run buildExtension:*)"
+      "Bash(npm run buildExtension:*)",
+      "Bash(find:*)",
+      "mcp__ide__getDiagnostics",
+      "Bash(code --version)"
     ],
     "deny": []
   }
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -10,7 +10,7 @@
         "workbench.startupEditor": "none"
       },
       "extensions": [
-        "zenml-io.zenml-codespace-tutorial"
+        "zenml-io.zenml-tutorial"
       ]
     }
   },
diff --git a/.github/workflows/build-extensions.yml b/.github/workflows/build-extensions.yml
@@ -41,7 +41,7 @@ jobs:
       - name: Build theme extension
         run: |
           echo "Building theme extension..."
-          cd themes && npx @vscode/vsce package --out ./zenml-color-theme-0.0.3.vsix
+          cd themes && npx @vscode/vsce package --out ./zenml-color-theme-0.0.4.vsix
 
       - name: Verify extensions were builts
         run: |
@@ -54,11 +54,11 @@ jobs:
             exit 1
           fi
           
-          if [ -f "themes/zenml-color-theme-0.0.3.vsix" ]; then
+          if [ -f "themes/zenml-color-theme-0.0.4.vsix" ]; then
             echo "Theme extension built successfully:"
-            ls -la themes/zenml-color-theme-0.0.3.vsix
+            ls -la themes/zenml-color-theme-0.0.4.vsix
           else
-            echo "ERROR: zenml-color-theme-0.0.3.vsix not found"
+            echo "ERROR: zenml-color-theme-0.0.4.vsix not found"
             exit 1
           fi
 
@@ -72,7 +72,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: theme-extension
-          path: themes/zenml-color-theme-0.0.3.vsix
+          path: themes/zenml-color-theme-0.0.4.vsix
 
       - name: Commit and push built extensions
         # Only commit on push to main/develop branches, not on PRs
@@ -83,7 +83,7 @@ jobs:
           
           # Add the built extensions to git
           git add .devcontainer/extensions/zenml-tutorial-*.vsix
-          git add themes/zenml-color-theme-0.0.3.vsix
+          git add themes/zenml-color-theme-0.0.4.vsix
           
           # Check if there are any changes to commit
           if git diff --staged --quiet; then
diff --git a/.vscodeignore b/.vscodeignore
@@ -10,4 +10,5 @@ vsc-extension-quickstart.md
 **/*.ts
 **/.vscode-test.*
 pipelinesBackup/
-node_modules/
+node_modules/
+.mypy_cache/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "url": "https://github.com/zenml-io/vscode-tutorial-extension"
   },
   "description": "Interactive ZenML pipeline tutorials",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "publisher": "zenml-io",
   "engines": {
     "vscode": "^1.90.0"
@@ -36,7 +36,7 @@
     "pretest": "npm run compile && npm run lint",
     "lint": "eslint src --ext ts",
     "test": "vscode-test",
-    "buildExtension": "vsce package && mkdir -p .devcontainer/extensions && rm -f .devcontainer/extensions/zenml-codespace-tutorial* && mv zenml-codespace-tutorial* .devcontainer/extensions"
+    "buildExtension": "vsce package && mkdir -p .devcontainer/extensions && rm -f .devcontainer/extensions/zenml-tutorial* && mv zenml-tutorial* .devcontainer/extensions"
   },
   "devDependencies": {
     "@types/mocha": "^10.0.7",
@@ -59,9 +59,47 @@
       {
         "command": "zenml.startTutorial",
         "title": "Start ZenML Tutorial",
-        "category": "ZenML"
+        "category": "ZenML",
+        "icon": "$(play)"
+      },
+      {
+        "command": "zenml.openHomepage",
+        "title": "Open ZenML Tutorial Homepage",
+        "category": "ZenML",
+        "icon": "$(home)"
       }
     ],
+    "menus": {
+      "commandPalette": [
+        {
+          "command": "zenml.startTutorial",
+          "when": "true"
+        },
+        {
+          "command": "zenml.openHomepage",
+          "when": "true"
+        }
+      ]
+    },
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "zenmlTutorial",
+          "title": "ZenML Tutorial",
+          "icon": "$(book)"
+        }
+      ]
+    },
+    "views": {
+      "zenmlTutorial": [
+        {
+          "id": "zenmlTutorialView",
+          "name": "Tutorial",
+          "when": "true"
+        }
+      ]
+    },
+
     "configuration": {
       "title": "ZenML",
       "properties": {
diff --git a/project.Dockerfile b/project.Dockerfile
@@ -7,7 +7,7 @@ FROM zenmldocker/zenml-codespace:${ZENML_VERSION}
 ARG PROJECT_DIR_NAME
 
 # Set the working directory for the project
-WORKDIR /home/coder/extensions/zenml-io.zenml-tutorial-0.0.3/pipelines
+WORKDIR /home/coder/extensions/zenml-io.zenml-tutorial-0.0.4/pipelines
 
 # Copy the specific project's requirements file
 COPY ./${PROJECT_DIR_NAME}/requirements.txt /tmp/requirements.txt
diff --git a/src/extension.ts b/src/extension.ts
@@ -7,30 +7,80 @@ import TutorialOrchestrator from "./tutorialOrchestrator";
 import createPipelineBackup from "./utils/createPipelineBackup";
 import getExtensionUri from "./utils/getExtensionUri";
 import setDirectory from "./utils/setExtensionDirectory";
+import { ZenmlSidebarProvider } from "./zenmlSidebarProvider";
 
 export async function activate(context: vscode.ExtensionContext) {
+  console.log("ZenML Tutorial extension is being activated");
+  
   try {
     const extensionUri = getExtensionUri(context);
+    console.log("Extension URI:", extensionUri.toString());
+    
     // Only set the directory if running in devcontainer
     if (vscode.env.remoteName) {
       setDirectory(extensionUri);
+      console.log("Set directory for remote environment");
     }
 
     createPipelineBackup(extensionUri);
+    console.log("Created pipeline backup");
 
     const tutorial = new Tutorial(tutorialMetadata, context);
     const orchestrator = new TutorialOrchestrator(context, tutorial);
+    console.log("Created tutorial and orchestrator instances");
+
+    // Register sidebar provider
+    const sidebarProvider = new ZenmlSidebarProvider(orchestrator);
+    const treeView = vscode.window.createTreeView('zenmlTutorialView', {
+      treeDataProvider: sidebarProvider
+    });
+    context.subscriptions.push(treeView);
+    console.log("Registered sidebar provider");
 
     // Register command to start tutorial
     const startCommand = vscode.commands.registerCommand("zenml.startTutorial", () => {
+      console.log("zenml.startTutorial command triggered");
+      vscode.window.showInformationMessage("Starting ZenML Tutorial...");
       orchestrator.start();
     });
 
-    context.subscriptions.push(startCommand);
+    // Register command to open homepage (welcome screen)
+    const homepageCommand = vscode.commands.registerCommand("zenml.openHomepage", () => {
+      console.log("zenml.openHomepage command triggered");
+      vscode.window.showInformationMessage("Opening ZenML Homepage...");
+      orchestrator.openSection(0); // Open welcome screen
+    });
+
+    context.subscriptions.push(startCommand, homepageCommand);
+    console.log("Registered commands:", ["zenml.startTutorial", "zenml.openHomepage"]);
+
+    // Check if this is the first time the extension is being activated
+    const isFirstTime = !context.globalState.get<boolean>("zenml.hasBeenActivated", false);
+    const isCodespace = process.env.CODESPACES === "true";
+    const isTutorialEnabled = process.env.ZENML_ENABLE_TUTORIAL === "true";
 
-    // Auto-start the tutorial
-    orchestrator.start();
+    console.log("Environment check:", {
+      isFirstTime,
+      isCodespace,
+      isTutorialEnabled
+    });
+
+    // Auto-start the tutorial only on first installation or in codespaces
+    if (isFirstTime || isCodespace || isTutorialEnabled) {
+      console.log("Auto-starting tutorial");
+      orchestrator.start();
+      
+      // Mark as activated for future sessions
+      if (isFirstTime) {
+        await context.globalState.update("zenml.hasBeenActivated", true);
+        console.log("Marked extension as activated");
+      }
+    } else {
+      console.log("Not auto-starting tutorial");
+    }
+    console.log("ZenML Tutorial extension activation completed successfully");
   } catch (error) {
+    console.error("ZenML Tutorial activation error:", error);
     vscode.window.showErrorMessage(`Failed to activate ZenML Tutorial: ${error}`);
   }
 }
diff --git a/src/tutorialOrchestrator.ts b/src/tutorialOrchestrator.ts
@@ -316,6 +316,8 @@ export default class TutorialOrchestrator {
     if (this._webviewPanel) {
       this._webviewPanel.title = title;
       this._webviewPanel.webview.html = this._generateHTML(docContent);
+      // Ensure the webview is visible
+      this._webviewPanel.reveal(vscode.ViewColumn.One);
     }
   }
 
diff --git a/src/utils/getExtensionUri.ts b/src/utils/getExtensionUri.ts
@@ -9,14 +9,14 @@ export default function getExtensionUri(context: vscode.ExtensionContext) {
     if (isTutorialEnabled) {
       // Use the codespace container extension path when tutorial is enabled
       return vscode.Uri.file(
-        "/home/coder/extensions/zenml-io.zenml-tutorial-0.0.3"
+        "/home/coder/extensions/zenml-io.zenml-tutorial-0.0.4"
       );
     } else {
       // Use the original logic for other environments
       return vscode.Uri.file(
         `/root/${
           isCodespace ? ".vscode-remote" : ".vscode-server"
-        }/extensions/zenml-io.zenml-tutorial-0.0.3`
+        }/extensions/zenml-io.zenml-tutorial-0.0.4`
       );
     }
   } else {
diff --git a/src/zenmlSidebarProvider.ts b/src/zenmlSidebarProvider.ts
@@ -0,0 +1,62 @@
+import * as vscode from 'vscode';
+import TutorialOrchestrator from './tutorialOrchestrator';
+
+export class ZenmlSidebarProvider implements vscode.TreeDataProvider<SidebarItem> {
+  private _onDidChangeTreeData: vscode.EventEmitter<SidebarItem | undefined | null | void> = new vscode.EventEmitter<SidebarItem | undefined | null | void>();
+  readonly onDidChangeTreeData: vscode.Event<SidebarItem | undefined | null | void> = this._onDidChangeTreeData.event;
+
+  constructor(private orchestrator: TutorialOrchestrator) {
+  }
+
+  refresh(): void {
+    this._onDidChangeTreeData.fire();
+  }
+
+  getTreeItem(element: SidebarItem): vscode.TreeItem {
+    return element;
+  }
+
+  getChildren(element?: SidebarItem): Thenable<SidebarItem[]> {
+    if (!element) {
+      const items = [
+        new SidebarItem(
+          'Welcome to ZenML Tutorial!',
+          'Interactive tutorial introduction',
+          vscode.TreeItemCollapsibleState.None,
+          undefined,
+          'info'
+        ),
+        new SidebarItem(
+          'Open Homepage',
+          'Open the tutorial homepage',
+          vscode.TreeItemCollapsibleState.None,
+          {
+            command: 'zenml.openHomepage',
+            title: 'Open Homepage',
+            arguments: []
+          },
+          'home'
+        )
+      ];
+      
+      return Promise.resolve(items);
+    }
+    
+    return Promise.resolve([]);
+  }
+}
+
+class SidebarItem extends vscode.TreeItem {
+  constructor(
+    public readonly label: string,
+    public readonly tooltip: string,
+    public readonly collapsibleState: vscode.TreeItemCollapsibleState,
+    public readonly command?: vscode.Command,
+    public readonly iconName?: string
+  ) {
+    super(label, collapsibleState);
+    this.tooltip = tooltip;
+    this.command = command;
+    this.iconPath = new vscode.ThemeIcon(iconName || 'book');
+  }
+}
diff --git a/themes/package.json b/themes/package.json
@@ -2,7 +2,7 @@
   "name": "zenml-color-theme",
   "displayName": "ZenML Color Theme",
   "description": "VS Code theme matching ZenML Dashboard",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "publisher": "zenml-io",
   "engines": {
     "vscode": "^1.74.0"
diff --git a/zenml-tutorial-0.0.4.vsix b/zenml-tutorial-0.0.4.vsix

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`"workbench.startupEditor": "none"`
`11`	`11`	`},`
`12`	`12`	`"extensions": [`
`13`		`- "zenml-io.zenml-codespace-tutorial"`
	`13`	`+ "zenml-io.zenml-tutorial"`
`14`	`14`	`]`
`15`	`15`	`}`
`16`	`16`	`},`
Original file line number	Diff line number	Diff line change
`@@ -316,6 +316,8 @@ export default class TutorialOrchestrator {`
`316`	`316`	`if (this._webviewPanel) {`
`317`	`317`	`this._webviewPanel.title = title;`
`318`	`318`	`this._webviewPanel.webview.html = this._generateHTML(docContent);`
	`319`	`+ // Ensure the webview is visible`
	`320`	`+ this._webviewPanel.reveal(vscode.ViewColumn.One);`
`319`	`321`	`}`
`320`	`322`	`}`
`321`	`323`