Hook up sidebar tabs to mobile view & add icons to sidebar tabs (#2242)

* Take in sidebar tabs as prop in MobileWorkspace

* Add icon to sidebar tabs

* Add sidebar tabs to mobile view

* Disable draggable REPL on mobile view when on files tab

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -807,15 +807,16 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     externalLibrary: question?.library?.external?.name || 'NONE',
     replButtons: replButtons()
   };
+  const sideBarProps = {
+    tabs: []
+  };
   const workspaceProps: WorkspaceProps = {
     controlBarProps: controlBarProps(questionId),
     editorProps: editorProps,
     handleSideContentHeightChange: props.handleSideContentHeightChange,
     hasUnsavedChanges: props.hasUnsavedChanges,
     mcqProps: mcqProps,
-    sideBarProps: {
-      tabs: []
-    },
+    sideBarProps: sideBarProps,
     sideContentHeight: props.sideContentHeight,
     sideContentProps: sideContentProps(props, questionId),
     replProps: replProps
@@ -825,6 +826,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
     hasUnsavedChanges: props.hasUnsavedChanges,
     mcqProps: mcqProps,
     replProps: replProps,
+    sideBarProps: sideBarProps,
     mobileSideContentProps: mobileSideContentProps(questionId)
   };
 

src/commons/mobileWorkspace/MobileWorkspace.tsx

@@ -10,6 +10,7 @@ import ControlBar from '../controlBar/ControlBar';
 import Editor, { EditorProps } from '../editor/Editor';
 import McqChooser, { McqChooserProps } from '../mcqChooser/McqChooser';
 import { ReplProps } from '../repl/Repl';
+import { SideBarTab } from '../sideBar/SideBar';
 import { SideContentTab, SideContentType } from '../sideContent/SideContentTypes';
 import DraggableRepl from './DraggableRepl';
 import MobileKeyboard from './MobileKeyboard';
@@ -33,6 +34,9 @@ type StateProps = {
   hasUnsavedChanges?: boolean; // Not used in Playground
   mcqProps?: McqChooserProps; // Not used in Playground
   replProps: ReplProps;
+  sideBarProps: {
+    tabs: SideBarTab[];
+  };
   mobileSideContentProps: MobileSideContentProps;
 };
 
@@ -180,8 +184,9 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
       handleHideRepl();
     }
 
-    // Disable draggable REPL when on the stepper tab.
+    // Disable draggable REPL when on the files & stepper tab.
     if (
+      newTabId === SideContentType.files ||
       newTabId === SideContentType.substVisualizer ||
       (prevTabId === SideContentType.substVisualizer &&
         newTabId === SideContentType.mobileEditorRun)
@@ -192,6 +197,9 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
     }
   };
 
+  // Convert sidebar tabs with a side content tab ID into side content tabs.
+  const sideBarTabs: SideContentTab[] = props.sideBarProps.tabs.filter(tab => tab.id !== undefined);
+
   const mobileEditorTab: SideContentTab = React.useMemo(
     () => ({
       label: 'Editor',
@@ -225,6 +233,7 @@ const MobileWorkspace: React.FC<MobileWorkspaceProps> = props => {
       },
       tabs: {
         beforeDynamicTabs: [
+          ...sideBarTabs,
           mobileEditorTab,
           ...props.mobileSideContentProps.tabs.beforeDynamicTabs
         ],

src/commons/sideBar/SideBar.tsx

@@ -1,10 +1,21 @@
-import { Card } from '@blueprintjs/core';
+import { Card, Icon, IconName } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 
+import { SideContentType } from '../sideContent/SideContentTypes';
+
+/**
+ * @property label The displayed name of the tab.
+ * @property body The element to be rendered inside the sidebar tab.
+ * @property iconName The name of the displayed icon.
+ * @property id The ID of the tab when displayed as a side content on the mobile view.
+ *              Omit if the tab should only be shown in the sidebar on the desktop view.
+ */
 export type SideBarTab = {
   label: string;
   body: JSX.Element;
+  iconName: IconName;
+  id?: SideContentType;
 };
 
 export type SideBarProps = {
@@ -46,6 +57,7 @@ const SideBar: React.FC<SideBarProps> = (props: SideBarProps) => {
             className={classNames('tab', { selected: isExpanded && selectedTabIndex === index })}
             onClick={() => handleTabSelection(index)}
           >
+            <Icon className="tab-icon" icon={tab.iconName} size={14} />
             {tab.label}
           </Card>
         ))}

src/commons/sideContent/SideContentTypes.ts

@@ -21,6 +21,7 @@ export enum SideContentType {
   editorQuestionOverview = 'editor_question_overview',
   editorQuestionTemplate = 'editor_question_template',
   envVisualizer = 'env_visualizer',
+  files = 'files',
   grading = 'grading',
   introduction = 'introduction',
   module = 'module',

src/pages/githubAssessments/GitHubAssessmentWorkspace.tsx

@@ -1084,22 +1084,24 @@ const GitHubAssessmentWorkspace: React.FC<GitHubAssessmentWorkspaceProps> = prop
     externalLibrary: ExternalLibraryName.NONE,
     replButtons: replButtons()
   };
+  const sideBarProps = {
+    tabs: []
+  };
   const workspaceProps: WorkspaceProps = {
     controlBarProps: controlBarProps(),
     editorProps: currentTaskIsMCQ && displayMCQInEditor ? undefined : editorProps,
     handleSideContentHeightChange: props.handleSideContentHeightChange,
     hasUnsavedChanges: hasUnsavedChanges,
     mcqProps: mcqProps,
-    sideBarProps: {
-      tabs: []
-    },
+    sideBarProps: sideBarProps,
     sideContentHeight: props.sideContentHeight,
     sideContentProps: sideContentProps(props),
     replProps: replProps
   };
   const mobileWorkspaceProps: MobileWorkspaceProps = {
     editorProps: currentTaskIsMCQ && displayMCQInEditor ? undefined : editorProps,
     replProps: replProps,
+    sideBarProps: sideBarProps,
     hasUnsavedChanges: hasUnsavedChanges,
     mcqProps: mcqProps,
     mobileSideContentProps: mobileSideContentProps()

src/pages/playground/Playground.tsx

@@ -774,6 +774,17 @@ const Playground: React.FC<PlaygroundProps> = props => {
     disableScrolling: isSicpEditor
   };
 
+  const sideBarProps = {
+    tabs: [
+      {
+        label: 'Files',
+        body: <FileSystemView basePath="/playground" />,
+        iconName: IconNames.FOLDER_CLOSE,
+        id: SideContentType.files
+      }
+    ]
+  };
+
   const workspaceProps: WorkspaceProps = {
     controlBarProps: {
       editorButtons: [
@@ -793,9 +804,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     editorProps: editorProps,
     handleSideContentHeightChange: props.handleSideContentHeightChange,
     replProps: replProps,
-    sideBarProps: {
-      tabs: [{ label: 'Files', body: <FileSystemView basePath="/playground" /> }]
-    },
+    sideBarProps: sideBarProps,
     sideContentHeight: props.sideContentHeight,
     sideContentProps: {
       selectedTabId: selectedTab,
@@ -813,6 +822,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
   const mobileWorkspaceProps: MobileWorkspaceProps = {
     editorProps: editorProps,
     replProps: replProps,
+    sideBarProps: sideBarProps,
     mobileSideContentProps: {
       mobileControlBarProps: {
         editorButtons: [

src/pages/sourcecast/Sourcecast.tsx

@@ -296,16 +296,18 @@ const Sourcecast: React.FC<SourcecastProps> = props => {
     replButtons: [evalButton, clearButton]
   };
 
+  const sideBarProps = {
+    tabs: []
+  };
+
   const workspaceProps: WorkspaceProps = {
     controlBarProps: {
       editorButtons: [autorunButtons, chapterSelect, externalLibrarySelect]
     },
     customEditor: <SourceRecorderEditor {...editorProps} />,
     handleSideContentHeightChange: props.handleSideContentHeightChange,
     replProps: replProps,
-    sideBarProps: {
-      tabs: []
-    },
+    sideBarProps: sideBarProps,
     sideContentHeight: props.sideContentHeight,
     sideContentProps: {
       selectedTabId: selectedTab,
@@ -327,6 +329,7 @@ const Sourcecast: React.FC<SourcecastProps> = props => {
       />
     ),
     replProps: replProps,
+    sideBarProps: sideBarProps,
     mobileSideContentProps: {
       mobileControlBarProps: {
         editorButtons: [autorunButtons, chapterSelect, externalLibrarySelect]

src/styles/_sideBar.scss

@@ -36,13 +36,22 @@
   // !important is necessary to override the default Card background-color property.
   background-color: $cadet-color-2 !important;
   user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 6px;
+  text-align: center;
 
   &.selected {
     // !important is necessary to override the default Card background-color property.
     background-color: $cadet-color-1 !important;
   }
 }
 
+.tab-icon {
+  transform: rotate(90deg);
+}
+
 .panel {
   // !important is necessary to override the default Card background-color property.
   background-color: $cadet-color-2 !important;