feat: Add conditional rendering for terminal instructions in first an…

…d second stage tutorial cards and feature flag logic [percy]
codecrafters-io · Jan 7, 2025 · 8038953 · 8038953
1 parent 81ecce2
commit 8038953
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 7 deletions.
diff --git a/app/components/course-page/course-stage-step/first-stage-tutorial-card.hbs b/app/components/course-page/course-stage-step/first-stage-tutorial-card.hbs
@@ -1,10 +1,28 @@
 <CoursePage::InstructionsCard @title="How to pass this stage" id="first-stage-tutorial-card" ...attributes>
   <:content>
     <div class="prose dark:prose-invert mb-5">
-      <p>
-        Since this is the first stage, we've included some commented code to help you get started. To pass this stage, simply uncomment the code and
-        submit your changes.
-      </p>
+      {{#if this.shouldShowTerminalInstructions}}
+        <p>
+          In this stage, you'll implement printing a shell prompt ($) and waiting for user input.
+        </p>
+        <div class="mb-6 bg-slate-800 dark:bg-slate-100 rounded-xl max-w-md shadow-md dark:shadow-slate-600">
+          <div class="flex items-center h-14 px-5 gap-2.5">
+            <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+            <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+            <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+          </div>
+          <div class="pt-0 p-5 font-mono text-slate-300 dark:text-slate-600">
+            <p class="my-0 animate-pulse cursor-pointer w-fit">$
+              <EmberTooltip @side="right" @text="Print '$ ' to pass this stage." />
+            </p>
+          </div>
+        </div>
+      {{else}}
+        <p>
+          Since this is the first stage, we've included some commented code to help you get started. To pass this stage, simply uncomment the code and
+          submit your changes.
+        </p>
+      {{/if}}
     </div>
 
     <ExpandableStepList @steps={{this.steps}} @onManualStepComplete={{this.handleStepCompletedManually}} class="scroll-mt-32" as |stepList|>

diff --git a/app/components/course-page/course-stage-step/first-stage-tutorial-card.ts b/app/components/course-page/course-stage-step/first-stage-tutorial-card.ts
@@ -85,6 +85,10 @@ export default class FirstStageTutorialCardComponent extends Component<Signature
     return this.coursePageState.manuallyCompletedStepIdsInFirstStageInstructions.includes('navigate-to-file');
   }
 
+  get shouldShowTerminalInstructions() {
+    return this.featureFlags.canSeeTerminalInstructionsForStage1And2;
+  }
+
   get steps() {
     return [
       new NavigateToFileStep(this.args.repository, this.navigateToFileStepIsComplete),

diff --git a/app/components/course-page/course-stage-step/second-stage-tutorial-card.hbs b/app/components/course-page/course-stage-step/second-stage-tutorial-card.hbs
@@ -2,9 +2,32 @@
   <:content>
     <div class="prose dark:prose-invert mb-5">
       {{#if (eq @repository.course.slug "shell")}}
-        <div class="mb-5 prose-compact">
-          {{markdown-to-html @courseStage.shortInstructionsMarkdown}}
-        </div>
+        {{#if this.shouldShowTerminalInstructions}}
+          <p>
+            In this stage, you'll implement support for handling invalid commands in your shell.
+          </p>
+          <div class="mb-6 bg-slate-800 dark:bg-slate-100 rounded-xl max-w-md shadow-md dark:shadow-slate-600">
+            <div class="flex items-center h-14 px-5 gap-2.5">
+              <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+              <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+              <div class="size-3 bg-slate-500 dark:bg-slate-300 rounded-full flex-shrink-0"></div>
+            </div>
+            <div class="pt-0 p-5 font-mono text-slate-300 dark:text-slate-600">
+              <p class="mt-0 mb-2 cursor-pointer w-fit">$
+                <span class="text-red-400">invalid_command</span>
+                <EmberTooltip @side="right" @text="Treat every command as invalid for now." />
+              </p>
+              <p class="my-0 animate-pulse cursor-pointer w-fit">
+                invalid_command: command not found
+                <EmberTooltip @side="bottom" @text="Read the input and print the error message." />
+              </p>
+            </div>
+          </div>
+        {{else}}
+          <div class="mt-2 mb-5 prose-compact">
+            {{markdown-to-html @courseStage.shortInstructionsMarkdown}}
+          </div>
+        {{/if}}
       {{else}}
         <p>
           In this stage, you'll implement your own solution. Unlike stage 1, your repository doesn't contain commented code to pass this stage.

diff --git a/app/components/course-page/course-stage-step/second-stage-tutorial-card.ts b/app/components/course-page/course-stage-step/second-stage-tutorial-card.ts
@@ -83,6 +83,10 @@ export default class SecondStageTutorialCardComponent extends Component<Signatur
     );
   }
 
+  get shouldShowTerminalInstructions() {
+    return this.featureFlags.canSeeTerminalInstructionsForStage1And2;
+  }
+
   get steps() {
     return [
       new ImplementSolutionStep(this.args.repository, this.implementSolutionStepIsComplete),

diff --git a/app/services/feature-flags.js b/app/services/feature-flags.js
@@ -14,6 +14,10 @@ export default class FeatureFlagsService extends Service {
     return this.currentUser && (this.currentUser.isStaff || this.currentUser.isConceptAuthor);
   }
 
+  get canSeeTerminalInstructionsForStage1And2() {
+    return this.currentUser?.isStaff || this.getFeatureFlagValue('can-see-terminal-instructions-for-stage-1-and-2') === 'test';
+  }
+
   get currentUser() {
     return this.authenticator.currentUser;
   }