feat: assessments sidebar

package.json

@@ -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": {

src/commands/index.tsx

@@ -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),
 });
 
 /**

src/commands/navigate.tsx

@@ -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/showPanel.tsx

@@ -12,8 +12,9 @@ import { setWebviewContent } from "../utils/webview";
 import config from "../utils/config";
 import { Editor } from "../utils/editor";
 import { FRONTEND_ELEMENT_ID } from "../constants";
-import { client } from "../extension";
+import { client, SOURCE_ACADEMY_ICON_URI } from "../extension";
 import _ from "lodash";
+import { treeDataProvider } from "../treeview";
 
 let panel: vscode.WebviewPanel | null = null;
 // This needs to be a reference to active
@@ -93,14 +94,23 @@ async function handleMessage(
       //   }
       //   activeEditor.replace(message.code, "Text");
       //   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}`);
   }
 
   handling = false;
 }
 
-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;
@@ -125,7 +135,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;
 
   // equivalent to panel.webview.html = ...
   setWebviewContent(
@@ -139,7 +150,7 @@ export async function showPanel(context: vscode.ExtensionContext) {
     >
       <iframe
         id={FRONTEND_ELEMENT_ID}
-        src={frontendUrl}
+        src={iframeUrl}
         width="100%"
         height="100%"
         // @ts-ignore
@@ -149,18 +160,16 @@ export async function showPanel(context: vscode.ExtensionContext) {
     </div>,
   );
 
-  panel.iconPath = vscode.Uri.joinPath(
-    context.extensionUri,
-    "assets",
-    "icon.png",
-  );
+  panel.iconPath = SOURCE_ACADEMY_ICON_URI;
 }
 
 // TODO: Move this to a util file
 export async function sendToFrontendWrapped(message: MessageType) {
+  // TODO: This returning of status code shouldn't be necessary after refactor
   if (!panel) {
     console.error("ERROR: panel is not set");
-    return;
+    return false;
   }
   sendToFrontend(panel, message);
+  return true;
 }

src/extension.ts

@@ -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/treeview/index.ts

@@ -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/utils/messages.ts

@@ -8,6 +8,14 @@ export const isVscWorkspaceLocation = (s: any) =>
   VscWorkspaceLocationArray.includes(s);
 export type VscWorkspaceLocation = "assessment" | "playground";
 
+export type VscAssessmentOverview = {
+  type: string;
+  closeAt: string;
+  id: number;
+  isPublished?: boolean;
+  title: string;
+};
+
 // ================================================================================
 // Message type definitions
 // ================================================================================
@@ -40,6 +48,16 @@ const Messages = createMessages({
   EvalEditor: (workspaceLocation: VscWorkspaceLocation) => ({
     workspaceLocation: workspaceLocation,
   }),
+  NotifyAssessmentsOverview: (
+    assessmentOverviews: VscAssessmentOverview[],
+    courseId: number,
+  ) => ({
+    assessmentOverviews,
+    courseId,
+  }),
+  Navigate: (route: string) => ({
+    route,
+  }),
 });
 
 export default Messages;