Merge branch 'cse-uiux' of https://github.com/source-academy/frontend into cse-uiux

Author: notnotmax

.husky/pre-push

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 bash scripts/test.sh

package.json

@@ -23,32 +23,32 @@
     "test-coveralls": "./scripts/test-coveralls.sh",
     "update-ui-snapshots": "jest --updateSnapshot",
     "eslint": "eslint --ext \".js,.jsx,.ts,.tsx\" src",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.20.1",
     "@blueprintjs/datetime": "^4.4.37",
     "@blueprintjs/icons": "^4.16.0",
     "@blueprintjs/popover2": "^1.14.11",
     "@blueprintjs/select": "^4.9.24",
-    "@octokit/rest": "^19.0.11",
+    "@octokit/rest": "^20.0.0",
     "@sentry/browser": "^7.57.0",
     "@sourceacademy/sharedb-ace": "^2.0.2",
     "@sourceacademy/sling-client": "^0.1.0",
-    "@szhsin/react-menu": "^3.5.3",
+    "@szhsin/react-menu": "^4.0.0",
     "@tanstack/react-table": "^8.9.3",
     "@tremor/react": "^1.8.2",
     "ace-builds": "^1.4.14",
     "acorn": "^8.9.0",
-    "ag-grid-community": "^28.0.2",
-    "ag-grid-react": "^28.0.0",
+    "ag-grid-community": "^31.0.0",
+    "ag-grid-react": "^31.0.0",
     "array-move": "^4.0.0",
     "browserfs": "^1.4.3",
     "classnames": "^2.3.2",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
-    "hastscript": "^8.0.0",
-    "js-slang": "^1.0.37",
+    "hastscript": "^9.0.0",
+    "js-slang": "^1.0.39",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",
@@ -88,14 +88,15 @@
     "sourceror": "^0.8.5",
     "typesafe-actions": "^5.1.0",
     "unified": "^11.0.0",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.0",
     "xml2js": "^0.6.0",
     "yareco": "^0.1.5"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
-    "@svgr/webpack": "^6.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@svgr/webpack": "^8.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/acorn": "^6.0.0",
@@ -104,10 +105,9 @@
     "@types/gapi.client": "^1.0.5",
     "@types/gapi.client.drive": "^3.0.14",
     "@types/google.picker": "^0.0.39",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^29.0.0",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
-    "@types/lz-string": "^1.3.34",
     "@types/react": "^18.2.13",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.2.6",
@@ -120,7 +120,7 @@
     "@types/react-textarea-autosize": "^8.0.0",
     "@types/redux-mock-store": "^1.0.3",
     "@types/showdown": "^2.0.1",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
     "@types/xml2js": "^0.4.11",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
@@ -129,13 +129,13 @@
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "https-browserify": "^1.0.0",
-    "husky": "^8.0.2",
-    "npm-run-all": "^4.1.5",
+    "husky": "^9.0.0",
+    "npm-run-all2": "^5.0.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "~3.0.0",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
     "react-scripts": "^5.0.1",

public/externalLibs/inspector/inspector.js

@@ -29,22 +29,22 @@
     }
   }
 
-  function highlightCleanForAgenda() {
+  function highlightCleanForControl() {
     var gutterCells = document.getElementsByClassName('ace_gutter-cell');
     var aceLines = document.getElementsByClassName('ace_line');
     if (gutterCells != undefined) {
       for (cell of gutterCells) {
-        cell.classList.remove('ace_gutter-cell_hi_agenda');
+        cell.classList.remove('ace_gutter-cell_hi_control');
       }
     }
     if (aceLines != undefined) {
       for (line of aceLines) {
-        line.classList.remove('ace_line_hi_agenda');
+        line.classList.remove('ace_line_hi_control');
       }
     }
   }
 
-  function highlightLineForAgenda(number) {
+  function highlightLineForControl(number) {
     if (number == undefined) return;
     var gutterCells = document.getElementsByClassName('ace_gutter-cell');
     var aceLines = document.getElementsByClassName('ace_line');
@@ -61,16 +61,16 @@
         }
       }
 
-      gutterCells[number].classList.add('ace_gutter-cell_hi_agenda');
-      aceLines[number].classList.add('ace_line_hi_agenda');
+      gutterCells[number].classList.add('ace_gutter-cell_hi_control');
+      aceLines[number].classList.add('ace_line_hi_control');
     }
   }
 
   exports.Inspector = {
     highlightLine,
     highlightClean,
-    highlightCleanForAgenda,
-    highlightLineForAgenda
+    highlightCleanForControl,
+    highlightLineForControl
   };
   setTimeout(() => {}, 1000);
 })(window);

src/commons/ReactRouterPrompt.tsx

@@ -8,7 +8,7 @@
  * See: https://github.com/remix-run/react-router/issues/8139#issuecomment-1382428200
  */
 import * as React from 'react';
-import { unstable_useBlocker as useBlocker, useBeforeUnload } from 'react-router-dom';
+import { useBeforeUnload, useBlocker } from 'react-router-dom';
 
 // You can abstract `useBlocker` to use the browser's `window.confirm` dialog to
 // determine whether or not the user should navigate within the current origin.

src/commons/achievement/AchievementCommentCard.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { useNavigate } from 'react-router';
+import classes from 'src/styles/AchievementCommentCard.module.scss';
 
 import { Assessment } from '../assessment/AssessmentTypes';
 import { useTypedSelector } from '../utils/Hooks';
@@ -28,22 +29,25 @@ const AchievementCommentCard: React.FC<{
 
   return (
     <div>
-      <h1 className="assessment-feedback">Feedback</h1>
-      <div className="feedback-list">
+      <h1 className={classes['assessment-feedback']}>Feedback</h1>
+      <div className={classes['feedback-list']}>
         {assessment &&
           assessment.questions.map((question, index) => (
-            <div className="assessment-comments" key={index}>
+            <div className={classes['assessment-comments']} key={index}>
               <span>
-                <h2 className="question-header">{'Q' + (index + 1)}</h2>
+                <h2 className={classes['question-header']}>{'Q' + (index + 1)}</h2>
               </span>
 
-              <div className="box-comment">
+              <div className={classes['box-comment']}>
                 <p>{question.comments === null ? 'No Comments' : question.comments}</p>
                 <p className="xp">{'XP: ' + question.xp + '/' + question.maxXp}</p>
               </div>
 
               {showToQuestion && (
-                <button className="to-assessment-button" onClick={() => toMission(index)}>
+                <button
+                  className={classes['to-assessment-button']}
+                  onClick={() => toMission(index)}
+                >
                   {'To Question'}
                 </button>
               )}

src/commons/achievement/utils/AchievementBackender.ts

@@ -31,7 +31,7 @@ export const frontendifyAchievementGoal = (goal: any) =>
     count: goal.count,
     targetCount: goal.targetCount,
     completed: goal.count >= goal.targetCount
-  } as AchievementGoal);
+  }) as AchievementGoal;
 
 export const frontendifyAchievementItem = (achievement: any) =>
   ({
@@ -51,7 +51,7 @@ export const frontendifyAchievementItem = (achievement: any) =>
       completionText: achievement.view.completionText || '',
       description: achievement.view.description || ''
     }
-  } as AchievementItem);
+  }) as AchievementItem;
 
 export const backendifyAchievementItem = (achievement: AchievementItem) => ({
   ...achievement,

src/commons/application/ApplicationReducer.ts

@@ -26,7 +26,6 @@ export type OverallState = {
   readonly router: RouterState;
   readonly academy: AcademyState;
   readonly achievement: AchievementState;
-  readonly application: ApplicationState;
   readonly playground: PlaygroundState;
   readonly session: SessionState;
   readonly stories: StoriesState;
@@ -35,10 +34,6 @@ export type OverallState = {
   readonly fileSystem: FileSystemState;
 };
 
-export type ApplicationState = {
-  readonly environment: ApplicationEnvironment;
-};
-
 export type Story = {
   story: string;
   playStory: boolean;
@@ -95,12 +90,6 @@ export type ErrorOutput = {
 
 export type InterpreterOutput = RunningOutput | CodeOutput | ResultOutput | ErrorOutput;
 
-export enum ApplicationEnvironment {
-  Development = 'development',
-  Production = 'production',
-  Test = 'test'
-}
-
 export enum Role {
   Student = 'student',
   Staff = 'staff',
@@ -288,27 +277,12 @@ export const getLanguageConfig = (
   return languageConfig;
 };
 
-const currentEnvironment = (): ApplicationEnvironment => {
-  switch (process.env.NODE_ENV) {
-    case 'development':
-      return ApplicationEnvironment.Development;
-    case 'production':
-      return ApplicationEnvironment.Production;
-    default:
-      return ApplicationEnvironment.Test;
-  }
-};
-
 export const defaultRouter: RouterState = null;
 
 export const defaultAcademy: AcademyState = {
   gameCanvas: undefined
 };
 
-export const defaultApplication: ApplicationState = {
-  environment: currentEnvironment()
-};
-
 export const defaultDashboard: DashboardState = {
   gradingSummary: {
     cols: [],
@@ -550,7 +524,6 @@ export const defaultState: OverallState = {
   router: defaultRouter,
   academy: defaultAcademy,
   achievement: defaultAchievement,
-  application: defaultApplication,
   dashboard: defaultDashboard,
   playground: defaultPlayground,
   session: defaultSession,