TCA-299 - update editor UI to match the classic view according to figma

Author: vas3a

client/src/components/layouts/global.css

@@ -491,7 +491,10 @@ fieldset[disabled] .btn-primary.focus {
   }
 }
 
-.button-group .btn:not(:last-child) {
+.button-group {
+  margin-bottom: -10px;
+}
+.button-group .btn {
   margin-bottom: 10px;
 }
 strong {

client/src/components/layouts/learn.css

@@ -24,3 +24,7 @@
 #learn-app-wrapper .reflex-container.horizontal > .reflex-splitter {
   height: 5px;
 }
+
+#learn-app-wrapper .reflex-container > .reflex-element:first-child:last-child {
+  flex: 1 1 auto !important;
+}

client/src/templates/Challenges/classic/action-row.tsx

@@ -8,6 +8,7 @@ import EditorTabs from './editor-tabs';
 interface ActionRowProps {
   block: string;
   hasNotes: boolean;
+  hasPreview: boolean;
   isMultifileCertProject: boolean;
   showInstructions: boolean;
   showConsole: boolean;
@@ -25,6 +26,7 @@ const mapDispatchToProps = {
 
 const ActionRow = ({
   hasNotes,
+  hasPreview,
   togglePane,
   showNotes,
   showPreview,
@@ -44,17 +46,15 @@ const ActionRow = ({
         </div>
       )}
       <div className='tabs-row'>
-        {isMultifileCertProject && (
-          <button
-            aria-expanded={showInstructions ? 'true' : 'false'}
-            className={
-              showInstructions ? 'btn-tab-primary' : 'btn-tab-primary--outline'
-            }
-            onClick={() => togglePane('showInstructions')}
-          >
-            Instructions
-          </button>
-        )}
+        <button
+          aria-expanded={showInstructions ? 'true' : 'false'}
+          className={
+            showInstructions ? 'btn-tab-primary' : 'btn-tab-primary--outline'
+          }
+          onClick={() => togglePane('showInstructions')}
+        >
+          Instructions
+        </button>
         <EditorTabs />
         <button
           aria-expanded={showConsole ? 'true' : 'false'}
@@ -76,15 +76,17 @@ const ActionRow = ({
             {t('learn.editor-tabs.notes')}
           </button>
         )}
-        <button
-          aria-expanded={showPreview ? 'true' : 'false'}
-          className={
-            showPreview ? 'btn-tab-primary' : 'btn-tab-primary--outline'
-          }
-          onClick={() => togglePane('showPreview')}
-        >
-          {t('learn.editor-tabs.preview')}
-        </button>
+        {hasPreview && (
+          <button
+            aria-expanded={showPreview ? 'true' : 'false'}
+            className={
+              showPreview ? 'btn-tab-primary' : 'btn-tab-primary--outline'
+            }
+            onClick={() => togglePane('showPreview')}
+          >
+            {t('learn.editor-tabs.preview')}
+          </button>
+        )}
       </div>
     </div>
   );

client/src/templates/Challenges/classic/desktop-layout.tsx

@@ -34,6 +34,7 @@ interface DesktopLayoutProps {
   resizeProps: ResizeProps;
   superBlock: string;
   testOutput: ReactElement;
+  visibleEditors: { [key: string]: boolean };
 }
 
 const reflexProps = {
@@ -85,20 +86,20 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
     notes,
     preview,
     hasEditableBoundaries,
-    superBlock
+    superBlock,
+    visibleEditors
   } = props;
 
   const challengeFile = getChallengeFile();
   const projectBasedChallenge = hasEditableBoundaries;
   const isMultifileCertProject =
     challengeType === challengeTypes.multifileCertProject;
-  const displayPreview =
-    projectBasedChallenge || isMultifileCertProject
-      ? showPreview && hasPreview
-      : hasPreview;
+  const displayPreview = showPreview && hasPreview;
   const displayNotes = projectBasedChallenge ? showNotes && hasNotes : false;
-  const displayConsole =
-    projectBasedChallenge || isMultifileCertProject ? showConsole : true;
+  const displayConsole = showConsole;
+  const displayEditor = Object.entries(visibleEditors).some(
+    ([, visible]) => visible
+  );
   const {
     codePane,
     editorPane,
@@ -110,33 +111,32 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
 
   return (
     <div className='desktop-layout'>
-      {(projectBasedChallenge || isMultifileCertProject) && (
-        <ActionRow
-          block={block}
-          hasNotes={hasNotes}
-          isMultifileCertProject={isMultifileCertProject}
-          showConsole={showConsole}
-          showNotes={showNotes}
-          showInstructions={showInstructions}
-          showPreview={showPreview}
-          superBlock={superBlock}
-          showBreadcrumbs={false}
-          togglePane={togglePane}
-        />
-      )}
+      <ActionRow
+        block={block}
+        hasNotes={hasNotes}
+        isMultifileCertProject={isMultifileCertProject}
+        showConsole={showConsole}
+        showNotes={showNotes}
+        showInstructions={showInstructions}
+        hasPreview={hasPreview}
+        showPreview={showPreview}
+        superBlock={superBlock}
+        showBreadcrumbs={false}
+        togglePane={togglePane}
+      />
       <div className='editor-row'>
         <ReflexContainer orientation='vertical'>
           {!projectBasedChallenge && showInstructions && (
             <ReflexElement flex={instructionPane.flex} {...resizeProps}>
               {instructions}
             </ReflexElement>
           )}
-          {!projectBasedChallenge && (
+          {!projectBasedChallenge && displayEditor && (
             <ReflexSplitter propagate={true} {...resizeProps} />
           )}
 
-          <ReflexElement flex={editorPane.flex} {...resizeProps}>
-            {challengeFile && (
+          {challengeFile && displayEditor && (
+            <ReflexElement flex={editorPane.flex} {...resizeProps}>
               <ReflexContainer
                 key={challengeFile.fileKey}
                 orientation='horizontal'
@@ -157,8 +157,8 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
                   </ReflexElement>
                 )}
               </ReflexContainer>
-            )}
-          </ReflexElement>
+            </ReflexElement>
+          )}
 
           {(displayPreview || displayConsole) && (
             <ReflexSplitter propagate={true} {...resizeProps} />

client/src/templates/Challenges/classic/show.tsx

@@ -38,6 +38,7 @@ import {
   challengeMounted,
   challengeTestsSelector,
   consoleOutputSelector,
+  visibleEditorsSelector,
   createFiles,
   executeChallenge,
   initConsole,
@@ -58,14 +59,19 @@ import MobileLayout from './mobile-layout';
 import './classic.css';
 import '../components/test-frame.css';
 
+type VisibleEditors = {
+  [key: string]: boolean;
+};
+
 // Redux Setup
 const mapStateToProps = createStructuredSelector({
   challengeFiles: challengeFilesSelector,
   tests: challengeTestsSelector,
   testsRunning: testsRunningSelector,
   output: consoleOutputSelector,
   isChallengeCompleted: isChallengeCompletedSelector,
-  savedChallenges: savedChallengesSelector
+  savedChallenges: savedChallengesSelector,
+  visibleEditors: visibleEditorsSelector
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) =>
@@ -112,6 +118,7 @@ interface ShowClassicProps {
   setEditorFocusability: (canFocus: boolean) => void;
   previewMounted: () => void;
   savedChallenges: CompletedChallenge[];
+  visibleEditors: VisibleEditors;
 }
 
 interface ShowClassicState {
@@ -429,6 +436,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
         challengeMeta: { nextChallengePath, prevChallengePath }
       },
       challengeFiles,
+      visibleEditors,
       t
     } = this.props;
 
@@ -480,6 +488,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
               resizeProps={this.resizeProps}
               superBlock={superBlock}
               testOutput={this.renderTestOutput()}
+              visibleEditors={visibleEditors}
             />
           </Media>
           <CompletionModal

client/src/templates/Challenges/components/side-panel.tsx

@@ -82,7 +82,7 @@ export function SidePanel({
       {challengeTitle}
       {challengeDescription}
       <div className='test-area-wrap'>
-        {showToolPanel && (
+        {showToolPanel && tests.length > 10 && (
           <ToolPanel
             guideUrl={guideUrl}
             videoUrl={videoUrl}