feat(client): remove preview from js labs (#58804)

2026-09-24 23:01:18 +08:00 · 2025-02-15 12:46:07 +00:00
parent 7c230bb298
commit 85477175cb
25 changed files with 52 additions and 52 deletions
@@ -240,17 +240,15 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
  const isMultifileProject =
    challengeType === challengeTypes.multifileCertProject ||
    challengeType === challengeTypes.multifilePythonCertProject ||
-    challengeType == challengeTypes.lab;
+    challengeType === challengeTypes.lab ||
+    challengeType === challengeTypes.jsLab;
+  const isProjectStyle = projectBasedChallenge || isMultifileProject;
  const displayPreviewPane = hasPreview && showPreviewPane;
  const displayPreviewPortal = hasPreview && showPreviewPortal;
  const displayNotes = projectBasedChallenge ? showNotes && !!notes : false;
-  const displayEditorConsole = !(projectBasedChallenge || isMultifileProject)
-    ? true
-    : false;
-  const displayPreviewConsole =
-    (projectBasedChallenge || isMultifileProject) && showConsole;
-  const hasVerticalResizableCodePane =
-    !isMultifileProject && !projectBasedChallenge;
+  const displayEditorConsole = !isProjectStyle;
+  const displayPreviewConsole = !displayEditorConsole && showConsole;
+
  const {
    codePane,
    editorPane,
@@ -265,7 +263,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {

  return (
    <div className='desktop-layout' data-playwright-test-label='desktop-layout'>
-      {(projectBasedChallenge || isMultifileProject) && (
+      {isProjectStyle && (
        <ActionRow
          hasPreview={hasPreview}
          hasNotes={!!notes}
@@ -310,7 +308,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
            >
              <ReflexElement
                name='codePane'
-                {...(hasVerticalResizableCodePane && { flex: codePane.flex })}
+                {...(displayEditorConsole && { flex: codePane.flex })}
                {...reflexProps}
                {...resizeProps}
              >
@@ -63,7 +63,7 @@ import { preloadPage } from '../../../../utils/gatsby/page-loading';
 import envData from '../../../../config/env.json';
 import ToolPanel from '../components/tool-panel';
 import { getChallengePaths } from '../utils/challenge-paths';
-import { isJavaScriptChallenge } from '../utils/build';
+import { challengeHasPreview, isJavaScriptChallenge } from '../utils/build';
 import { XtermTerminal } from './xterm';
 import MultifileEditor from './multifile-editor';
 import DesktopLayout from './desktop-layout';
@@ -242,17 +242,7 @@ function ShowClassic({
  )}: ${title}`;
  const windowTitle = `${blockNameTitle} | freeCodeCamp.org`;
  const openConsole = isJavaScriptChallenge({ challengeType });
-  // TODO: show preview should NOT be computed like this. That determination is
-  // made during the build (at least twice!). It should be either a prop or
-  // computed from challengeType
-  const showPreview = [
-    challengeTypes.html,
-    challengeTypes.modern,
-    challengeTypes.multifileCertProject,
-    challengeTypes.multifilePythonCertProject,
-    challengeTypes.python,
-    challengeTypes.lab
-  ].includes(challengeType);
+  const hasPreview = challengeHasPreview({ challengeType });
  const getLayoutState = () => {
    const reflexLayout = store.get(REFLEX_LAYOUT) as ReflexLayout | null;

@@ -463,7 +453,7 @@ function ShowClassic({
              isUsingKeyboardInTablist: usingKeyboardInTablist
            })}
            hasEditableBoundaries={hasEditableBoundaries}
-            hasPreview={showPreview}
+            hasPreview={hasPreview}
            instructions={renderInstructionsPanel({
              toolPanel: null,
              hasDemo: demoType === 'onClick'
@@ -498,7 +488,7 @@ function ShowClassic({
              isUsingKeyboardInTablist: usingKeyboardInTablist
            })}
            hasEditableBoundaries={hasEditableBoundaries}
-            hasPreview={showPreview}
+            hasPreview={hasPreview}
            instructions={renderInstructionsPanel({
              toolPanel: <ToolPanel guideUrl={guideUrl} videoUrl={videoUrl} />,
              hasDemo: demoType === 'onClick'
@@ -90,7 +90,8 @@ export const challengeDataSelector = state => {
    challengeType === challengeTypes.python ||
    challengeType === challengeTypes.lab ||
    challengeType === challengeTypes.js ||
-    challengeType === challengeTypes.jsProject
+    challengeType === challengeTypes.jsProject ||
+    challengeType === challengeTypes.jsLab
  ) {
    const { required = [], template = '' } = challengeMetaSelector(state);
    challengeData = {
@@ -3,7 +3,7 @@ import frameRunnerData from '../../../../../client/config/browser-scripts/frame-
 import jsTestEvaluatorData from '../../../../../client/config/browser-scripts/test-evaluator.json';
 import pyTestEvaluatorData from '../../../../../client/config/browser-scripts/python-test-evaluator.json';

-import { ChallengeFile, ChallengeMeta } from '../../../redux/prop-types';
+import type { ChallengeFile } from '../../../redux/prop-types';
 import { concatHtml } from '../rechallenge/builders';
 import {
  getTransformers,
@@ -107,7 +107,8 @@ export const buildFunctions = {
  [challengeTypes.colab]: buildBackendChallenge,
  [challengeTypes.python]: buildPythonChallenge,
  [challengeTypes.multifilePythonCertProject]: buildPythonChallenge,
-  [challengeTypes.lab]: buildDOMChallenge
+  [challengeTypes.lab]: buildDOMChallenge,
+  [challengeTypes.jsLab]: buildJSChallenge
 };

 export function canBuildChallenge(challengeData: BuildChallengeData): boolean {
@@ -393,7 +394,11 @@ export function updateProjectPreview(
  }
 }

-export function challengeHasPreview({ challengeType }: ChallengeMeta): boolean {
+export function challengeHasPreview({
+  challengeType
+}: {
+  challengeType: number;
+}): boolean {
  return (
    challengeType === challengeTypes.html ||
    challengeType === challengeTypes.modern ||
@@ -411,6 +416,7 @@ export function isJavaScriptChallenge({
 }): boolean {
  return (
    challengeType === challengeTypes.js ||
-    challengeType === challengeTypes.jsProject
+    challengeType === challengeTypes.jsProject ||
+    challengeType === challengeTypes.jsLab
  );
 }
@@ -34,7 +34,8 @@ const projectBasedChallengeTypes = [
  challengeTypes.exam,
  challengeTypes.codeAllyPractice,
  challengeTypes.multifilePythonCertProject,
-  challengeTypes.lab
+  challengeTypes.lab,
+  challengeTypes.jsLab
 ];

 export const isProjectBased = (
@@ -1,7 +1,7 @@
 ---
 id: 6718d2d59337c822ecb697ff
 title: Build a Bank Account Management Program
-challengeType: 25
+challengeType: 26
 dashedName: build-a-bank-account-management-program
 ---

@@ -1,7 +1,7 @@
 ---
 id: 67172b43f84bcd2dec238a3d
 title: Build a Book Organizer
-challengeType: 25
+challengeType: 26
 dashedName: build-a-book-organizer
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66f686b8ebdb982fa8e14330
 title: Build a Date Conversion Program
-challengeType: 25
+challengeType: 26
 dashedName: lab-date-conversion
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66b205e6eacba4c4e54ea434
 title: Build an Email Masker
-challengeType: 25
+challengeType: 26
 dashedName: build-an-email-masker
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66c07238b01053abaf812065
 title: Build a Factorial Calculator
-challengeType: 25
+challengeType: 26
 dashedName: build-a-factorial-calculator
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66c06d618d075c7f7f1b890a
 title: Build a Fortune Teller
-challengeType: 25
+challengeType: 26
 dashedName: build-a-fortune-teller
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66bb6a9c2dd58b73cd759034
 title: Build a Gradebook App
-challengeType: 25
+challengeType: 26
 dashedName: build-a-gradebook-app
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66d75dd0aa65a71600dc669b
 title: Build an Inventory Management Program
-challengeType: 25
+challengeType: 26
 dashedName: build-an-inventory-management-program
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66ed41f912d0bb1dc62da5dd
 title: Build a JavaScript Trivia Bot
-challengeType: 25
+challengeType: 26
 dashedName: lab-javascript-trivia-bot
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66c06fad3475cd92421b9ac2
 title: Build a Leap Year Calculator
-challengeType: 25
+challengeType: 26
 dashedName: build-a-leap-year-calculator
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66db529d37ad966480ebb633
 title: Build a Lunch Picker Program
-challengeType: 25
+challengeType: 26
 dashedName: build-a-lunch-picker-program
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66f53dc2c5bd6a11d6c3282f
 title: Build a Password Generator App
-challengeType: 25
+challengeType: 26
 dashedName: lab-password-generator
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66fe4f33a2cc9b33f4d5cd9b
 title: Build a Permutation Generator
-challengeType: 25
+challengeType: 26
 dashedName: build-a-permutation-generator
 ---

@@ -1,7 +1,7 @@
 ---
 id: 67051431a73f1ca25d9a6f25
 title: Build a Project Idea Board
-challengeType: 25
+challengeType: 26
 dashedName: build-a-project-idea-board
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66f2836c459cfb16ae76f24f
 title: Build a Pyramid Generator
-challengeType: 25
+challengeType: 26
 dashedName: lab-pyramid-generator
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66f17db06803d11a1bd19a20
 title: Build a Quiz Game
-challengeType: 25 
+challengeType: 26
 dashedName: lab-quiz-game
 ---

@@ -1,7 +1,7 @@
 ---
 id: 66c057041df6394ca796bf33
 title: Build a Sentence Maker
-challengeType: 25
+challengeType: 26
 dashedName: build-a-sentence-maker
 ---

@@ -1,7 +1,7 @@
 ---
 id: 673b567e3ba535dda140d278
 title: Build a Voting System
-challengeType: 25
+challengeType: 26
 dashedName: build-a-voting-system
 ---

@@ -155,7 +155,7 @@ const schema = Joi.object()
      otherwise: Joi.optional()
    }),
    certification: Joi.string().regex(slugWithSlashRE),
-    challengeType: Joi.number().min(0).max(25).required(),
+    challengeType: Joi.number().min(0).max(26).required(),
    checksum: Joi.number(),
    // TODO: require this only for normal challenges, not certs
    dashedName: Joi.string().regex(slugRE),
@@ -25,6 +25,7 @@ const fillInTheBlank = 22;
 const multifilePythonCertProject = 23;
 const generic = 24;
 const lab = 25;
+const jsLab = 26;

 export const challengeTypes = {
  html,
@@ -53,7 +54,8 @@ export const challengeTypes = {
  fillInTheBlank,
  multifilePythonCertProject,
  generic,
-  lab
+  lab,
+  jsLab
 };

 export const hasNoSolution = (challengeType: number): boolean => {
@@ -108,7 +110,8 @@ export const viewTypes = {
  [fillInTheBlank]: 'fillInTheBlank',
  [multifilePythonCertProject]: 'classic',
  [generic]: 'generic',
-  [lab]: 'classic'
+  [lab]: 'classic',
+  [jsLab]: 'classic'
 };

 // determine the type of submit function to use for the challenge on completion
@@ -141,7 +144,8 @@ export const submitTypes = {
  [fillInTheBlank]: 'tests',
  [multifilePythonCertProject]: 'tests',
  [generic]: 'tests',
-  [lab]: 'tests'
+  [lab]: 'tests',
+  [jsLab]: 'tests'
 };

 export const canSaveToDB = (challengeType: number): boolean =>