feat(client): conditionally hide preview for new js project (#54416)

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

@@ -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
+          {hasPreview && (
-            data-playwright-test-label='preview-pane-button'
+            <>
-            aria-expanded={!!showPreviewPane}
+              <button
-            onClick={() => togglePane('showPreviewPane')}
+                data-playwright-test-label='preview-pane-button'
-          >
+                aria-expanded={!!showPreviewPane}
-            <span className='sr-only'>{getPreviewBtnsSrText().pane}</span>
+                onClick={() => togglePane('showPreviewPane')}
-            <span aria-hidden='true'>{t('learn.editor-tabs.preview')}</span>
+              >
-          </button>
+                <span className='sr-only'>{getPreviewBtnsSrText().pane}</span>
-          <button
+                <span aria-hidden='true'>{t('learn.editor-tabs.preview')}</span>
-            aria-expanded={!!showPreviewPortal}
+              </button>
-            onClick={() => togglePane('showPreviewPortal')}
+              <button
-          >
+                aria-expanded={!!showPreviewPortal}
-            <span className='sr-only'>{getPreviewBtnsSrText().portal}</span>
+                onClick={() => togglePane('showPreviewPortal')}
-            <FontAwesomeIcon icon={faWindowRestore} />
+              >
-          </button>
+                <span className='sr-only'>{getPreviewBtnsSrText().portal}</span>
+                <FontAwesomeIcon icon={faWindowRestore} />
+              </button>
+            </>
+          )}
         </div>
       </div>
     </div>

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

@@ -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}

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

@@ -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.html ||
-    challengeType === challengeTypes.modern ||
+      challengeType === challengeTypes.modern ||
-    challengeType === challengeTypes.multifileCertProject ||
+      challengeType === challengeTypes.multifileCertProject ||
-    challengeType === challengeTypes.multifilePythonCertProject ||
+      challengeType === challengeTypes.multifilePythonCertProject ||
-    challengeType === challengeTypes.python;
+      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
+        {showPreview && (
-          challengeData={challengeData}
+          <ProjectPreviewModal
-          closeText={t('buttons.start-coding')}
+            challengeData={challengeData}
-          previewTitle={t('learn.project-preview-title')}
+            closeText={t('buttons.start-coding')}
-          showProjectPreview={showProjectPreview}
+            previewTitle={t('learn.project-preview-title')}
-        />
+            showProjectPreview={showProjectPreview}
+          />
+        )}
         <ShortcutsModal />
       </LearnLayout>
     </Hotkeys>

e2e/action-row.spec.ts

@@ -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);
+});

e2e/project-preview-modal.spec.ts

@@ -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);
+  });
+});