Update ZenML tutorial extension to version 0.0.9, enhance sidebar functionality, and add auto-open tutorial feature. Adjust Dockerfile and package files accordingly. Improve error handling and logging during activation.

safoinme · safoinme · commit 136f3de82189 · 2025-07-11T02:26:24.000+01:00
diff --git a/.devcontainer/extensions/zenml-codespace-tutorial-0.0.1.vsix b/.devcontainer/extensions/zenml-codespace-tutorial-0.0.1.vsix
diff --git a/.devcontainer/extensions/zenml-codespace-tutorial-0.0.2.vsix b/.devcontainer/extensions/zenml-codespace-tutorial-0.0.2.vsix
diff --git a/.devcontainer/extensions/zenml-tutorial-0.0.9.vsix b/.devcontainer/extensions/zenml-tutorial-0.0.9.vsix
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.4.vsix
+          cd themes && npx @vscode/vsce package --out ./zenml-color-theme-0.0.9.vsix
 
       - name: Verify extensions were builts
         run: |
@@ -54,11 +54,11 @@ jobs:
             exit 1
           fi
           
-          if [ -f "themes/zenml-color-theme-0.0.4.vsix" ]; then
+          if [ -f "themes/zenml-color-theme-0.0.9.vsix" ]; then
             echo "Theme extension built successfully:"
-            ls -la themes/zenml-color-theme-0.0.4.vsix
+            ls -la themes/zenml-color-theme-0.0.9.vsix
           else
-            echo "ERROR: zenml-color-theme-0.0.4.vsix not found"
+            echo "ERROR: zenml-color-theme-0.0.9.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.4.vsix
+          path: themes/zenml-color-theme-0.0.9.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.4.vsix
+          git add themes/zenml-color-theme-0.0.9.vsix
           
           # Check if there are any changes to commit
           if git diff --staged --quiet; then
diff --git a/README.md b/README.md
@@ -101,6 +101,39 @@ The fastest way to get started - no local setup required.
 - **Inspect** output in the terminal and Dashboard link
 - **Experiment** by editing any example code
 
+## ⚙️ Extension Configuration
+
+### Auto-Open Tutorial
+
+By default, the tutorial homepage opens automatically when you start VS Code. You can control this behavior:
+
+#### 🔧 Quick Disable
+When the welcome message appears, click **"Don't Show Again"** to disable auto-opening.
+
+#### 🔧 Settings UI
+1. Open VS Code Settings (`Ctrl+,` or `Cmd+,`)
+2. Search for "zenml"
+3. Toggle **"Auto Open Tutorial"** on/off
+
+#### 🔧 Settings JSON
+Add to your VS Code settings:
+```json
+{
+  "zenml.autoOpenTutorial": false
+}
+```
+
+**Note**: You can always access the tutorial manually via the ZenML sidebar (book icon) or Command Palette (`Ctrl+Shift+P` → "ZenML: Open ZenML Tutorial Homepage").
+
+### Dashboard URL
+
+Configure the ZenML dashboard URL for pipeline run links:
+```json
+{
+  "zenml.dashboardUrl": "http://localhost:8237"
+}
+```
+
 ## 🛟 Getting Help
 
 - **📖 ZenML Docs**: [docs.zenml.io](https://docs.zenml.io)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
     "type": "git",
     "url": "https://github.com/zenml-io/vscode-tutorial-extension"
   },
-  "description": "Interactive ZenML pipeline tutorials",
-  "version": "0.0.4",
+  "description": "Interactive ZenML pipeline tutorials with step-by-step guidance and one-click execution",
+  "version": "0.0.9",
   "publisher": "zenml-io",
   "engines": {
     "vscode": "^1.90.0"
@@ -26,7 +26,8 @@
   "icon": "assets/zenml-icon.png",
   "license": "Apache-2.0",
   "activationEvents": [
-    "onStartupFinished"
+    "onStartupFinished",
+    "onView:zenmlTutorialView"
   ],
   "main": "./out/extension.js",
   "scripts": {
@@ -107,6 +108,11 @@
           "type": "string",
           "default": "http://localhost:8080",
           "description": "Base URL for the ZenML dashboard"
+        },
+        "zenml.autoOpenTutorial": {
+          "type": "boolean",
+          "default": true,
+          "description": "Automatically open the ZenML tutorial homepage when starting VS Code"
         }
       }
     },
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.4/pipelines
+WORKDIR /home/coder/extensions/zenml-io.zenml-tutorial-0.0.9/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
@@ -31,11 +31,21 @@ export async function activate(context: vscode.ExtensionContext) {
 
     // 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");
+    try {
+      const treeView = vscode.window.createTreeView('zenmlTutorialView', {
+        treeDataProvider: sidebarProvider,
+        showCollapseAll: false,
+        canSelectMany: false
+      });
+      context.subscriptions.push(treeView);
+      console.log("Registered sidebar provider successfully");
+      
+      // Force refresh to ensure the sidebar is populated
+      sidebarProvider.refresh();
+    } catch (error) {
+      console.error("Failed to register sidebar provider:", error);
+      vscode.window.showErrorMessage(`Failed to register sidebar: ${error}`);
+    }
 
     // Register command to start tutorial
     const startCommand = vscode.commands.registerCommand("zenml.startTutorial", () => {
@@ -51,32 +61,44 @@ export async function activate(context: vscode.ExtensionContext) {
       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";
-
-    console.log("Environment check:", {
-      isFirstTime,
-      isCodespace,
-      isTutorialEnabled
-    });
+    // Check if auto-open tutorial is enabled
+    const autoOpenTutorial = vscode.workspace
+      .getConfiguration("zenml")
+      .get<boolean>("autoOpenTutorial", true);
+    
+    console.log("Auto-open tutorial setting:", autoOpenTutorial);
 
-    // Auto-start the tutorial only on first installation or in codespaces
-    if (isFirstTime || isCodespace || isTutorialEnabled) {
-      console.log("Auto-starting tutorial");
-      orchestrator.start();
+    if (autoOpenTutorial) {
+      console.log("Auto-opening ZenML tutorial homepage");
+      
+      // Show welcome message and open homepage
+      vscode.window.showInformationMessage(
+        "Welcome to ZenML! 🎉 Opening the tutorial homepage...",
+        "Get Started",
+        "Don't Show Again"
+      ).then((selection) => {
+        if (selection === "Get Started") {
+          orchestrator.start();
+        } else if (selection === "Don't Show Again") {
+          // Disable auto-open for future sessions
+          vscode.workspace.getConfiguration("zenml").update("autoOpenTutorial", false, true);
+          vscode.window.showInformationMessage(
+            "Auto-open disabled. You can re-enable it in Settings or use the sidebar button to open the tutorial."
+          );
+        }
+      });
       
-      // Mark as activated for future sessions
-      if (isFirstTime) {
-        await context.globalState.update("zenml.hasBeenActivated", true);
-        console.log("Marked extension as activated");
-      }
+      // Auto-start homepage with slight delay to ensure everything is ready
+      setTimeout(() => {
+        orchestrator.start();
+      }, 500);
     } else {
-      console.log("Not auto-starting tutorial");
+      console.log("Auto-open tutorial is disabled by user setting");
     }
     console.log("ZenML Tutorial extension activation completed successfully");
   } catch (error) {
diff --git a/src/tutorialOrchestrator.ts b/src/tutorialOrchestrator.ts
@@ -61,7 +61,7 @@ export default class TutorialOrchestrator {
 
   public start() {
     this._loadProgress();
-    this._closeSidebar();
+    // Removed _closeSidebar() to keep the primary sidebar visible
     this._initializeRestoreCodeButtonListeners();
     this._closeAllTerminals();
     this._initializeTutorialTerminalClosedListener();
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.4"
+        "/home/coder/extensions/zenml-io.zenml-tutorial-0.0.9"
       );
     } 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.4`
+        }/extensions/zenml-io.zenml-tutorial-0.0.9`
       );
     }
   } else {
diff --git a/src/zenmlSidebarProvider.ts b/src/zenmlSidebarProvider.ts
@@ -8,41 +8,56 @@ export class ZenmlSidebarProvider implements vscode.TreeDataProvider<SidebarItem
   constructor(private orchestrator: TutorialOrchestrator) {
   }
 
+  private _createDefaultItems(): SidebarItem[] {
+    return [
+      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'
+      )
+    ];
+  }
+
   refresh(): void {
     this._onDidChangeTreeData.fire();
   }
 
   getTreeItem(element: SidebarItem): vscode.TreeItem {
-    return element;
+    try {
+      return element;
+    } catch (error) {
+      console.error('Error in getTreeItem:', error);
+      // Return a minimal tree item in case of error
+      return new vscode.TreeItem(element.label || 'Error', vscode.TreeItemCollapsibleState.None);
+    }
   }
 
   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'
-        )
-      ];
+    try {
+              if (!element) {
+          const items = this._createDefaultItems();
+          return Promise.resolve(items);
+        }
       
-      return Promise.resolve(items);
+      return Promise.resolve([]);
+    } catch (error) {
+      console.error('Error in getChildren:', error);
+      // Return basic items even if there's an error
+      return Promise.resolve(this._createDefaultItems());
     }
-    
-    return Promise.resolve([]);
   }
 }
 
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.4",
+  "version": "0.0.9",
   "publisher": "zenml-io",
   "engines": {
     "vscode": "^1.74.0"
