From 733d0b7bedf11748fab04a62c799cbbc9b83e38c Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Wed, 3 Apr 2024 12:56:34 +0700
Subject: [PATCH 1/2] feat(client): point claim cert links to corresponding
 sections on /settings (#54163)

---
 .../src/components/settings/certification.tsx | 109 +++++++++---------
 .../components/cert-challenge.tsx             |   2 +-
 .../show-cert-from-superblock.ts              |   7 +-
 3 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/client/src/components/settings/certification.tsx b/client/src/components/settings/certification.tsx
index 59e9d3e4c80dfb..c158f00c4306cb 100644
--- a/client/src/components/settings/certification.tsx
+++ b/client/src/components/settings/certification.tsx
@@ -334,26 +334,30 @@ function CertificationSettings(props: CertificationSettingsProps) {
   }) => {
     const { certSlug } = certsToProjects[certName][0];
     return (
-      <FullWidthRow>
-        <Spacer size='medium' />
-        <h3 className='text-center' id={`cert-${certSlug}`}>
-          {t(`certification.title.${certName}`, certName)}
-        </h3>
-        <Table>
-          <thead>
-            <tr>
-              <th>{t('settings.labels.project-name')}</th>
-              <th>{t('settings.labels.solution')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <ProjectsFor
-              certName={certName}
-              isCert={getUserIsCertMap()[certName]}
-            />
-          </tbody>
-        </Table>
-      </FullWidthRow>
+      <ScrollableAnchor id={`cert-${certSlug}`}>
+        <section>
+          <FullWidthRow>
+            <Spacer size='medium' />
+            <h3 className='text-center'>
+              {t(`certification.title.${certName}`, certName)}
+            </h3>
+            <Table>
+              <thead>
+                <tr>
+                  <th>{t('settings.labels.project-name')}</th>
+                  <th>{t('settings.labels.solution')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <ProjectsFor
+                  certName={certName}
+                  isCert={getUserIsCertMap()[certName]}
+                />
+              </tbody>
+            </Table>
+          </FullWidthRow>
+        </section>
+      </ScrollableAnchor>
     );
   };
 
@@ -413,43 +417,38 @@ function CertificationSettings(props: CertificationSettingsProps) {
   const { t } = props;
 
   return (
-    <ScrollableAnchor id='certification-settings'>
-      <section className='certification-settings'>
-        <SectionHeader>{t('settings.headings.certs')}</SectionHeader>
-        {currentCertTitles.map(title => (
-          <Certification key={title} certName={title} t={t} />
-        ))}
-        <Spacer size='medium' />
-        <SectionHeader>{t('settings.headings.legacy-certs')}</SectionHeader>
-        <LegacyFullStack {...props} />
-        {legacyCertTitles.map(title => (
+    <section className='certification-settings'>
+      <SectionHeader>{t('settings.headings.certs')}</SectionHeader>
+      {currentCertTitles.map(title => (
+        <Certification key={title} certName={title} t={t} />
+      ))}
+      <Spacer size='medium' />
+      <SectionHeader>{t('settings.headings.legacy-certs')}</SectionHeader>
+      <LegacyFullStack {...props} />
+      {legacyCertTitles.map(title => (
+        <Certification key={title} certName={title} t={t} />
+      ))}
+      {showUpcomingChanges &&
+        upcomingCertTitles.map(title => (
           <Certification key={title} certName={title} t={t} />
         ))}
-        {showUpcomingChanges &&
-          upcomingCertTitles.map(title => (
-            <Certification key={title} certName={title} t={t} />
-          ))}
-        <ProjectModal
-          {...{
-            projectTitle,
-            challengeFiles,
-            solution: solution ?? undefined,
-            isOpen
-          }}
-          handleSolutionModalHide={handleSolutionModalHide}
-        />
-        <ProjectPreviewModal
-          challengeData={challengeData}
-          previewTitle={projectTitle}
-          closeText={t('buttons.close')}
-          showProjectPreview={true}
-        />
-        <ExamResultsModal
-          projectTitle={projectTitle}
-          examResults={examResults}
-        />
-      </section>
-    </ScrollableAnchor>
+      <ProjectModal
+        {...{
+          projectTitle,
+          challengeFiles,
+          solution: solution ?? undefined,
+          isOpen
+        }}
+        handleSolutionModalHide={handleSolutionModalHide}
+      />
+      <ProjectPreviewModal
+        challengeData={challengeData}
+        previewTitle={projectTitle}
+        closeText={t('buttons.close')}
+        showProjectPreview={true}
+      />
+      <ExamResultsModal projectTitle={projectTitle} examResults={examResults} />
+    </section>
   );
 }
 
diff --git a/client/src/templates/Introduction/components/cert-challenge.tsx b/client/src/templates/Introduction/components/cert-challenge.tsx
index 7f92b7e8a95aec..ec086d42dab29d 100644
--- a/client/src/templates/Introduction/components/cert-challenge.tsx
+++ b/client/src/templates/Introduction/components/cert-challenge.tsx
@@ -129,7 +129,7 @@ const CertChallenge = ({
         <Button
           block={true}
           variant='primary'
-          href={isCertified ? certLocation : `/settings#certification-settings`}
+          href={isCertified ? certLocation : `/settings#cert-${certSlug}`}
           onClick={() => (isCertified ? createClickHandler(certSlug) : false)}
         >
           {isCertified && userLoaded
diff --git a/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts b/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts
index 9c00685cd9dae9..2a220e02df25f8 100644
--- a/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts
+++ b/cypress/e2e/default/learn/responsive-web-design/show-cert-from-superblock.ts
@@ -34,9 +34,12 @@ describe('Front End Development Libraries Superblock', () => {
     cy.visit('/learn/front-end-development-libraries');
   });
   describe('Before submitting projects', () => {
-    it('should navigate to "/settings#certification-settings" when clicking the "Go to settings to claim your certification" anchor', () => {
+    it('should navigate to "/settings#cert-front-end-development-libraries" when clicking the "Go to settings to claim your certification" anchor', () => {
       cy.contains('Go to settings to claim your certification').click();
-      cy.url().should('match', /\/settings\/?#certification-settings/);
+      cy.url().should(
+        'match',
+        /\/settings\/?#cert-front-end-development-libraries/
+      );
     });
   });
 

From 5013ba00b1d710c9d7d8b034244c0bc882f6347e Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Wed, 3 Apr 2024 10:13:07 +0300
Subject: [PATCH 2/2] fix: update tests for new modal (#54284)

---
 e2e/exam-results-modal.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/e2e/exam-results-modal.spec.ts b/e2e/exam-results-modal.spec.ts
index 6d58d81708f06f..8c688a5e615316 100644
--- a/e2e/exam-results-modal.spec.ts
+++ b/e2e/exam-results-modal.spec.ts
@@ -15,7 +15,7 @@ test.describe('Exam results modal', () => {
     await expect(viewButton).toBeVisible();
     await viewButton.click();
 
-    await expect(page.getByRole('dialog')).toHaveCount(2);
+    await expect(page.getByRole('dialog')).toHaveCount(1);
 
     await expect(
       page.getByRole('heading', {
@@ -36,7 +36,7 @@ test.describe('Exam results modal', () => {
     await expect(viewButton).toBeVisible();
     await viewButton.click();
 
-    await expect(page.getByRole('dialog')).toHaveCount(2);
+    await expect(page.getByRole('dialog')).toHaveCount(1);
 
     // 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 +52,7 @@ test.describe('Exam results modal', () => {
     await expect(viewButton).toBeVisible();
     await viewButton.click();
 
-    await expect(page.getByRole('dialog')).toHaveCount(2);
+    await expect(page.getByRole('dialog')).toHaveCount(1);
 
     // There are 2 close buttons on the page, and the close button is the last
     const closeButton = page.getByRole('button', { name: 'Close' }).last();