Grading Overview: TS/Tremor -> AG/Blueprint Migration

src/commons/application/ApplicationTypes.ts

@@ -6,6 +6,7 @@ import { GradingQuery } from '../../features/grading/GradingTypes';
 import { PlaygroundState } from '../../features/playground/PlaygroundTypes';
 import { PlaybackStatus, RecordingStatus } from '../../features/sourceRecorder/SourceRecorderTypes';
 import { StoriesEnvState, StoriesState } from '../../features/stories/StoriesTypes';
+import { freshSortState } from '../../pages/academy/grading/subcomponents/GradingSubmissionsTable';
 import { WORKSPACE_BASE_PATHS } from '../../pages/fileSystem/createInBrowserFileSystem';
 import { Assessment } from '../assessment/AssessmentTypes';
 import { FileSystemState } from '../fileSystem/FileSystemTypes';
@@ -414,9 +415,15 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     submissionsTableFilters: {
       columnFilters: []
     },
+    columnVisiblity: [],
     currentSubmission: undefined,
     currentQuestion: undefined,
-    hasUnsavedChanges: false
+    hasUnsavedChanges: false,
+    requestCounter: 0,
+    allColsSortStates: {
+      currentState: freshSortState,
+      sortBy: ''
+    }
   },
   playground: {
     ...createDefaultWorkspace('playground'),

src/commons/application/actions/SessionActions.ts

@@ -3,9 +3,14 @@ import {
   paginationToBackendParams,
   ungradedToBackendParams
 } from 'src/features/grading/GradingUtils';
+import { freshSortState } from 'src/pages/academy/grading/subcomponents/GradingSubmissionsTable';
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
 
-import { GradingOverviews, GradingQuery } from '../../../features/grading/GradingTypes';
+import {
+  AllColsSortStates,
+  GradingOverviews,
+  GradingQuery
+} from '../../../features/grading/GradingTypes';
 import { TeamFormationOverview } from '../../../features/teamFormation/TeamFormationTypes';
 import {
   Assessment,
@@ -139,15 +144,18 @@ export const fetchGrading = createAction(FETCH_GRADING, (submissionId: number) =
  * many entries, starting from what offset, to get
  * @param filterParams - param that contains columnFilters converted into JSON for
  * processing into query parameters
+ * @param allColsSortStates - param that contains the sort states of all columns and
+ * the col it should be sorted by
  */
 export const fetchGradingOverviews = createAction(
   FETCH_GRADING_OVERVIEWS,
   (
     filterToGroup = true,
     gradedFilter = ungradedToBackendParams(false),
     pageParams = paginationToBackendParams(0, 10),
-    filterParams = {}
-  ) => ({ payload: { filterToGroup, gradedFilter, pageParams, filterParams } })
+    filterParams = {},
+    allColsSortStates: AllColsSortStates = { currentState: freshSortState, sortBy: '' }
+  ) => ({ payload: { filterToGroup, gradedFilter, pageParams, filterParams, allColsSortStates } })
 );
 
 export const fetchTeamFormationOverviews = createAction(

src/commons/grading/GradingFlex.tsx

@@ -0,0 +1,56 @@
+declare const twJustifyContentValues: readonly ["justify-start", "justify-end", "justify-center", "justify-between", "justify-around", "justify-evenly"];
+declare type JustifyContent = typeof twJustifyContentValues[number];
+declare const twAlignItemsValues: readonly ["items-start", "items-end", "items-center", "items-baseline", "items-stretch"];
+declare type AlignItems = typeof twAlignItemsValues[number];
+declare const twFlexDirectionValues: readonly ["row", "column"];
+declare type FlexDirection = typeof twFlexDirectionValues[number];
+
+type GradingFlexProps = {
+    justifyContent?: JustifyContent;
+    alignItems?: AlignItems;
+    flexDirection?: FlexDirection;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>;
+
+const GradingFlex: React.FC<GradingFlexProps> = ({ justifyContent, alignItems, flexDirection, children, style, className, }: GradingFlexProps) => {
+  const defaultStyle: React.CSSProperties = {
+    display: "flex",
+    justifyContent: 
+      (justifyContent === "justify-start"
+        ? "flex-start"
+        : justifyContent === "justify-end"
+        ? "flex-end"
+        : justifyContent === "justify-center"
+        ? "center"
+        : justifyContent === "justify-between"
+        ? "space-between"
+        : justifyContent === "justify-around"
+        ? "space-around"
+        : justifyContent === "justify-evenly"
+        ? "space-evenly"
+        : ""
+      ),
+    alignItems: 
+      (alignItems === "items-start"
+        ? "start"
+        : alignItems === "items-end"
+        ? "end"
+        : alignItems === "items-center"
+        ? "center"
+        : alignItems === "items-baseline"
+        ? "baseline"
+        : ""
+      ),
+    flexDirection: flexDirection,
+  };
+
+  return (
+    <div className={className} style={{...defaultStyle, ...style}}>
+      {children}
+    </div>
+  );
+}
+
+export default GradingFlex;

src/commons/grading/GradingText.tsx

@@ -0,0 +1,26 @@
+import { Text } from "@blueprintjs/core";
+
+type GradingTextProps = {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  secondaryText?: boolean;
+  className?: string;
+} & React.RefAttributes<HTMLDivElement>;
+
+const GradingText: React.FC<GradingTextProps> = ({ children, style, secondaryText, className = "", }: GradingTextProps) => {
+  const defaultStyle: React.CSSProperties = {
+    width: "max-content",
+    margin: "auto 0"
+  };
+
+  return (
+    <Text 
+      className={"bp5-ui-text " + className + (secondaryText ? " bp5-text-muted" : "")} 
+      style={{...defaultStyle, ...style}}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export default GradingText;

src/commons/sagas/BackendSaga.ts

@@ -457,7 +457,25 @@ function* BackendSaga(): SagaIterator {
         return;
       }
 
-      const { filterToGroup, gradedFilter, pageParams, filterParams } = action.payload;
+      const { filterToGroup, gradedFilter, pageParams, filterParams, allColsSortStates } =
+        action.payload;
+
+      const sortedBy = {
+        sortBy: allColsSortStates.sortBy,
+        sortDirection: ''
+      };
+
+      for (const key in allColsSortStates.currentState) {
+        if (allColsSortStates.sortBy === key) {
+          if (allColsSortStates.currentState[key] !== 'sort') {
+            sortedBy.sortDirection = allColsSortStates.currentState[key];
+          } else {
+            sortedBy.sortBy = '';
+            sortedBy.sortDirection = '';
+          }
+          break;
+        }
+      }
 
       const gradingOverviews: GradingOverviews | null = yield call(
         getGradingOverviews,
@@ -466,6 +484,7 @@ function* BackendSaga(): SagaIterator {
         gradedFilter,
         pageParams,
         filterParams
+        // sortedBy
       );
       if (gradingOverviews) {
         yield put(actions.updateGradingOverviews(gradingOverviews));

src/commons/workspace/WorkspaceActions.ts

@@ -2,6 +2,7 @@ import { createAction } from '@reduxjs/toolkit';
 import { Context, Result } from 'js-slang';
 import { Chapter, Variant } from 'js-slang/dist/types';
 
+import { AllColsSortStates, GradingColumnVisibility } from '../../features/grading/GradingTypes';
 import { SET_IS_EDITOR_READONLY } from '../../features/sourceRecorder/sourcecast/SourcecastTypes';
 import { SALanguage } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
@@ -26,6 +27,7 @@ import {
   CLEAR_REPL_INPUT,
   CLEAR_REPL_OUTPUT,
   CLEAR_REPL_OUTPUT_LAST,
+  DECREMENT_REQUEST_COUNTER,
   DISABLE_TOKEN_COUNTER,
   EditorTabState,
   ENABLE_TOKEN_COUNTER,
@@ -34,6 +36,7 @@ import {
   EVAL_EDITOR_AND_TESTCASES,
   EVAL_REPL,
   EVAL_TESTCASE,
+  INCREMENT_REQUEST_COUNTER,
   MOVE_CURSOR,
   NAV_DECLARATION,
   PLAYGROUND_EXTERNAL_SELECT,
@@ -57,13 +60,15 @@ import {
   TOGGLE_USING_SUBST,
   UPDATE_ACTIVE_EDITOR_TAB,
   UPDATE_ACTIVE_EDITOR_TAB_INDEX,
+  UPDATE_ALL_COLS_SORT_STATES,
   UPDATE_BREAKPOINTSTEPS,
   UPDATE_CHANGEPOINTSTEPS,
   UPDATE_CURRENT_ASSESSMENT_ID,
   UPDATE_CURRENT_SUBMISSION_ID,
   UPDATE_CURRENTSTEP,
   UPDATE_EDITOR_BREAKPOINTS,
   UPDATE_EDITOR_VALUE,
+  UPDATE_GRADING_COLUMN_VISIBILITY,
   UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_LAST_DEBUGGER_RESULT,
   UPDATE_LAST_NON_DET_RESULT,
@@ -396,11 +401,29 @@ export const setIsEditorReadonly = createAction(
   })
 );
 
+export const increaseRequestCounter = createAction(INCREMENT_REQUEST_COUNTER, () => ({
+  payload: {}
+}));
+
+export const decreaseRequestCounter = createAction(DECREMENT_REQUEST_COUNTER, () => ({
+  payload: {}
+}));
+
+export const updateAllColsSortStates = createAction(
+  UPDATE_ALL_COLS_SORT_STATES,
+  (sortStates: AllColsSortStates) => ({ payload: { sortStates } })
+);
+
 export const updateSubmissionsTableFilters = createAction(
   UPDATE_SUBMISSIONS_TABLE_FILTERS,
   (filters: SubmissionsTableFilters) => ({ payload: { filters } })
 );
 
+export const updateGradingColumnVisibility = createAction(
+  UPDATE_GRADING_COLUMN_VISIBILITY,
+  (filters: GradingColumnVisibility) => ({ payload: { filters } })
+);
+
 export const updateCurrentAssessmentId = createAction(
   UPDATE_CURRENT_ASSESSMENT_ID,
   (assessmentId: number, questionId: number) => ({ payload: { assessmentId, questionId } })

src/commons/workspace/WorkspaceReducer.ts

@@ -59,7 +59,9 @@ import {
 } from './WorkspaceActions';
 import {
   ADD_EDITOR_TAB,
+  DECREMENT_REQUEST_COUNTER,
   EditorTabState,
+  INCREMENT_REQUEST_COUNTER,
   MOVE_CURSOR,
   REMOVE_EDITOR_TAB,
   REMOVE_EDITOR_TAB_FOR_FILE,
@@ -76,13 +78,15 @@ import {
   TOGGLE_USING_SUBST,
   UPDATE_ACTIVE_EDITOR_TAB,
   UPDATE_ACTIVE_EDITOR_TAB_INDEX,
+  UPDATE_ALL_COLS_SORT_STATES,
   UPDATE_BREAKPOINTSTEPS,
   UPDATE_CHANGEPOINTSTEPS,
   UPDATE_CURRENT_ASSESSMENT_ID,
   UPDATE_CURRENT_SUBMISSION_ID,
   UPDATE_CURRENTSTEP,
   UPDATE_EDITOR_BREAKPOINTS,
   UPDATE_EDITOR_VALUE,
+  UPDATE_GRADING_COLUMN_VISIBILITY,
   UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_LAST_DEBUGGER_RESULT,
   UPDATE_LAST_NON_DET_RESULT,
@@ -619,6 +623,14 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
         return state;
       }
     }
+    case UPDATE_ALL_COLS_SORT_STATES:
+      return {
+        ...state,
+        grading: {
+          ...state.grading,
+          allColsSortStates: action.payload.sortStates
+        }
+      };
     case UPDATE_SUBMISSIONS_TABLE_FILTERS:
       return {
         ...state,
@@ -627,6 +639,14 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           submissionsTableFilters: action.payload.filters
         }
       };
+    case UPDATE_GRADING_COLUMN_VISIBILITY:
+      return {
+        ...state,
+        grading: {
+          ...state.grading,
+          columnVisiblity: action.payload.filters
+        }
+      };
     case UPDATE_CURRENT_ASSESSMENT_ID:
       return {
         ...state,
@@ -645,6 +665,22 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState, SourceActionType> = (
           currentQuestion: action.payload.questionId
         }
       };
+    case INCREMENT_REQUEST_COUNTER:
+      return {
+        ...state,
+        grading: {
+          ...state.grading,
+          requestCounter: state.grading.requestCounter + 1
+        }
+      };
+    case DECREMENT_REQUEST_COUNTER:
+      return {
+        ...state,
+        grading: {
+          ...state.grading,
+          requestCounter: Math.max(0, state.grading.requestCounter - 1)
+        }
+      };
     case SET_FOLDER_MODE:
       return {
         ...state,

src/commons/workspace/WorkspaceTypes.ts

@@ -1,5 +1,6 @@
 import { Context, Result } from 'js-slang';
 
+import { AllColsSortStates, GradingColumnVisibility } from '../../features/grading/GradingTypes';
 import { SourcecastWorkspaceState } from '../../features/sourceRecorder/sourcecast/SourcecastTypes';
 import { SourcereelWorkspaceState } from '../../features/sourceRecorder/sourcereel/SourcereelTypes';
 import { InterpreterOutput } from '../application/ApplicationTypes';
@@ -21,12 +22,14 @@ export const CLEAR_REPL_OUTPUT_LAST = 'CLEAR_REPL_OUTPUT_LAST';
 export const END_CLEAR_CONTEXT = 'END_CLEAR_CONTEXT';
 export const ENABLE_TOKEN_COUNTER = 'ENABLE_TOKEN_COUNTER';
 export const DISABLE_TOKEN_COUNTER = 'DISABLE_TOKEN_COUNTER';
+export const DECREMENT_REQUEST_COUNTER = 'DECREMENT_REQUEST_COUNTER';
 export const EVAL_EDITOR = 'EVAL_EDITOR';
 export const EVAL_REPL = 'EVAL_REPL';
 export const PROMPT_AUTOCOMPLETE = 'PROMPT_AUTOCOMPLETE';
 export const EVAL_SILENT = 'EVAL_SILENT';
 export const EVAL_TESTCASE = 'EVAL_TESTCASE';
 export const EVAL_EDITOR_AND_TESTCASES = 'EVAL_EDITOR_AND_TESTCASES';
+export const INCREMENT_REQUEST_COUNTER = 'INCREMENT_REQUEST_COUNTER';
 export const MOVE_CURSOR = 'MOVE_CURSOR';
 export const NAV_DECLARATION = 'NAV_DECLARATION';
 export const PLAYGROUND_EXTERNAL_SELECT = 'PLAYGROUND_EXTERNAL_SELECT ';
@@ -39,12 +42,14 @@ export const TOGGLE_USING_SUBST = 'TOGGLE_USING_SUBST';
 export const TOGGLE_USING_CSE = 'TOGGLE_USING_CSE';
 export const TOGGLE_UPDATE_CSE = 'TOGGLE_UPDATE_CSE';
 export const UPDATE_SUBMISSIONS_TABLE_FILTERS = 'UPDATE_SUBMISSIONS_TABLE_FILTERS';
+export const UPDATE_GRADING_COLUMN_VISIBILITY = 'UPDATE_GRADING_COLUMN_VISIBILITY';
 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';
 export const SET_FOLDER_MODE = 'SET_FOLDER_MODE';
 export const UPDATE_ACTIVE_EDITOR_TAB_INDEX = 'UPDATE_ACTIVE_EDITOR_TAB_INDEX';
 export const UPDATE_ACTIVE_EDITOR_TAB = 'UPDATE_ACTIVE_EDITOR_TAB';
+export const UPDATE_ALL_COLS_SORT_STATES = 'UPDATE_ALL_COLS_SORT_STATES';
 export const UPDATE_EDITOR_VALUE = 'UPDATE_EDITOR_VALUE';
 export const UPDATE_EDITOR_BREAKPOINTS = 'UPDATE_EDITOR_BREAKPOINTS';
 export const ADD_EDITOR_TAB = 'ADD_EDITOR_TAB';
@@ -78,9 +83,12 @@ type AssessmentWorkspaceState = AssessmentWorkspaceAttr & WorkspaceState;
 
 type GradingWorkspaceAttr = {
   readonly submissionsTableFilters: SubmissionsTableFilters;
+  readonly columnVisiblity: GradingColumnVisibility;
   readonly currentSubmission?: number;
   readonly currentQuestion?: number;
   readonly hasUnsavedChanges: boolean;
+  readonly requestCounter: number;
+  readonly allColsSortStates: AllColsSortStates;
 };
 
 type GradingWorkspaceState = GradingWorkspaceAttr & WorkspaceState;