Merge main into mcq-ui

Author: shirsho-12

assets/icon.png

@@ -47,8 +47,8 @@
           ".sjs"
         ],
         "icon": {
-          "light": "assets/icon.png",
-          "dark": "assets/icon.png"
+          "light": "assets/icon.svg",
+          "dark": "assets/icon.svg"
         },
         "configuration": "./language-configuration.json"
       }
@@ -65,6 +65,31 @@
         "command": "source-academy.eval-editor",
         "key": "shift+enter"
       }
+    ],
+    "views": {
+      "source-academy": [
+        {
+          "id": "assessments",
+          "name": "Assessments",
+          "icon": "assets/icon.svg",
+          "contextualTitle": "Source Academy"
+        }
+      ]
+    },
+    "viewsContainers": {
+      "activitybar": [
+        {
+          "id": "source-academy",
+          "title": "Source Academy",
+          "icon": "assets/icon.svg"
+        }
+      ]
+    },
+    "viewsWelcome": [
+      {
+        "view": "assessments",
+        "contents": "Launch the Source Academy panel to begin coding.\n[Launch!](command:source-academy.show-panel)\nNavigate to Missions page to populate this panel."
+      }
     ]
   },
   "scripts-info": {

assets/icon.svg

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

package.json

@@ -0,0 +1,13 @@
+import * as vscode from "vscode";
+import { sendToFrontendWrapped } from "./showPanel";
+import Messages from "../utils/messages";
+
+export async function navigate(
+  context: vscode.ExtensionContext,
+  route: string,
+) {
+  const didNavigate = await sendToFrontendWrapped(Messages.Navigate(route));
+  if (!didNavigate) {
+    vscode.commands.executeCommand("source-academy.show-panel", route);
+  }
+}

src/commands/index.tsx

@@ -1,24 +1,21 @@
 import * as vscode from "vscode";
 // Allow using JSX within this file by overriding our own createElement function
 import React from "../utils/FakeReact";
-import ReactDOMServer from "react-dom/server";
 
-import Messages, {
-  MessageType,
-  MessageTypeNames,
-  sendToFrontend,
-} from "../utils/messages";
+import { MessageType, sendToFrontend } from "../utils/messages";
 import { LANGUAGES } from "../utils/languages";
 import { setWebviewContent } from "../utils/webview";
 import config from "../utils/config";
-import { Editor } from "../utils/editor";
 import { FRONTEND_ELEMENT_ID } from "../constants";
-import _ from "lodash";
 import { MessageHandler } from "../utils/messageHandler";
 
 let messageHandler = MessageHandler.getInstance();
+import { SOURCE_ACADEMY_ICON_URI } from "../extension";
 
-export async function showPanel(context: vscode.ExtensionContext) {
+export async function showPanel(
+  context: vscode.ExtensionContext,
+  route?: string,
+) {
   let language: string | undefined = context.workspaceState.get("language");
   if (!language) {
     language = LANGUAGES.SOURCE_1;
@@ -43,7 +40,8 @@ export async function showPanel(context: vscode.ExtensionContext) {
     context.subscriptions,
   );
 
-  const frontendUrl = new URL("/playground", config.frontendBaseUrl).href;
+  const iframeUrl = new URL(route ?? "/playground", config.frontendBaseUrl)
+    .href;
 
   setWebviewContent(
     messageHandler.panel,
@@ -56,7 +54,7 @@ export async function showPanel(context: vscode.ExtensionContext) {
     >
       <iframe
         id={FRONTEND_ELEMENT_ID}
-        src={frontendUrl}
+        src={iframeUrl}
         width="100%"
         height="100%"
         // @ts-ignore
@@ -74,6 +72,8 @@ export async function showPanel(context: vscode.ExtensionContext) {
 }
 
 export async function sendToFrontendWrapped(message: MessageType) {
+  sendToFrontend(messageHandler.panel, message);
+  // TODO: This returning of status code shouldn't be necessary after refactor
   if (!messageHandler.panel) {
     console.error("ERROR: panel is not set");
     return;

src/commands/navigate.tsx

@@ -1,18 +1,21 @@
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from "vscode";
+import { setupTreeView } from "./treeview";
 import { setupStatusBar } from "./statusbar/status";
-import { evalEditor } from "./commands/evalEditor";
 import { registerAllCommands } from "./commands";
 import { activateLspClient, deactivateLspClient } from "./lsp/client";
 import { LanguageClient } from "vscode-languageclient/node";
 
 // TODO: Don't expose this object directly, create an interface via a wrapper class
 export let client: LanguageClient;
 
+export let SOURCE_ACADEMY_ICON_URI: vscode.Uri;
+
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
+  setupTreeView(context);
   registerAllCommands(context);
 
   context.subscriptions.push(setupStatusBar(context));
@@ -25,6 +28,12 @@ export function activate(context: vscode.ExtensionContext) {
   const info = context.globalState.get("info") ?? {};
 
   client.sendRequest("source/publishInfo", info);
+
+  SOURCE_ACADEMY_ICON_URI = vscode.Uri.joinPath(
+    context.extensionUri,
+    "assets",
+    "icon.svg",
+  );
 }
 
 // This method is called when your extension is deactivated

src/commands/showPanel.tsx

@@ -0,0 +1,110 @@
+import * as vscode from "vscode";
+import { VscAssessmentOverview } from "../utils/messages";
+import { SOURCE_ACADEMY_ICON_URI } from "../extension";
+
+export let treeDataProvider: AssessmentsSidebarProvider;
+
+// This will be a source of bug on first extension loads!!
+let courseId: number;
+
+export function setupTreeView(context: vscode.ExtensionContext) {
+  courseId = context.globalState.get("courseId") as number;
+
+  treeDataProvider = new AssessmentsSidebarProvider(context);
+  vscode.window.createTreeView("assessments", {
+    treeDataProvider: treeDataProvider,
+  });
+}
+
+export class AssessmentsSidebarProvider
+  implements vscode.TreeDataProvider<BaseTreeItem>
+{
+  constructor(private context: vscode.ExtensionContext) {}
+
+  private _onDidChangeTreeData: vscode.EventEmitter<
+    BaseTreeItem | undefined | null | void
+  > = new vscode.EventEmitter<BaseTreeItem | undefined | null | void>();
+  readonly onDidChangeTreeData: vscode.Event<
+    BaseTreeItem | undefined | null | void
+  > = this._onDidChangeTreeData.event;
+
+  getTreeItem(element: BaseTreeItem): vscode.TreeItem {
+    return element;
+  }
+
+  getChildren(element?: BaseTreeItem): Thenable<BaseTreeItem[]> {
+    // @ts-ignore
+    const assessmentOverviews: VscAssessmentOverview[] =
+      this.context.globalState.get("assessmentOverviews");
+    if (!assessmentOverviews) {
+      return Promise.resolve([]);
+    }
+
+    if (!element) {
+      const assessmentTypes = [
+        ...new Set(assessmentOverviews.map((ao) => ao.type)),
+      ];
+      return Promise.resolve(
+        assessmentTypes.map((at) => new AssessmentFolder(at)),
+      );
+    }
+
+    if (element && element.type === "AssessmentFolder") {
+      const elem = element as AssessmentFolder;
+
+      return Promise.resolve(
+        assessmentOverviews
+          .filter((ao) => ao.type == elem.assessmentType)
+          .map((ao) => {
+            return new AssessmentOverview(ao);
+          }),
+      );
+    }
+    return Promise.resolve([]);
+  }
+
+  refresh() {
+    this._onDidChangeTreeData.fire();
+  }
+}
+
+class BaseTreeItem extends vscode.TreeItem {
+  type?: string;
+
+  constructor(
+    public readonly label: string,
+    public readonly collapsibleState: vscode.TreeItemCollapsibleState,
+  ) {
+    super(label, collapsibleState);
+  }
+
+  iconPath = {
+    light: SOURCE_ACADEMY_ICON_URI,
+    dark: SOURCE_ACADEMY_ICON_URI,
+  };
+}
+
+class AssessmentFolder extends BaseTreeItem {
+  constructor(public readonly assessmentType: string) {
+    super(assessmentType, vscode.TreeItemCollapsibleState.Collapsed);
+    this.type = "AssessmentFolder";
+  }
+}
+
+class AssessmentOverview extends BaseTreeItem {
+  constructor(assessmentOverview: VscAssessmentOverview) {
+    super(assessmentOverview.title, vscode.TreeItemCollapsibleState.None);
+
+    this.type = "AssessmentOverview";
+    this.description = assessmentOverview.closeAt;
+    // this.tooltip = "if needed in the future"
+
+    this.command = {
+      title: "Navigate",
+      command: "source-academy.navigate",
+      arguments: [
+        `/courses/${courseId}/${assessmentOverview.type.toLowerCase()}/${assessmentOverview.id}/0`,
+      ],
+    };
+  }
+}

src/extension.ts

@@ -12,6 +12,7 @@ import { setWebviewContent } from "./webview";
 import { Editor } from "./editor";
 import { client } from "../extension";
 import _ from "lodash";
+import { treeDataProvider } from "../treeview";
 import McqPanel from "../webview/components/McqPanel";
 
 /*
@@ -165,6 +166,15 @@ export class MessageHandler {
             sendToFrontend(this.panel, message);
           });
           break;
+        case MessageTypeNames.NotifyAssessmentsOverview:
+          const { assessmentOverviews, courseId } = message;
+          context.globalState.update(
+            "assessmentOverviews",
+            assessmentOverviews,
+          );
+          context.globalState.update("courseId", courseId);
+          treeDataProvider.refresh();
+          break;
       }
       console.log(`${Date.now()} Finish handleMessage: ${message.type}`);
     }