fix: restore missing reset button (#54389)

Co-authored-by: Manabu Matsumoto <mmatsumoto1026@gmail.com>
freeCodeCamp · Apr 19, 2024 · b07e7c8 · b07e7c8
1 parent 805be1d
commit b07e7c8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 9 deletions.
diff --git a/client/src/templates/Challenges/components/tool-panel.css b/client/src/templates/Challenges/components/tool-panel.css
@@ -46,3 +46,9 @@
 .tool-panel-group-mobile *:focus-visible {
   outline-offset: -3px;
 }
+
+@media screen and (max-width: 450px) {
+  #get-help-dropdown {
+    min-width: 90px;
+  }
+}
diff --git a/client/src/templates/Challenges/components/tool-panel.tsx b/client/src/templates/Challenges/components/tool-panel.tsx
@@ -92,15 +92,14 @@ function ToolPanel({
             </Button>
           </>
         )}
-      {challengeType !== challengeTypes.multifileCertProject &&
-        challengeType !== challengeTypes.multifilePythonCertProject && (
-          <>
-            <Spacer size='xxSmall' />
-            <Button block={true} variant='primary' onClick={openResetModal}>
-              {isMobile ? t('buttons.reset') : t('buttons.reset-lesson')}
-            </Button>
-          </>
-        )}
+      {challengeType !== challengeTypes.multifilePythonCertProject && (
+        <>
+          <Spacer size='xxSmall' />
+          <Button block={true} variant='primary' onClick={openResetModal}>
+            {isMobile ? t('buttons.reset') : t('buttons.reset-lesson')}
+          </Button>
+        </>
+      )}
       <Spacer size='xxSmall' />
       <Dropdown dropup>
         <Dropdown.Toggle

diff --git a/e2e/reset-modal.spec.ts b/e2e/reset-modal.spec.ts
@@ -150,3 +150,42 @@ test('should close when the user clicks the close button', async ({ page }) => {
     page.getByRole('dialog', { name: translations.learn.reset })
   ).toBeHidden();
 });
+
+test('User can reset on a multi-file project', async ({ page }) => {
+  {
+    await page.goto(
+      '/learn/javascript-algorithms-and-data-structures-v8/build-a-palindrome-checker-project/build-a-palindrome-checker'
+    );
+    await page
+      .getByRole('button', { name: translations.buttons.reset })
+      .click();
+
+    await expect(
+      page.getByRole('dialog', { name: translations.learn.reset })
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: translations.buttons.close
+      })
+    ).toBeVisible();
+    await expect(
+      page.getByRole('heading', {
+        name: translations.learn.reset
+      })
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(translations.learn['reset-warn'])
+    ).toBeVisible();
+    await expect(
+      page.getByText(translations.learn['reset-warn-2'])
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: translations.buttons['reset-lesson']
+      })
+    ).toBeVisible();
+  }
+});