integrate conductor into frontend

.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": "[email protected]",
   "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;
 };

src/commons/dropdown/DropdownSettings.tsx

@@ -1,4 +1,5 @@
 import {
+  Button,
   Dialog,
   DialogBody,
   FormGroup,
@@ -9,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { EditorBinding, WorkspaceSettingsContext } from '../WorkspaceSettingsContext';
 import LocaleSelector from './LocaleSelector';
@@ -35,6 +37,8 @@ const DropdownSettings: React.FC<Props> = ({ isOpen, onClose }) => {
     });
   };
 
+  const navigate = useNavigate();
+
   return (
     <Dialog
       className="settings"
@@ -61,6 +65,15 @@ const DropdownSettings: React.FC<Props> = ({ isOpen, onClose }) => {
           </Tooltip>
         </FormGroup>
         <LocaleSelector />
+        <Button
+          onClick={() => {
+            navigate('/features');
+            onClose();
+          }}
+          icon={IconNames.FLAG}
+        >
+          Feature Flags
+        </Button>
       </DialogBody>
     </Dialog>
   );

src/commons/featureFlags/FeatureFlag.ts

@@ -0,0 +1,21 @@
+export class FeatureFlag<T> {
+  private readonly _flagName: string;
+  private readonly _defaultValue: T;
+  private readonly _flagDesc?: string;
+
+  get flagName(): string {
+    return this._flagName;
+  }
+  get defaultValue(): T {
+    return this._defaultValue;
+  }
+  get flagDesc(): string | undefined {
+    return this._flagDesc;
+  }
+
+  constructor(flagName: string, defaultValue: T, flagDesc?: string) {
+    this._flagName = flagName;
+    this._defaultValue = defaultValue;
+    this._flagDesc = flagDesc;
+  }
+}

src/commons/featureFlags/featureSelector.ts

@@ -0,0 +1,5 @@
+import { OverallState } from '../application/ApplicationTypes';
+import { FeatureFlag } from './FeatureFlag';
+
+export const featureSelector = (featureFlag: FeatureFlag<any>) => (state: OverallState) =>
+  state.featureFlags.modifiedFlags[featureFlag.flagName];

src/commons/featureFlags/index.ts

@@ -0,0 +1,39 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { FeatureFlag } from './FeatureFlag';
+
+export type FeatureFlagsState = {
+  modifiedFlags: Record<string, any>;
+};
+
+export const defaultFeatureFlags = {
+  modifiedFlags: {}
+};
+
+const featureFlagsSlice = createSlice({
+  name: 'featureFlags',
+  initialState: defaultFeatureFlags,
+  reducers: {
+    setFlag<T>(
+      state: FeatureFlagsState,
+      action: { payload: { featureFlag: FeatureFlag<T>; value: T } }
+    ) {
+      state.modifiedFlags[action.payload.featureFlag.flagName] = action.payload.value;
+    },
+    resetFlag<T>(state: FeatureFlagsState, action: { payload: { featureFlag: FeatureFlag<T> } }) {
+      delete state.modifiedFlags[action.payload.featureFlag.flagName];
+    }
+  }
+});
+
+export const FeatureFlagsActions = featureFlagsSlice.actions;
+
+export const FeatureFlagsReducer = featureFlagsSlice.reducer;
+
+export function createFeatureFlag<T>(
+  flagName: string,
+  defaultValue: T,
+  flagDesc?: string
+): FeatureFlag<T> {
+  return new FeatureFlag<T>(flagName, defaultValue, flagDesc);
+}

src/commons/featureFlags/publicFlags.ts

@@ -0,0 +1,6 @@
+import { flagConductorEnable } from 'src/features/conductor/flagConductorEnable';
+import { flagConductorEvaluatorUrl } from 'src/features/conductor/flagConductorEvaluatorUrl';
+
+import { FeatureFlag } from './FeatureFlag';
+
+export const publicFlags: FeatureFlag<any>[] = [flagConductorEnable, flagConductorEvaluatorUrl];

src/commons/featureFlags/selectFeatureSaga.ts

@@ -0,0 +1,11 @@
+import { SagaIterator } from 'redux-saga';
+import { select } from 'redux-saga/effects';
+
+import { FeatureFlag } from './FeatureFlag';
+import { featureSelector } from './featureSelector';
+
+export function* selectFeatureSaga<T>(featureFlag: FeatureFlag<T>): SagaIterator<T> {
+  const { defaultValue } = featureFlag;
+  const flagValue = yield select(featureSelector(featureFlag));
+  return flagValue ?? defaultValue;
+}

src/commons/featureFlags/useFeature.ts

@@ -0,0 +1,8 @@
+import { useTypedSelector } from '../utils/Hooks';
+import { FeatureFlag } from './FeatureFlag';
+
+export function useFeature<T>(featureFlag: FeatureFlag<T>): T {
+  const { flagName, defaultValue } = featureFlag;
+  const flagValue = useTypedSelector(state => state.featureFlags.modifiedFlags[flagName]);
+  return flagValue ?? defaultValue;
+}

src/commons/mocks/StoreMocks.ts

@@ -14,6 +14,7 @@ import {
   defaultWorkspaceManager,
   OverallState
 } from '../application/ApplicationTypes';
+import { defaultFeatureFlags } from '../featureFlags';
 import { SourceActionType } from '../utils/ActionsHelper';
 import { DeepPartial } from '../utils/TypeHelper';
 
@@ -29,6 +30,7 @@ export function mockInitialStore(
     workspaces: defaultWorkspaceManager,
     session: defaultSession,
     stories: defaultStories,
+    featureFlags: defaultFeatureFlags,
     fileSystem: defaultFileSystem,
     sideContent: defaultSideContentManager
   };