feat(client): conditionally hide preview for new js project (#54416)
parent
5abe02725d
commit
a3cd1f19e6
|
@ -6,6 +6,7 @@ import EditorTabs from './editor-tabs';
|
|||
|
||||
interface ActionRowProps {
|
||||
hasNotes: boolean;
|
||||
hasPreview: boolean;
|
||||
isProjectBasedChallenge: boolean;
|
||||
showConsole: boolean;
|
||||
showNotes: boolean;
|
||||
|
@ -16,6 +17,7 @@ interface ActionRowProps {
|
|||
}
|
||||
|
||||
const ActionRow = ({
|
||||
hasPreview,
|
||||
hasNotes,
|
||||
togglePane,
|
||||
showNotes,
|
||||
|
@ -77,21 +79,25 @@ const ActionRow = ({
|
|||
{t('learn.editor-tabs.notes')}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
data-playwright-test-label='preview-pane-button'
|
||||
aria-expanded={!!showPreviewPane}
|
||||
onClick={() => togglePane('showPreviewPane')}
|
||||
>
|
||||
<span className='sr-only'>{getPreviewBtnsSrText().pane}</span>
|
||||
<span aria-hidden='true'>{t('learn.editor-tabs.preview')}</span>
|
||||
</button>
|
||||
<button
|
||||
aria-expanded={!!showPreviewPortal}
|
||||
onClick={() => togglePane('showPreviewPortal')}
|
||||
>
|
||||
<span className='sr-only'>{getPreviewBtnsSrText().portal}</span>
|
||||
<FontAwesomeIcon icon={faWindowRestore} />
|
||||
</button>
|
||||
{hasPreview && (
|
||||
<>
|
||||
<button
|
||||
data-playwright-test-label='preview-pane-button'
|
||||
aria-expanded={!!showPreviewPane}
|
||||
onClick={() => togglePane('showPreviewPane')}
|
||||
>
|
||||
<span className='sr-only'>{getPreviewBtnsSrText().pane}</span>
|
||||
<span aria-hidden='true'>{t('learn.editor-tabs.preview')}</span>
|
||||
</button>
|
||||
<button
|
||||
aria-expanded={!!showPreviewPortal}
|
||||
onClick={() => togglePane('showPreviewPortal')}
|
||||
>
|
||||
<span className='sr-only'>{getPreviewBtnsSrText().portal}</span>
|
||||
<FontAwesomeIcon icon={faWindowRestore} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -194,6 +194,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
|
|||
<div className='desktop-layout' data-playwright-test-label='desktop-layout'>
|
||||
{(projectBasedChallenge || isMultifileCertProject) && (
|
||||
<ActionRow
|
||||
hasPreview={hasPreview}
|
||||
hasNotes={hasNotes}
|
||||
isProjectBasedChallenge={projectBasedChallenge}
|
||||
showConsole={showConsole}
|
||||
|
|
|
@ -238,11 +238,12 @@ function ShowClassic({
|
|||
// made during the build (at least twice!). It should be either a prop or
|
||||
// computed from challengeType
|
||||
const showPreview =
|
||||
challengeType === challengeTypes.html ||
|
||||
challengeType === challengeTypes.modern ||
|
||||
challengeType === challengeTypes.multifileCertProject ||
|
||||
challengeType === challengeTypes.multifilePythonCertProject ||
|
||||
challengeType === challengeTypes.python;
|
||||
(challengeType === challengeTypes.html ||
|
||||
challengeType === challengeTypes.modern ||
|
||||
challengeType === challengeTypes.multifileCertProject ||
|
||||
challengeType === challengeTypes.multifilePythonCertProject ||
|
||||
challengeType === challengeTypes.python) &&
|
||||
block !== 'learn-introductory-javascript-by-building-a-pyramid-generator';
|
||||
|
||||
const getLayoutState = () => {
|
||||
const reflexLayout = store.get(REFLEX_LAYOUT) as ReflexLayout;
|
||||
|
@ -508,12 +509,14 @@ function ShowClassic({
|
|||
<HelpModal challengeTitle={title} challengeBlock={blockName} />
|
||||
<VideoModal videoUrl={videoUrl} />
|
||||
<ResetModal />
|
||||
<ProjectPreviewModal
|
||||
challengeData={challengeData}
|
||||
closeText={t('buttons.start-coding')}
|
||||
previewTitle={t('learn.project-preview-title')}
|
||||
showProjectPreview={showProjectPreview}
|
||||
/>
|
||||
{showPreview && (
|
||||
<ProjectPreviewModal
|
||||
challengeData={challengeData}
|
||||
closeText={t('buttons.start-coding')}
|
||||
previewTitle={t('learn.project-preview-title')}
|
||||
showProjectPreview={showProjectPreview}
|
||||
/>
|
||||
)}
|
||||
<ShortcutsModal />
|
||||
</LearnLayout>
|
||||
</Hotkeys>
|
||||
|
|
|
@ -125,3 +125,13 @@ test('Clicking Preview Portal button opens the preview in a new tab', async ({
|
|||
|
||||
await newPage.close();
|
||||
});
|
||||
|
||||
test('Preview Buttons should not appear when preview is disabled', async ({
|
||||
page
|
||||
}) => {
|
||||
await page.goto(
|
||||
'/learn/javascript-algorithms-and-data-structures-v8/learn-introductory-javascript-by-building-a-pyramid-generator/step-1'
|
||||
);
|
||||
const previewButton = page.getByTestId('preview-pane-button');
|
||||
await expect(previewButton).toHaveCount(0);
|
||||
});
|
||||
|
|
|
@ -59,3 +59,27 @@ test.describe('Exit Project Preview Modal E2E Test Suite', () => {
|
|||
await expect(dialog).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Project Preview Modal Conditional Rendering', () => {
|
||||
test('Does not render on second step of a project', async ({ page }) => {
|
||||
await page.goto(
|
||||
'/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
|
||||
);
|
||||
const dialog = page.getByRole('dialog', {
|
||||
name: translations.learn['project-preview-title']
|
||||
});
|
||||
await expect(dialog).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('Does not render on first step of a project without a preview', async ({
|
||||
page
|
||||
}) => {
|
||||
await page.goto(
|
||||
'/learn/javascript-algorithms-and-data-structures-v8/learn-introductory-javascript-by-building-a-pyramid-generator/step-1'
|
||||
);
|
||||
const dialog = page.getByRole('dialog', {
|
||||
name: translations.learn['project-preview-title']
|
||||
});
|
||||
await expect(dialog).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue