From fb93fdc8069d33c0db5d7d687260ee33b8f31abb Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Mon, 1 Aug 2022 15:48:48 +0300
Subject: [PATCH] PROD-2649 - handle mobile fixes

---
 .../templates/Challenges/classic/classic.css  |  7 ++++
 .../templates/Challenges/classic/editor.tsx   |  6 +++-
 .../Challenges/classic/mobile-layout.tsx      | 34 ++++++++++++++++---
 .../src/templates/Challenges/classic/show.tsx |  3 +-
 .../Challenges/components/output.css          |  1 +
 .../Challenges/components/tool-panel.tsx      |  4 +--
 6 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 27d1486bb46058..516f1ee27c99ee 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -40,6 +40,13 @@
   padding-bottom: 16px;
 }
 
+#challenge-page-tabs .tab-content.no-toolpanel {
+  height: calc(
+    100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) - 24px -
+      16px
+  );
+}
+
 #challenge-page-tabs .tab-pane {
   height: 100%;
   overflow: hidden;
diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx
index 0100f9e84da1c1..be63d9783a9381 100644
--- a/client/src/templates/Challenges/classic/editor.tsx
+++ b/client/src/templates/Challenges/classic/editor.tsx
@@ -1054,7 +1054,11 @@ const Editor = (props: EditorProps): JSX.Element => {
       focusIfTargetEditor();
     }
 
-    if (props.initialTests) initTests(props.initialTests);
+    // Once a challenge has been completed, we don't want changes to the content
+    // to reset the tests since the user is already done with the challenge.
+    if (props.initialTests && !challengeIsComplete()) {
+      initTests(props.initialTests);
+    }
 
     if (hasEditableRegion() && editor) {
       if (props.isResetting) {
diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx
index b48dbea7bb08ee..547fb5b075812f 100644
--- a/client/src/templates/Challenges/classic/mobile-layout.tsx
+++ b/client/src/templates/Challenges/classic/mobile-layout.tsx
@@ -1,8 +1,18 @@
 import React, { Component, ReactElement } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 
+import { Test } from '../../../redux/prop-types';
 import ToolPanel from '../components/tool-panel';
+import { challengeTestsSelector } from '../redux';
 import MobilePaneSelector, { Tab } from './mobile-pane-selector';
 
+const mapStateToProps = createSelector(
+  challengeTestsSelector,
+  (tests: Test[]) => ({
+    tests
+  })
+);
 interface MobileLayoutProps {
   editor: JSX.Element | null;
   guideUrl: string;
@@ -15,6 +25,8 @@ interface MobileLayoutProps {
   testOutput: JSX.Element;
   videoUrl: string;
   usesMultifileEditor: boolean;
+  testsRunning: boolean;
+  tests: Test[];
 }
 
 interface MobileLayoutState {
@@ -45,11 +57,13 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
       hasPreview,
       notes,
       preview,
-      guideUrl,
-      videoUrl,
+      tests,
+      testsRunning,
       usesMultifileEditor
     } = this.props;
 
+    const isChallengeComplete = tests.every(test => test.pass && !test.err);
+
     // Unlike the desktop layout the mobile version does not have an ActionRow,
     // but still needs a way to switch between the different tabs.
 
@@ -63,14 +77,24 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
           hasNotes={hasNotes}
           usesMultifileEditor={usesMultifileEditor}
         />
-        <div className='tab-content'>
+        <div
+          className={`tab-content ${
+            hasEditableBoundaries ? 'no-toolpanel' : ''
+          }`}
+        >
           {currentTab === Tab.Editor && editor}
           {currentTab === Tab.Instructions && instructions}
           {currentTab === Tab.Console && testOutput}
           {currentTab === Tab.Notes && notes}
           {currentTab === Tab.Preview && preview}
         </div>
-        <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
+        {!hasEditableBoundaries && (
+          <ToolPanel
+            isMobile={true}
+            isRunningTests={testsRunning}
+            challengeIsCompleted={isChallengeComplete}
+          />
+        )}
       </div>
     );
   }
@@ -78,4 +102,4 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
 
 MobileLayout.displayName = 'MobileLayout';
 
-export default MobileLayout;
+export default connect(mapStateToProps)(MobileLayout);
diff --git a/client/src/templates/Challenges/classic/show.tsx b/client/src/templates/Challenges/classic/show.tsx
index e1abc1a1d0377b..ba98af5b9c5fca 100644
--- a/client/src/templates/Challenges/classic/show.tsx
+++ b/client/src/templates/Challenges/classic/show.tsx
@@ -446,7 +446,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
           <Helmet title={`${this.getBlockNameTitle(t)} | freeCodeCamp.org`} />
           <Media maxWidth={MAX_MOBILE_WIDTH}>
             <MobileLayout
-              editor={this.renderEditor()}
+              editor={this.renderEditor(hasEditableBoundaries)}
               guideUrl={getGuideUrl({ forumTopicId, title })}
               hasEditableBoundaries={hasEditableBoundaries}
               hasNotes={!!notes}
@@ -459,6 +459,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
               testOutput={this.renderTestOutput()}
               usesMultifileEditor={usesMultifileEditor}
               videoUrl={this.getVideoUrl()}
+              testsRunning={this.props.testsRunning}
             />
           </Media>
           <Media minWidth={MAX_MOBILE_WIDTH + 1}>
diff --git a/client/src/templates/Challenges/components/output.css b/client/src/templates/Challenges/components/output.css
index 2cc197f44ca551..f6ae7c932c7af9 100644
--- a/client/src/templates/Challenges/components/output.css
+++ b/client/src/templates/Challenges/components/output.css
@@ -6,6 +6,7 @@
   width: 100%;
   overflow-y: auto;
   background: var(--tc-black-5);
+  margin-bottom: 0;
 }
 
 pre.output-text code {
diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx
index 0ed4c8a6e16426..371973da6a2a18 100644
--- a/client/src/templates/Challenges/components/tool-panel.tsx
+++ b/client/src/templates/Challenges/components/tool-panel.tsx
@@ -52,8 +52,8 @@ interface ToolPanelProps {
   openHelpModal: () => void;
   openVideoModal: () => void;
   openResetModal: () => void;
-  guideUrl: string;
-  videoUrl: string;
+  guideUrl?: string;
+  videoUrl?: string;
   challengeIsCompleted?: boolean;
 }