fix: hide file tabs on legacy challenges (#44291)

* fix: hide tabs for legacy challenges (desktop)

* fix: hide tabs for legacy challenges (mobile)

* fix: remove editor tabs (desktop)

* refactor: update comment

* fix: add missing usesMultifileEditor flags

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

@@ -9,7 +9,6 @@ import {
   ResizeProps
 } from '../../../redux/prop-types';
 import ActionRow from './action-row';
-import EditorTabs from './editor-tabs';
 
 const { showUpcomingChanges } = envData;
 
@@ -82,10 +81,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
 
   const challengeFile = getChallengeFile();
   const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
-  const isPreviewDisplayable = projectBasedChallenge
+  const displayPreview = projectBasedChallenge
     ? showPreview && hasPreview
     : hasPreview;
-  const isConsoleDisplayable = projectBasedChallenge ? showConsole : true;
+  const displayConsole = projectBasedChallenge ? showConsole : true;
   const { codePane, editorPane, instructionPane, previewPane, testsPane } =
     layoutState;
 
@@ -112,9 +111,6 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
         )}
 
         <ReflexElement flex={editorPane.flex} {...resizeProps}>
-          {challengeFile && showUpcomingChanges && !hasEditableBoundaries && (
-            <EditorTabs />
-          )}
           {challengeFile && (
             <ReflexContainer
               key={challengeFile.fileKey}
@@ -127,10 +123,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
               >
                 {editor}
               </ReflexElement>
-              {isConsoleDisplayable && (
+              {displayConsole && (
                 <ReflexSplitter propagate={true} {...resizeProps} />
               )}
-              {isConsoleDisplayable && (
+              {displayConsole && (
                 <ReflexElement
                   flex={testsPane.flex}
                   {...reflexProps}
@@ -142,10 +138,8 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
             </ReflexContainer>
           )}
         </ReflexElement>
-        {isPreviewDisplayable && (
-          <ReflexSplitter propagate={true} {...resizeProps} />
-        )}
-        {isPreviewDisplayable && (
+        {displayPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
+        {displayPreview && (
           <ReflexElement flex={previewPane.flex} {...resizeProps}>
             {preview}
           </ReflexElement>

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

@@ -33,6 +33,7 @@ interface MobileLayoutProps {
   preview: JSX.Element;
   testOutput: JSX.Element;
   videoUrl: string;
+  usesMultifileEditor: boolean;
 }
 class MobileLayout extends Component<MobileLayoutProps> {
   static displayName: string;
@@ -49,7 +50,8 @@ class MobileLayout extends Component<MobileLayoutProps> {
       hasPreview,
       preview,
       guideUrl,
-      videoUrl
+      videoUrl,
+      usesMultifileEditor
     } = this.props;
 
     const editorTabPaneProps = {
@@ -57,6 +59,10 @@ class MobileLayout extends Component<MobileLayoutProps> {
       unmountOnExit: true
     };
 
+    // Unlike the desktop layout the mobile version does not have an ActionRow,
+    // but still needs a way to switch between the different tabs.
+    const displayEditorTabs = showUpcomingChanges && usesMultifileEditor;
+
     return (
       <>
         <Tabs
@@ -73,7 +79,7 @@ class MobileLayout extends Component<MobileLayoutProps> {
             title={i18next.t('learn.editor-tabs.code')}
             {...editorTabPaneProps}
           >
-            {showUpcomingChanges && <EditorTabs />}
+            {displayEditorTabs && <EditorTabs />}
             {editor}
           </TabPane>
           <TabPane

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

@@ -431,6 +431,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
               })}
               preview={this.renderPreview()}
               testOutput={this.renderTestOutput()}
+              usesMultifileEditor={usesMultifileEditor}
               videoUrl={this.getVideoUrl()}
             />
           </Media>

curriculum/challenges/_meta/learn-css-animation-by-building-a-ferris-wheel/meta.json

@@ -1,6 +1,7 @@
 {
   "name": "Learn CSS Animation by Building a Ferris Wheel",
   "isUpcomingChange": true,
+  "usesMultifileEditor": true,
   "dashedName": "learn-css-animation-by-building-a-ferris-wheel",
   "order": 15,
   "time": "5 hours",

curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json

@@ -1,6 +1,7 @@
 {
   "name": "Learn CSS Flexbox by Building a Photo Gallery",
   "isUpcomingChange": true,
+  "usesMultifileEditor": true,
   "dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
   "order": 20,
   "time": "5 hours",

curriculum/challenges/_meta/learn-css-grid-by-building-a-magazine/meta.json

@@ -1,6 +1,7 @@
 {
   "name": "Learn CSS Grid by Building a Magazine",
   "isUpcomingChange": true,
+  "usesMultifileEditor": true,
   "dashedName": "learn-css-grid-by-building-a-magazine",
   "order": 16,
   "time": "5 hours",

curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json

@@ -1,6 +1,7 @@
 {
   "name": "Learn HTML Forms by Building a Registration Form",
   "isUpcomingChange": true,
+  "usesMultifileEditor": true,
   "dashedName": "learn-html-forms-by-building-a-registration-form",
   "order": 23,
   "time": "5 hours",

curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json

@@ -1,6 +1,7 @@
 {
   "name": "Learn Typography by Building a Nutrition Label",
   "isUpcomingChange": true,
+  "usesMultifileEditor": true,
   "dashedName": "learn-typography-by-building-a-nutrition-label",
   "order": 25,
   "time": "5 hours",