From 62f10ba12f192b88c367e190a57aa94cd6251f6b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:10:22 +0800
Subject: [PATCH 01/11] Make side content toggle button more descriptive

---
 src/features/stories/storiesComponents/SourceBlock.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index 678669cf55..18592f0d61 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -277,7 +277,9 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
                   ) : null}
                 </div>
               </div>
-              <button onClick={() => setSideContentHidden(!sideContentHidden)}>Show/Hide</button>
+              <button onClick={() => setSideContentHidden(!sideContentHidden)}>
+                {sideContentHidden ? 'Show Side Content' : 'Hide Side Content'}
+              </button>
               <div
                 style={{
                   display: sideContentHidden ? 'none' : undefined

From 3c13afb84edc46ebd67568a1edc121747e0172b8 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:19:58 +0800
Subject: [PATCH 02/11] Use standard run button for consistency

---
 src/features/stories/storiesComponents/SourceBlock.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index 18592f0d61..17291440c4 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import AceEditor from 'react-ace';
 import { useDispatch } from 'react-redux';
 import { styliseSublanguage } from 'src/commons/application/ApplicationTypes';
+import { ControlBarRunButton } from 'src/commons/controlBar/ControlBarRunButton';
 import { SideContentTab, SideContentType } from 'src/commons/sideContent/SideContentTypes';
 import Constants from 'src/commons/utils/Constants';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
@@ -232,7 +233,11 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
       <div className="workspace">
         <Card>
           <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <button onClick={execEvaluate}>Run</button>
+            <ControlBarRunButton
+              key="runButton"
+              handleEditorEval={execEvaluate}
+              isEntrypointFileDefined
+            />
             <button onClick={execResetEnv}>Reset Env</button>
           </div>
           <p>{env === DEFAULT_ENV ? chapterVariantDisplay : env + ' | ' + chapterVariantDisplay}</p>

From a2727bb4407a112c32a6ae1ff90075e90b694b4b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:23:12 +0800
Subject: [PATCH 03/11] Simplify code

---
 src/features/stories/storiesComponents/SourceBlock.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index 17291440c4..b2e3c0fbd9 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -251,9 +251,7 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
                   height="1px"
                   width="100%"
                   value={code}
-                  onChange={code => {
-                    setCode(code);
-                  }}
+                  onChange={code => setCode(code)}
                   commands={[
                     {
                       name: 'evaluate',

From 40651c0785ae0034bfce8d87693c4e52fba3a162 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:24:22 +0800
Subject: [PATCH 04/11] Fix output not showing

---
 src/features/stories/storiesComponents/SourceBlock.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index b2e3c0fbd9..b9db6b00c9 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -220,7 +220,6 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
       console.log('setting to infinity');
       setOutputIndex(Infinity);
     }
-    setOutputIndex(output.length);
   }, [output]);
 
   selectMode(chapter, variant, ExternalLibraryName.NONE);

From 720868d18cc52b28ea79ea728532cf243ef5493a Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:24:42 +0800
Subject: [PATCH 05/11] Remove console log statements

---
 src/features/stories/storiesComponents/SourceBlock.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index b9db6b00c9..efb38c6320 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -217,16 +217,12 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
   // to handle environment reset
   useEffect(() => {
     if (output.length === 0) {
-      console.log('setting to infinity');
       setOutputIndex(Infinity);
     }
   }, [output]);
 
   selectMode(chapter, variant, ExternalLibraryName.NONE);
 
-  console.log(outputIndex);
-  console.log(output);
-
   return (
     <div className={Classes.DARK}>
       <div className="workspace">

From f36eeb8699b73f8b0c96bff2dac07227592d4390 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:33:53 +0800
Subject: [PATCH 06/11] Remove unnecessary styles

---
 src/styles/_stories.scss | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/src/styles/_stories.scss b/src/styles/_stories.scss
index 85c5df2efd..24f9d4ee18 100644
--- a/src/styles/_stories.scss
+++ b/src/styles/_stories.scss
@@ -3,31 +3,6 @@
     background-color: $cadet-color-2;
     padding: 0.4rem 0.6rem 0.4rem 0.6rem;
     margin: 0 0 0.5rem 0;
-
-    pre {
-      background-color: transparent;
-      box-shadow: none;
-      color: inherit;
-      padding: 0px;
-      margin: 0px;
-      /**
-        * white-space, word-wrap and word-break
-        * are specified to allow all output to wrap.
-        */
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      word-break: break-word;
-      /**
-        * Use same fonts as ace-editor for
-        * output. Taken from react-ace
-        * sourcecode, font size modified.
-        */
-      font: 16px / normal 'Inconsolata', 'Consolas', monospace;
-    }
-
-    .variantChapText {
-      color: #ced9e0;
-    }
   }
 }
 

From 4a3df8697a6a030299609145f22654031f303a46 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:49:16 +0800
Subject: [PATCH 07/11] Remove unused class

---
 src/features/stories/storiesComponents/SourceBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index efb38c6320..9c288ce0a9 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -236,7 +236,7 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
             <button onClick={execResetEnv}>Reset Env</button>
           </div>
           <p>{env === DEFAULT_ENV ? chapterVariantDisplay : env + ' | ' + chapterVariantDisplay}</p>
-          <div className="row workspace-parent" style={{ maxWidth: '800px' }}>
+          <div>
             <div className="right-parent">
               <Card>
                 <AceEditor

From 68d2d6e9a14ac1091d3711341b30bb9f4f42f693 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 13:49:37 +0800
Subject: [PATCH 08/11] Allow specifying hidden body in StoriesSideContent

---
 .../stories/storiesComponents/SourceBlock.tsx        |  9 +++------
 .../stories/storiesComponents/StoriesSideContent.tsx | 12 +++++++++---
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index 9c288ce0a9..dda595a247 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -198,7 +198,8 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
     },
     workspaceLocation: 'stories',
     storyEnv: env,
-    getDebuggerContext: state => state.stories.envs[env].debuggerContext
+    getDebuggerContext: state => state.stories.envs[env].debuggerContext,
+    isHidden: sideContentHidden
   };
 
   const execEvaluate = () => {
@@ -278,11 +279,7 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
               <button onClick={() => setSideContentHidden(!sideContentHidden)}>
                 {sideContentHidden ? 'Show Side Content' : 'Hide Side Content'}
               </button>
-              <div
-                style={{
-                  display: sideContentHidden ? 'none' : undefined
-                }}
-              >
+              <div>
                 <StoriesSideContent {...sideContentProps} />
               </div>
             </div>
diff --git a/src/features/stories/storiesComponents/StoriesSideContent.tsx b/src/features/stories/storiesComponents/StoriesSideContent.tsx
index 4066b1806c..6b222b69e7 100644
--- a/src/features/stories/storiesComponents/StoriesSideContent.tsx
+++ b/src/features/stories/storiesComponents/StoriesSideContent.tsx
@@ -17,6 +17,7 @@ type StateProps = {
   selectedTabId?: SideContentType; // Optional due to uncontrolled tab component in EditingWorkspace
   renderActiveTabPanelOnly?: boolean;
   storyEnv: string;
+  isHidden: boolean;
 };
 
 /**
@@ -27,7 +28,11 @@ const generateClassName = (id: string | undefined) =>
     ? 'side-content-tooltip side-content-tab-alert'
     : 'side-content-tooltip';
 
-const renderTab = (tab: SideContentTab, workspaceLocation?: WorkspaceLocation) => {
+const renderTab = (
+  tab: SideContentTab,
+  isHidden: boolean,
+  workspaceLocation?: WorkspaceLocation
+) => {
   const iconSize = 20;
   const tabId = tab.id === undefined || tab.id === SideContentType.module ? tab.label : tab.id;
   const tabTitle = (
@@ -59,13 +64,14 @@ const renderTab = (tab: SideContentTab, workspaceLocation?: WorkspaceLocation) =
     : tab.body;
   const tabPanel: JSX.Element = <div className="side-content-text">{tabBody}</div>;
 
-  return <Tab key={tabId} {...tabProps} panel={tabPanel} />;
+  return <Tab key={tabId} {...tabProps} panel={isHidden ? undefined : tabPanel} />;
 };
 
 // TODO: Reduce code duplication with the main SideContent component
 const StoriesSideContent: React.FC<StoriesSideContentProps> = ({
   selectedTabId,
   renderActiveTabPanelOnly,
+  isHidden,
   ...otherProps
 }) => {
   return (
@@ -81,7 +87,7 @@ const StoriesSideContent: React.FC<StoriesSideContentProps> = ({
                 renderActiveTabPanelOnly={renderActiveTabPanelOnly}
                 selectedTabId={selectedTabId}
               >
-                {dynamicTabs.map(tab => renderTab(tab, otherProps.workspaceLocation))}
+                {dynamicTabs.map(tab => renderTab(tab, isHidden, otherProps.workspaceLocation))}
               </Tabs>
             </div>
           </Card>

From 734c50e86de84c11bc8085937fceaa0c447726c6 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 14:04:30 +0800
Subject: [PATCH 09/11] Move hiding logic to StoriesSideContent component

---
 .../stories/storiesComponents/SourceBlock.tsx  |  7 +------
 .../storiesComponents/StoriesSideContent.tsx   | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index dda595a247..b0fbbaa9d5 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -46,7 +46,6 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
   const dispatch = useDispatch();
   const [code, setCode] = useState<string>(props.children);
   const [outputIndex, setOutputIndex] = useState(Infinity);
-  const [sideContentHidden, setSideContentHidden] = useState<boolean>(true);
   const [selectedTab, setSelectedTab] = useState(SideContentType.introduction);
 
   const envList = useTypedSelector(store => Object.keys(store.stories.envs));
@@ -198,8 +197,7 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
     },
     workspaceLocation: 'stories',
     storyEnv: env,
-    getDebuggerContext: state => state.stories.envs[env].debuggerContext,
-    isHidden: sideContentHidden
+    getDebuggerContext: state => state.stories.envs[env].debuggerContext
   };
 
   const execEvaluate = () => {
@@ -276,9 +274,6 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
                   ) : null}
                 </div>
               </div>
-              <button onClick={() => setSideContentHidden(!sideContentHidden)}>
-                {sideContentHidden ? 'Show Side Content' : 'Hide Side Content'}
-              </button>
               <div>
                 <StoriesSideContent {...sideContentProps} />
               </div>
diff --git a/src/features/stories/storiesComponents/StoriesSideContent.tsx b/src/features/stories/storiesComponents/StoriesSideContent.tsx
index 6b222b69e7..5fa310b06b 100644
--- a/src/features/stories/storiesComponents/StoriesSideContent.tsx
+++ b/src/features/stories/storiesComponents/StoriesSideContent.tsx
@@ -1,6 +1,8 @@
 import { Card, Icon, Tab, TabProps, Tabs } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import * as React from 'react';
+import ControlButton from 'src/commons/ControlButton';
 
 import GenericSideContent, {
   generateIconId,
@@ -17,7 +19,6 @@ type StateProps = {
   selectedTabId?: SideContentType; // Optional due to uncontrolled tab component in EditingWorkspace
   renderActiveTabPanelOnly?: boolean;
   storyEnv: string;
-  isHidden: boolean;
 };
 
 /**
@@ -71,9 +72,10 @@ const renderTab = (
 const StoriesSideContent: React.FC<StoriesSideContentProps> = ({
   selectedTabId,
   renderActiveTabPanelOnly,
-  isHidden,
+  // isHidden,
   ...otherProps
 }) => {
+  const [isHidden, setIsHidden] = React.useState(true);
   return (
     <GenericSideContent
       {...otherProps}
@@ -83,11 +85,21 @@ const StoriesSideContent: React.FC<StoriesSideContentProps> = ({
             <div className="side-content-tabs">
               <Tabs
                 id="side-content-tabs"
-                onChange={changeTabsCallback}
+                onChange={(newTabId: SideContentType, prevTabId: SideContentType, e) => {
+                  setIsHidden(false);
+                  changeTabsCallback(newTabId, prevTabId, e);
+                }}
                 renderActiveTabPanelOnly={renderActiveTabPanelOnly}
                 selectedTabId={selectedTabId}
               >
                 {dynamicTabs.map(tab => renderTab(tab, isHidden, otherProps.workspaceLocation))}
+                {dynamicTabs.length ? (
+                  <ControlButton
+                    label={isHidden ? 'Show' : 'Hide'}
+                    onClick={() => setIsHidden(!isHidden)}
+                    icon={isHidden ? IconNames.EYE_OPEN : IconNames.EYE_OFF}
+                  />
+                ) : undefined}
               </Tabs>
             </div>
           </Card>

From 9266c2925b8243d3d02c4f9ca8dc51dd4d239526 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 14:12:26 +0800
Subject: [PATCH 10/11] Remove unnecessary margin

---
 src/styles/_stories.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/_stories.scss b/src/styles/_stories.scss
index 24f9d4ee18..53bd96a66a 100644
--- a/src/styles/_stories.scss
+++ b/src/styles/_stories.scss
@@ -2,7 +2,6 @@
   .#{$ns}-card {
     background-color: $cadet-color-2;
     padding: 0.4rem 0.6rem 0.4rem 0.6rem;
-    margin: 0 0 0.5rem 0;
   }
 }
 

From 20c3951113e02edc45b94261ad0bcab7b8a658e9 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Sat, 5 Aug 2023 15:49:43 +0800
Subject: [PATCH 11/11] Use ControlButton for resetting stories env

Improves UI consistency with the rest of the codebase.
---
 src/features/stories/storiesComponents/SourceBlock.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/features/stories/storiesComponents/SourceBlock.tsx b/src/features/stories/storiesComponents/SourceBlock.tsx
index b0fbbaa9d5..0daf0c921b 100644
--- a/src/features/stories/storiesComponents/SourceBlock.tsx
+++ b/src/features/stories/storiesComponents/SourceBlock.tsx
@@ -1,9 +1,11 @@
 import { Card, Classes } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import React, { useEffect, useRef, useState } from 'react';
 import AceEditor from 'react-ace';
 import { useDispatch } from 'react-redux';
 import { styliseSublanguage } from 'src/commons/application/ApplicationTypes';
 import { ControlBarRunButton } from 'src/commons/controlBar/ControlBarRunButton';
+import ControlButton from 'src/commons/ControlButton';
 import { SideContentTab, SideContentType } from 'src/commons/sideContent/SideContentTypes';
 import Constants from 'src/commons/utils/Constants';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
@@ -232,7 +234,7 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
               handleEditorEval={execEvaluate}
               isEntrypointFileDefined
             />
-            <button onClick={execResetEnv}>Reset Env</button>
+            <ControlButton label="Reset Env" onClick={execResetEnv} icon={IconNames.RESET} />
           </div>
           <p>{env === DEFAULT_ENV ? chapterVariantDisplay : env + ' | ' + chapterVariantDisplay}</p>
           <div>