fix(UI): put legacy label on the old js curriculum title (#52980)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Sem Bauke <semboot699@gmail.com>

client/config/cert-and-project-map.ts

@@ -576,7 +576,7 @@ const allStandardCerts = [
   },
   {
     id: '561abd10cb81ac38a17513bc',
-    title: 'JavaScript Algorithms and Data Structures',
+    title: 'Legacy JavaScript Algorithms and Data Structures',
     certSlug: Certification.JsAlgoDataStruct,
     projects: [
       {

client/i18n/locales/english/intro.json

@@ -217,7 +217,7 @@
     }
   },
   "javascript-algorithms-and-data-structures": {
-    "title": "JavaScript Algorithms and Data Structures",
+    "title": "Legacy JavaScript Algorithms and Data Structures",
     "intro": [
       "While HTML and CSS control the content and styling of a page, JavaScript is used to make it interactive. In the JavaScript Algorithm and Data Structures Certification, you'll learn the fundamentals of JavaScript including variables, arrays, objects, loops, and functions.",
       "Once you have the fundamentals down, you'll apply that knowledge by creating algorithms to manipulate strings, factorialize numbers, and even calculate the orbit of the International Space Station.",

client/i18n/locales/english/translations.json

@@ -912,8 +912,8 @@
     "title": {
       "Responsive Web Design": "Responsive Web Design",
       "responsive-web-design": "Responsive Web Design Certification",
-      "JavaScript Algorithms and Data Structures": "JavaScript Algorithms and Data Structures",
+      "JavaScript Algorithms and Data Structures": "Legacy JavaScript Algorithms and Data Structures",
-      "javascript-algorithms-and-data-structures": "JavaScript Algorithms and Data Structures Certification",
+      "javascript-algorithms-and-data-structures": "Legacy JavaScript Algorithms and Data Structures Certification",
       "javascript-algorithms-and-data-structures-v8": "JavaScript Algorithms and Data Structures Certification",
       "Front End Development Libraries": "Front End Development Libraries",
       "front-end-development-libraries": "Front End Development Libraries Certification",

client/src/client-only-routes/show-project-links.tsx

@@ -106,7 +106,7 @@ const ShowProjectLinks = (props: ShowProjectLinksProps): JSX.Element => {
     if (certName === 'Legacy Full Stack') {
       const certs = [
         { title: 'Responsive Web Design' },
-        { title: 'JavaScript Algorithms and Data Structures' },
+        { title: 'Legacy JavaScript Algorithms and Data Structures' },
         { title: 'Front End Development Libraries' },
         { title: 'Data Visualization' },
         { title: 'Back End Development and APIs' },

client/src/components/settings/certification.tsx

@@ -115,7 +115,7 @@ const isCertMapSelector = createSelector(
     isJsAlgoDataStructCertV8
   }) => ({
     'Responsive Web Design': isRespWebDesignCert,
-    'JavaScript Algorithms and Data Structures': isJsAlgoDataStructCert,
+    'Legacy JavaScript Algorithms and Data Structures': isJsAlgoDataStructCert,
     'Front End Development Libraries': isFrontEndLibsCert,
     'Data Visualization': is2018DataVisCert,
     'Back End Development and APIs': isApisMicroservicesCert,

client/src/pages/learn/javascript-algorithms-and-data-structures/index.md

@@ -1,5 +1,5 @@
 ---
-title: JavaScript Algorithms and Data Structures
+title: Legacy JavaScript Algorithms and Data Structures
 superBlock: javascript-algorithms-and-data-structures
 certification: javascript-algorithms-and-data-structures
 ---

client/src/redux/selectors.js

@@ -137,7 +137,6 @@ export const certificatesByNameSelector = username => state => {
       isRespWebDesignCert ||
       is2018DataVisCert ||
       isFrontEndLibsCert ||
-      isJsAlgoDataStructCert ||
       isApisMicroservicesCert ||
       isQaCertV7 ||
       isInfosecCertV7 ||
@@ -150,7 +149,11 @@ export const certificatesByNameSelector = username => state => {
       isFoundationalCSharpCertV8 ||
       isJsAlgoDataStructCertV8,
     hasLegacyCert:
-      isFrontEndCert || isBackEndCert || isDataVisCert || isInfosecQaCert,
+      isFrontEndCert ||
+      isJsAlgoDataStructCert ||
+      isBackEndCert ||
+      isDataVisCert ||
+      isInfosecQaCert,
     isFullStackCert,
     currentCerts: [
       {
@@ -163,11 +166,6 @@ export const certificatesByNameSelector = username => state => {
         title: 'JavaScript Algorithms and Data Structures (Beta) Certification',
         certSlug: Certification.JsAlgoDataStructNew
       },
-      {
-        show: isJsAlgoDataStructCert,
-        title: 'JavaScript Algorithms and Data Structures Certification',
-        certSlug: Certification.JsAlgoDataStruct
-      },
       {
         show: isFrontEndLibsCert,
         title: 'Front End Development Libraries Certification',
@@ -230,6 +228,11 @@ export const certificatesByNameSelector = username => state => {
         title: 'Front End Certification',
         certSlug: Certification.LegacyFrontEnd
       },
+      {
+        show: isJsAlgoDataStructCert,
+        title: 'Legacy JavaScript Algorithms and Data Structures Certification',
+        certSlug: Certification.JsAlgoDataStruct
+      },
       {
         show: isBackEndCert,
         title: 'Back End Certification',

cypress/e2e/default/user/certifications.ts

@@ -14,7 +14,7 @@ describe('Public profile certifications', () => {
       // The following line is only required if you want to test it in development
       //cy.contains('Preview custom 404 page').click();
 
-      cy.get('[data-cy=claimed-certification]').should('have.length', 18);
+      cy.get('[data-cy=claimed-certification]').should('have.length', 19);
     });
 
     it('Should show claimed certifications if the username includes uppercase characters', () => {
@@ -32,7 +32,7 @@ describe('Public profile certifications', () => {
       // The following line is only required if you want to test it in development
       //cy.contains('Preview custom 404 page').click();
 
-      cy.get('[data-cy=claimed-certification]').should('have.length', 18);
+      cy.get('[data-cy=claimed-certification]').should('have.length', 19);
     });
   });
 

e2e/map.spec.ts

@@ -44,6 +44,7 @@ test.describe('Map Component', () => {
     ).toBeVisible();
     const curriculumBtns = page.getByTestId('curriculum-map-button');
     await expect(curriculumBtns).toHaveCount(superBlocksWithLinks.length);
+
     for (let i = 0; i < superBlocksWithLinks.length; i++) {
       const superblockLink = page.getByRole('link', {
         // This is a hacky bypass because `Responsive Web Design` hits both links.
@@ -51,13 +52,15 @@ test.describe('Map Component', () => {
           superBlockTitleOverride[intro[superBlocksWithLinks[i]].title] ??
           intro[superBlocksWithLinks[i]].title
       });
-      expect(await superblockLink.getAttribute('href')).toBe(
+
+      await expect(superblockLink).toBeVisible();
+      await expect(superblockLink).toHaveAttribute(
+        'href',
         `/learn/${
           superBlockSlugOverride[superBlocksWithLinks[i]] ??
           superBlocksWithLinks[i]
         }/`
       );
-      await superblockLink.click();
     }
   });
 });

e2e/profile.spec.ts

@@ -9,7 +9,7 @@ const certs = [
   },
   {
     name: 'JavaScript Algorithms and Data Structures',
-    url: '/certification/certifieduser/javascript-algorithms-and-data-structures'
+    url: '/certification/certifieduser/javascript-algorithms-and-data-structures-v8'
   },
   {
     name: 'Front End Development Libraries',
@@ -59,6 +59,10 @@ const certs = [
 
 const legacyCerts = [
   { name: 'Front End', url: '/certification/certifieduser/legacy-front-end' },
+  {
+    name: 'Legacy JavaScript Algorithms and Data Structures',
+    url: '/certification/certifieduser/javascript-algorithms-and-data-structures'
+  },
   { name: 'Back End', url: '/certification/certifieduser/legacy-back-end' },
   {
     name: 'Data Visualization',

shared/config/certification-settings.ts

@@ -238,7 +238,8 @@ export const certTypeTitleMap = {
   [certTypes.fullStack]: 'Legacy Full Stack',
   [certTypes.respWebDesign]: 'Responsive Web Design',
   [certTypes.frontEndDevLibs]: 'Front End Development Libraries',
-  [certTypes.jsAlgoDataStruct]: 'JavaScript Algorithms and Data Structures',
+  [certTypes.jsAlgoDataStruct]:
+    'Legacy JavaScript Algorithms and Data Structures',
   [certTypes.dataVis2018]: 'Data Visualization',
   [certTypes.apisMicroservices]: 'Back End Development and APIs',
   [certTypes.qaV7]: 'Quality Assurance',

tools/scripts/seed/certified-user-data.js

@@ -25,6 +25,7 @@ module.exports = {
   is2018DataVisCert: true,
   isFrontEndLibsCert: true,
   isJsAlgoDataStructCert: true,
+  isJsAlgoDataStructCertV8: true,
   isApisMicroservicesCert: true,
   isInfosecQaCert: true,
   isQaCertV7: true,