UI improvement: exercise status in sidebar tree

Several UI improvements are introduced:
- New icons for the different exercise statuses (not started, in progress and completed) are generated and introduced in the left sidebar. This allows students to quickly know at a glance the status of each of their exercises.
- These icons are also introduced in the teacher Dashboard, making it more visual and intuitive.
- Information about the status of exercises is added for students in the tooltip displayed when hovering with the mouse over each exercise.

In addition, a modification is introduced in the backend regarding the update of the status of the exercises and the tests are updated to support the new changes.

Author: diego-guerrero

vscode4teaching-extension/resources/dashboard/dashboard.css

@@ -1,3 +1,8 @@
+hr {
+    border: 1px solid var(--vscode-button-background);
+    margin: 1rem 0;
+}
+
 table {
     border-collapse: collapse;
     width: 100%;
@@ -23,22 +28,28 @@ body.vscode-dark td {
 }
 
 
+.status-icon-img {
+    height: 32px;
+}
+
 .not-started-cell {
-    background-color: var(--vscode-diffEditor-removedTextBackground);
+    background-color: rgba(239, 83, 80, 0.2);
 }
 
 .finished-cell {
-    background-color: var(--vscode-diffEditor-insertedTextBackground);
+    background-color: rgba(102, 187, 106, 0.2);
 }
 
-.onprogress-cell {
-    background-color: rgba(76, 149, 218, 0.644);
+.inprogress-cell {
+    background-color: rgba(249, 168, 37, 0.2);
 }
 
+
 button {
     background-color: var(--vscode-button-background);
     color: var(--vscode-button-foreground);
     border: none;
+    padding: 0.25rem 1rem;
     margin-right: 0.5rem;
 }
 

vscode4teaching-extension/resources/dashboard/img/exercise_finished.png

@@ -14,6 +14,7 @@ import { V4TItemType } from "./V4TItem/V4TItemType";
 import { Validators } from "./Validators";
 import * as fs from "fs";
 import * as path from "path";
+import { ExerciseUserInfo } from "../../model/serverModel/exercise/ExerciseUserInfo";
 
 /**
  * Tree view that lists extension's basic options like:
@@ -513,15 +514,29 @@ export class CoursesProvider implements vscode.TreeDataProvider<V4TItem> {
                     type = V4TItemType.ExerciseStudent;
                     commandName = "vscode4teaching.getexercisefiles";
                 }
-                const exerciseItems = course.exercises.map(
-                    (exercise) =>
-                        new V4TItem(exercise.name, type, vscode.TreeItemCollapsibleState.None, element, exercise, {
-                            command: commandName,
-                            title: "Get exercise files",
-                            arguments: [course ? course.name : null, exercise],
-                        })
-                );
-                return exerciseItems.length > 0 ? exerciseItems : [V4TBuildItems.NO_EXERCISES_ITEM];
+                if (course.exercises.length > 0){
+                    if (ModelUtils.isStudent(CurrentUser.getUserInfo())){
+                        return await Promise.all(course.exercises.map(
+                            async (exercise) => {
+                                const eui: ExerciseUserInfo = (await APIClient.getExerciseUserInfo(exercise.id)).data;
+                                return new V4TItem(exercise.name, type, vscode.TreeItemCollapsibleState.None, element, exercise, {
+                                    command: commandName,
+                                    title: "Get exercise files",
+                                    arguments: [course ? course.name : null, exercise],
+                                }, eui.status);
+                            }
+                        ));
+                    } else {
+                        return course.exercises.map(
+                            (exercise) =>
+                                new V4TItem(exercise.name, type, vscode.TreeItemCollapsibleState.None, element, exercise, {
+                                    command: commandName,
+                                    title: "Get exercise files",
+                                    arguments: [course ? course.name : null, exercise],
+                                })
+                        );
+                    }
+                }
             }
         }
         return [V4TBuildItems.NO_EXERCISES_ITEM];

vscode4teaching-extension/resources/dashboard/img/exercise_in_progress.png

@@ -13,6 +13,7 @@ export class V4TItem extends vscode.TreeItem {
         path.join(__dirname, "..", "resources") :
         path.join(__dirname, "..", "..", "..", "..", "resources");
 
+    public tooltip = this.getTooltip();
     public iconPath = this.getIconPath();
     public contextValue = this.type.toString();
 
@@ -23,36 +24,64 @@ export class V4TItem extends vscode.TreeItem {
         readonly parent?: V4TItem,
         readonly item?: Course | Exercise,
         readonly command?: vscode.Command,
+        readonly exerciseStatusOrHasSolution?: number
     ) {
         super(label, collapsibleState);
     }
 
+    private getTooltip() {
+        if (this.exerciseStatusOrHasSolution !== undefined && this.type === V4TItemType.ExerciseStudent) {
+            switch (this.exerciseStatusOrHasSolution){
+                case 0:
+                    return this.label + " (not started)";
+                case 1:
+                    return this.label + " (finished)";
+                case 2:
+                    return this.label + " (in progress)";
+            }
+        }
+        return this.label;
+    }
+
     private getIconPath() {
         switch (this.type) {
             case V4TItemType.Login: {
-                return this.iconPaths("login.png");
+                return this.getLightDarkPaths("login.png");
+            }
+            case V4TItemType.ExerciseStudent: {
+                if (this.exerciseStatusOrHasSolution !== undefined){
+                    switch (this.exerciseStatusOrHasSolution){
+                        case 0:
+                            return path.join(this.resourcesPath, "exercises_status_treeicons", "exercise_not_started.png");
+                        case 1:
+                            return path.join(this.resourcesPath, "exercises_status_treeicons", "exercise_finished.png");
+                        case 2:
+                            return path.join(this.resourcesPath, "exercises_status_treeicons", "exercise_in_progress.png");
+                    }
+                }
+                return this.getLightDarkPaths("noicon.png");
             }
             case V4TItemType.AddCourse: {
-                return this.iconPaths("add.png");
+                return this.getLightDarkPaths("add.png");
             }
             case V4TItemType.GetWithCode: {
-                return this.iconPaths("link.png");
+                return this.getLightDarkPaths("link.png");
             }
             case V4TItemType.Signup: // fall through case below
             case V4TItemType.SignupTeacher: {
-                return this.iconPaths("add_user.png");
+                return this.getLightDarkPaths("add_user.png");
             }
             case V4TItemType.Logout: {
-                return this.iconPaths("logout.png");
+                return this.getLightDarkPaths("logout.png");
             }
             case V4TItemType.NoCourses: // fall through case below
             case V4TItemType.NoExercises: {
-                return this.iconPaths("noicon.png");
+                return this.getLightDarkPaths("noicon.png");
             }
         }
     }
 
-    private iconPaths(iconPath: string) {
+    private getLightDarkPaths(iconPath: string) {
         return {
             light: path.join(this.resourcesPath, "light", iconPath),
             dark: path.join(this.resourcesPath, "dark", iconPath),

vscode4teaching-extension/resources/dashboard/img/exercise_not_started.png

@@ -287,10 +287,12 @@ export class DashboardWebview {
 
         // Local path to styles
         const cssPath = vscode.Uri.file(path.join(DashboardWebview.resourcesPath, "dashboard.css"));
-
         // Styles uri
         const cssUri = this.panel.webview.asWebviewUri(cssPath);
 
+        // Local URI to images (function)
+        const imgUri = (imgName: string) => this.panel.webview.asWebviewUri(vscode.Uri.file(path.join(DashboardWebview.resourcesPath, "img", imgName + ".png")));
+
         // Transform EUIs to html table data
         let rows: string = "";
         // for (const eui of this._euis) {
@@ -308,17 +310,17 @@ export class DashboardWebview {
             switch (eui.status) {
                 case 0: {
                     // not started
-                    rows = rows + '<td class="not-started-cell">Not started</td>\n';
+                    rows = rows + `<td class="not-started-cell"><img src="${imgUri("exercise_not_started")}" alt="Not started icon" class="status-icon-img"><div>Not started</div></td>\n`;
                     break;
                 }
                 case 1: {
                     // finished
-                    rows = rows + '<td class="finished-cell">Finished</td>\n';
+                    rows = rows + `<td class="finished-cell"><img src="${imgUri("exercise_finished")}" alt="Finished icon" class="status-icon-img"><div>Finished</div></td>\n`;
                     break;
                 }
                 case 2: {
                     // started but not finished
-                    rows = rows + '<td class="onprogress-cell">On progress</td>\n';
+                    rows = rows + `<td class="inprogress-cell"><img src="${imgUri("exercise_in_progress")}" alt="In progress icon" class="status-icon-img"><div>In progress</div></td>\n`;
                     break;
                 }
             }
@@ -365,7 +367,6 @@ export class DashboardWebview {
                     <div class="alert-info"><strong>Warning</strong>: There are no students registered in this course.</div>
                     ` : `
                     <hr/>
-                    <br/>
                     <table>
                         <tr>
                             ${