Java upload tab (#2945)

* add class file upload tab

* unused code param

* fix imports

* update reducer pattern

* update upload text

* fix: tsc missing properties

* disable upload tab on prod

* fix comments

* Fix component typing

* Fix incorrect workspace location in reducer

* Refactor SideContentUpload component

* Memoize change handler
* Fix layout and UI bugs
* Use Blueprint file input instead of HTML input component

* Fix typing

* remove location prop

* Show upload count

* Fix format

* Improve typing

* Update typing

---------

Co-authored-by: Richard Dominick <[email protected]>

Author: Chang-CH

src/commons/application/ApplicationTypes.ts

@@ -419,7 +419,8 @@ export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): Wo
   enableDebugging: true,
   debuggerContext: {} as DebuggerContext,
   lastDebuggerResult: undefined,
-  lastNonDetResult: null
+  lastNonDetResult: null,
+  files: {}
 });
 
 const defaultFileName = 'program.js';
@@ -447,6 +448,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     usingSubst: false,
     usingCse: false,
     updateCse: true,
+    usingUpload: false,
     currentStep: -1,
     stepsTotal: 0,
     breakpointSteps: [],
@@ -501,6 +503,7 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     usingSubst: false,
     usingCse: false,
     updateCse: true,
+    usingUpload: false,
     currentStep: -1,
     stepsTotal: 0,
     breakpointSteps: [],

src/commons/sagas/PlaygroundSaga.ts

@@ -26,6 +26,7 @@ import {
   toggleUpdateCse,
   toggleUsingCse,
   toggleUsingSubst,
+  toggleUsingUpload,
   updateCurrentStep,
   updateStepsTotal
 } from '../workspace/WorkspaceActions';
@@ -123,6 +124,12 @@ export default function* PlaygroundSaga(): SagaIterator {
         }
       }
 
+      if (newId === SideContentType.upload) {
+        yield put(toggleUsingUpload(true, workspaceLocation));
+      } else {
+        yield put(toggleUsingUpload(false, workspaceLocation));
+      }
+
       if (isSchemeLanguage(playgroundSourceChapter) && newId === SideContentType.cseMachine) {
         yield put(toggleUsingCse(true, workspaceLocation));
       }

src/commons/sagas/WorkspaceSaga/helpers/evalCode.ts

@@ -64,6 +64,15 @@ export function* evalCodeSaga(
     context.executionMethod = 'interpreter';
   }
 
+  const uploadIsActive: boolean = correctWorkspace
+    ? yield select(
+        (state: OverallState) =>
+          (state.workspaces[workspaceLocation] as PlaygroundWorkspaceState | SicpWorkspaceState)
+            .usingUpload
+      )
+    : false;
+  const uploads = yield select((state: OverallState) => state.workspaces[workspaceLocation].files);
+
   // For the CSE machine slider
   const cseIsActive: boolean = correctWorkspace
     ? yield select(
@@ -262,7 +271,10 @@ export function* evalCodeSaga(
         : isC
         ? call(cCompileAndRun, entrypointCode, context)
         : isJava
-        ? call(javaRun, entrypointCode, context, currentStep, isUsingCse)
+        ? call(javaRun, entrypointCode, context, currentStep, isUsingCse, {
+            uploadIsActive,
+            uploads
+          })
         : call(
             runFilesInContext,
             isFolderModeEnabled

src/commons/sagas/__tests__/PlaygroundSaga.ts

@@ -85,6 +85,7 @@ describe('Playground saga tests', () => {
           usingSubst: false,
           usingCse: false,
           updateCse: true,
+          usingUpload: false,
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
@@ -153,6 +154,7 @@ describe('Playground saga tests', () => {
           usingSubst: false,
           usingCse: false,
           updateCse: true,
+          usingUpload: false,
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
@@ -221,6 +223,7 @@ describe('Playground saga tests', () => {
           usingSubst: false,
           usingCse: false,
           updateCse: true,
+          usingUpload: false,
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
@@ -271,6 +274,7 @@ describe('Playground saga tests', () => {
           ],
           usingSubst: false,
           usingCse: false,
+          usingUpload: false,
           updateCse: true,
           currentStep: -1,
           stepsTotal: 0,
@@ -342,6 +346,7 @@ describe('Playground saga tests', () => {
           usingSubst: false,
           usingCse: false,
           updateCse: true,
+          usingUpload: false,
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],
@@ -401,6 +406,7 @@ describe('Playground saga tests', () => {
           usingSubst: false,
           usingCse: false,
           updateCse: true,
+          usingUpload: false,
           currentStep: -1,
           stepsTotal: 0,
           breakpointSteps: [],

src/commons/sideContent/SideContentTypes.ts

@@ -41,7 +41,8 @@ export enum SideContentType {
   testcases = 'testcases',
   toneMatrix = 'tone_matrix',
   htmlDisplay = 'html_display',
-  storiesRun = 'stories_run'
+  storiesRun = 'stories_run',
+  upload = 'upload'
 }
 
 /**

src/commons/sideContent/content/SideContentUpload.tsx

@@ -0,0 +1,85 @@
+import { FileInput } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useCallback } from 'react';
+
+import { SideContentTab, SideContentType } from '../SideContentTypes';
+
+export type UploadResult = {
+  [key: string]: any;
+};
+
+async function getBase64(file: Blob, onFinish: (result: string) => void) {
+  const reader = new FileReader();
+  return new Promise((resolve, reject) => {
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      onFinish((reader.result as string).slice(37));
+      resolve(reader.result);
+    };
+    reader.onerror = error => reject(error);
+  });
+}
+
+type Props = {
+  onUpload: (files: UploadResult) => void;
+};
+
+/**
+ * This component is responsible for uploading Java class files to bypass the compiler.
+ */
+const SideContentUpload: React.FC<Props> = ({ onUpload }) => {
+  const [count, setCount] = React.useState(0);
+
+  const handleFileUpload: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    e => {
+      const ret: { [key: string]: string } = {};
+      const promises = [];
+      for (const file of e.target.files ?? []) {
+        if (file.name.endsWith('.class')) {
+          promises.push(
+            getBase64(file, (b64: string) => {
+              ret[file.name] = b64;
+            })
+          );
+        }
+      }
+      Promise.all(promises).then(() => {
+        onUpload(ret);
+        setCount(promises.length);
+      });
+    },
+    [onUpload]
+  );
+
+  return (
+    <div>
+      <p>Bypass the compiler and type checker by uploading class files to run in the JVM.</p>
+      <p>
+        Only .class files are accepted. Code in the editor will be ignored when running while this
+        tab is active.
+      </p>
+      <p>Compile the files with the following command:</p>
+      <pre>
+        <code>javac *.java -target 8 -source 8</code>
+      </pre>
+      <p>Avoid running class files downloaded from unknown sources.</p>
+      <p>
+        <strong>Main class must be named Main and uploaded as Main.class.</strong>
+      </p>
+      <FileInput
+        inputProps={{ multiple: true, accept: '.class' }}
+        onInputChange={handleFileUpload}
+        text={count === 0 ? 'Choose files...' : `${count} file(s) uploaded.`}
+      />
+    </div>
+  );
+};
+
+const makeUploadTabFrom = (onUpload: (files: UploadResult) => void): SideContentTab => ({
+  label: 'Upload files',
+  iconName: IconNames.Upload,
+  body: <SideContentUpload onUpload={onUpload} />,
+  id: SideContentType.upload
+});
+
+export default makeUploadTabFrom;

src/commons/utils/JavaHelper.ts

@@ -2,19 +2,21 @@ import { compileFromSource, ECE, typeCheck } from 'java-slang';
 import { BinaryWriter } from 'java-slang/dist/compiler/binary-writer';
 import setupJVM, { parseBin } from 'java-slang/dist/jvm';
 import { createModuleProxy, loadCachedFiles } from 'java-slang/dist/jvm/utils/integration';
-import { Context } from 'js-slang';
+import { Context, Result } from 'js-slang';
 import loadSourceModules from 'js-slang/dist/modules/loader';
-import { ErrorSeverity, ErrorType, Result, SourceError } from 'js-slang/dist/types';
+import { ErrorSeverity, ErrorType, SourceError } from 'js-slang/dist/types';
 
 import { CseMachine } from '../../features/cseMachine/java/CseMachine';
+import { UploadResult } from '../sideContent/content/SideContentUpload';
 import Constants from './Constants';
 import DisplayBufferService from './DisplayBufferService';
 
 export async function javaRun(
   javaCode: string,
   context: Context,
   targetStep: number,
-  isUsingCse: boolean
+  isUsingCse: boolean,
+  options?: { uploadIsActive?: boolean; uploads?: UploadResult }
 ) {
   let compiled = {};
 
@@ -28,30 +30,11 @@ export async function javaRun(
     });
   };
 
-  const typeCheckResult = typeCheck(javaCode);
-  if (typeCheckResult.hasTypeErrors) {
-    const typeErrMsg = typeCheckResult.errorMsgs.join('\n');
-    stderr('TypeCheck', typeErrMsg);
-    return Promise.resolve({ status: 'error' });
-  }
-
-  if (isUsingCse) return await runJavaCseMachine(javaCode, targetStep, context);
-
-  try {
-    const classFile = compileFromSource(javaCode);
-    compiled = {
-      'Main.class': Buffer.from(new BinaryWriter().generateBinary(classFile)).toString('base64')
-    };
-  } catch (e) {
-    stderr('Compile', e);
-    return Promise.resolve({ status: 'error' });
-  }
-
-  let files = {};
+  let files: UploadResult = {};
   let buffer: string[] = [];
 
   const readClassFiles = (path: string) => {
-    let item = files[path as keyof typeof files];
+    let item = files[path];
 
     // not found: attempt to fetch from CDN
     if (!item && path) {
@@ -69,11 +52,11 @@ export async function javaRun(
       // we might want to cache the files in IndexedDB here
       files = { ...files, ...json };
 
-      if (!files[path as keyof typeof files]) {
+      if (!files[path]) {
         throw new Error('File not found: ' + path);
       }
 
-      item = files[path as keyof typeof files];
+      item = files[path];
     }
 
     // convert base64 to classfile object
@@ -108,6 +91,35 @@ export async function javaRun(
     }
   };
 
+  if (options?.uploadIsActive) {
+    compiled = options.uploads ?? {};
+    if (!options.uploads) {
+      stderr('Compile', 'No files uploaded');
+      return Promise.resolve({ status: 'error' });
+    }
+  } else {
+    const typeCheckResult = typeCheck(javaCode);
+    if (typeCheckResult.hasTypeErrors) {
+      const typeErrMsg = typeCheckResult.errorMsgs.join('\n');
+      stderr('TypeCheck', typeErrMsg);
+      return Promise.resolve({ status: 'error' });
+    }
+
+    if (isUsingCse) {
+      return await runJavaCseMachine(javaCode, targetStep, context);
+    }
+
+    try {
+      const classFile = compileFromSource(javaCode);
+      compiled = {
+        'Main.class': Buffer.from(new BinaryWriter().generateBinary(classFile)).toString('base64')
+      };
+    } catch (e) {
+      stderr('Compile', e);
+      return Promise.resolve({ status: 'error' });
+    }
+  }
+
   // load cached classfiles from IndexedDB
   return loadCachedFiles(() =>
     // Initial loader to fetch commonly used classfiles
@@ -195,6 +207,7 @@ export async function runJavaCseMachine(code: string, targetStep: number, contex
     })
     .catch(e => {
       console.error(e);
-      return { status: 'error' } as Result;
+      const errorResult: Result = { status: 'error' };
+      return errorResult;
     });
 }

src/commons/workspace/WorkspaceActions.ts

@@ -7,11 +7,14 @@ import { ExternalLibraryName } from '../application/types/ExternalTypes';
 import { Library } from '../assessment/AssessmentTypes';
 import { HighlightedLines, Position } from '../editor/EditorTypes';
 import { createActions } from '../redux/utils';
+import { UploadResult } from '../sideContent/content/SideContentUpload';
 import {
   EditorTabState,
   SubmissionsTableFilters,
+  TOGGLE_USING_UPLOAD,
   UPDATE_LAST_DEBUGGER_RESULT,
   UPDATE_LAST_NON_DET_RESULT,
+  UPLOAD_FILES,
   WorkspaceLocation,
   WorkspaceLocationsWithTools,
   WorkspaceState
@@ -278,6 +281,20 @@ export const updateLastNonDetResult = createAction(
   })
 );
 
+export const toggleUsingUpload = createAction(
+  TOGGLE_USING_UPLOAD,
+  (usingUpload: boolean, workspaceLocation: WorkspaceLocationsWithTools) => ({
+    payload: { usingUpload, workspaceLocation }
+  })
+);
+
+export const uploadFiles = createAction(
+  UPLOAD_FILES,
+  (files: UploadResult, workspaceLocation: WorkspaceLocation) => ({
+    payload: { files, workspaceLocation }
+  })
+);
+
 // For compatibility with existing code (reducer)
 export const {
   setTokenCount,
@@ -345,5 +362,7 @@ export const {
 export default {
   ...newActions,
   updateLastDebuggerResult,
-  updateLastNonDetResult
+  updateLastNonDetResult,
+  toggleUsingUpload,
+  uploadFiles
 };

src/commons/workspace/WorkspaceReducer.ts

@@ -354,6 +354,18 @@ const newWorkspaceReducer = createReducer(defaultWorkspaceManager, builder => {
     //   debuggerContext.context = action.payload.context;
     //   debuggerContext.workspaceLocation = action.payload.workspaceLocation;
     // })
+    .addCase(WorkspaceActions.toggleUsingUpload, (state, action) => {
+      const { workspaceLocation } = action.payload;
+      if (workspaceLocation === 'playground' || workspaceLocation === 'sicp') {
+        state[workspaceLocation].usingUpload = action.payload.usingUpload;
+      }
+    })
+    .addCase(WorkspaceActions.uploadFiles, (state, action) => {
+      const workspaceLocation = getWorkspaceLocation(action);
+      if (workspaceLocation === 'playground' || workspaceLocation === 'sicp') {
+        state[workspaceLocation].files = action.payload.files;
+      }
+    })
     .addCase(WorkspaceActions.updateLastDebuggerResult, (state, action) => {
       const workspaceLocation = getWorkspaceLocation(action);
       state[workspaceLocation].lastDebuggerResult = action.payload.lastDebuggerResult;