Merge pull request #3082 from codecrafters-io/andy/fix-3

Fix DangerButtonWithTimedConfirmation on mobile

Author: andy1li

app/components/danger-button-with-timed-confirmation.hbs

@@ -1,15 +1,17 @@
 <DangerButton
   class="relative border-0 overflow-hidden"
-  {{on "mouseenter" this.handleMouseEnter}}
-  {{on "mouseleave" this.handleMouseLeave}}
   {{! template-lint-disable no-pointer-down-event-binding }}
   {{on "mousedown" this.startProgress}}
-  {{on "mouseup" this.stopProgress}}
+  {{on "mouseleave" this.resetProgress}}
+  {{on "mouseup" this.resetProgress}}
+  {{on "touchstart" this.startProgress}}
+  {{on "touchcancel" this.resetProgress}}
+  {{on "touchend" this.resetProgress}}
   ...attributes
 >
   {{yield}}
 
-  {{#if this.isHovered}}
+  {{#if this.shouldShowProgressBar}}
     <div class="absolute inset-0 bg-red-100 opacity-50" style={{this.progressBarWidthStyle}} data-test-progress-indicator></div>
   {{/if}}
 </DangerButton>

app/components/danger-button-with-timed-confirmation.ts

@@ -18,7 +18,7 @@ interface Signature {
 }
 
 export default class DangerButtonWithTimedConfirmation extends Component<Signature> {
-  @tracked isHovered: boolean = false;
+  @tracked shouldShowProgressBar: boolean = false;
   @tracked progressWidth: number = 0;
   @tracked progressInterval: number | undefined = undefined;
 
@@ -27,26 +27,19 @@ export default class DangerButtonWithTimedConfirmation extends Component<Signatu
   }
 
   @action
-  handleMouseEnter() {
-    this.isHovered = true;
-  }
-
-  @action
-  handleMouseLeave() {
-    this.hideProgressBar();
-    this.stopProgress();
+  resetProgress() {
+    this.shouldShowProgressBar = false;
+    this.progressWidth = 0;
+    clearInterval(this.progressInterval);
   }
 
   @action
-  hideProgressBar() {
-    this.isHovered = false;
-  }
+  startProgress(event: Event) {
+    event.preventDefault(); // Prevent menu from popping up, which triggers touchend
+    this.resetProgress();
 
-  @action
-  startProgress() {
+    this.shouldShowProgressBar = true;
     const intervalDelay = config.environment === 'test' ? 1 : 30;
-    this.progressWidth = 0;
-
     this.progressInterval = setInterval(() => {
       if (this.progressWidth < 100) {
         this.progressWidth += 1;
@@ -59,12 +52,6 @@ export default class DangerButtonWithTimedConfirmation extends Component<Signatu
       }
     }, intervalDelay);
   }
-
-  @action
-  stopProgress() {
-    this.progressWidth = 0;
-    clearInterval(this.progressInterval);
-  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {

tests/acceptance/concept-admin/delete-concept-test.js

@@ -34,13 +34,10 @@ module('Acceptance | concept-admin | delete-concept-test', function (hooks) {
     await basicDetailsPage.deleteMyConceptButton.hover();
     assertTooltipNotRendered(assert, 'tooltip is not rendered on hover');
 
-    await basicDetailsPage.deleteConceptModal.deleteConceptButton.hover();
+    await basicDetailsPage.deleteConceptModal.deleteConceptButton.mousedown();
     assert.ok(basicDetailsPage.deleteConceptModal.deleteConceptButton.progressIndicator.isVisible, 'progress indicator should be visible');
+    await waitUntil(() => basicDetailsPage.deleteConceptModal.deleteConceptButton.progressIndicator.width > 0, { timeout: 10 });
 
-    await basicDetailsPage.deleteConceptModal.deleteConceptButton.leave();
-    assert.notOk(basicDetailsPage.deleteConceptModal.deleteConceptButton.progressIndicator.isVisible, 'progress indicator should not be visible');
-
-    await basicDetailsPage.deleteConceptModal.deleteConceptButton.press();
     await waitUntil(() => currentURL() === '/concepts');
     await settled(); // Delete request triggers after redirect
     assert.strictEqual(conceptsPage.conceptCards.length, 0, 'Concept is deleted');
@@ -73,13 +70,10 @@ module('Acceptance | concept-admin | delete-concept-test', function (hooks) {
 
     await percySnapshot('Concept Admin - Delete Concept Modal');
 
-    await basicDetailsPage.deleteConceptModal.deleteConceptButton.hover();
+    await basicDetailsPage.deleteConceptModal.deleteConceptButton.mousedown();
     assert.ok(basicDetailsPage.deleteConceptModal.deleteConceptButton.progressIndicator.isVisible, 'progress indicator should be visible');
+    await waitUntil(() => basicDetailsPage.deleteConceptModal.deleteConceptButton.progressIndicator.width > 0, { timeout: 10 });
 
-    await basicDetailsPage.deleteConceptModal.deleteConceptButton.leave();
-    assert.notOk(basicDetailsPage.deleteConceptModal.deleteConceptButton.progressIndicator.isVisible, 'progress indicator should not be visible');
-
-    await basicDetailsPage.deleteConceptModal.deleteConceptButton.press();
     await waitUntil(() => currentURL() === '/concepts');
     await settled(); // Delete request triggers after redirect
     assert.strictEqual(conceptsPage.conceptCards.length, 0, 'Concept is deleted');

tests/acceptance/course-page/delete-repository-test.js

@@ -126,7 +126,7 @@ module('Acceptance | course-page | delete-repository-test', function (hooks) {
     );
   });
 
-  test('can delete repository', async function (assert) {
+  test('can delete repository via mouse down', async function (assert) {
     testScenario(this.server, ['dummy']);
     signInAsStaff(this.owner, this.server);
 
@@ -150,13 +150,46 @@ module('Acceptance | course-page | delete-repository-test', function (hooks) {
 
     await percySnapshot('Course Stages - Delete Repository Modal');
 
-    await coursePage.deleteRepositoryModal.deleteRepositoryButton.hover();
+    await coursePage.deleteRepositoryModal.deleteRepositoryButton.mousedown();
     assert.ok(coursePage.deleteRepositoryModal.deleteRepositoryButton.progressIndicator.isVisible, 'progress indicator should be visible');
+    await waitUntil(() => coursePage.deleteRepositoryModal.deleteRepositoryButton.progressIndicator.width > 0, { timeout: 10 });
 
-    await coursePage.deleteRepositoryModal.deleteRepositoryButton.leave();
-    assert.notOk(coursePage.deleteRepositoryModal.deleteRepositoryButton.progressIndicator.isVisible, 'progress indicator should not be visible');
+    await waitUntil(() => currentURL() === '/courses/dummy/introduction?repo=new&track=python');
+    await settled(); // Delete request triggers after redirect
+
+    await coursePage.repositoryDropdown.click();
+    assert.strictEqual(coursePage.repositoryDropdown.content.nonActiveRepositoryCount, 0, 'no repositories should be available');
+    assert.notOk(coursePage.repositoryDropdown.content.text.includes('Delete Repository'), 'delete repository action should not be available');
+  });
+
+  test('can delete repository via touch start', async function (assert) {
+    testScenario(this.server, ['dummy']);
+    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' });
+
+    course.update({ releaseStatus: 'live' });
+
+    this.server.create('repository', 'withFirstStageCompleted', {
+      course: course,
+      language: python,
+      user: currentUser,
+    });
+
+    await catalogPage.visit();
+    await catalogPage.clickOnCourse('Build your own Dummy');
+    await courseOverviewPage.clickOnStartCourse();
+    await coursePage.repositoryDropdown.click();
+    await coursePage.repositoryDropdown.clickOnAction('Delete Repository');
+
+    await percySnapshot('Course Stages - Delete Repository Modal');
+
+    await coursePage.deleteRepositoryModal.deleteRepositoryButton.touchstart();
+    assert.ok(coursePage.deleteRepositoryModal.deleteRepositoryButton.progressIndicator.isVisible, 'progress indicator should be visible');
+    await waitUntil(() => coursePage.deleteRepositoryModal.deleteRepositoryButton.progressIndicator.width > 0, { timeout: 10 });
 
-    await coursePage.deleteRepositoryModal.deleteRepositoryButton.press();
     await waitUntil(() => currentURL() === '/courses/dummy/introduction?repo=new&track=python');
     await settled(); // Delete request triggers after redirect
 

tests/pages/concept-admin/basic-details-page.ts

@@ -19,12 +19,21 @@ export default create({
 
   deleteConceptModal: {
     deleteConceptButton: {
-      hover: triggerable('mouseenter'),
-      leave: triggerable('mouseleave'),
-      press: triggerable('mousedown'),
+      mouseleave: triggerable('mouseleave'),
+      mousedown: triggerable('mousedown'),
+      touchstart: triggerable('touchstart'),
 
       progressIndicator: {
         scope: '[data-test-progress-indicator]',
+        get width() {
+          const element = document.querySelector(this.scope) as HTMLElement;
+          if (!element) return 0;
+
+          const styleAttr = element.getAttribute('style');
+          const widthMatch = styleAttr?.match(/width:\s*(\d+)%/);
+
+          return widthMatch ? parseInt(widthMatch[1] as string) : 0;
+        },
       },
 
       release: triggerable('mouseup'),

tests/pages/course-page.ts

@@ -89,12 +89,21 @@ export default create({
     },
 
     deleteRepositoryButton: {
-      hover: triggerable('mouseenter'),
-      leave: triggerable('mouseleave'),
-      press: triggerable('mousedown'),
+      mouseleave: triggerable('mouseleave'),
+      mousedown: triggerable('mousedown'),
+      touchstart: triggerable('touchstart'),
 
       progressIndicator: {
         scope: '[data-test-progress-indicator]',
+        get width() {
+          const element = document.querySelector(this.scope) as HTMLElement;
+          if (!element) return 0;
+
+          const styleAttr = element.getAttribute('style');
+          const widthMatch = styleAttr?.match(/width:\s*(\d+)%/);
+
+          return widthMatch ? parseInt(widthMatch[1] as string) : 0;
+        },
       },
 
       release: triggerable('mouseup'),