Launch Split Up Git Commands For Stage 1 experiment

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

@@ -21,7 +21,11 @@
           @isComplete={{this.uncommentCodeStepIsComplete}}
         />
       {{else if (eq stepList.expandedStep.id "submit-code")}}
-        <CoursePage::CourseStageStep::FirstStageTutorialCard::SubmitCodeStep @isComplete={{this.submitCodeStepIsComplete}} />
+        <CoursePage::CourseStageStep::FirstStageTutorialCard::SubmitCodeStep
+          @courseStage={{@courseStage}}
+          @filename={{this.filename}}
+          @isComplete={{this.submitCodeStepIsComplete}}
+        />
       {{/if}}
     </ExpandableStepList>
 

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

@@ -9,7 +9,6 @@ import type { Step } 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 { tracked } from '@glimmer/tracking';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -74,7 +73,11 @@ export default class FirstStageTutorialCardComponent extends Component<Signature
   @service declare featureFlags: FeatureFlagsService;
   @service declare store: Store;
 
-  @tracked isTerminalInstructionsPingingClicked = false;
+  get filename() {
+    const solution = this.args.courseStage.solutions.find((solution) => solution.language === this.args.repository.language);
+
+    return solution?.changedFiles[0]?.filename;
+  }
 
   get hasPassedTests() {
     return this.args.currentStep.testsStatus === 'passed' || this.args.currentStep.status === 'complete';
@@ -132,11 +135,6 @@ export default class FirstStageTutorialCardComponent extends Component<Signature
     }
   }
 
-  @action
-  handleTerminalClick() {
-    this.isTerminalInstructionsPingingClicked = true;
-  }
-
   @action
   handleViewLogsButtonClick() {
     this.coursePageState.testResultsBarIsExpanded = true;

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

@@ -1,10 +1,58 @@
-<div class="prose dark:prose-invert mb-3">
-  <p>
-    Run the following commands to submit your changes:
-  </p>
-</div>
+{{#if this.canSeeSplitUpGitCommandsForStage1}}
+  <div class="mb-6">
+    <div class="prose prose-compact dark:prose-invert mb-3">
+      First, run this command to
+      <span class="font-semibold">commit your changes</span>:
+    </div>
+
+    <CopyableTerminalCommand @commands={{array 'git commit -am "[any message]"'}} class="mb-3" />
+
+    <div class="prose prose-compact dark:prose-invert">
+      <p>
+        The output of the command should look like this:
+      </p>
+
+      <pre class="max-w-2xl"><code class="text-xs">[master 8bc0189] [any message]<br />1 file changed, 1 insertion(+), 1 deletion(-)</code></pre>
+
+      <p class="text-xs">
+        <b>Note:</b>
+        If your output doesn't match the above,
+        <a href="#" {{on "click" (fn (mut this.isCommitModalOpen) true)}}>read this</a>.
+      </p>
+    </div>
+  </div>
+
+  <div class="mb-6">
+    <div class="prose prose-compact dark:prose-invert mb-3">
+      Next, run this command to
+      <span class="font-semibold">push your changes</span>:
+    </div>
 
-<CopyableTerminalCommand @commands={{array 'git commit -am "[any message]"' "git push origin master"}} class="mb-3" />
+    <CopyableTerminalCommand @commands={{array "git push origin master"}} class="mb-3" />
+
+    <div class="prose prose-compact dark:prose-invert">
+      <p>
+        The output of the command should look like this:
+      </p>
+
+      <pre class="language-bash max-w-2xl"><code class="text-xs">remote: Welcome to CodeCrafters! Your commit was received successfully.</code></pre>
+
+      <p class="text-xs">
+        <b>Note:</b>
+        If your output doesn't match the above,
+        <a href="#" {{on "click" (fn (mut this.isPushModalOpen) true)}}>read this</a>.
+      </p>
+    </div>
+  </div>
+{{else}}
+  <div class="prose dark:prose-invert mb-3">
+    <p>
+      Run the following commands to submit your changes:
+    </p>
+  </div>
+
+  <CopyableTerminalCommand @commands={{array 'git commit -am "[any message]"' "git push origin master"}} class="mb-3" />
+{{/if}}
 
 <div class="prose dark:prose-invert">
   <p class={{if @isComplete "line-through"}}>
@@ -29,4 +77,144 @@
     <a href="#" {{on "click" this.handleViewLogsButtonClick}}>view logs</a>
     to troubleshoot.
   </p>
-{{/unless}}
+{{/unless}}
+
+{{#if this.isCommitModalOpen}}
+  <ModalBackdrop class="cursor-pointer">
+    <ModalBody @allowManualClose={{true}} @onClose={{this.handleCommitModalClose}} @isWide={{true}} class="w-fit cursor-default">
+      <div class="mb-6 font-semibold text-2xl text-gray-800 dark:text-gray-200 mr-8">
+        Commit changes
+      </div>
+
+      <div class="prose prose-compact dark:prose-invert mb-3">
+        Run this command to
+        <span class="font-semibold">commit your changes</span>:
+      </div>
+
+      <CopyableTerminalCommand @commands={{array 'git commit -am "[any message]"'}} class="w-full mb-3" />
+
+      <div class="prose prose-compact dark:prose-invert has-prism-highlighting mb-3">
+        <p>
+          The output of the command should look like this:
+        </p>
+
+        <pre class="max-w-2xl"><code class="text-xs">[master 8bc0189] [any message]<br />1 file changed, 1 insertion(+), 1 deletion(-)</code></pre>
+      </div>
+
+      <div class="prose prose-compact dark:prose-invert has-prism-highlighting mt-6">
+        <h3>Nothing to commit</h3>
+        <p>
+          If you see output like this instead:
+        </p>
+        <pre class="language-bash max-full max-w-2xl"><code class="text-xs">On branch master<br />Your branch is up to date with 'origin/master'.<br
+            /><br />nothing to commit, working tree clean</code></pre>
+        <ol class="space-y-4">
+          <li>
+            <p>Double-check if you’ve saved the changes.</p>
+            <p>Then run <code>git commit -am "[saved]"</code> again.</p>
+          </li>
+          <li>
+            <p>
+              Check the file content in the latest commit:
+            </p>
+            <code>git show HEAD:{{@filename}}{{unless @filename "path-to-your-file"}}</code>
+          </li>
+          <li>
+            <p>
+              If the file content looks correct, make an empty commit:
+            </p>
+            <code>git commit --allow-empty -m 'empty'</code>
+          </li>
+        </ol>
+      </div>
+
+      <div class="prose dark:prose-invert prose-sm prose-compact mt-10">
+        <p>
+          Need help?
+          <a
+            href="https://forum.codecrafters.io/new-topic?category=Challenges&tags=challenge%3A{{this.currentCourse.slug}}&title=%5B{{this.currentCourse.shortName}}%5D%20How%20to%20pass%20the%20first%20stage%3F&body=Checklist%3A%0A%0A1.%20%E2%9C%85%20or%20%E2%9D%8C%3A%20I%27ve%20uncommented%20the%20code.%0A2.%20%E2%9C%85%20or%20%E2%9D%8C%3A%20I%27ve%20saved%20the%20changes.%0A3.%20%E2%9C%85%20or%20%E2%9D%8C%3A%20I%27ve%20run%20the%20git%20commands%3A%0A%0A%60%60%60%0Agit%20commit%20-am%20%22%5Bseeking%20help%20on%20forum%5D%22%0Agit%20push%20origin%20master%0A%60%60%60%0A%0A---%0A%0AHere%E2%80%99s%20a%20screenshot%20showing%20the%20output%20from%20running%20the%20Git%20commands%3A%0A%0A%5BAttach%20screenshot%20here%5D%0A%0A%5BShare%20other%20details%20here%5D"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Post your issue</a>
+          on the forum —
+          <img
+            alt="avatar"
+            src="https://avatars.githubusercontent.com/u/1450947"
+            class="inline-block ml-1 mr-1.5 my-0 -translate-y-px overflow-hidden rounded-full size-4 filter drop-shadow-sm ring-1 ring-white dark:ring-white/5 shadow"
+          />Andy usually replies within 6 hours.
+        </p>
+      </div>
+    </ModalBody>
+  </ModalBackdrop>
+{{/if}}
+
+{{#if this.isPushModalOpen}}
+  <ModalBackdrop class="cursor-pointer">
+    <ModalBody @allowManualClose={{true}} @onClose={{this.handlePushModalClose}} @isWide={{true}} class="w-fit cursor-default">
+      <div class="mb-6 font-semibold text-2xl text-gray-800 dark:text-gray-200 mr-8">
+        Push changes
+      </div>
+
+      <div class="prose prose-compact dark:prose-invert mb-3">
+        Run this command to
+        <span class="font-semibold">push your changes</span>:
+      </div>
+
+      <CopyableTerminalCommand @commands={{array "git push origin master"}} class="w-full mb-3" />
+
+      <div class="prose prose-compact dark:prose-invert mb-3">
+        <p>
+          The output of the command should look like this:
+        </p>
+
+        <pre class="max-w-2xl"><code class="text-xs">remote: Welcome to CodeCrafters! Your commit was received successfully.</code></pre>
+      </div>
+
+      <div class="prose prose-compact dark:prose-invert mt-6">
+        <h3>Everything up-to-date</h3>
+        <p>
+          If you see output like this instead:
+        </p>
+        <pre class="language-bash max-full max-w-2xl"><code class="text-xs">Everything up-to-date</code></pre>
+        <ol class="space-y-4">
+          <li>
+            <p>
+              Check the file content in the latest commit:
+            </p>
+            <code>git show HEAD:{{@filename}}{{unless @filename "path-to-your-file"}}</code>
+          </li>
+          <li>
+            <p>
+              If the file content looks correct, make an empty commit:
+            </p>
+            <code>git commit --allow-empty -m 'empty'</code>
+          </li>
+          <li>
+            Run
+            <code>git push origin master</code>
+            again.
+          </li>
+        </ol>
+      </div>
+
+      <div class="prose dark:prose-invert prose-sm prose-compact mt-10">
+        <p>
+          Need help?
+          <a
+            href="https://forum.codecrafters.io/new-topic?category=Challenges&tags=challenge%3A{{this.currentCourse.slug}}&title=%5B{{this.currentCourse.shortName}}%5D%20How%20to%20pass%20the%20first%20stage%3F&body=Checklist%3A%0A%0A1.%20%E2%9C%85%20or%20%E2%9D%8C%3A%20I%27ve%20uncommented%20the%20code.%0A2.%20%E2%9C%85%20or%20%E2%9D%8C%3A%20I%27ve%20saved%20the%20changes.%0A3.%20%E2%9C%85%20or%20%E2%9D%8C%3A%20I%27ve%20run%20the%20git%20commands%3A%0A%0A%60%60%60%0Agit%20commit%20-am%20%22%5Bseeking%20help%20on%20forum%5D%22%0Agit%20push%20origin%20master%0A%60%60%60%0A%0A---%0A%0AHere%E2%80%99s%20a%20screenshot%20showing%20the%20output%20from%20running%20the%20Git%20commands%3A%0A%0A%5BAttach%20screenshot%20here%5D%0A%0A%5BShare%20other%20details%20here%5D"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Post your issue</a>
+          on the forum —
+          <img
+            alt="avatar"
+            src="https://avatars.githubusercontent.com/u/1450947"
+            class="inline-block ml-1 mr-1.5 my-0 -translate-y-px overflow-hidden rounded-full size-4 filter drop-shadow-sm ring-1 ring-white dark:ring-white/5 shadow"
+          />Andy usually replies within 6 hours.
+        </p>
+      </div>
+    </ModalBody>
+  </ModalBackdrop>
+{{/if}}

app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts

@@ -1,18 +1,44 @@
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
 import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
-
+import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
 interface Signature {
   Element: HTMLDivElement;
 
   Args: {
+    courseStage: CourseStageModel;
+    filename: string | undefined;
     isComplete: boolean;
   };
 }
 
 export default class SubmitCodeStepComponent extends Component<Signature> {
   @service declare coursePageState: CoursePageStateService;
+  @service declare featureFlags: FeatureFlagsService;
+
+  @tracked isCommitModalOpen: boolean = false;
+  @tracked isPushModalOpen: boolean = false;
+
+  get canSeeSplitUpGitCommandsForStage1() {
+    return this.featureFlags.canSeeSplitUpGitCommandsForStage1;
+  }
+
+  get currentCourse() {
+    return this.args.courseStage.course;
+  }
+
+  @action
+  handleCommitModalClose() {
+    this.isCommitModalOpen = false;
+  }
+
+  @action
+  handlePushModalClose() {
+    this.isPushModalOpen = false;
+  }
 
   @action
   handleViewLogsButtonClick() {

app/components/course-page/course-stage-step/second-stage-tutorial-card.ts

@@ -9,7 +9,6 @@ import type CourseStageModel from 'codecrafters-frontend/models/course-stage';
 import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags';
 import { action } from '@ember/object';
 import type { Step } from 'codecrafters-frontend/components/expandable-step-list';
-import { tracked } from '@glimmer/tracking';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -55,8 +54,6 @@ export default class SecondStageTutorialCardComponent extends Component<Signatur
   @service declare featureFlags: FeatureFlagsService;
   @service declare store: Store;
 
-  @tracked isTerminalInstructionsPingingClicked = false;
-
   get implementSolutionStepIsComplete() {
     return (
       this.implementSolutionStepWasMarkedAsComplete ||
@@ -117,11 +114,6 @@ export default class SecondStageTutorialCardComponent extends Component<Signatur
     }
   }
 
-  @action
-  handleTerminalClick() {
-    this.isTerminalInstructionsPingingClicked = true;
-  }
-
   @action
   handleViewLogsButtonClick() {
     this.coursePageState.testResultsBarIsExpanded = true;

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 canSeeSplitUpGitCommandsForStage1() {
+    return this.currentUser?.isStaff || this.getFeatureFlagValue('can-see-split-up-git-commands-for-stage-1') === 'test';
+  }
+
   get currentUser() {
     return this.authenticator.currentUser;
   }