Merge branch 'main' of github.com:source-academy/vscode into chapter-selection

Author: mug1wara26

README.md

@@ -41,11 +41,16 @@ After installing the extension,
 1. Click on the newly-added Source Academy icon on the left sidebar.
 2. Launch the Source Academy panel.
 
-<img src="./docs/images/launch-panel-from-sidebar.png" width="600">
+   <img src="./docs/images/launch-panel-from-sidebar.png" width="600">
 
-Alternatively, use the `Source Academy: Show the Source Academy Panel` command.
+   Alternatively, use the `Source Academy: Show the Source Academy Panel` command.
 
-Once the panel loads, you'll be prompted to log in. Afterwards, begin coding by opening any assessment.
+3. Choose a login method and authenticate in your browser.
+
+   - When prompted, click **Open** to proceed to the external website.
+   - After login, click **Open** again to allow the extension to open the URI. Optionally, check `Do not ask me again for this extension`.
+
+4. You may now begin coding by opening any assessment.
 
 ### Changing the frontend
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "source-academy",
-  "version": "0.3.1",
+  "version": "0.4.2",
   "publisher": "source-academy",
   "license": "Apache-2.0",
   "displayName": "Source Academy",
@@ -26,7 +26,8 @@
       },
       {
         "command": "source-academy.show-panel",
-        "title": "Source Academy: Show the Source Academy panel"
+        "title": "Source Academy: Show the Source Academy panel",
+        "icon": "$(rocket)"
       },
       {
         "command": "source-academy.eval-editor",
@@ -38,9 +39,14 @@
       "properties": {
         "source-academy.frontendBaseUrl": {
           "type": "string",
-          "default": "https://frontend.cloud.heyzec.dedyn.io",
+          "default": "https://sourceacademy.nus.edu.sg",
           "description": "URL to the Source Academy frontend"
         },
+        "source-academy.backendBaseUrl": {
+          "type": "string",
+          "default": "https://api.sourceacademy.nus.edu.sg",
+          "description": "URL to the Source Academy backend (only needed for SAML logins)"
+        },
         "source-academy.workspaceFolder": {
           "type": "string",
           "default": ".sourceacademy",
@@ -74,11 +80,20 @@
         "key": "shift+enter"
       }
     ],
+    "menus": {
+      "view/title": [
+        {
+          "command": "source-academy.show-panel",
+          "when": "view == assessments",
+          "group": "navigation"
+        }
+      ]
+    },
     "views": {
       "source-academy": [
         {
           "id": "assessments",
-          "name": "Assessments",
+          "name": "",
           "icon": "assets/icon.svg",
           "contextualTitle": "Source Academy"
         }

scripts/lsp.js

@@ -22,7 +22,7 @@ async function main() {
 
 async function downloadLsp() {
   const outputFolder = getOutputDir();
-  const version = "0.1.9";
+  const version = "0.1.10";
   const lspFilename = "source-lsp.js";
   const url = `https://github.com/source-academy/source-lsp/releases/download/v${version}/${lspFilename}`;
   // const url = `https://github.com/source-academy/source-lsp/releases/latest/download/${lspFilename}`;

src/commands/index.tsx

@@ -12,7 +12,8 @@ const EXTENSION_ID = "source-academy";
  */
 const commands = (context: vscode.ExtensionContext) => ({
   pick: () => runLanguagePicker(context),
-  "show-panel": (route?: string) => showPanel(context, route),
+  "show-panel": (route?: string, altUrl?: string) =>
+    showPanel(context, route, altUrl),
   "eval-editor": () => evalEditor(context),
   navigate: (route: string) => navigate(context, route),
 });

src/commands/showPanel.tsx

@@ -16,34 +16,36 @@ let messageHandler = MessageHandler.getInstance();
 export async function showPanel(
   context: vscode.ExtensionContext,
   route?: string,
+  altUrl?: string,
 ) {
   let language: string | undefined = context.workspaceState.get("language");
   if (!language) {
     language = LANGUAGES.SOURCE_1;
   }
 
-  // Get a reference to the active editor (before the focus is switched to our newly created webview)
-  // firstEditor = vscode.window.activeTextEditor!;
-
-  messageHandler.panel = vscode.window.createWebviewPanel(
-    "source-academy-panel",
-    "Source Academy",
-    vscode.ViewColumn.Beside,
-    {
-      enableScripts: true, // Enable scripts in the webview
-      retainContextWhenHidden: true,
-    },
-  );
+  // Don't recreate the panel it already exists. There will only be one panel at anytime.
+  if (!messageHandler.panel) {
+    messageHandler.panel = vscode.window.createWebviewPanel(
+      "source-academy-panel",
+      "Source Academy",
+      vscode.ViewColumn.Beside,
+      {
+        enableScripts: true, // Enable scripts in w the webview
+        retainContextWhenHidden: true,
+      },
+    );
 
-  messageHandler.panel.webview.onDidReceiveMessage(
-    (message: MessageType) => messageHandler.handleMessage(context, message),
-    undefined,
-    context.subscriptions,
-  );
+    messageHandler.panel.webview.onDidReceiveMessage(
+      (message: MessageType) => messageHandler.handleMessage(context, message),
+      undefined,
+      context.subscriptions,
+    );
+  }
 
-  const iframeUrl = new URL(route ?? "/playground", config.frontendBaseUrl)
-    .href;
+  const iframeUrl =
+    altUrl ?? new URL(route ?? "/playground", config.frontendBaseUrl).href;
 
+  // equivalent to panel.webview.html = ...
   setWebviewContent(
     messageHandler.panel,
     context,

src/extension.ts

@@ -51,6 +51,32 @@ export function activate(context: vscode.ExtensionContext) {
       "*.js": "source",
     });
   }
+
+  vscode.window.registerUriHandler({
+    handleUri(uri: vscode.Uri) {
+      const searchParams = new URLSearchParams(uri.query);
+
+      const code = searchParams.get("code");
+      // The following params are available conditionally based on provider
+      const clientRequestId = searchParams.get("client-request-id"); // OAuth (NUS's IdP)
+      const provider = searchParams.get("provider"); // SAML
+
+      let route, url;
+      if (clientRequestId) {
+        // OAuth
+        route = `/login/vscode_callback?code=${code}&client-request-id=${clientRequestId}`;
+        url = null;
+      } else if (provider) {
+        // SAML
+        route = null;
+        // TODO: Let the frontend handle the contacting of backend, instead of us.
+        // Then, remove backendBaseUrl from schema and altUrl from showPanel
+        url = `${config.backendBaseUrl}/v2/auth/exchange?code=${code}&provider=${provider}`;
+      }
+
+      vscode.commands.executeCommand("source-academy.show-panel", route, url);
+    },
+  });
 }
 
 // This method is called when your extension is deactivated

src/treeview/index.ts

@@ -33,6 +33,9 @@ export class AssessmentsSidebarProvider
   }
 
   getChildren(element?: BaseTreeItem): Thenable<BaseTreeItem[]> {
+    // Synthetic root item that launches the Source Academy panel.
+    const launchItem = new PlaygroundItem();
+
     // @ts-ignore
     const assessmentOverviews: VscAssessmentOverview[] =
       this.context.globalState.get("assessmentOverviews");
@@ -44,14 +47,18 @@ export class AssessmentsSidebarProvider
       const assessmentTypes = [
         ...new Set(assessmentOverviews.map((ao) => ao.type)),
       ];
-      return Promise.resolve(
-        assessmentTypes.map((at) => new AssessmentFolder(at)),
-      );
+      const folders = assessmentTypes.map((at) => new AssessmentFolder(at));
+
+      return Promise.resolve([launchItem, ...folders]);
     }
 
     if (element && element.type === "AssessmentFolder") {
       const elem = element as AssessmentFolder;
 
+      if (!assessmentOverviews) {
+        return Promise.resolve([]);
+      }
+
       return Promise.resolve(
         assessmentOverviews
           .filter((ao) => ao.type == elem.assessmentType)
@@ -84,6 +91,21 @@ class BaseTreeItem extends vscode.TreeItem {
   };
 }
 
+/**
+ * Synthetic tree item that always appears at the top-level of the view.
+ */
+class PlaygroundItem extends BaseTreeItem {
+  constructor() {
+    super("Playground", vscode.TreeItemCollapsibleState.None);
+    this.type = "LaunchItem";
+    this.command = {
+      title: "Playground",
+      command: "source-academy.navigate",
+      arguments: ["/playground"],
+    };
+  }
+}
+
 class AssessmentFolder extends BaseTreeItem {
   constructor(public readonly assessmentType: string) {
     super(assessmentType, vscode.TreeItemCollapsibleState.Collapsed);

src/utils/config/schema.ts

@@ -3,7 +3,12 @@ import { ConfigSchemaUnion } from "./types";
 export default {
   frontendBaseUrl: {
     type: "string",
-    default: "https://frontend.cloud.heyzec.dedyn.io",
+    default: "https://sourceacademy.nus.edu.sg",
+  },
+  // TODO: Remove this config in the future. See the login URI handler for details.
+  backendBaseUrl: {
+    type: "string",
+    default: "https://api.sourceacademy.nus.edu.sg",
   },
   workspaceFolder: {
     type: "string",