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
This commit is contained in:
Oliver Eyton-Williams
2021-12-02 21:05:54 +01:00
committed by GitHub
parent b14c5eb21b
commit 6af8ee6528
8 changed files with 20 additions and 14 deletions

View File

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

View File

@ -33,6 +33,7 @@ interface MobileLayoutProps {
preview: JSX.Element; preview: JSX.Element;
testOutput: JSX.Element; testOutput: JSX.Element;
videoUrl: string; videoUrl: string;
usesMultifileEditor: boolean;
} }
class MobileLayout extends Component<MobileLayoutProps> { class MobileLayout extends Component<MobileLayoutProps> {
static displayName: string; static displayName: string;
@ -49,7 +50,8 @@ class MobileLayout extends Component<MobileLayoutProps> {
hasPreview, hasPreview,
preview, preview,
guideUrl, guideUrl,
videoUrl videoUrl,
usesMultifileEditor
} = this.props; } = this.props;
const editorTabPaneProps = { const editorTabPaneProps = {
@ -57,6 +59,10 @@ class MobileLayout extends Component<MobileLayoutProps> {
unmountOnExit: true 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 ( return (
<> <>
<Tabs <Tabs
@ -73,7 +79,7 @@ class MobileLayout extends Component<MobileLayoutProps> {
title={i18next.t('learn.editor-tabs.code')} title={i18next.t('learn.editor-tabs.code')}
{...editorTabPaneProps} {...editorTabPaneProps}
> >
{showUpcomingChanges && <EditorTabs />} {displayEditorTabs && <EditorTabs />}
{editor} {editor}
</TabPane> </TabPane>
<TabPane <TabPane

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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