Merge pull request #3154 from codecrafters-io/refactor-first-stage-task-cards

feat(course-stage): refactor first stage task cards and simplify UI

Author: rohitpaulk

app/components/course-page/course-stage-step/first-stage-tutorial-card/index.hbs

@@ -0,0 +1,60 @@
+<CoursePage::InstructionsCard
+  @contentIdentifier={{@currentStep.courseStage.id}}
+  {{! TODO: See if we still need this id marker?}}
+  id="your-task-card"
+  class="group/your-task-card"
+  data-test-your-task-card
+  data-test-first-stage-your-task-card
+  ...attributes
+>
+  <:header>
+    <CoursePage::CourseStageStep::YourTaskCard::Header @currentStep={{this.coursePageState.currentStepAsCourseStageStep}} class="mb-5 w-full" />
+  </:header>
+
+  <:content>
+    <div class="prose dark:prose-invert has-prism-highlighting" data-test-stage-instructions {{highlight-code-blocks this.instructionsMarkdown}}>
+      {{markdown-to-html this.instructionsMarkdown}}
+
+      <h4 id="first-stage-tutorial-heading">
+        How to pass this stage
+      </h4>
+
+      <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>
+
+    <ExpandableStepList @steps={{this.steps}} @onManualStepComplete={{this.handleStepCompletedManually}} class="scroll-mt-32 mt-5" as |stepList|>
+      {{#if (eq stepList.expandedStep.id "uncomment-code")}}
+        <CoursePage::CourseStageStep::FirstStageYourTaskCard::UncommentCodeStep
+          @repository={{@currentStep.repository}}
+          @courseStage={{@currentStep.courseStage}}
+          @isComplete={{this.uncommentCodeStepIsComplete}}
+        />
+      {{else if (eq stepList.expandedStep.id "submit-code")}}
+        <CoursePage::CourseStageStep::FirstStageYourTaskCard::SubmitCodeStep
+          @courseStage={{@currentStep.courseStage}}
+          @filename={{this.filename}}
+          @isComplete={{this.submitCodeStepIsComplete}}
+        />
+      {{/if}}
+    </ExpandableStepList>
+
+    {{#if (eq this.coursePageState.nextStep this.coursePageState.activeStep)}}
+      <div class="mt-4 flex">
+        <PrimaryLinkButton
+          @route={{this.coursePageState.activeStep.routeParams.route}}
+          @models={{this.coursePageState.activeStep.routeParams.models}}
+          data-test-continue-button
+        >
+          {{#if (eq this.coursePageState.activeStep.type "CourseStageStep")}}
+            View Next Stage →
+          {{else}}
+            View Next Step →
+          {{/if}}
+        </PrimaryLinkButton>
+      </div>
+    {{/if}}
+  </:content>
+</CoursePage::InstructionsCard>

app/components/course-page/course-stage-step/first-stage-tutorial-card/navigate-to-file-step.hbs

@@ -1,21 +1,17 @@
 import AnalyticsEventTrackerService from 'codecrafters-frontend/services/analytics-event-tracker';
 import Component from '@glimmer/component';
 import CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
-import FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
+import RepositoryModel from 'codecrafters-frontend/models/repository';
 import Store from '@ember-data/store';
-import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
-import type RepositoryModel from 'codecrafters-frontend/models/repository';
 import type { StepDefinition } from 'codecrafters-frontend/components/expandable-step-list';
-import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step';
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step';
 
 interface Signature {
   Element: HTMLDivElement;
 
   Args: {
-    repository: RepositoryModel;
-    courseStage: CourseStageModel;
     currentStep: CourseStageStep;
   };
 }
@@ -30,51 +26,37 @@ class BaseStep {
   }
 }
 
-class NavigateToFileStep extends BaseStep implements StepDefinition {
-  id = 'navigate-to-file';
+class UncommentCodeStep extends BaseStep implements StepDefinition {
+  id = 'uncomment-code';
   canBeCompletedManually = true;
 
   get titleMarkdown() {
-    if (!this.repository.firstStageSolution) {
-      return 'Navigate to README.md';
-    }
-
-    const filename = this.repository.firstStageSolution.changedFiles[0]!.filename;
+    const filename = this.repository.firstStageSolution?.changedFiles[0]?.filename;
 
     if (filename) {
-      return `Navigate to ${filename}`;
+      return `Uncomment code in ${filename}`;
     } else {
-      return 'Navigate to file';
+      return 'Uncomment code';
     }
   }
 }
 
-class UncommentCodeStep extends BaseStep implements StepDefinition {
-  id = 'uncomment-code';
-  canBeCompletedManually = true;
-
-  get titleMarkdown() {
-    return 'Uncomment code';
-  }
-}
-
 class SubmitCodeStep extends BaseStep implements StepDefinition {
   id = 'submit-code';
   canBeCompletedManually = false;
 
   get titleMarkdown() {
-    return 'Submit changes';
+    return 'Git push to submit your changes';
   }
 }
 
-export default class FirstStageTutorialCard extends Component<Signature> {
+export default class FirstStageYourTaskCard extends Component<Signature> {
   @service declare analyticsEventTracker: AnalyticsEventTrackerService;
   @service declare coursePageState: CoursePageStateService;
-  @service declare featureFlags: FeatureFlagsService;
   @service declare store: Store;
 
   get filename() {
-    const solution = this.args.courseStage.solutions.find((solution) => solution.language === this.args.repository.language);
+    const solution = this.args.currentStep.courseStage.solutions.find((solution) => solution.language === this.args.currentStep.repository.language);
 
     return solution?.changedFiles[0]?.filename;
   }
@@ -83,24 +65,22 @@ export default class FirstStageTutorialCard extends Component<Signature> {
     return this.args.currentStep.testsStatus === 'passed' || this.args.currentStep.status === 'complete';
   }
 
-  get navigateToFileStepIsComplete() {
-    return this.navigateToFileStepWasMarkedAsComplete || this.uncommentCodeStepIsComplete;
-  }
-
-  get navigateToFileStepWasMarkedAsComplete() {
-    return this.coursePageState.manuallyCompletedStepIdsInFirstStageInstructions.includes('navigate-to-file');
+  get instructionsMarkdown() {
+    return this.args.currentStep.courseStage.buildInstructionsMarkdownFor(this.args.currentStep.repository);
   }
 
   get steps() {
     return [
-      new NavigateToFileStep(this.args.repository, this.navigateToFileStepIsComplete),
-      new UncommentCodeStep(this.args.repository, this.uncommentCodeStepIsComplete),
-      new SubmitCodeStep(this.args.repository, this.submitCodeStepIsComplete),
+      new UncommentCodeStep(this.args.currentStep.repository, this.uncommentCodeStepIsComplete),
+      new SubmitCodeStep(this.args.currentStep.repository, this.submitCodeStepIsComplete),
     ];
   }
 
   get submitCodeStepIsComplete() {
-    return this.args.repository.lastSubmissionHasSuccessStatus || this.args.repository.stageIsComplete(this.args.courseStage);
+    return (
+      this.args.currentStep.repository.lastSubmissionHasSuccessStatus ||
+      this.args.currentStep.repository.stageIsComplete(this.args.currentStep.courseStage)
+    );
   }
 
   get uncommentCodeStepIsComplete() {
@@ -113,24 +93,13 @@ export default class FirstStageTutorialCard extends Component<Signature> {
 
   @action
   handleStepCompletedManually(step: StepDefinition) {
-    if (step.id === 'navigate-to-file') {
-      this.coursePageState.recordManuallyCompletedStepInFirstStageInstructions('navigate-to-file');
-
-      this.analyticsEventTracker.track('completed_first_stage_tutorial_step', {
-        step_number: 1,
-        step_id: 'navigate-to-file',
-        repository_id: this.args.repository.id,
-      });
-    }
-
     if (step.id === 'uncomment-code') {
       this.coursePageState.recordManuallyCompletedStepInFirstStageInstructions('uncomment-code');
-      this.coursePageState.recordManuallyCompletedStepInFirstStageInstructions('navigate-to-file');
 
       this.analyticsEventTracker.track('completed_first_stage_tutorial_step', {
-        step_number: 2,
+        step_number: 1,
         step_id: 'uncomment-code',
-        repository_id: this.args.repository.id,
+        repository_id: this.args.currentStep.repository.id,
       });
     }
   }
@@ -143,6 +112,6 @@ export default class FirstStageTutorialCard extends Component<Signature> {
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'CoursePage::CourseStageStep::FirstStageTutorialCard': typeof FirstStageTutorialCard;
+    'CoursePage::CourseStageStep::FirstStageYourTaskCard': typeof FirstStageYourTaskCard;
   }
 }