Overhaul of SideContent component

public/externalLibs/env_visualizer/visualizer.js

@@ -947,8 +947,8 @@
   function draw_env(context) {
 
     // blink icon
-    const icon = document.getElementById("Env Visualizer-icon")
-    icon.classList.add("side-content-header-button-alert")
+    const icon = document.getElementById("env-icon")
+    icon.classList.add("side-content-tab-alert")
 
     // reset current drawing
     fnObjectLayer.scene.clear()

public/externalLibs/inspector/inspector.js

@@ -107,12 +107,6 @@
     "Symbol(Used to implement hoisting)": " "
   }
 
-  setInterval(()=>{
-    if(document.getElementById("inspector-container") != null){
-      document.getElementById("Inspector-icon").classList.remove("side-content-header-button-alert");
-    }
-  },1000)
-
   function updateContext(context, stringify) {
     function dumpTable(env) {
       var res = '';
@@ -127,10 +121,10 @@
     }
 
     // icon to blink
-    const icon = document.getElementById("Inspector-icon");
+    const icon = document.getElementById("inspector-icon");
 
     if (!context && icon) {
-      icon.classList.remove("side-content-header-button-alert");
+      icon.classList.remove("side-content-tab-alert");
       container.innerHTML = "";
       return
     }
@@ -151,7 +145,7 @@
         newtable.appendChild(tbody);
         container.appendChild(newtable);
         if (icon) {
-          icon.classList.add("side-content-header-button-alert");
+          icon.classList.add("side-content-tab-alert");
         }
       }
     } catch (e) {

src/actions/__tests__/workspaces.ts

@@ -6,7 +6,6 @@ import {
   beginClearContext,
   browseReplHistoryDown,
   browseReplHistoryUp,
-  changeActiveTab,
   changeEditorHeight,
   changeEditorWidth,
   changePlaygroundExternal,
@@ -52,18 +51,6 @@ test('browseReplHistoryUp generates correct action object', () => {
   });
 });
 
-test('changeActiveTab generates correct action object', () => {
-  const activeTab = 3;
-  const action = changeActiveTab(activeTab, playgroundWorkspace);
-  expect(action).toEqual({
-    type: actionTypes.CHANGE_ACTIVE_TAB,
-    payload: {
-      activeTab,
-      workspaceLocation: playgroundWorkspace
-    }
-  });
-});
-
 test('changePlaygroundExternal generates correct action object', () => {
   const newExternal = 'new-external-test';
   const action = changePlaygroundExternal(newExternal);

src/actions/actionTypes.ts

@@ -32,7 +32,6 @@ export const HIGHLIGHT_LINE = 'HIGHLIGHT_LINE';
 export const BEGIN_CLEAR_CONTEXT = 'BEGIN_CLEAR_CONTEXT';
 export const BROWSE_REPL_HISTORY_DOWN = 'BROWSE_REPL_HISTORY_DOWN';
 export const BROWSE_REPL_HISTORY_UP = 'BROWSE_REPL_HISTORY_UP';
-export const CHANGE_ACTIVE_TAB = 'CHANGE_ACTIVE_TAB';
 export const CHANGE_EDITOR_HEIGHT = 'CHANGE_EDITOR_HEIGHT';
 export const CHANGE_EDITOR_WIDTH = 'CHANGE_EDITOR_WIDTH';
 export const CHANGE_EXEC_TIME = 'CHANGE_EXEC_TIME';

src/actions/workspaces.ts

@@ -38,14 +38,6 @@ export const browseReplHistoryUp: ActionCreator<actionTypes.IAction> = (
   payload: { workspaceLocation }
 });
 
-export const changeActiveTab: ActionCreator<actionTypes.IAction> = (
-  activeTab: number,
-  workspaceLocation: WorkspaceLocation
-) => ({
-  type: actionTypes.CHANGE_ACTIVE_TAB,
-  payload: { activeTab, workspaceLocation }
-});
-
 export const changePlaygroundExternal: ActionCreator<actionTypes.IAction> = (
   newExternal: string
 ) => ({

src/components/Playground.tsx

@@ -37,7 +37,6 @@ the REPL.
 export interface IPlaygroundProps extends IDispatchProps, IStateProps, RouteComponentProps<{}> {}
 
 export interface IStateProps {
-  activeTab: number;
   editorSessionId: string;
   editorValue: string;
   editorHeight?: number;
@@ -63,7 +62,6 @@ export interface IStateProps {
 export interface IDispatchProps {
   handleBrowseHistoryDown: () => void;
   handleBrowseHistoryUp: () => void;
-  handleChangeActiveTab: (activeTab: number) => void;
   handleChangeExecTime: (execTime: number) => void;
   handleChapterSelect: (chapter: number) => void;
   handleEditorEval: () => void;
@@ -173,8 +171,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
       },
       sideContentHeight: this.props.sideContentHeight,
       sideContentProps: {
-        activeTab: this.props.activeTab,
-        handleChangeActiveTab: this.props.handleChangeActiveTab,
+        defaultSelectedTabId: 'introduction',
         tabs: [playgroundIntroductionTab, listVisualizerTab, inspectorTab, envVisualizerTab]
       }
     };
@@ -200,26 +197,30 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
 
 const playgroundIntroductionTab: SideContentTab = {
   label: 'Introduction',
-  icon: IconNames.COMPASS,
-  body: <Markdown content={INTRODUCTION} />
+  iconName: IconNames.COMPASS,
+  body: <Markdown content={INTRODUCTION} />,
+  id: 'introduction'
 };
 
 const listVisualizerTab: SideContentTab = {
   label: 'Data Visualizer',
-  icon: IconNames.EYE_OPEN,
-  body: <ListVisualizer />
+  iconName: IconNames.EYE_OPEN,
+  body: <ListVisualizer />,
+  id: 'data'
 };
 
 const inspectorTab: SideContentTab = {
   label: 'Inspector',
-  icon: IconNames.SEARCH,
-  body: <Inspector />
+  iconName: IconNames.SEARCH,
+  body: <Inspector />,
+  id: 'inspector'
 };
 
 const envVisualizerTab: SideContentTab = {
   label: 'Env Visualizer',
-  icon: IconNames.GLOBE,
-  body: <EnvVisualizer />
+  iconName: IconNames.GLOBE,
+  body: <EnvVisualizer />,
+  id: 'env'
 };
 
 export default Playground;

src/components/__tests__/Playground.tsx

@@ -13,7 +13,6 @@ const baseProps = {
   isRunning: false,
   isDebugging: false,
   enableDebugging: true,
-  activeTab: 0,
   editorSessionId: '',
   editorWidth: '50%',
   isEditorAutorun: false,
@@ -27,7 +26,6 @@ const baseProps = {
   websocketStatus: 0,
   handleBrowseHistoryDown: () => {},
   handleBrowseHistoryUp: () => {},
-  handleChangeActiveTab: (n: number) => {},
   handleChangeExecTime: (execTime: number) => {},
   handleChapterSelect: (chapter: number) => {},
   handleEditorEval: () => {},

src/components/academy/grading/GradingWorkspace.tsx

@@ -26,7 +26,6 @@ import { Grading, IAnsweredQuestion } from './gradingShape';
 export type GradingWorkspaceProps = DispatchProps & OwnProps & StateProps;
 
 export type StateProps = {
-  activeTab: number;
   autogradingResults: AutogradingResult[];
   grading?: Grading;
   editorPrepend: string;
@@ -56,7 +55,6 @@ export type OwnProps = {
 export type DispatchProps = {
   handleBrowseHistoryDown: () => void;
   handleBrowseHistoryUp: () => void;
-  handleChangeActiveTab: (activeTab: number) => void;
   handleChapterSelect: (chapter: any, changeEvent: any) => void;
   handleClearContext: (library: Library) => void;
   handleEditorEval: () => void;
@@ -240,12 +238,10 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
     props: GradingWorkspaceProps,
     questionId: number
   ) => ({
-    activeTab: props.activeTab,
-    handleChangeActiveTab: props.handleChangeActiveTab,
     tabs: [
       {
         label: `Grading: Question ${questionId}`,
-        icon: IconNames.TICK,
+        iconName: IconNames.TICK,
         /* Render an editor with the xp given to the current question. */
         body: (
           <GradingEditor
@@ -260,35 +256,40 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
             maxXp={props.grading![questionId].question.maxXp}
             studentName={props.grading![questionId].student.name}
           />
-        )
+        ),
+        id: 'grading'
       },
       {
         label: `Task ${questionId + 1}`,
-        icon: IconNames.NINJA,
-        body: <Markdown content={props.grading![questionId].question.content} />
+        iconName: IconNames.NINJA,
+        body: <Markdown content={props.grading![questionId].question.content} />,
+        id: 'question_overview'
       },
       {
         label: `Chat`,
-        icon: IconNames.CHAT,
+        iconName: IconNames.CHAT,
         body: USE_CHATKIT ? (
           <ChatApp
             roomId={props.grading![questionId].grade.roomId}
             submissionId={this.props.submissionId}
           />
         ) : (
-          <span>ChatKit disabled.</span>
-        )
+          <span>Chatkit disabled.</span>
+        ),
+        id: 'chat',
+        disabled: !USE_CHATKIT
       },
       {
         label: `Autograder`,
-        icon: IconNames.AIRPLANE,
+        iconName: IconNames.AIRPLANE,
         body: (
           <Autograder
             testcases={props.editorTestcases}
             autogradingResults={props.autogradingResults}
             handleTestcaseEval={this.props.handleTestcaseEval}
           />
-        )
+        ),
+        id: 'autograder'
       }
     ]
   });

src/components/assessment/AssessmentWorkspace.tsx

@@ -21,7 +21,7 @@ import { controlButton } from '../commons';
 import Markdown from '../commons/Markdown';
 import Workspace, { WorkspaceProps } from '../workspace';
 import { ControlBarProps } from '../workspace/ControlBar';
-import { SideContentProps } from '../workspace/side-content';
+import { SideContentProps, SideContentTab } from '../workspace/side-content';
 import Autograder from '../workspace/side-content/Autograder';
 import ToneMatrix from '../workspace/side-content/ToneMatrix';
 import {
@@ -39,7 +39,6 @@ import GradingResult from './GradingResult';
 export type AssessmentWorkspaceProps = DispatchProps & OwnProps & StateProps;
 
 export type StateProps = {
-  activeTab: number;
   assessment?: IAssessment;
   autogradingResults: AutogradingResult[];
   editorPrepend: string;
@@ -72,7 +71,6 @@ export type DispatchProps = {
   handleAssessmentFetch: (assessmentId: number) => void;
   handleBrowseHistoryDown: () => void;
   handleBrowseHistoryUp: () => void;
-  handleChangeActiveTab: (activeTab: number) => void;
   handleChapterSelect: (chapter: any, changeEvent: any) => void;
   handleClearContext: (library: Library) => void;
   handleEditorEval: () => void;
@@ -328,35 +326,38 @@ class AssessmentWorkspace extends React.Component<
     props: AssessmentWorkspaceProps,
     questionId: number
   ) => {
-    const tabs = [
+    const tabs: SideContentTab[] = [
       {
         label: `Task ${questionId + 1}`,
-        icon: IconNames.NINJA,
-        body: <Markdown content={props.assessment!.questions[questionId].content} />
+        iconName: IconNames.NINJA,
+        body: <Markdown content={props.assessment!.questions[questionId].content} />,
+        id: 'question_overview'
       },
       {
         label: `${props.assessment!.category} Briefing`,
-        icon: IconNames.BRIEFCASE,
-        body: <Markdown content={props.assessment!.longSummary} />
+        iconName: IconNames.BRIEFCASE,
+        body: <Markdown content={props.assessment!.longSummary} />,
+        id: 'briefing'
       },
       {
         label: `${props.assessment!.category} Autograder`,
-        icon: IconNames.AIRPLANE,
+        iconName: IconNames.AIRPLANE,
         body: (
           <Autograder
             testcases={props.editorTestcases}
             autogradingResults={props.autogradingResults}
             handleTestcaseEval={this.props.handleTestcaseEval}
           />
-        )
+        ),
+        id: 'autograder'
       }
     ];
     const isGraded = props.assessment!.questions[questionId].grader !== null;
     if (isGraded) {
       tabs.push(
         {
           label: `Grading`,
-          icon: IconNames.TICK,
+          iconName: IconNames.TICK,
           body: (
             <GradingResult
               graderName={props.assessment!.questions[questionId].grader.name}
@@ -366,19 +367,22 @@ class AssessmentWorkspace extends React.Component<
               maxGrade={props.assessment!.questions[questionId].maxGrade}
               maxXp={props.assessment!.questions[questionId].maxXp}
             />
-          )
+          ),
+          id: 'grading'
         },
         {
           label: `Chat`,
-          icon: IconNames.CHAT,
+          iconName: IconNames.CHAT,
           body: USE_CHATKIT ? (
             <ChatApp
               assessmentId={this.props.assessment!.id}
               roomId={props.assessment!.questions[questionId].roomId}
             />
           ) : (
             <span>Chatkit disabled.</span>
-          )
+          ),
+          id: 'chat',
+          disabled: !USE_CHATKIT
         }
       );
     }
@@ -387,15 +391,12 @@ class AssessmentWorkspace extends React.Component<
     if (functionsAttached.includes('get_matrix')) {
       tabs.push({
         label: `Tone Matrix`,
-        icon: IconNames.GRID_VIEW,
-        body: <ToneMatrix />
+        iconName: IconNames.GRID_VIEW,
+        body: <ToneMatrix />,
+        id: 'tone_matrix'
       });
     }
-    return {
-      activeTab: props.activeTab,
-      handleChangeActiveTab: props.handleChangeActiveTab,
-      tabs
-    };
+    return { tabs };
   };
 
   /** Pre-condition: IAssessment has been loaded */

src/components/assessment/__tests__/AssessmentWorkspace.tsx

@@ -6,7 +6,6 @@ import { Library } from '../assessmentShape';
 import AssessmentWorkspace, { AssessmentWorkspaceProps } from '../AssessmentWorkspace';
 
 const defaultProps: AssessmentWorkspaceProps = {
-  activeTab: 0,
   assessmentId: 0,
   autogradingResults: [],
   notAttempted: true,
@@ -22,7 +21,6 @@ const defaultProps: AssessmentWorkspaceProps = {
   handleAssessmentFetch: (assessmentId: number) => {},
   handleBrowseHistoryDown: () => {},
   handleBrowseHistoryUp: () => {},
-  handleChangeActiveTab: (activeTab: number) => {},
   handleChapterSelect: (chapter: any, changeEvent: any) => {},
   handleClearContext: (library: Library) => {},
   handleEditorEval: () => {},