From 595dd5f653d261a39474a4f18f7f97b70fe90731 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Wed, 3 Apr 2024 20:01:50 +0700
Subject: [PATCH] refactor(client): migrate C# modals (#54176)

---
 .../SolutionViewer/exam-results-modal.tsx     |  4 ++--
 .../exam/components/exit-exam-modal.tsx       | 21 +++++++----------
 .../exam/components/finish-exam-modal.tsx     | 21 +++++------------
 .../foundational-c-sharp-survey-alert.tsx     |  6 ++---
 .../foundational-c-sharp-survey.tsx           | 14 ++++-------
 .../exam/components/survey-modal.tsx          |  9 +++-----
 client/src/templates/Challenges/exam/show.tsx |  4 ++--
 .../default/learn/challenges/c-sharp-exam.ts  |  3 +--
 e2e/exam-results-modal.spec.ts                | 16 +++++++++----
 e2e/exit-exam-modal.spec.ts                   | 18 +++++++++++----
 e2e/finish-exam-modal.spec.ts                 | 23 +++++++++++++++----
 11 files changed, 74 insertions(+), 65 deletions(-)

diff --git a/client/src/components/SolutionViewer/exam-results-modal.tsx b/client/src/components/SolutionViewer/exam-results-modal.tsx
index fe8a5f23cfe..f6ec7fde6b0 100644
--- a/client/src/components/SolutionViewer/exam-results-modal.tsx
+++ b/client/src/components/SolutionViewer/exam-results-modal.tsx
@@ -59,7 +59,7 @@ const ExamResultsModal = ({
       <Modal.Header showCloseButton={true} closeButtonClassNames='close'>
         {t('settings.labels.results-for', { projectTitle })}
       </Modal.Header>
-      <Modal.Body>
+      <Modal.Body alignment='start'>
         <Spacer size='medium' />
         <div style={{ paddingLeft: '30px' }}>
           <Row>
@@ -82,7 +82,7 @@ const ExamResultsModal = ({
         </div>
         <Spacer size='medium' />
       </Modal.Body>
-      <Modal.Footer>
+      <Modal.Footer alignment='end'>
         <Button
           onClick={() => {
             closeModal('examResults');
diff --git a/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx b/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
index 2fceeb5a28a..792267f6175 100644
--- a/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
+++ b/client/src/templates/Challenges/exam/components/exit-exam-modal.tsx
@@ -1,11 +1,10 @@
 // Package Utilities
-import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@freecodecamp/ui';
+import { Button, Modal } from '@freecodecamp/ui';
 
 // Local Utilities
 import { closeModal } from '../../redux/actions';
@@ -45,21 +44,17 @@ function ExitExamModal({
 
   return (
     <Modal
-      animation={false}
-      dialogClassName='exit-exam-modal'
-      keyboard={true}
-      onHide={closeExitExamModal}
-      show={isExitExamModalOpen}
+      onClose={closeExitExamModal}
+      open={isExitExamModalOpen}
+      variant='danger'
     >
-      <Modal.Header className='exit-exam-modal-header' closeButton={true}>
-        <Modal.Title className='text-center'>
-          {t('learn.exam.exit-header')}
-        </Modal.Title>
+      <Modal.Header closeButtonClassNames='close'>
+        {t('learn.exam.exit-header')}
       </Modal.Header>
-      <Modal.Body className='reset-modal-body'>
+      <Modal.Body>
         <div className='text-center'>{t('learn.exam.exit')}</div>
       </Modal.Body>
-      <Modal.Footer className='reset-modal-footer'>
+      <Modal.Footer>
         <Button
           data-cy='exit-exam-modal-deny'
           block={true}
diff --git a/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx b/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
index 3b488d366a0..45804b3f100 100644
--- a/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
+++ b/client/src/templates/Challenges/exam/components/finish-exam-modal.tsx
@@ -1,11 +1,10 @@
 // Package Utilities
-import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@freecodecamp/ui';
+import { Button, Modal } from '@freecodecamp/ui';
 
 // Local Utilities
 import { closeModal } from '../../redux/actions';
@@ -44,22 +43,14 @@ function FinishExamModal({
   const { t } = useTranslation();
 
   return (
-    <Modal
-      animation={false}
-      dialogClassName='finish-exam-modal'
-      keyboard={true}
-      onHide={closeFinishExamModal}
-      show={isFinishExamModalOpen}
-    >
-      <Modal.Header className='finish-exam-modal-header' closeButton={true}>
-        <Modal.Title className='text-center'>
-          {t('learn.exam.finish-header')}
-        </Modal.Title>
+    <Modal onClose={closeFinishExamModal} open={isFinishExamModalOpen}>
+      <Modal.Header closeButtonClassNames='close'>
+        {t('learn.exam.finish-header')}
       </Modal.Header>
-      <Modal.Body className='reset-modal-body'>
+      <Modal.Body>
         <div className='text-center'>{t('learn.exam.finish')}</div>
       </Modal.Body>
-      <Modal.Footer className='reset-modal-footer'>
+      <Modal.Footer>
         <Button
           data-cy='finish-exam-modal-confirm'
           block={true}
diff --git a/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey-alert.tsx b/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey-alert.tsx
index 41b9217e51c..6ec6d38917e 100644
--- a/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey-alert.tsx
+++ b/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey-alert.tsx
@@ -19,7 +19,7 @@ interface FoudationalCSharpSurveyAlertProps {
   openSurveyModal: () => void;
 }
 
-function FoudationalCSharpSurveyAlert({
+function FoundationalCSharpSurveyAlert({
   openSurveyModal
 }: FoudationalCSharpSurveyAlertProps): JSX.Element {
   const { t } = useTranslation();
@@ -45,6 +45,6 @@ function FoudationalCSharpSurveyAlert({
   );
 }
 
-FoudationalCSharpSurveyAlert.displayName = 'FoundationalCSharpSurveyAlert';
+FoundationalCSharpSurveyAlert.displayName = 'FoundationalCSharpSurveyAlert';
 
-export default connect(null, mapDispatchToProps)(FoudationalCSharpSurveyAlert);
+export default connect(null, mapDispatchToProps)(FoundationalCSharpSurveyAlert);
diff --git a/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx b/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
index 63461a3e448..ecf78d132b7 100644
--- a/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
+++ b/client/src/templates/Challenges/exam/components/foundational-c-sharp-survey.tsx
@@ -1,11 +1,10 @@
-import { Modal } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Button } from '@freecodecamp/ui';
+import { Button, Modal } from '@freecodecamp/ui';
 
 import { SurveyResults, SurveyResponse } from '../../../../redux/prop-types';
 import { Spacer } from '../../../../components/helpers';
@@ -132,12 +131,10 @@ function FoundationalCSharpSurvey({
 
   return (
     <>
-      <Modal.Header data-cy='c-sharp-survey-modal' closeButton={true}>
-        <Modal.Title className='text-center'>
-          {t('survey.foundational-c-sharp.title')}
-        </Modal.Title>
+      <Modal.Header closeButtonClassNames='close'>
+        {t('survey.foundational-c-sharp.title')}
       </Modal.Header>
-      <Modal.Body className='reset-modal-body'>
+      <Modal.Body>
         {i18nSurvey.map((question, i) => (
           <div key={i}>
             <Spacer size='medium' />
@@ -147,7 +144,6 @@ function FoundationalCSharpSurvey({
               {question.options.map((option, j) => (
                 <label className='video-quiz-option-label' key={j}>
                   <input
-                    aria-label={t('aria.answer')}
                     checked={surveyResponses[i].responseIndex === j}
                     className='sr-only'
                     name={question.question}
@@ -167,7 +163,7 @@ function FoundationalCSharpSurvey({
           </div>
         ))}
       </Modal.Body>
-      <Modal.Footer className='reset-modal-footer'>
+      <Modal.Footer>
         <Button
           block={true}
           size='medium'
diff --git a/client/src/templates/Challenges/exam/components/survey-modal.tsx b/client/src/templates/Challenges/exam/components/survey-modal.tsx
index f55c53ab186..afa7d1b1a5a 100644
--- a/client/src/templates/Challenges/exam/components/survey-modal.tsx
+++ b/client/src/templates/Challenges/exam/components/survey-modal.tsx
@@ -1,8 +1,8 @@
-import { Modal } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import { Modal } from '@freecodecamp/ui';
 
 import { closeModal } from '../../redux/actions';
 import { isSurveyModalOpenSelector } from '../../redux/selectors';
@@ -39,11 +39,8 @@ function SurveyModal({
 }: SurveyModalProps): JSX.Element {
   return (
     <Modal
-      animation={false}
-      dialogClassName='survey-modal'
-      keyboard={true}
-      onHide={() => (isProcessing ? '' : closeSurveyModal())}
-      show={isSurveyModalOpen}
+      onClose={() => (isProcessing ? '' : closeSurveyModal())}
+      open={isSurveyModalOpen}
     >
       <FoundationalCSharpSurvey />
     </Modal>
diff --git a/client/src/templates/Challenges/exam/show.tsx b/client/src/templates/Challenges/exam/show.tsx
index 59aedeee16e..4618bd8959c 100644
--- a/client/src/templates/Challenges/exam/show.tsx
+++ b/client/src/templates/Challenges/exam/show.tsx
@@ -57,7 +57,7 @@ import ExitExamModal from './components/exit-exam-modal';
 import FinishExamModal from './components/finish-exam-modal';
 import ExamResults from './components/exam-results';
 import MissingPrerequisites from './components/missing-prerequisites';
-import FoundationCSharpSurveyAlert from './components/foundational-c-sharp-survey-alert';
+import FoundationalCSharpSurveyAlert from './components/foundational-c-sharp-survey-alert';
 
 import './exam.css';
 
@@ -554,7 +554,7 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
                         missingPrerequisites={missingPrerequisites}
                       />
                     ) : (
-                      <FoundationCSharpSurveyAlert />
+                      <FoundationalCSharpSurveyAlert />
                     )}
                   </>
                 )}
diff --git a/cypress/e2e/default/learn/challenges/c-sharp-exam.ts b/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
index f68d8be6713..0c355be6c10 100644
--- a/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
+++ b/cypress/e2e/default/learn/challenges/c-sharp-exam.ts
@@ -7,7 +7,6 @@ const el = {
   surveyAlert: "[data-cy='c-sharp-survey-alert']",
   startSurveyBtn: "[data-cy='start-csharp-survey-btn']",
   submitSurveyBtn: "[data-cy='submit-csharp-survey-btn']",
-  surveyModal: "[data-cy='c-sharp-survey-modal']",
   startExamBtn: "[data-cy='start-exam-btn']",
   examTime: "[data-cy='exam-time']",
   examInput: '.exam-answer-input-visible',
@@ -53,7 +52,7 @@ describe('C# Exam Challenge', () => {
       cy.get(el.surveyAlert).should('be.visible');
       cy.get(el.startExamBtn).should('have.attr', 'aria-disabled');
       cy.get(el.startSurveyBtn).click();
-      cy.get(el.surveyModal).should('be.visible');
+      cy.contains('Foundational C# with Microsoft Survey').should('be.visible');
       cy.get(el.submitSurveyBtn).should('have.attr', 'aria-disabled');
       cy.contains('Student developer').click();
       cy.contains('Novice (no prior experience').click();
diff --git a/e2e/exam-results-modal.spec.ts b/e2e/exam-results-modal.spec.ts
index 8c688a5e615..16917d3d615 100644
--- a/e2e/exam-results-modal.spec.ts
+++ b/e2e/exam-results-modal.spec.ts
@@ -15,10 +15,8 @@ test.describe('Exam results modal', () => {
     await expect(viewButton).toBeVisible();
     await viewButton.click();
 
-    await expect(page.getByRole('dialog')).toHaveCount(1);
-
     await expect(
-      page.getByRole('heading', {
+      page.getByRole('dialog', {
         name: 'Results for Foundational C# with Microsoft Certification Exam'
       })
     ).toBeVisible();
@@ -36,7 +34,11 @@ test.describe('Exam results modal', () => {
     await expect(viewButton).toBeVisible();
     await viewButton.click();
 
-    await expect(page.getByRole('dialog')).toHaveCount(1);
+    await expect(
+      page.getByRole('dialog', {
+        name: 'Results for Foundational C# with Microsoft Certification Exam'
+      })
+    ).toBeVisible();
 
     // There are 2 close buttons on the page, and the x button is the first
     const closeButton = page.getByRole('button', { name: 'Close' }).first();
@@ -52,7 +54,11 @@ test.describe('Exam results modal', () => {
     await expect(viewButton).toBeVisible();
     await viewButton.click();
 
-    await expect(page.getByRole('dialog')).toHaveCount(1);
+    await expect(
+      page.getByRole('dialog', {
+        name: 'Results for Foundational C# with Microsoft Certification Exam'
+      })
+    ).toBeVisible();
 
     // There are 2 close buttons on the page, and the close button is the last
     const closeButton = page.getByRole('button', { name: 'Close' }).last();
diff --git a/e2e/exit-exam-modal.spec.ts b/e2e/exit-exam-modal.spec.ts
index 411f8c318de..a315dab4a3b 100644
--- a/e2e/exit-exam-modal.spec.ts
+++ b/e2e/exit-exam-modal.spec.ts
@@ -15,6 +15,7 @@ test.beforeEach(async ({ page }) => {
       name: translations.buttons['click-start-exam']
     })
     .click();
+
   await page
     .getByRole('button', {
       name: translations.buttons['exit-exam']
@@ -27,19 +28,23 @@ test.describe('Exit exam Modal E2E Test Suite', () => {
     page
   }) => {
     await expect(
-      page.getByText(translations.learn.exam['exit-header'])
+      page.getByRole('dialog', { name: translations.learn.exam['exit-header'] })
     ).toBeVisible();
+
     await expect(page.getByText(translations.learn.exam.exit)).toBeVisible();
+
     await expect(
       page.getByRole('button', {
         name: translations.learn.exam['exit-yes']
       })
     ).toBeVisible();
+
     await expect(
       page.getByRole('button', {
         name: translations.buttons.close
       })
     ).toBeVisible();
+
     await expect(
       page.getByRole('button', {
         name: translations.learn.exam['exit-no']
@@ -53,9 +58,11 @@ test.describe('Exit exam Modal E2E Test Suite', () => {
     await page
       .getByRole('button', { name: translations.learn.exam['exit-no'] })
       .click();
+
     await expect(
-      page.getByText(translations.learn.exam['exit-header'])
+      page.getByRole('dialog', { name: translations.learn.exam['exit-header'] })
     ).not.toBeVisible();
+
     await expect(page).toHaveURL(examUrl);
   });
 
@@ -65,8 +72,9 @@ test.describe('Exit exam Modal E2E Test Suite', () => {
     await page
       .getByRole('button', { name: translations.learn.exam['exit-yes'] })
       .click();
+
     await expect(
-      page.getByText(translations.learn.exam['exit-header'])
+      page.getByRole('dialog', { name: translations.learn.exam['exit-header'] })
     ).not.toBeVisible();
 
     await expect(page).toHaveURL(cancelExamUrl);
@@ -80,9 +88,11 @@ test.describe('Exit exam Modal E2E Test Suite', () => {
         name: translations.buttons.close
       })
       .click();
+
     await expect(
-      page.getByText(translations.learn.exam['exit-header'])
+      page.getByRole('dialog', { name: translations.learn.exam['exit-header'] })
     ).not.toBeVisible();
+
     await expect(page).toHaveURL(examUrl);
   });
 });
diff --git a/e2e/finish-exam-modal.spec.ts b/e2e/finish-exam-modal.spec.ts
index 9a551ec6273..2f41f4a2fa5 100644
--- a/e2e/finish-exam-modal.spec.ts
+++ b/e2e/finish-exam-modal.spec.ts
@@ -38,19 +38,25 @@ test.describe('Finish Exit exam Modal E2E Test Suite', () => {
     page
   }) => {
     await expect(
-      page.getByText(translations.learn.exam['finish-header'])
+      page.getByRole('dialog', {
+        name: translations.learn.exam['finish-header']
+      })
     ).toBeVisible();
+
     await expect(
       page.getByRole('button', {
         name: translations.buttons.close
       })
     ).toBeVisible();
+
     await expect(page.getByText(translations.learn.exam.finish)).toBeVisible();
+
     await expect(
       page.getByRole('button', {
         name: translations.learn.exam['finish-yes']
       })
     ).toBeVisible();
+
     await expect(
       page.getByRole('button', {
         name: translations.learn.exam['finish-no']
@@ -64,8 +70,11 @@ test.describe('Finish Exit exam Modal E2E Test Suite', () => {
     await page
       .getByRole('button', { name: translations.learn.exam['exit-no'] })
       .click();
+
     await expect(
-      page.getByText(translations.learn.exam['exit-header'])
+      page.getByRole('dialog', {
+        name: translations.learn.exam['finish-header']
+      })
     ).not.toBeVisible();
   });
 
@@ -75,8 +84,11 @@ test.describe('Finish Exit exam Modal E2E Test Suite', () => {
     await page
       .getByRole('button', { name: translations.learn.exam['finish-yes'] })
       .click();
+
     await expect(
-      page.getByText(translations.learn.exam['finish-header'])
+      page.getByRole('dialog', {
+        name: translations.learn.exam['finish-header']
+      })
     ).not.toBeVisible();
   });
 
@@ -86,8 +98,11 @@ test.describe('Finish Exit exam Modal E2E Test Suite', () => {
     await page
       .getByRole('button', { name: translations.buttons.close })
       .click();
+
     await expect(
-      page.getByText(translations.learn.exam['finish-header'])
+      page.getByRole('dialog', {
+        name: translations.learn.exam['finish-header']
+      })
     ).not.toBeVisible();
   });
 });