From c4f7e45832b0916c294a33fdd71e0f22509791e6 Mon Sep 17 00:00:00 2001
From: Hdanzo <76695417+Hdanzo@users.noreply.github.com>
Date: Fri, 30 Sep 2022 03:39:33 -0400
Subject: [PATCH] feat: standardize view button text (#47525)

* feat: standardize view button text

Add new translation keys Delete unused translation keys Fix tests broken with new functionalities

* Delete View variations in translations.json
Delete buttons tittle
Modify buttons text to be "View" or translated equivalent
Modify tests to query the buttons by role and name

Co-authored-by: HDAnzo <hdanzoategui@softwarenatura.com>
---
 client/i18n/locales/english/translations.json    |  3 ---
 .../profile/components/time-line.test.tsx        |  6 ++++--
 .../components/settings/certification.test.tsx   |  8 +++++---
 .../components/solution-display-widget/index.tsx | 16 ++++++----------
 4 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 4ea0efc23d8..5eac75ce560 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -6,9 +6,6 @@
     "first-lesson": "Go to the first lesson",
     "close": "Close",
     "edit": "Edit",
-    "show-code": "Show Code",
-    "show-solution": "Show Solution",
-    "show-project": "Show Project",
     "frontend": "Front End",
     "backend": "Back End",
     "view": "View",
diff --git a/client/src/components/profile/components/time-line.test.tsx b/client/src/components/profile/components/time-line.test.tsx
index c4ab22eb842..6256c9e7314 100644
--- a/client/src/components/profile/components/time-line.test.tsx
+++ b/client/src/components/profile/components/time-line.test.tsx
@@ -84,8 +84,10 @@ describe('<TimeLine />', () => {
     // @ts-expect-error
     render(<TimeLine {...propsForOnlySolution} />, store);
 
-    const button = screen.getByText('buttons.show-code');
-    expect(button).toBeInTheDocument();
+    const viewButtons = screen.getAllByRole('button', { name: 'buttons.view' });
+    viewButtons.forEach(button => {
+      expect(button).toBeInTheDocument();
+    });
   });
 });
 
diff --git a/client/src/components/settings/certification.test.tsx b/client/src/components/settings/certification.test.tsx
index f14aeec02fa..ec3289cffba 100644
--- a/client/src/components/settings/certification.test.tsx
+++ b/client/src/components/settings/certification.test.tsx
@@ -65,7 +65,7 @@ describe('<certification />', () => {
 
     expect(
       screen.getByRole('link', {
-        name: 'buttons.show-solution'
+        name: 'buttons.view'
       })
     ).toHaveAttribute('href', 'https://github.com/freeCodeCamp/freeCodeCamp');
   });
@@ -88,8 +88,10 @@ describe('<certification />', () => {
   it('rendering the correct button when files is present', () => {
     renderWithRedux(<CertificationSettings {...propsForOnlySolution} />);
 
-    const button = screen.getByText('buttons.show-code');
-    expect(button).toBeInTheDocument();
+    const viewButtons = screen.getAllByRole('button', { name: 'buttons.view' });
+    viewButtons.forEach(button => {
+      expect(button).toBeInTheDocument();
+    });
   });
 });
 
diff --git a/client/src/components/solution-display-widget/index.tsx b/client/src/components/solution-display-widget/index.tsx
index c96f1b084b5..06428c983ef 100644
--- a/client/src/components/solution-display-widget/index.tsx
+++ b/client/src/components/solution-display-widget/index.tsx
@@ -25,11 +25,7 @@ export function SolutionDisplayWidget({
 }: Props) {
   const { id, solution, githubLink } = completedChallenge;
   const { t } = useTranslation();
-
-  const showOrViewText =
-    displayContext === 'settings'
-      ? t('buttons.show-solution')
-      : t('buttons.view');
+  const viewText = t('buttons.view');
 
   const ShowFilesSolutionForCertification = (
     <button
@@ -73,7 +69,7 @@ export function SolutionDisplayWidget({
       id={`btn-for-${id}`}
       onClick={showUserCode}
     >
-      {t('buttons.show-code')}
+      {viewText}
     </Button>
   );
   const ShowMultifileProjectSolution = (
@@ -86,10 +82,10 @@ export function SolutionDisplayWidget({
         title={t('buttons.view')}
       >
         <MenuItem bsStyle='primary' onClick={showUserCode}>
-          {t('buttons.show-code')}
+          {viewText}
         </MenuItem>
         <MenuItem bsStyle='primary' onClick={showProjectPreview}>
-          {t('buttons.show-project')}
+          {viewText}
         </MenuItem>
       </DropdownButton>
     </div>
@@ -102,7 +98,7 @@ export function SolutionDisplayWidget({
         bsStyle='primary'
         className='btn-invert'
         id={`dropdown-for-${id}`}
-        title={showOrViewText}
+        title={viewText}
       >
         <MenuItem
           bsStyle='primary'
@@ -133,7 +129,7 @@ export function SolutionDisplayWidget({
       rel='noopener noreferrer'
       target='_blank'
     >
-      {showOrViewText}
+      {viewText}
     </Button>
   );
   const MissingSolutionComponent =