Refactor and improve SourceBlock UI, fix bugs

src/features/stories/storiesComponents/SourceBlock.tsx

@@ -1,8 +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';
@@ -45,7 +48,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));
@@ -216,27 +218,26 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
   // to handle environment reset
   useEffect(() => {
     if (output.length === 0) {
-      console.log('setting to infinity');
       setOutputIndex(Infinity);
     }
-    setOutputIndex(output.length);
   }, [output]);
 
   selectMode(chapter, variant, ExternalLibraryName.NONE);
 
-  console.log(outputIndex);
-  console.log(output);
-
   return (
     <div className={Classes.DARK}>
       <div className="workspace">
         <Card>
           <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <button onClick={execEvaluate}>Run</button>
-            <button onClick={execResetEnv}>Reset Env</button>
+            <ControlBarRunButton
+              key="runButton"
+              handleEditorEval={execEvaluate}
+              isEntrypointFileDefined
+            />
+            <ControlButton label="Reset Env" onClick={execResetEnv} icon={IconNames.RESET} />
           </div>
           <p>{env === DEFAULT_ENV ? chapterVariantDisplay : env + ' | ' + chapterVariantDisplay}</p>
-          <div className="row workspace-parent" style={{ maxWidth: '800px' }}>
+          <div>
             <div className="right-parent">
               <Card>
                 <AceEditor
@@ -246,9 +247,7 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
                   height="1px"
                   width="100%"
                   value={code}
-                  onChange={code => {
-                    setCode(code);
-                  }}
+                  onChange={code => setCode(code)}
                   commands={[
                     {
                       name: 'evaluate',
@@ -277,12 +276,7 @@ const SourceBlock: React.FC<SourceBlockProps> = props => {
                   ) : null}
                 </div>
               </div>
-              <button onClick={() => setSideContentHidden(!sideContentHidden)}>Show/Hide</button>
-              <div
-                style={{
-                  display: sideContentHidden ? 'none' : undefined
-                }}
-              >
+              <div>
                 <StoriesSideContent {...sideContentProps} />
               </div>
             </div>

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,
@@ -27,7 +29,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,15 +65,17 @@ 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
 }) => {
+  const [isHidden, setIsHidden] = React.useState(true);
   return (
     <GenericSideContent
       {...otherProps}
@@ -77,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, otherProps.workspaceLocation))}
+                {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>

src/styles/_stories.scss

@@ -2,32 +2,6 @@
   .#{$ns}-card {
     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;
-    }
   }
 }