Redesign Avenger dashboard (#2437)

* feat: redesign submissions table with basic column filtering

* feat: make new submission action buttons functional

* feat: improving submissions table filtering

* feat: add submissions table filter state to Redux store

* fix: use React Router's `Link` instead of `a` tag

* feat: add grading summary to show progress

* refactor: make `loadContentDispatch` optional

* feat: use new grading dashboard

* feat: move `Export to CSV` button

* fix: sort imports

* fix: skip missing assessments instead of throwing an error

* refactor: add helper to get badge color

* refactor: use nullish coallescing

Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

* refactor: remove unnecessary check for Paths

* refactor: reorganize components and logic for badges

* fix: wrap csv fields in quotes

* fix: wraps column headers in quotes too

---------

Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

Author: zhyuhan

package.json

@@ -35,6 +35,8 @@
     "@sourceacademy/sharedb-ace": "^2.0.2",
     "@sourceacademy/sling-client": "^0.1.0",
     "@szhsin/react-menu": "^3.2.0",
+    "@tanstack/react-table": "^8.7.9",
+    "@tremor/react": "^1.7.0",
     "ace-builds": "^1.4.14",
     "acorn": "^8.8.2",
     "ag-grid-community": "^28.0.2",

src/commons/ContentDisplay.tsx

@@ -4,12 +4,12 @@ import React, { useEffect } from 'react';
 export type ContentDisplayProps = {
   fullWidth?: boolean;
   display: JSX.Element;
-  loadContentDispatch: () => void;
+  loadContentDispatch?: () => void;
 };
 
 const ContentDisplay: React.FC<ContentDisplayProps> = props => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => props.loadContentDispatch(), []);
+  useEffect(() => props.loadContentDispatch?.(), []);
 
   return (
     <div className="ContentDisplay row center-xs">

src/commons/application/ApplicationTypes.ts

@@ -328,6 +328,10 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
   },
   grading: {
     ...createDefaultWorkspace('grading'),
+    submissionsTableFilters: {
+      columnFilters: [],
+      globalFilter: null
+    },
     currentSubmission: undefined,
     currentQuestion: undefined,
     hasUnsavedChanges: false

src/commons/workspace/WorkspaceActions.ts

@@ -44,6 +44,7 @@ import {
   SEND_REPL_INPUT_TO_OUTPUT,
   SET_FOLDER_MODE,
   SHIFT_EDITOR_TAB,
+  SubmissionsTableFilters,
   TOGGLE_EDITOR_AUTORUN,
   TOGGLE_FOLDER_MODE,
   TOGGLE_UPDATE_ENV,
@@ -61,6 +62,7 @@ import {
   UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_REPL_VALUE,
   UPDATE_SUBLANGUAGE,
+  UPDATE_SUBMISSIONS_TABLE_FILTERS,
   UPDATE_WORKSPACE,
   WorkspaceLocation,
   WorkspaceState
@@ -313,6 +315,9 @@ export const setIsEditorReadonly = (
     isEditorReadonly: isEditorReadonly
   });
 
+export const updateSubmissionsTableFilters = (filters: SubmissionsTableFilters) =>
+  action(UPDATE_SUBMISSIONS_TABLE_FILTERS, { filters });
+
 export const updateCurrentAssessmentId = (assessmentId: number, questionId: number) =>
   action(UPDATE_CURRENT_ASSESSMENT_ID, {
     assessmentId,

src/commons/workspace/WorkspaceReducer.ts

@@ -73,6 +73,7 @@ import {
   UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_REPL_VALUE,
   UPDATE_SUBLANGUAGE,
+  UPDATE_SUBMISSIONS_TABLE_FILTERS,
   UPDATE_WORKSPACE,
   WorkspaceLocation,
   WorkspaceManagerState
@@ -605,6 +606,14 @@ export const WorkspaceReducer: Reducer<WorkspaceManagerState> = (
       } else {
         return state;
       }
+    case UPDATE_SUBMISSIONS_TABLE_FILTERS:
+      return {
+        ...state,
+        grading: {
+          ...state.grading,
+          submissionsTableFilters: action.payload.filters
+        }
+      };
     case UPDATE_CURRENT_ASSESSMENT_ID:
       return {
         ...state,

src/commons/workspace/WorkspaceTypes.ts

@@ -37,6 +37,7 @@ export const TOGGLE_EDITOR_AUTORUN = 'TOGGLE_EDITOR_AUTORUN';
 export const TOGGLE_USING_SUBST = 'TOGGLE_USING_SUBST';
 export const TOGGLE_USING_ENV = 'TOGGLE_USING_ENV';
 export const TOGGLE_UPDATE_ENV = 'TOGGLE_UPDATE_ENV';
+export const UPDATE_SUBMISSIONS_TABLE_FILTERS = 'UPDATE_SUBMISSIONS_TABLE_FILTERS';
 export const UPDATE_CURRENT_ASSESSMENT_ID = 'UPDATE_CURRENT_ASSESSMENT_ID';
 export const UPDATE_CURRENT_SUBMISSION_ID = 'UPDATE_CURRENT_SUBMISSION_ID';
 export const TOGGLE_FOLDER_MODE = 'TOGGLE_FOLDER_MODE';
@@ -71,6 +72,7 @@ type AssessmentWorkspaceAttr = {
 type AssessmentWorkspaceState = AssessmentWorkspaceAttr & WorkspaceState;
 
 type GradingWorkspaceAttr = {
+  readonly submissionsTableFilters: SubmissionsTableFilters;
   readonly currentSubmission?: number;
   readonly currentQuestion?: number;
   readonly hasUnsavedChanges: boolean;
@@ -147,3 +149,8 @@ export type DebuggerContext = {
   context: Context;
   workspaceLocation?: WorkspaceLocation;
 };
+
+export type SubmissionsTableFilters = {
+  columnFilters: { id: string; value: unknown }[];
+  globalFilter: string | null;
+};

src/commons/workspace/__tests__/WorkspaceActions.ts

@@ -46,7 +46,8 @@ import {
   updateEditorValue,
   updateHasUnsavedChanges,
   updateReplValue,
-  updateSublanguage
+  updateSublanguage,
+  updateSubmissionsTableFilters
 } from '../WorkspaceActions';
 import {
   ADD_EDITOR_TAB,
@@ -90,6 +91,7 @@ import {
   UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_REPL_VALUE,
   UPDATE_SUBLANGUAGE,
+  UPDATE_SUBMISSIONS_TABLE_FILTERS,
   WorkspaceLocation
 } from '../WorkspaceTypes';
 
@@ -541,6 +543,30 @@ test('resetWorkspace generates correct action object with provided workspace', (
   });
 });
 
+test('updateSubmissionsTableFilters generates correct action object', () => {
+  const columnFilters = [
+    {
+      id: 'groupName',
+      value: '1A'
+    },
+    {
+      id: 'assessmentType',
+      value: 'Missions'
+    }
+  ];
+  const globalFilter = 'runes';
+  const action = updateSubmissionsTableFilters({ columnFilters, globalFilter });
+  expect(action).toEqual({
+    type: UPDATE_SUBMISSIONS_TABLE_FILTERS,
+    payload: {
+      filters: {
+        columnFilters,
+        globalFilter
+      }
+    }
+  });
+});
+
 test('updateCurrentAssessmentId generates correct action object', () => {
   const assessmentId = 2;
   const questionId = 4;

src/pages/academy/Academy.tsx

@@ -6,6 +6,7 @@ import { Redirect, Route, Switch, useParams, useRouteMatch } from 'react-router'
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 import {
+  fetchGradingOverviews,
   fetchNotifications,
   updateLatestViewedCourse
 } from '../../commons/application/actions/SessionActions';
@@ -18,7 +19,7 @@ import NotFound from '../notFound/NotFound';
 import AdminPanel from './adminPanel/AdminPanel';
 import Dashboard from './dashboard/Dashboard';
 import Game from './game/Game';
-import Grading from './grading/GradingContainer';
+import Grading from './grading/Grading';
 import GroundControl from './groundControl/GroundControlContainer';
 import Sourcereel from './sourcereel/SourcereelContainer';
 import StorySimulator from './storySimulator/StorySimulator';
@@ -29,6 +30,7 @@ const Academy: React.FC<{}> = () => {
   const dispatch = useDispatch();
   React.useEffect(() => {
     dispatch(fetchNotifications());
+    dispatch(fetchGradingOverviews(false));
   }, [dispatch]);
 
   const assessmentConfigurations = useTypedSelector(