feat(client): show demo on demand in labs (#55569)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

tools/challenge-helper-scripts/helpers/get-step-template.ts

@@ -25,6 +25,7 @@ type StepOptions = {
   challengeSeeds: Record<string, ChallengeSeed>;
   stepNum: number;
   challengeType: number;
+  isFirstChallenge?: boolean;
 };
 
 export interface ChallengeSeed {
@@ -40,7 +41,8 @@ function getStepTemplate({
   challengeId,
   challengeSeeds,
   stepNum,
-  challengeType
+  challengeType,
+  isFirstChallenge = false
 }: StepOptions): string {
   const seedTexts = Object.values(challengeSeeds)
     .map(({ contents, ext, editableRegionBoundaries }: ChallengeSeed) => {
@@ -67,12 +69,18 @@ function getStepTemplate({
   const seedHeadSection = getSeedSection(seedHeads, 'before-user-code');
   const seedTailSection = getSeedSection(seedTails, 'after-user-code');
 
+  const demoString = isFirstChallenge
+    ? `
+# demoType can either be 'onClick' or 'onLoad'. If the project or lab doesn't have a preview, delete the property
+demoType: onClick`
+    : '';
+
   return (
     `---
 id: ${challengeId.toString()}
 title: Step ${stepNum}
 challengeType: ${challengeType}
-dashedName: step-${stepNum}
+dashedName: step-${stepNum}${demoString}
 ---
 
 # --description--