fix(curriculum): make the title show with proper format (#50912)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap

@@ -39,7 +39,7 @@ exports[`should check certification page consistency 1`] = `
               gatsby="true"
               href="/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-41"
             >
-              Learn Accessibility by Building a Quiz - Step 41
+              Step 41
             </a>
           </td>
           <td />

client/src/components/profile/components/time-line.tsx

@@ -242,6 +242,8 @@ function useIdToNameMap(t: TFunction): Map<string, NameMap> {
                 blockName
               }
               id
+              superBlock
+              hasEditableBoundaries
               title
             }
           }
@@ -265,15 +267,20 @@ function useIdToNameMap(t: TFunction): Map<string, NameMap> {
           // @ts-expect-error Graphql needs typing
           id,
           // @ts-expect-error Graphql needs typing
+          superBlock,
+          // @ts-expect-error Graphql needs typing
           title,
           // @ts-expect-error Graphql needs typing
-          fields: { slug, blockName }
+          fields: { slug, blockName },
+          // @ts-expect-error Graphql needs typing
+          hasEditableBoundaries
         }
       }
     }) => {
+      const blockNameTitle = t(`intro:${superBlock}.blocks.${blockName}.title`);
       idToNameMap.set(id, {
         challengeTitle: `${
-          title.includes('Step') ? `${blockName} - ` : ''
+          hasEditableBoundaries ? blockNameTitle + ' - ' : ''
         }${title}`,
         challengePath: slug
       });