From 1850397296a52b66f25757998aac5a2cb9f3ad64 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Thu, 17 Oct 2024 20:59:43 +0100 Subject: [PATCH 1/6] Add PreviousStepsIncompleteOverlay component and update step-content usage. --- .../previous-steps-incomplete-overlay.hbs | 13 ++++++++++ .../previous-steps-incomplete-overlay.ts | 24 +++++++++++++++++++ app/components/course-page/step-content.hbs | 19 ++++----------- 3 files changed, 42 insertions(+), 14 deletions(-) create mode 100644 app/components/course-page/previous-steps-incomplete-overlay.hbs create mode 100644 app/components/course-page/previous-steps-incomplete-overlay.ts diff --git a/app/components/course-page/previous-steps-incomplete-overlay.hbs b/app/components/course-page/previous-steps-incomplete-overlay.hbs new file mode 100644 index 0000000000..31272d4401 --- /dev/null +++ b/app/components/course-page/previous-steps-incomplete-overlay.hbs @@ -0,0 +1,13 @@ + + <:content> + {{yield}} + + <:overlay> + + + \ No newline at end of file diff --git a/app/components/course-page/previous-steps-incomplete-overlay.ts b/app/components/course-page/previous-steps-incomplete-overlay.ts new file mode 100644 index 0000000000..b14f248cc4 --- /dev/null +++ b/app/components/course-page/previous-steps-incomplete-overlay.ts @@ -0,0 +1,24 @@ +import Component from '@glimmer/component'; +import type Step from 'codecrafters-frontend/utils/course-page-step-list/step'; + +interface Signature { + Element: HTMLDivElement; + + Args: { + isBlurred: boolean; + onClose: () => void; + activeStep: Step; + }; + + Blocks: { + default: []; + }; +} + +export default class PreviousStepsIncompleteOverlayComponent extends Component {} + +declare module '@glint/environment-ember-loose/registry' { + export default interface Registry { + 'CoursePage::PreviousStepsIncompleteOverlay': typeof PreviousStepsIncompleteOverlayComponent; + } +} diff --git a/app/components/course-page/step-content.hbs b/app/components/course-page/step-content.hbs index ab9fe9dde7..02fc15274e 100644 --- a/app/components/course-page/step-content.hbs +++ b/app/components/course-page/step-content.hbs @@ -9,21 +9,12 @@ /> {{/if}} - - <:content> - {{yield}} - - <:overlay> - - - + {{yield}} + \ No newline at end of file From 05f1e7bbf7962d9104da29f0a8ccc9b0e37b0ddc Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Thu, 17 Oct 2024 21:13:29 +0100 Subject: [PATCH 2/6] Refactor PreviousStepsIncompleteOverlay to use currentStep and handle modal state. --- .../previous-steps-incomplete-overlay.hbs | 9 +++- .../previous-steps-incomplete-overlay.ts | 41 ++++++++++++++++--- app/components/course-page/step-content.hbs | 7 +--- 3 files changed, 44 insertions(+), 13 deletions(-) diff --git a/app/components/course-page/previous-steps-incomplete-overlay.hbs b/app/components/course-page/previous-steps-incomplete-overlay.hbs index 31272d4401..878cad220b 100644 --- a/app/components/course-page/previous-steps-incomplete-overlay.hbs +++ b/app/components/course-page/previous-steps-incomplete-overlay.hbs @@ -1,5 +1,6 @@ <:overlay> - + \ No newline at end of file diff --git a/app/components/course-page/previous-steps-incomplete-overlay.ts b/app/components/course-page/previous-steps-incomplete-overlay.ts index b14f248cc4..bf862303cc 100644 --- a/app/components/course-page/previous-steps-incomplete-overlay.ts +++ b/app/components/course-page/previous-steps-incomplete-overlay.ts @@ -1,13 +1,15 @@ +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { service } from '@ember/service'; import Component from '@glimmer/component'; -import type Step from 'codecrafters-frontend/utils/course-page-step-list/step'; +import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state'; +import { Step } from 'codecrafters-frontend/utils/course-page-step-list'; interface Signature { Element: HTMLDivElement; Args: { - isBlurred: boolean; - onClose: () => void; - activeStep: Step; + currentStep: Step; }; Blocks: { @@ -15,7 +17,36 @@ interface Signature { }; } -export default class PreviousStepsIncompleteOverlayComponent extends Component {} +export default class PreviousStepsIncompleteOverlayComponent extends Component { + @tracked modalWasDismissed = false; + @tracked lastSeenStepId: string | null = null; + + @service declare coursePageState: CoursePageStateService; + + get shouldShowModal(): boolean { + // This _shouldn't_ happen as long as we're always rendered in the course page, but let's be safe + if (!this.coursePageState.activeStep) { + return false; + } + + return !this.modalWasDismissed && this.args.currentStep.status === 'locked'; + } + + @action + handleModalDismissed() { + this.modalWasDismissed = true; + } + + @action + handleStepIdUpdated() { + if (this.args.currentStep.id === this.lastSeenStepId) { + return; + } + + this.lastSeenStepId = this.args.currentStep.id; + this.modalWasDismissed = false; + } +} declare module '@glint/environment-ember-loose/registry' { export default interface Registry { diff --git a/app/components/course-page/step-content.hbs b/app/components/course-page/step-content.hbs index 02fc15274e..930e2a23b5 100644 --- a/app/components/course-page/step-content.hbs +++ b/app/components/course-page/step-content.hbs @@ -9,12 +9,7 @@ /> {{/if}} - + {{yield}} \ No newline at end of file From f3de3dace8a91b406ac767932f201db6799d1831 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Thu, 17 Oct 2024 21:17:44 +0100 Subject: [PATCH 3/6] Refactor layout and remove unused overlay in course stage templates. --- .../previous-steps-incomplete-overlay.hbs | 1 - app/components/course-page/step-content.hbs | 4 +- app/templates/course/stage/code-examples.hbs | 2 +- app/templates/course/stage/concepts.hbs | 2 +- app/templates/course/stage/instructions.hbs | 174 +++++++++--------- app/templates/course/stage/screencasts.hbs | 2 +- 6 files changed, 92 insertions(+), 93 deletions(-) diff --git a/app/components/course-page/previous-steps-incomplete-overlay.hbs b/app/components/course-page/previous-steps-incomplete-overlay.hbs index 878cad220b..efde57356f 100644 --- a/app/components/course-page/previous-steps-incomplete-overlay.hbs +++ b/app/components/course-page/previous-steps-incomplete-overlay.hbs @@ -2,7 +2,6 @@ @isBlurred={{this.shouldShowModal}} {{did-update this.handleStepIdUpdated @currentStep.id}} @overlayClass="bg-gray-200 bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20" - class="px-3 md:px-6 lg:px-10" ...attributes > <:content> diff --git a/app/components/course-page/step-content.hbs b/app/components/course-page/step-content.hbs index 930e2a23b5..fcb0b4a5db 100644 --- a/app/components/course-page/step-content.hbs +++ b/app/components/course-page/step-content.hbs @@ -9,7 +9,5 @@ /> {{/if}} - - {{yield}} - + {{yield}} \ No newline at end of file diff --git a/app/templates/course/stage/code-examples.hbs b/app/templates/course/stage/code-examples.hbs index f3275a25a0..30bac05867 100644 --- a/app/templates/course/stage/code-examples.hbs +++ b/app/templates/course/stage/code-examples.hbs @@ -1,5 +1,5 @@
+
Concepts are interactive tutorials that teach you fundamental concepts related to this challenge.
diff --git a/app/templates/course/stage/instructions.hbs b/app/templates/course/stage/instructions.hbs index 1b5bb30b4f..1dfcd5683d 100644 --- a/app/templates/course/stage/instructions.hbs +++ b/app/templates/course/stage/instructions.hbs @@ -1,101 +1,103 @@ -
- {{#if this.shouldShowUpgradePrompt}} - - {{/if}} + +
+ {{#if this.shouldShowUpgradePrompt}} + + {{/if}} - {{#if this.shouldShowFeedbackPrompt}} - - {{/if}} - - {{#if (gt this.badgeAwards.length 0)}} - - {{/if}} + {{#if this.shouldShowFeedbackPrompt}} + + {{/if}} - {{#if @model.courseStage.isFirst}} - - {{/if}} + {{#if (gt this.badgeAwards.length 0)}} + + {{/if}} - {{#if @model.courseStage.isSecond}} - - {{/if}} + {{#if @model.courseStage.isFirst}} + + {{/if}} - {{#if this.shouldShowTestRunnerCard}} -
- + {{/if}} - {{#if this.shouldSuppressTestRunnerCardExpands}} - -
- {{#if (eq this.currentStep.testsStatus "failed")}} -

- This failure is expected! Check the - How to pass this stage - section for instructions. -

- {{else}} -

- Check the - How to pass this stage - section for instructions. -

- {{/if}} -
- - {{/if}} -
- {{/if}} + {{#if this.shouldShowTestRunnerCard}} +
+ - {{! TODO: Bring this back? }} - {{!-- {{#if this.shouldShowPrerequisites}} - - {{/if}} --}} + {{#if this.shouldSuppressTestRunnerCardExpands}} + +
+ {{#if (eq this.currentStep.testsStatus "failed")}} +

+ This failure is expected! Check the + How to pass this stage + section for instructions. +

+ {{else}} +

+ Check the + How to pass this stage + section for instructions. +

+ {{/if}} +
+ + {{/if}} +
+ {{/if}} - + {{! TODO: Bring this back? }} + {{!-- {{#if this.shouldShowPrerequisites}} + + {{/if}} --}} - {{#if this.shouldShowLanguageGuide}} - - {{/if}} + -
-
-

Hints

+ {{#if this.shouldShowLanguageGuide}} + + {{/if}} - {{#if @model.activeRepository.language}} -
- Filter by {{@model.activeRepository.language.name}} - +
+
+

Hints

- - {{#if this.commentListIsFilteredByLanguage}} - You're currently viewing hints that are relevant to - {{@model.activeRepository.language.name}}. Turn this off to view hints for all languages. - {{else}} - You're currently viewing hints for all languages. Turn this on to filter hints that are relevant to - {{@model.activeRepository.language.name}}. - {{/if}} - -
- {{/if}} -
+ {{#if @model.activeRepository.language}} +
+ Filter by {{@model.activeRepository.language.name}} + + + + {{#if this.commentListIsFilteredByLanguage}} + You're currently viewing hints that are relevant to + {{@model.activeRepository.language.name}}. Turn this off to view hints for all languages. + {{else}} + You're currently viewing hints for all languages. Turn this on to filter hints that are relevant to + {{@model.activeRepository.language.name}}. + {{/if}} + +
+ {{/if}} +
- + +
-
\ No newline at end of file + \ No newline at end of file diff --git a/app/templates/course/stage/screencasts.hbs b/app/templates/course/stage/screencasts.hbs index 51ebbae144..efeee144f6 100644 --- a/app/templates/course/stage/screencasts.hbs +++ b/app/templates/course/stage/screencasts.hbs @@ -1,4 +1,4 @@ -
+
Screencasts are recordings of CodeCrafters users passing this stage. This is a beta feature, please send us
From d1fa679bc3f8913322d8db52c1fd5df1c6a614d7 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Thu, 17 Oct 2024 21:18:36 +0100 Subject: [PATCH 4/6] Update padding and margin classes in course templates for better responsiveness. --- app/templates/course/base-stages-completed.hbs | 2 +- app/templates/course/completed.hbs | 2 +- app/templates/course/extension-completed.hbs | 2 +- app/templates/course/introduction.hbs | 2 +- app/templates/course/setup.hbs | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/templates/course/base-stages-completed.hbs b/app/templates/course/base-stages-completed.hbs index 2bad2dc901..5015a5443c 100644 --- a/app/templates/course/base-stages-completed.hbs +++ b/app/templates/course/base-stages-completed.hbs @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/app/templates/course/completed.hbs b/app/templates/course/completed.hbs index 4afda47912..485610c7bc 100644 --- a/app/templates/course/completed.hbs +++ b/app/templates/course/completed.hbs @@ -1,4 +1,4 @@ {{! @glint-nocheck: not typesafe yet !}} -
+
\ No newline at end of file diff --git a/app/templates/course/extension-completed.hbs b/app/templates/course/extension-completed.hbs index 18c9035bb3..d8a754a3fc 100644 --- a/app/templates/course/extension-completed.hbs +++ b/app/templates/course/extension-completed.hbs @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/app/templates/course/introduction.hbs b/app/templates/course/introduction.hbs index ffe25d8baa..a159e80fce 100644 --- a/app/templates/course/introduction.hbs +++ b/app/templates/course/introduction.hbs @@ -1,4 +1,4 @@ -
+
{{#if this.authenticator.currentUser.pendingProductWalkthroughFeatureSuggestion}} +
\ No newline at end of file From b3d8bf9f0460e91e01185f6a70d3cab04efcf14f Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Thu, 17 Oct 2024 21:34:59 +0100 Subject: [PATCH 5/6] Remove unnecessary click on 'Just Exploring' button in code examples tests. --- tests/acceptance/course-page/view-code-examples-test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/acceptance/course-page/view-code-examples-test.js b/tests/acceptance/course-page/view-code-examples-test.js index dd69c669c2..303583cf67 100644 --- a/tests/acceptance/course-page/view-code-examples-test.js +++ b/tests/acceptance/course-page/view-code-examples-test.js @@ -187,7 +187,6 @@ module('Acceptance | course-page | view-code-examples', function (hooks) { await courseOverviewPage.clickOnStartCourse(); await coursePage.sidebar.clickOnStepListItem('Respond to PING'); await coursePage.yourTaskCard.clickOnActionButton('Code Examples'); - await coursePage.previousStepsIncompleteModal.clickOnJustExploringButton(); assert.strictEqual(coursePage.codeExamplesTab.solutionCards[0].changedFiles.length, 2, 'shows 2 changed files'); assert.strictEqual(coursePage.codeExamplesTab.solutionCards[0].unchangedFiles.length, 2, 'shows 2 unchanged files'); @@ -594,7 +593,6 @@ module('Acceptance | course-page | view-code-examples', function (hooks) { await catalogPage.clickOnCourse('Build your own Redis'); await courseOverviewPage.clickOnStartCourse(); await coursePage.sidebar.clickOnStepListItem('Implement the ECHO command'); - await coursePage.previousStepsIncompleteModal.clickOnJustExploringButton(); await coursePage.yourTaskCard.clickOnActionButton('Code Examples'); await coursePage.codeExamplesTab.languageDropdown.toggle(); From 56dffdff4771cbd9e9cfc77f4f71ff33895f5865 Mon Sep 17 00:00:00 2001 From: Paul Kuruvilla Date: Thu, 17 Oct 2024 21:46:20 +0100 Subject: [PATCH 6/6] Add currentStep getter and wrap setup card in PreviousStepsIncompleteOverlay. --- app/controllers/course/setup.ts | 5 +++++ app/templates/course/setup.hbs | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/app/controllers/course/setup.ts b/app/controllers/course/setup.ts index 1792cea08e..0c49d841a6 100644 --- a/app/controllers/course/setup.ts +++ b/app/controllers/course/setup.ts @@ -2,9 +2,14 @@ import Controller from '@ember/controller'; import { inject as service } from '@ember/service'; import type { ModelType } from 'codecrafters-frontend/routes/course/setup'; import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state'; +import type { Step } from 'codecrafters-frontend/utils/course-page-step-list'; export default class CourseSetupController extends Controller { declare model: ModelType; @service declare coursePageState: CoursePageStateService; + + get currentStep(): Step { + return this.coursePageState.activeStep as Step; + } } diff --git a/app/templates/course/setup.hbs b/app/templates/course/setup.hbs index 9271d07a5f..989afccbe1 100644 --- a/app/templates/course/setup.hbs +++ b/app/templates/course/setup.hbs @@ -1,3 +1,5 @@ -
- -
\ No newline at end of file + +
+ +
+ \ No newline at end of file