fix(client): Change reset lesson message to be dynamic (#59400)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/i18n/locales/english/translations.json

@@ -445,7 +445,7 @@
     "rsa": "Read, search, ask",
     "rsa-forum": "<strong>Before making a new post</strong> please <0>check if your question has already been answered on the forum</0>.",
     "reset": "Reset this lesson?",
-    "reset-warn": "Are you sure you wish to reset this lesson? The editors and tests will be reset.",
+    "reset-warn": "Are you sure you wish to reset this lesson ({{title}})? The code editors and tests will be reset.",
     "reset-warn-2": "This cannot be undone.",
     "revert-warn": "Are you sure you wish to revert this lesson? Your latest changes will be undone and the code reverted to the most recently saved version.",
     "scrimba-tip": "Tip: If the mini-browser is covering the code, click and drag to move it. Also, feel free to stop and edit the code in the video at any time.",

client/src/templates/Challenges/classic/show.tsx

@@ -528,7 +528,7 @@ function ShowClassic({
           superBlock={superBlock}
         />
         <VideoModal videoUrl={videoUrl} />
-        <ResetModal challengeType={challengeType} />
+        <ResetModal challengeType={challengeType} challengeTitle={title} />
         <ProjectPreviewModal
           challengeData={challengeData}
           closeText={t('buttons.start-coding')}

client/src/templates/Challenges/components/reset-modal.tsx

@@ -15,6 +15,7 @@ interface ResetModalProps {
   isOpen: boolean;
   challengeType: number;
   reset: () => void;
+  challengeTitle: string;
 }
 
 const mapStateToProps = createSelector(
@@ -41,7 +42,8 @@ function ResetModal({
   reset,
   close,
   challengeType,
-  isOpen
+  isOpen,
+  challengeTitle
 }: ResetModalProps): JSX.Element {
   const { t } = useTranslation();
   if (isOpen) {
@@ -56,7 +58,9 @@ function ResetModal({
         <p>
           {canSaveToDB(challengeType)
             ? t('learn.revert-warn')
-            : t('learn.reset-warn')}
+            : t('learn.reset-warn', {
+                title: challengeTitle
+              })}
         </p>
         <p>
           <em>{t('learn.reset-warn-2')}</em>

e2e/challenge-reset-modal.spec.ts

@@ -42,7 +42,11 @@ test('should render the modal content correctly', async ({ page }) => {
     })
   ).toBeVisible();
 
-  await expect(page.getByText(translations.learn['reset-warn'])).toBeVisible();
+  await expect(
+    page.getByText(
+      'Are you sure you wish to reset this lesson (Step 3)? The code editors and tests will be reset.'
+    )
+  ).toBeVisible();
 });
 
 test('User can reset challenge', async ({ page, isMobile, browserName }) => {