Merge pull request #3137 from codecrafters-io/arpan/cc-1939-change-extensions-configuration-ui

Add extension progress pill component and update extension card layout.

Author: Arpan-206

app/components/course-page/configure-extensions-modal/extension-card.hbs

@@ -6,15 +6,19 @@
   data-test-course-extension-card
 >
   <div class="flex items-start justify-between mb-3">
-    <div class="flex items-center flex-wrap gap-3 mr-2 mb-0.5">
+    <div class="flex items-center flex-wrap gap-2 mr-2 mb-0.5">
       <div
         class="{{if this.optimisticValueForIsActivated 'text-teal-600 dark:text-teal-500' 'text-gray-800 dark:text-gray-50'}}
           font-bold text-xl tracking-tight"
         data-test-course-extension-name
       >
         {{@extension.name}}
       </div>
-      <BetaCourseExtensionLabel />
+      {{#if (eq this.progressPillType "completed")}}
+        <Pill @color="green" data-test-extension-progress-pill>Completed</Pill>
+      {{else if (eq this.progressPillType "in_progress")}}
+        <Pill @color="yellow" data-test-extension-progress-pill>In Progress</Pill>
+      {{/if}}
     </div>
     <div>
       <Toggle @isOn={{this.optimisticValueForIsActivated}} {{on "click" this.handleClick}} data-test-toggle-extension-button />

app/components/course-page/configure-extensions-modal/extension-card.ts

@@ -42,6 +42,17 @@ export default class ExtensionCard extends Component<Signature> {
     }
   }
 
+  get progressPillType(): 'completed' | 'in_progress' | null {
+    const stages = this.args.extension.sortedStages;
+    const allComplete = stages.length > 0 && stages.every((stage) => this.args.repository.stageIsComplete(stage));
+    const currentStageInExtension = this.args.repository.currentStage && stages.includes(this.args.repository.currentStage);
+
+    if (allComplete) return 'completed';
+    if (currentStageInExtension) return 'in_progress';
+
+    return null;
+  }
+
   syncActivation = task({ keepLatest: true }, async (): Promise<void> => {
     if (this.unsavedIsActivatedValue === null) {
       return;

app/components/course-page/configure-extensions-modal/index.hbs

@@ -7,7 +7,7 @@
     Extensions are sets of additional stages that can be added to your repository. You can add & remove extensions at any time.
   </AlertWithIcon>
 
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+  <div class="grid grid-cols-1 gap-4 mb-6">
     {{#each @repository.course.sortedExtensions as |extension|}}
       <CoursePage::ConfigureExtensionsModal::ExtensionCard @extension={{extension}} @repository={{@repository}} />
     {{/each}}
@@ -22,7 +22,7 @@
     </div>
   </div>
 
-  <div class="grid grid-cols-1 gap-3 lg:grid-cols-2 mb-8">
+  <div class="grid grid-cols-1 gap-3 mb-8">
     <RoadmapPage::SubmitCourseExtensionIdeaCard @course={{@repository.course}} />
 
     {{#each this.orderedCourseExtensionIdeas as |courseExtensionIdea|}}

tests/acceptance/course-page/extensions/enable-extensions-test.js

@@ -8,6 +8,7 @@ import catalogPage from 'codecrafters-frontend/tests/pages/catalog-page';
 import coursePage from 'codecrafters-frontend/tests/pages/course-page';
 import courseOverviewPage from 'codecrafters-frontend/tests/pages/course-overview-page';
 import createCourseExtensionIdeas from 'codecrafters-frontend/mirage/utils/create-course-extension-ideas';
+import percySnapshot from '@percy/ember';
 import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
 
 module('Acceptance | course-page | extensions | enable-extensions', function (hooks) {
@@ -135,4 +136,56 @@ module('Acceptance | course-page | extensions | enable-extensions', function (ho
 
     assert.true(coursePage.configureExtensionsModal.isVisible, 'configure extensions modal is visible');
   });
+
+  test('progress pills show correct status for different extension states', async function (assert) {
+    testScenario(this.server);
+    signInAsStaff(this.owner, this.server);
+
+    let currentUser = this.server.schema.users.first();
+    let python = this.server.schema.languages.findBy({ name: 'Python' });
+    let course = this.server.schema.courses.findBy({ slug: 'dummy' });
+
+    let repository = this.server.create('repository', 'withBaseStagesCompleted', {
+      course: course,
+      language: python,
+      user: currentUser,
+    });
+
+    let extensions = course.extensions.models.sortBy('position');
+    let extension1Stages = course.stages.models.filter((stage) => stage.primaryExtensionSlug === extensions[0].slug);
+    let extension2Stages = course.stages.models.filter((stage) => stage.primaryExtensionSlug === extensions[1].slug);
+
+    extension1Stages.forEach((stage) => {
+      this.server.create('submission', 'withStageCompletion', {
+        repository,
+        courseStage: stage,
+        createdAt: repository.createdAt,
+      });
+    });
+
+    this.server.create('submission', 'withStageCompletion', {
+      repository,
+      courseStage: extension2Stages.sortBy('positionWithinExtension')[0],
+      createdAt: repository.createdAt,
+    });
+
+    await catalogPage.visit();
+    await catalogPage.clickOnCourse('Build your own Dummy');
+    await courseOverviewPage.adminPanel.clickOnStartCourse();
+    await coursePage.sidebar.configureExtensionsToggles[0].click();
+    await percySnapshot('Configure Extensions Modal - Progress Pills');
+
+    let cards = coursePage.configureExtensionsModal.extensionCards.toArray();
+
+    assert.true(cards[0].hasPill, 'Extension 1 has completed pill');
+    assert.strictEqual(cards[0].pillText, 'Completed', 'Extension 1 pill shows "Completed"');
+    assert.true(cards[1].hasPill, 'Extension 2 has in-progress pill');
+    assert.strictEqual(cards[1].pillText, 'In Progress', 'Extension 2 pill shows "In Progress"');
+
+    await coursePage.configureExtensionsModal.toggleExtension('Extension 1');
+    cards = coursePage.configureExtensionsModal.extensionCards.toArray();
+    const disabledExtension1Card = cards.find((card) => card.name === 'Extension 1');
+    assert.true(disabledExtension1Card.hasPill, 'Disabled extension still has pill when completed');
+    assert.strictEqual(disabledExtension1Card.pillText, 'Completed', 'Disabled extension pill still shows "Completed"');
+  });
 });

tests/pages/components/course-page/configure-extensions-modal.js

@@ -1,4 +1,4 @@
-import { clickable, collection, text } from 'ember-cli-page-object';
+import { clickable, collection, isVisible, text } from 'ember-cli-page-object';
 import { waitUntil } from '@ember/test-helpers';
 
 export default {
@@ -11,6 +11,8 @@ export default {
   extensionCards: collection('[data-test-course-extension-card]', {
     name: text('[data-test-course-extension-name]'),
     clickOnToggleExtensionButton: clickable('[data-test-toggle-extension-button]'),
+    hasPill: isVisible('[data-test-extension-progress-pill]'),
+    pillText: text('[data-test-extension-progress-pill]'),
   }),
 
   extensionIdeaCards: collection('[data-test-course-extension-idea-card]'),