integrate conductor into frontend (#3084)

* integrate conductor into frontend

publicFlags.ts contains a list of "public" flags to be displayed in some sort of UI later

set flag `conductor.enable` to true to use conductor execution

* upgrade yarn(4.6.0)

this enables use of prepack hooks to automatically build raw deps on install

* fix lint issues

* fix gl resolution problem

* change github actions to use --immutable instead of --frozen-lockfile as argument to yarn install

* add sa-conductor to list of ignored module paths in jest config

* readd gl@^8.0.2 resolution to package.json

* format with prettier

* update caniuse-lite

* update sa-conductor(0.0.13)

this should fix webpack complaining about the dynamic import

* add ui to edit feature flags

also make feature flags a full class, and add evaluator url flag

* support repl, and use stop button to kill runner instead of timeout

* extract actual feature selector to separate function and rename selectFeature -> selectFeatureSaga

this makes it clear that selectFeature is intended to be called from redux-saga

* stop replReducer setting isRunning to true when using conductor, as it should be a no-op

also change featureSelector to take a flag instead of just its name

* revert replReducer change as it causes an error when using the repl

introduce missing conductor feature flag check in eval button logic

* hide eval button if not running when using conductor

* update lockfile after package.json change

* upgrade sa-conductor(0.1.3) to use new file communication protocol

* upgrade sa-conductor(0.1.4)

---------

Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>

Author: 3 people

.github/workflows/build-development.yml

@@ -27,7 +27,7 @@ jobs:
         run: echo "time=$(date -Iseconds)" >> $GITHUB_OUTPUT
       - name: yarn install and build
         run: |
-          yarn install --frozen-lockfile
+          yarn install --immutable
           yarn run build
         env:
           REACT_APP_URL_SHORTENER_SIGNATURE: ${{ secrets.REACT_APP_URL_SHORTENER_SIGNATURE }}

.github/workflows/ci.yml

@@ -36,7 +36,7 @@ jobs:
           node-version: 20
           cache: yarn
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Run command
         run: yarn run ${{ matrix.commands }}
       - name: Coveralls - Upload test coverage report

.gitignore

@@ -34,3 +34,19 @@ yarn-error.log
 # emacs backup files
 
 *~
+
+# yarn files
+
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Swap the comments on the following lines if you wish to use zero-installs
+# In that case, don't forget to run `yarn config set enableGlobalCache false`!
+# Documentation here: https://yarnpkg.com/features/caching#zero-installs
+
+#!.yarn/cache
+.pnp.*

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

craco.config.js

@@ -139,7 +139,8 @@ const cracoConfig = {
           'split-on-first',
           'filter-obj',
           '@sourceacademy/c-slang',
-          'java-parser'
+          'java-parser',
+          'sa-conductor'
         ),
         '^.+\\.module\\.(css|sass|scss)$'
       ];

package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "name": "frontend",
+  "packageManager": "yarn@4.6.0",
   "version": "1.4.3",
   "scripts-info": {
     "analyze": "Analyze bundle size breakdown",
@@ -91,6 +92,8 @@
     "redux-mock-store": "^1.5.4",
     "redux-saga": "^1.2.3",
     "rehype-react": "^8.0.0",
+    "sa-conductor": "https://github.com/tsammeow/sa-conductor.git#0.1.4",
+    "sa-languages": "https://github.com/source-academy/sa-languages.git",
     "showdown": "^2.1.0",
     "sourceror": "^0.8.5",
     "unified": "^11.0.0",
@@ -138,7 +141,6 @@
     "cross-env": "^7.0.3",
     "eslint": "^9.9.0",
     "eslint-plugin-react": "^7.35.0",
-    "//": "See: https://github.com/facebook/react/issues/28313#issuecomment-2076798972, https://github.com/t3-oss/create-t3-turbo/issues/984#issuecomment-2076413457",
     "eslint-plugin-react-hooks": "5.1.0-canary-cb151849e1-20240424",
     "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-simple-import-sort": "^12.1.1",
@@ -164,7 +166,7 @@
     "webpack-bundle-analyzer": "^4.9.0"
   },
   "resolutions": {
-    "**/gl": "^8.0.2"
+    "gl": "^8.0.2"
   },
   "browserslist": {
     "production": [

src/commons/application/ApplicationTypes.ts

@@ -7,6 +7,7 @@ import { PlaybackStatus, RecordingStatus } from '../../features/sourceRecorder/S
 import { StoriesEnvState, StoriesState } from '../../features/stories/StoriesTypes';
 import { freshSortState } from '../../pages/academy/grading/subcomponents/GradingSubmissionsTable';
 import { WORKSPACE_BASE_PATHS } from '../../pages/fileSystem/createInBrowserFileSystem';
+import { defaultFeatureFlags, FeatureFlagsState } from '../featureFlags';
 import { FileSystemState } from '../fileSystem/FileSystemTypes';
 import { SideContentManagerState, SideContentState } from '../sideContent/SideContentTypes';
 import Constants from '../utils/Constants';
@@ -29,6 +30,7 @@ export type OverallState = {
   readonly stories: StoriesState;
   readonly workspaces: WorkspaceManagerState;
   readonly dashboard: DashboardState;
+  readonly featureFlags: FeatureFlagsState;
   readonly fileSystem: FileSystemState;
   readonly sideContent: SideContentManagerState;
 };
@@ -612,6 +614,7 @@ export const defaultState: OverallState = {
   session: defaultSession,
   stories: defaultStories,
   workspaces: defaultWorkspaceManager,
+  featureFlags: defaultFeatureFlags,
   fileSystem: defaultFileSystem,
   sideContent: defaultSideContentManager
 };

src/commons/application/reducers/RootReducer.ts

@@ -1,4 +1,5 @@
 import { combineReducers, Reducer } from '@reduxjs/toolkit';
+import { FeatureFlagsReducer as featureFlags } from 'src/commons/featureFlags';
 import { SourceActionType } from 'src/commons/utils/ActionsHelper';
 
 import { AchievementReducer as achievement } from '../../../features/achievement/AchievementReducer';
@@ -20,6 +21,7 @@ const rootReducer: Reducer<OverallState, SourceActionType> = combineReducers({
   session,
   stories,
   workspaces,
+  featureFlags,
   fileSystem,
   sideContent
 });

src/commons/controlBar/ControlBarAutorunButtons.tsx

@@ -1,8 +1,10 @@
 import { Switch } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
+import { flagConductorEnable } from 'src/features/conductor/flagConductorEnable';
 
 import ControlButton from '../ControlButton';
+import { useFeature } from '../featureFlags/useFeature';
 import { useResponsive } from '../utils/Hooks';
 import { ControlBarRunButton } from './ControlBarRunButton';
 
@@ -46,7 +48,8 @@ export const ControlBarAutorunButtons: React.FC<ControlBarAutorunButtonProps> =
 
   // stop button does not do anything due to the blocking nature of eval methods (e.g. runInContext)
   // to prevent "flickering", we will just disable Stop Button for now
-  const showStopButton = false && (
+  const conductorEnabled = useFeature(flagConductorEnable);
+  const showStopButton = conductorEnabled && props.isRunning && (
     <ControlButton label="Stop" icon={IconNames.STOP} onClick={props.handleInterruptEval} />
   );
 
@@ -87,7 +90,14 @@ export const ControlBarAutorunButtons: React.FC<ControlBarAutorunButtonProps> =
           />
         </div>
       )}
-      {showAutoRunIndicator || showStopButton || showRunButton}
+      {conductorEnabled ? (
+        <>
+          {showAutoRunIndicator || showRunButton}
+          {showStopButton}
+        </>
+      ) : (
+        showAutoRunIndicator || showStopButton || showRunButton
+      )}
       {showDebuggerPause}
       {showDebuggerResume}
       {showDebuggerReset('Stop Debugger')}

src/commons/controlBar/ControlBarEvalButton.tsx

@@ -1,18 +1,22 @@
 import { Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
+import { flagConductorEnable } from 'src/features/conductor/flagConductorEnable';
 
 import ControlButton from '../ControlButton';
+import { useFeature } from '../featureFlags/useFeature';
 
 type Props = {
   handleReplEval: () => void;
   isRunning: boolean;
 };
 
 export const ControlBarEvalButton: React.FC<Props> = ({ handleReplEval, isRunning }) => {
-  return isRunning ? null : (
+  const conductorEnabled = useFeature(flagConductorEnable);
+  const showEvalButton = conductorEnabled ? isRunning : !isRunning;
+  return showEvalButton ? (
     <Tooltip content="...or press shift-enter in the REPL">
       <ControlButton label="Eval" icon={IconNames.CODE} onClick={handleReplEval} />
     </Tooltip>
-  );
+  ) : null;
 };