From 806706bdeedfeae44728c19382d77fb689f56fe4 Mon Sep 17 00:00:00 2001
From: Gagan Bhullar <g.deepsingh1@gmail.com>
Date: Tue, 16 Jul 2024 02:51:17 -0600
Subject: [PATCH] fix(client): completion modal cannot be closed using Escape
 key (#55431)

---
 .../components/completion-modal.tsx           |  4 ++
 e2e/completion-modal.spec.ts                  | 41 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/client/src/templates/Challenges/components/completion-modal.tsx b/client/src/templates/Challenges/components/completion-modal.tsx
index 9394248098f..fc47764ed02 100644
--- a/client/src/templates/Challenges/components/completion-modal.tsx
+++ b/client/src/templates/Challenges/components/completion-modal.tsx
@@ -128,6 +128,10 @@ class CompletionModal extends Component<
   }
 
   handleKeypress(e: React.KeyboardEvent): void {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      this.props.close();
+    }
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
       // Since Hotkeys also listens to Ctrl + Enter we have to stop this event
diff --git a/e2e/completion-modal.spec.ts b/e2e/completion-modal.spec.ts
index 05b242faef4..60fc38d50e8 100644
--- a/e2e/completion-modal.spec.ts
+++ b/e2e/completion-modal.spec.ts
@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
+import { authedRequest } from './utils/request';
 
 const nextChallengeURL =
   '/learn/data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer';
@@ -33,6 +34,12 @@ test.describe('Challenge Completion Modal Tests (Signed Out)', () => {
     await expect(page.getByTestId('completion-success-icon')).not.toBeVisible();
   });
 
+  test('should close the modal after user presses escape', async ({ page }) => {
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog')).not.toBeVisible();
+  });
+
   test('should display the text of go to next challenge button accordingly based on device type', async ({
     page,
     isMobile,
@@ -96,6 +103,40 @@ test.describe('Challenge Completion Modal Tests (Signed In)', () => {
     await expect(page.getByTestId('completion-success-icon')).not.toBeVisible();
   });
 
+  test('should close the modal after user presses escape while having keyboard shortcuts disabled', async ({
+    page,
+    request
+  }) => {
+    await authedRequest({
+      request,
+      endpoint: 'update-my-keyboard-shortcuts',
+      method: 'put',
+      data: {
+        keyboardShortcuts: false
+      }
+    });
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog')).not.toBeVisible();
+  });
+
+  test('should close the modal after user presses escape while having keyboard shortcuts enabled', async ({
+    page,
+    request
+  }) => {
+    await authedRequest({
+      request,
+      endpoint: 'update-my-keyboard-shortcuts',
+      method: 'put',
+      data: {
+        keyboardShortcuts: true
+      }
+    });
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await page.keyboard.press('Escape');
+    await expect(page.getByRole('dialog')).toBeVisible();
+  });
+
   test('should display the text of go to next challenge button accordingly based on device type', async ({
     page,
     isMobile,