Merge pull request #2516 from codecrafters-io/stage-1-experiments

End experiment: Stage 1 - Show All Steps At Once
codecrafters-io · Jan 6, 2025 · 3a8b1d6 · 3a8b1d6
2 parents 91f076c + f2672a7
commit 3a8b1d6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 101 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,102 +1,42 @@
-{{#if this.shouldShowAllStepsAtOnceForStage1}}
-  <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>
-      </div>
+<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>
+    </div>
 
-      <div class="prose dark:prose-invert mb-3">
-        <div class="inline-flex items-center gap-1">
-          {{#if this.hasPassedTests}}
-            {{svg-jar "check-circle" class="w-6 h-6 text-teal-500 inline-flex mb-0.5"}}
-          {{else}}
-            <b class="text-teal-600">Step 1:</b>
-          {{/if}}
-          Open a file
-        </div>
-      </div>
-      <CoursePage::CourseStageStep::FirstStageTutorialCard::NavigateToFileStep
-        @repository={{@repository}}
-        @courseStage={{@courseStage}}
-        @isComplete={{false}}
-      />
-
-      <div class="prose dark:prose-invert mt-6 mb-3 pt-4 border-t dark:border-white/5">
-        <div class="inline-flex items-center gap-1">
-          {{#if this.hasPassedTests}}
-            {{svg-jar "check-circle" class="w-6 h-6 text-teal-500 inline-flex mb-0.5"}}
-          {{else}}
-            <b class="text-teal-600">Step 2:</b>
-          {{/if}}
-          Uncomment code
-        </div>
-      </div>
-      <div class="max-w-2xl">
+    <ExpandableStepList @steps={{this.steps}} @onManualStepComplete={{this.handleStepCompletedManually}} class="scroll-mt-32" as |stepList|>
+      {{#if (eq stepList.expandedStep.id "navigate-to-file")}}
+        <CoursePage::CourseStageStep::FirstStageTutorialCard::NavigateToFileStep
+          @repository={{@repository}}
+          @courseStage={{@courseStage}}
+          @isComplete={{this.navigateToFileStepIsComplete}}
+        />
+      {{else if (eq stepList.expandedStep.id "uncomment-code")}}
         <CoursePage::CourseStageStep::FirstStageTutorialCard::UncommentCodeStep
           @repository={{@repository}}
           @courseStage={{@courseStage}}
-          @isComplete={{false}}
+          @isComplete={{this.uncommentCodeStepIsComplete}}
         />
-      </div>
+      {{else if (eq stepList.expandedStep.id "submit-code")}}
+        <CoursePage::CourseStageStep::FirstStageTutorialCard::SubmitCodeStep @isComplete={{this.submitCodeStepIsComplete}} />
+      {{/if}}
+    </ExpandableStepList>
 
-      <div class="prose dark:prose-invert mt-8 mb-3 pt-4 border-t dark:border-white/5">
-        <div class="inline-flex items-center gap-1">
-          {{#if this.hasPassedTests}}
-            {{svg-jar "check-circle" class="w-6 h-6 text-teal-500 inline-flex mb-0.5"}}
-          {{else}}
-            <b class="text-teal-600">Step 3:</b>
-          {{/if}}
-          Submit changes
-        </div>
-      </div>
-      <CoursePage::CourseStageStep::FirstStageTutorialCard::SubmitCodeStep @isComplete={{this.hasPassedTests}} />
-    </:content>
-  </CoursePage::InstructionsCard>
-{{else}}
-  <CoursePage::InstructionsCard @title="How to pass this stage" id="first-stage-tutorial-card" ...attributes>
-    <:content>
-      <div class="prose dark:prose-invert mb-5">
+    {{! After step 2, step 3 already contains a note on Tests Failed, so we can hide this !}}
+    {{#unless this.uncommentCodeStepIsComplete}}
+      <div class="prose dark:prose-invert prose-sm prose-compact mt-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.
+          {{svg-jar "information-circle" class="w-5 h-5 mb-1 inline-flex text-sky-500"}}
+          <b>Note:</b>
+          After your first Git push, you should see
+          <code class="font-semibold text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800/40">Tests
+            failed</code>
+          in the bar below this card. This is expected! Complete the steps above to pass the tests.
         </p>
       </div>
-
-      <ExpandableStepList @steps={{this.steps}} @onManualStepComplete={{this.handleStepCompletedManually}} class="scroll-mt-32" as |stepList|>
-        {{#if (eq stepList.expandedStep.id "navigate-to-file")}}
-          <CoursePage::CourseStageStep::FirstStageTutorialCard::NavigateToFileStep
-            @repository={{@repository}}
-            @courseStage={{@courseStage}}
-            @isComplete={{this.navigateToFileStepIsComplete}}
-          />
-        {{else if (eq stepList.expandedStep.id "uncomment-code")}}
-          <CoursePage::CourseStageStep::FirstStageTutorialCard::UncommentCodeStep
-            @repository={{@repository}}
-            @courseStage={{@courseStage}}
-            @isComplete={{this.uncommentCodeStepIsComplete}}
-          />
-        {{else if (eq stepList.expandedStep.id "submit-code")}}
-          <CoursePage::CourseStageStep::FirstStageTutorialCard::SubmitCodeStep @isComplete={{this.submitCodeStepIsComplete}} />
-        {{/if}}
-      </ExpandableStepList>
-
-      {{! After step 2, step 3 already contains a note on Tests Failed, so we can hide this !}}
-      {{#unless this.uncommentCodeStepIsComplete}}
-        <div class="prose dark:prose-invert prose-sm prose-compact mt-5">
-          <p>
-            {{svg-jar "information-circle" class="w-5 h-5 mb-1 inline-flex text-sky-500"}}
-            <b>Note:</b>
-            After your first Git push, you should see
-            <code
-              class="font-semibold text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900/30 border border-red-200 dark:border-red-800/40"
-            >Tests failed</code>
-            in the bar below this card. This is expected! Complete the steps above to pass the tests.
-          </p>
-        </div>
-      {{/unless}}
-    </:content>
-  </CoursePage::InstructionsCard>
-{{/if}}
+    {{/unless}}
+  </:content>
+</CoursePage::InstructionsCard>
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,10 +85,6 @@ export default class FirstStageTutorialCardComponent extends Component<Signature
     return this.coursePageState.manuallyCompletedStepIdsInFirstStageInstructions.includes('navigate-to-file');
   }
 
-  get shouldShowAllStepsAtOnceForStage1() {
-    return this.featureFlags.canSeeAllStepsAtOnceForStage1;
-  }
-
   get steps() {
     return [
       new NavigateToFileStep(this.args.repository, this.navigateToFileStepIsComplete),

diff --git a/app/services/feature-flags.js b/app/services/feature-flags.js
@@ -10,10 +10,6 @@ export default class FeatureFlagsService extends Service {
     this.notifiedFeatureFlags = new Set();
   }
 
-  get canSeeAllStepsAtOnceForStage1() {
-    return this.currentUser?.isStaff || this.getFeatureFlagValue('can-see-all-steps-at-once-for-stage-1') === 'test';
-  }
-
   get canSeeConceptsIndex() {
     return this.currentUser && (this.currentUser.isStaff || this.currentUser.isConceptAuthor);
   }