Merge branch 'folders-public-wip' of github.com:source-academy/frontend into folders-public-wip

Author: linedoestrolling

.eslintrc.json

@@ -1,5 +1,11 @@
 {
-  "extends": ["react-app", "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    // "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+    // "plugin:react/recommended",
+    // "plugin:react/jsx-runtime"
+  ],
   "plugins": ["simple-import-sort"],
   "rules": {
     "no-restricted-imports": [
@@ -18,6 +24,8 @@
         ]
       }
     ],
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-duplicate-enum-values": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/camelcase": "off",

craco.config.js

@@ -18,7 +18,7 @@ const cracoConfig = {
         plugin => plugin.constructor.name === 'InjectManifest'
       );
       if (injectManifestPlugin) {
-        injectManifestPlugin.config.maximumFileSizeToCacheInBytes = 17 * 1024 * 1024;
+        injectManifestPlugin.config.maximumFileSizeToCacheInBytes = 20 * 1024 * 1024;
       }
 
       // add rules to pack WASM (for Sourceror)
@@ -47,9 +47,10 @@ const cracoConfig = {
         'https': require.resolve('https-browserify'),
         'os': require.resolve('os-browserify/browser'),
         'path/posix': require.resolve('path-browserify'),
+        'process/browser': require.resolve('process/browser'),
         'stream': require.resolve('stream-browserify'),
         'timers': require.resolve('timers-browserify'),
-        'url': require.resolve('url/')
+        'url': require.resolve('url/'),
       };
 
       // workaround .mjs files by Acorn
@@ -138,6 +139,7 @@ const cracoConfig = {
           'split-on-first',
           'filter-obj',
           '@sourceacademy/c-slang',
+          'java-parser'
         ),
         '^.+\\.module\\.(css|sass|scss)$'
       ];

package.json

@@ -26,11 +26,10 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.7.0",
-    "@blueprintjs/datetime2": "^2.2.7",
-    "@blueprintjs/icons": "^5.5.0",
-    "@blueprintjs/popover2": "^2.0.0",
-    "@blueprintjs/select": "^5.0.0",
+    "@blueprintjs/core": "^5.10.1",
+    "@blueprintjs/datetime2": "^2.3.3",
+    "@blueprintjs/icons": "^5.9.0",
+    "@blueprintjs/select": "^5.1.3",
     "@mantine/hooks": "^7.7.0",
     "@octokit/rest": "^20.0.0",
     "@reduxjs/toolkit": "^1.9.7",
@@ -52,8 +51,8 @@
     "flexboxgrid-helpers": "^1.1.3",
     "google-oauth-gsi": "^4.0.0",
     "hastscript": "^9.0.0",
-    "java-slang": "^1.0.6",
-    "js-slang": "^1.0.66",
+    "js-slang": "^1.0.69",
+    "java-slang": "^1.0.13",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",
@@ -129,13 +128,16 @@
     "@types/showdown": "^2.0.1",
     "@types/uuid": "^9.0.0",
     "@types/xml2js": "^0.4.11",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
     "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "https-browserify": "^1.0.0",
     "husky": "^9.0.0",
@@ -153,7 +155,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",
-    "typescript": "~4.9.0",
+    "typescript": "^5.4.3",
     "url": "^0.11.1",
     "webpack-bundle-analyzer": "^4.9.0"
   },

src/commons/SimpleDropdown.tsx

@@ -1,13 +1,12 @@
-import { Button, Menu, MenuItem } from '@blueprintjs/core';
-import { Popover2 } from '@blueprintjs/popover2';
+import { Button, Menu, MenuItem, Popover } from '@blueprintjs/core';
 
 type OptionType = { value: any; label: string };
 type Props<T extends OptionType> = {
   options: T[];
   selectedValue?: T['value'];
   onClick?: (v: T['value']) => void;
   buttonProps?: Partial<React.ComponentProps<typeof Button> & { 'data-testid': string }>;
-  popoverProps?: Partial<React.ComponentProps<typeof Popover2>>;
+  popoverProps?: Partial<React.ComponentProps<typeof Popover>>;
 };
 
 const SimpleDropdown = <T extends OptionType>({
@@ -27,7 +26,7 @@ const SimpleDropdown = <T extends OptionType>({
   };
 
   return (
-    <Popover2
+    <Popover
       {...popoverProps}
       interactionKind="click"
       content={
@@ -39,7 +38,7 @@ const SimpleDropdown = <T extends OptionType>({
       }
     >
       <Button {...buttonProps}>{buttonLabel()}</Button>
-    </Popover2>
+    </Popover>
   );
 };
 

src/commons/XMLParser/XMLParserHelper.ts

@@ -9,7 +9,6 @@ import {
   AssessmentType,
   BaseQuestion,
   emptyLibrary,
-  GradingStatuses,
   IMCQQuestion,
   IProgrammingQuestion,
   Library,
@@ -72,6 +71,7 @@ const makeAssessmentOverview = (result: any, maxXpVal: number): AssessmentOvervi
   return {
     type: capitalizeFirstLetter(rawOverview.kind) as AssessmentType,
     isManuallyGraded: true, // TODO: This is temporarily hardcoded to true. To be redone when overhauling MissionControl
+    isPublished: false,
     closeAt: rawOverview.duedate,
     coverImage: rawOverview.coverimage,
     id: EDITING_ID,
@@ -84,8 +84,8 @@ const makeAssessmentOverview = (result: any, maxXpVal: number): AssessmentOvervi
     shortSummary: task.WEBSUMMARY ? task.WEBSUMMARY[0] : '',
     status: AssessmentStatuses.attempting,
     story: rawOverview.story,
+    isGradingPublished: false,
     xp: 0,
-    gradingStatus: 'none' as GradingStatuses,
     maxTeamSize: 1,
     hasVotingFeatures: false
   };
@@ -167,7 +167,11 @@ const makeQuestions = (task: XmlParseStrTask): [Question[], number] => {
 
 const makeMCQ = (problem: XmlParseStrCProblem, question: BaseQuestion): IMCQQuestion => {
   const choicesVal: MCQChoice[] = [];
-  const solution = problem.SNIPPET ? problem.SNIPPET[0].SOLUTION : undefined;
+  const snippet = problem.SNIPPET;
+  // FIXME: I think `XmlParseStrCProblem` type definition is incorrect
+  // FIXME: Remove `as unknown as keyof typeof snippet` when fixed
+  // @ts-expect-error broken type definition to be fixed above
+  const solution = snippet ? snippet[0 as unknown as keyof typeof snippet].SOLUTION : undefined;
   let solutionVal = 0;
   problem.CHOICE.forEach((choice: XmlParseStrProblemChoice, i: number) => {
     choicesVal.push({
@@ -269,7 +273,8 @@ const exportLibrary = (library: Library) => {
         name: library.external.name
       }
     }
-  };
+    // FIXME: Replace any with proper type
+  } as any;
 
   if (library.external.symbols.length !== 0) {
     /* tslint:disable:no-string-literal */
@@ -327,7 +332,8 @@ export const assessmentToXml = (
       },
       TEXT: question.content,
       CHOICE: [] as any[]
-    };
+      // FIXME: Replace any with proper type
+    } as any;
 
     if (question.library.chapter !== -1) {
       /* tslint:disable:no-string-literal */

src/commons/achievement/control/achievementEditor/AchievementSettings.tsx

@@ -1,6 +1,5 @@
-import { Button, Checkbox, Dialog, EditableText } from '@blueprintjs/core';
+import { Button, Checkbox, Dialog, EditableText, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { AchievementItem } from 'src/features/achievement/AchievementTypes';
 
@@ -33,9 +32,9 @@ const AchievementSettings: React.FC<Props> = ({
 
   return (
     <>
-      <Tooltip2 content="More Settings">
+      <Tooltip content="More Settings">
         <Button icon={IconNames.WRENCH} onClick={toggleOpen} />
-      </Tooltip2>
+      </Tooltip>
 
       <Dialog title="More Settings" icon={IconNames.WRENCH} isOpen={isOpen} onClose={toggleOpen}>
         <div style={{ padding: '0 0.5em' }}>

src/commons/achievement/control/achievementEditor/AchievementUuidCopier.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { showSuccessMessage } from 'src/commons/utils/notifications/NotificationsHelper';
 
@@ -16,9 +15,9 @@ const AchievmenetUuidCopier: React.FC<Props> = ({ uuid }) => {
   };
 
   return (
-    <Tooltip2 content={hoverText}>
+    <Tooltip content={hoverText}>
       <Button icon={IconNames.CLIPBOARD} onClick={copy} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 

src/commons/achievement/control/achievementEditor/EditableCard.tsx

@@ -1,6 +1,5 @@
-import { EditableText, NumericInput } from '@blueprintjs/core';
+import { EditableText, NumericInput, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import { cloneDeep } from 'lodash';
 import React, { useContext, useMemo, useReducer, useState } from 'react';
 
@@ -225,7 +224,7 @@ const EditableCard: React.FC<Props> = ({
           <EditableText onChange={changeTitle} placeholder="Enter your title here" value={title} />
         </h3>
         <div className="xp">
-          <Tooltip2 content="XP">
+          <Tooltip content="XP">
             <NumericInput
               value={xp}
               min={0}
@@ -234,7 +233,7 @@ const EditableCard: React.FC<Props> = ({
               placeholder="XP"
               onValueChange={changeXp}
             />
-          </Tooltip2>
+          </Tooltip>
         </div>
         <div className="details">
           <EditableDate changeDate={changeRelease} date={release} type="Release" />

src/commons/achievement/control/achievementEditor/EditableDate.tsx

@@ -1,6 +1,5 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tooltip } from '@blueprintjs/core';
 import { DatePicker } from '@blueprintjs/datetime';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { prettifyDate } from 'src/commons/achievement/utils/DateHelper';
 
@@ -18,9 +17,9 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
 
   return (
     <>
-      <Tooltip2 content={hoverText}>
+      <Tooltip content={hoverText}>
         <Button minimal={true} onClick={toggleOpen} outlined={true}>{`${type}`}</Button>
-      </Tooltip2>
+      </Tooltip>
       <Dialog
         isCloseButtonShown={false}
         isOpen={isOpen}

src/commons/achievement/control/achievementEditor/EditableView.tsx

@@ -1,6 +1,5 @@
-import { Button, Dialog, EditableText } from '@blueprintjs/core';
+import { Button, Dialog, EditableText, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { AchievementView } from 'src/features/achievement/AchievementTypes';
 
@@ -25,9 +24,9 @@ const EditableView: React.FC<Props> = ({ changeView, view }) => {
 
   return (
     <>
-      <Tooltip2 content="Edit View">
+      <Tooltip content="Edit View">
         <Button icon={IconNames.WIDGET_HEADER} onClick={toggleOpen} />
-      </Tooltip2>
+      </Tooltip>
 
       <Dialog title="Edit View" icon={IconNames.WIDGET_HEADER} isOpen={isOpen} onClose={toggleOpen}>
         <div style={{ padding: '0 0.5em' }}>

src/commons/achievement/control/common/ItemDeleter.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 
@@ -23,9 +22,9 @@ const ItemDeleter: React.FC<Props> = ({ deleteItem, item }) => {
   };
 
   return (
-    <Tooltip2 content="Delete">
+    <Tooltip content="Delete">
       <Button icon={IconNames.TRASH} intent="danger" onClick={confirmDelete} />
-    </Tooltip2>
+    </Tooltip>
   );
 };
 

src/commons/achievement/control/common/ItemSaver.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@blueprintjs/core';
+import { Button, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import {
   showSuccessMessage,
@@ -25,13 +24,13 @@ const ItemSaver: React.FC<Props> = ({ discardChanges, saveChanges }) => {
 
   return (
     <>
-      <Tooltip2 content="Save Changes">
+      <Tooltip content="Save Changes">
         <Button icon={IconNames.FLOPPY_DISK} intent="primary" onClick={handleSaveChanges} />
-      </Tooltip2>
+      </Tooltip>
 
-      <Tooltip2 content="Discard Changes">
+      <Tooltip content="Discard Changes">
         <Button icon={IconNames.CROSS} intent="danger" onClick={handleDiscardChanges} />
-      </Tooltip2>
+      </Tooltip>
     </>
   );
 };

src/commons/achievement/control/goalEditor/EditableDate.tsx

@@ -1,6 +1,5 @@
-import { Button, Dialog } from '@blueprintjs/core';
+import { Button, Dialog, Tooltip } from '@blueprintjs/core';
 import { DatePicker } from '@blueprintjs/datetime';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 import { prettifyDate } from 'src/commons/achievement/utils/DateHelper';
 
@@ -18,9 +17,9 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
 
   return (
     <>
-      <Tooltip2 content={hoverText}>
+      <Tooltip content={hoverText}>
         <Button minimal={true} onClick={toggleOpen} outlined={true}>{`${type}`}</Button>
-      </Tooltip2>
+      </Tooltip>
       <Dialog
         isCloseButtonShown={false}
         isOpen={isOpen}

src/commons/achievement/control/goalEditor/EditableMeta.tsx

@@ -1,5 +1,4 @@
-import { Button, MenuItem } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Button, MenuItem, Tooltip } from '@blueprintjs/core';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import React from 'react';
 import {
@@ -51,7 +50,7 @@ const EditableMeta: React.FC<Props> = ({ changeMeta, meta }) => {
 
   return (
     <>
-      <Tooltip2 content="Change Goal Type">
+      <Tooltip content="Change Goal Type">
         <TypeSelect
           filterable={false}
           itemRenderer={typeRenderer}
@@ -60,7 +59,7 @@ const EditableMeta: React.FC<Props> = ({ changeMeta, meta }) => {
         >
           <Button minimal={true} outlined={true} text={type} />
         </TypeSelect>
-      </Tooltip2>
+      </Tooltip>
       {editableMetaDetails(type)}
     </>
   );