From 890580220d6a4c8b363f6be4a722a1a2f68d4540 Mon Sep 17 00:00:00 2001 From: Andy Li <1450947+andy1li@users.noreply.github.com> Date: Tue, 24 Dec 2024 02:00:22 +0800 Subject: [PATCH 1/4] refactor: Update conditional rendering logic for hiding test runner card before user has submitted data --- .../first-stage-tutorial-card.hbs | 51 ++++++++++++++----- .../first-stage-tutorial-card.ts | 6 +++ .../submit-code-step.hbs | 19 ++++--- .../submit-code-step.ts | 1 + app/controllers/course/stage/instructions.ts | 12 ++++- app/services/feature-flags.js | 8 +-- app/templates/course/stage/instructions.hbs | 8 ++- 7 files changed, 74 insertions(+), 31 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 index c9b5661b4..88ec54267 100644 --- 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 @@ -21,22 +21,45 @@ @isComplete={{this.uncommentCodeStepIsComplete}} /> {{else if (eq stepList.expandedStep.id "submit-code")}} - + {{/if}} - {{! After step 2, step 3 already contains a note on Tests Failed, so we can hide this !}} - {{#unless this.uncommentCodeStepIsComplete}} -
-

- {{svg-jar "information-circle" class="w-5 h-5 mb-1 inline-flex text-sky-500"}} - Note: - After your first Git push, you should see - Tests - failed - in the bar below this card. This is expected! Complete the steps above to pass the tests. -

-
- {{/unless}} + {{#if @shouldHideTestRunnerCardBeforeUserHasSubmitted}} + {{#if (not-eq @testsStatus "passed")}} +
+

Need help?

+
    +
  • + + Post your issue + on the forum—Andy is quick to reply, typically within 6 hours. +
    • +
+
+ {{/if}} + {{else}} + {{! After step 2, step 3 already contains a note on Tests Failed, so we can hide this !}} + {{#unless this.uncommentCodeStepIsComplete}} +
+

+ {{svg-jar "information-circle" class="w-5 h-5 mb-1 inline-flex text-sky-500"}} + Note: + After your first Git push, you should see + Tests failed + in the bar below this card. This is expected! Complete the steps above to pass the tests. +

+
+ {{/unless}} + {{/if}} \ No newline at end of file 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 index 22329a74e..0091237b2 100644 --- 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 @@ -14,6 +14,8 @@ interface Signature { Args: { repository: RepositoryModel; courseStage: CourseStageModel; + shouldHideTestRunnerCardBeforeUserHasSubmitted: boolean; + testsStatus: string; }; } @@ -70,6 +72,10 @@ export default class FirstStageTutorialCardComponent extends Component

- Once you run the commands above, the - Tests failed - message below this card will change to - Tests passed. + Once you run the commands above, our system will automatically run tests on your code.

{{#if @isComplete}} @@ -23,10 +20,12 @@ {{#unless @isComplete}} -

- Note: - If you're still seeing "Tests failed" after completing the steps above, - view logs - to troubleshoot. -

+ {{#unless @shouldHideTestRunnerCardBeforeUserHasSubmitted}} +

+ Note: + If you're still seeing "Tests failed" after completing the steps above, + view logs + to troubleshoot. +

+ {{/unless}} {{/unless}} \ No newline at end of file diff --git a/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts b/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts index a10c576ed..aabb80994 100644 --- a/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts +++ b/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts @@ -8,6 +8,7 @@ interface Signature { Args: { isComplete: boolean; + shouldHideTestRunnerCardBeforeUserHasSubmitted: boolean; }; } diff --git a/app/controllers/course/stage/instructions.ts b/app/controllers/course/stage/instructions.ts index 132665df7..b5a1cfc6c 100644 --- a/app/controllers/course/stage/instructions.ts +++ b/app/controllers/course/stage/instructions.ts @@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking'; import type AuthenticatorService from 'codecrafters-frontend/services/authenticator'; import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state'; import type CourseStageModel from 'codecrafters-frontend/models/course-stage'; +import type FeatureFlagsService from 'codecrafters-frontend/services/feature-flags'; import type RepositoryModel from 'codecrafters-frontend/models/repository'; import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step'; import { action } from '@ember/object'; @@ -11,10 +12,10 @@ import type RouterService from '@ember/routing/router-service'; import { next } from '@ember/runloop'; import { task } from 'ember-concurrency'; import type Store from '@ember-data/store'; - export default class CourseStageInstructionsController extends Controller { @service declare authenticator: AuthenticatorService; @service declare coursePageState: CoursePageStateService; + @service declare featureFlags: FeatureFlagsService; @service declare router: RouterService; @service declare store: Store; @@ -47,6 +48,10 @@ export default class CourseStageInstructionsController extends Controller { return this.model.courseStage.prerequisiteInstructionsMarkdownFor(this.model.activeRepository); } + get shouldHideTestRunnerCardBeforeUserHasSubmitted() { + return this.featureFlags.hideTestRunnerCardBeforeUserHasSubmitted; + } + get shouldShowFeedbackPrompt() { return !this.currentStep.courseStage.isFirst && this.currentStep.status === 'complete'; } @@ -56,7 +61,10 @@ export default class CourseStageInstructionsController extends Controller { } get shouldShowTestRunnerCard() { - return this.isCurrentStage && this.currentStep.status !== 'complete'; + const shouldHideTestRunnerCard = + this.model.courseStage.isFirst && this.model.activeRepository.submissions.length <= 1 && this.shouldHideTestRunnerCardBeforeUserHasSubmitted; + + return this.isCurrentStage && this.currentStep.status !== 'complete' && !shouldHideTestRunnerCard; } get shouldShowUpgradePrompt() { diff --git a/app/services/feature-flags.js b/app/services/feature-flags.js index c3dd77615..6b35c0166 100644 --- a/app/services/feature-flags.js +++ b/app/services/feature-flags.js @@ -18,14 +18,14 @@ export default class FeatureFlagsService extends Service { return this.currentUser?.isStaff || this.getFeatureFlagValue('can-see-short-instructions-for-stage-2') === 'test'; } - get canSeeTweaksForStage1() { - return this.currentUser?.isStaff || this.getFeatureFlagValue('can-see-tweaks-for-stage-1') === 'test'; - } - get currentUser() { return this.authenticator.currentUser; } + get hideTestRunnerCardBeforeUserHasSubmitted() { + return this.currentUser?.isStaff || this.getFeatureFlagValue('hide-test-runner-card-before-user-has-submitted') === 'test'; + } + getFeatureFlagValue(flagName) { const value = this.currentUser && this.currentUser.featureFlags && this.currentUser.featureFlags[flagName]; diff --git a/app/templates/course/stage/instructions.hbs b/app/templates/course/stage/instructions.hbs index 091a908dd..676d6969f 100644 --- a/app/templates/course/stage/instructions.hbs +++ b/app/templates/course/stage/instructions.hbs @@ -33,7 +33,13 @@ {{/if}} {{#if @model.courseStage.isFirst}} - + {{/if}} {{#if @model.courseStage.isSecond}} From c66cd0aea265d624bb0e56ab4e09e91221fad0c9 Mon Sep 17 00:00:00 2001 From: Andy Li <1450947+andy1li@users.noreply.github.com> Date: Tue, 24 Dec 2024 02:29:08 +0800 Subject: [PATCH 2/4] feat(course): Add link to forum in first-stage-tutorial-card [percy] --- .../course-stage-step/first-stage-tutorial-card.hbs | 4 ++-- .../course-stage-step/first-stage-tutorial-card.ts | 6 +++--- app/controllers/course/stage/instructions.ts | 9 +++++++++ app/templates/course/stage/instructions.hbs | 2 +- 4 files changed, 15 insertions(+), 6 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 index 88ec54267..3c76d7c49 100644 --- 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 @@ -29,13 +29,13 @@ {{#if @shouldHideTestRunnerCardBeforeUserHasSubmitted}} - {{#if (not-eq @testsStatus "passed")}} + {{#if @shouldShowLinkToForum}}

Need help?

{{#unless @isComplete}} - {{#unless @shouldHideTestRunnerCardBeforeUserHasSubmitted}} + {{#unless @shouldHideTestRunnerCardRelatedCopy}}

Note: If you're still seeing "Tests failed" after completing the steps above, diff --git a/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts b/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts index aabb80994..d6c56f9fc 100644 --- a/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts +++ b/app/components/course-page/course-stage-step/first-stage-tutorial-card/submit-code-step.ts @@ -8,7 +8,7 @@ interface Signature { Args: { isComplete: boolean; - shouldHideTestRunnerCardBeforeUserHasSubmitted: boolean; + shouldHideTestRunnerCardRelatedCopy: boolean; }; } diff --git a/app/controllers/course/stage/instructions.ts b/app/controllers/course/stage/instructions.ts index f7792288f..798eccfe0 100644 --- a/app/controllers/course/stage/instructions.ts +++ b/app/controllers/course/stage/instructions.ts @@ -48,32 +48,34 @@ export default class CourseStageInstructionsController extends Controller { return this.model.courseStage.prerequisiteInstructionsMarkdownFor(this.model.activeRepository); } - get shouldHideTestRunnerCardBeforeUserHasSubmitted() { - return this.featureFlags.hideTestRunnerCardBeforeUserHasSubmitted; + get shouldHideTestRunnerCardBeforeStage1Submission() { + return this.featureFlags.cannotSeeTestRunnerCardBeforeStage1Submission; } get shouldShowFeedbackPrompt() { return !this.currentStep.courseStage.isFirst && this.currentStep.status === 'complete'; } - get shouldShowLinkToForum() { - return ( - this.isCurrentStage && - this.currentStep.status !== 'complete' && - this.currentStep.testsStatus !== 'passed' && - this.shouldHideTestRunnerCardBeforeUserHasSubmitted - ); - } - get shouldShowPrerequisites() { return !!this.prerequisiteInstructionsMarkdown; } get shouldShowTestRunnerCard() { - const shouldHideTestRunnerCard = - this.model.courseStage.isFirst && this.model.activeRepository.submissions.length <= 1 && this.shouldHideTestRunnerCardBeforeUserHasSubmitted; + if (!this.isCurrentStage) { + return false; + } - return this.isCurrentStage && this.currentStep.status !== 'complete' && !shouldHideTestRunnerCard; + if (this.currentStep.status === 'complete') { + return false; + } + + if (this.model.courseStage.isFirst) { + // For stage 1, we hide the test runner card until the user's submission. + return !(this.model.activeRepository.submissionsCount <= 1 && this.shouldHideTestRunnerCardBeforeStage1Submission); + } else { + // For other stages, we always show the test runner card + return true; + } } get shouldShowUpgradePrompt() { diff --git a/app/services/feature-flags.js b/app/services/feature-flags.js index 6b35c0166..d5f34c3fd 100644 --- a/app/services/feature-flags.js +++ b/app/services/feature-flags.js @@ -18,12 +18,12 @@ export default class FeatureFlagsService extends Service { return this.currentUser?.isStaff || this.getFeatureFlagValue('can-see-short-instructions-for-stage-2') === 'test'; } - get currentUser() { - return this.authenticator.currentUser; + get cannotSeeTestRunnerCardBeforeStage1Submission() { + return this.currentUser?.isStaff || this.getFeatureFlagValue('cannot-see-test-runner-card-before-stage1-submission') === 'test'; } - get hideTestRunnerCardBeforeUserHasSubmitted() { - return this.currentUser?.isStaff || this.getFeatureFlagValue('hide-test-runner-card-before-user-has-submitted') === 'test'; + get currentUser() { + return this.authenticator.currentUser; } getFeatureFlagValue(flagName) { diff --git a/app/templates/course/stage/instructions.hbs b/app/templates/course/stage/instructions.hbs index 1f162524a..9a7e2689a 100644 --- a/app/templates/course/stage/instructions.hbs +++ b/app/templates/course/stage/instructions.hbs @@ -36,8 +36,8 @@ {{/if}}