fix(i18n): translate block names in completion modal (#41516)

* fix(i18n): translate block names in completion modal

* fix: update snapshot

* fix: update test and snapshot betterish

* fix: remove dasherize usage

* Update client/src/templates/Challenges/video/Show.js

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

* Update client/src/templates/Challenges/projects/frontend/Show.js

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

* fix: add block props to backend Show.js

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

client/src/templates/Challenges/classic/Show.js

@@ -277,8 +277,10 @@ class ShowClassic extends Component {
 
   render() {
     const {
+      block,
       fields: { blockName },
       forumTopicId,
+      superBlock,
       title
     } = this.getChallenge();
     const {
@@ -331,7 +333,11 @@ class ShowClassic extends Component {
               testOutput={this.renderTestOutput()}
             />
           </Media>
-          <CompletionModal blockName={blockName} />
+          <CompletionModal
+            block={block}
+            blockName={blockName}
+            superBlock={superBlock}
+          />
           <HelpModal />
           <VideoModal videoUrl={this.getVideoUrl()} />
           <ResetModal />

client/src/templates/Challenges/components/CompletionModal.js

@@ -70,6 +70,7 @@ const mapDispatchToProps = function (dispatch) {
 
 const propTypes = {
   allowBlockDonationRequests: PropTypes.func,
+  block: PropTypes.string,
   blockName: PropTypes.string,
   close: PropTypes.func.isRequired,
   completedChallengesIds: PropTypes.array,
@@ -81,6 +82,7 @@ const propTypes = {
   isSignedIn: PropTypes.bool.isRequired,
   message: PropTypes.string,
   submitChallenge: PropTypes.func.isRequired,
+  superBlock: PropTypes.string,
   t: PropTypes.func.isRequired,
   title: PropTypes.string
 };
@@ -184,13 +186,14 @@ export class CompletionModalInner extends Component {
 
   render() {
     const {
-      blockName = '',
+      block,
       close,
       isOpen,
       message,
       t,
       title,
-      isSignedIn
+      isSignedIn,
+      superBlock = ''
     } = this.props;
 
     const { completedPercent } = this.state;
@@ -220,8 +223,9 @@ export class CompletionModalInner extends Component {
         </Modal.Header>
         <Modal.Body className='completion-modal-body'>
           <CompletionModalBody
-            blockName={blockName}
+            block={block}
             completedPercent={completedPercent}
+            superBlock={superBlock}
           />
         </Modal.Body>
         <Modal.Footer>

client/src/templates/Challenges/components/CompletionModalBody.js

@@ -5,8 +5,9 @@ import GreenPass from '../../../assets/icons/GreenPass';
 import { withTranslation } from 'react-i18next';
 
 const propTypes = {
-  blockName: PropTypes.string,
+  block: PropTypes.string,
   completedPercent: PropTypes.number,
+  superBlock: PropTypes.string,
   t: PropTypes.func.isRequired
 };
 
@@ -58,7 +59,8 @@ export class CompletionModalBody extends PureComponent {
   }
 
   render() {
-    const { blockName, completedPercent, t } = this.props;
+    const { block, completedPercent, superBlock, t } = this.props;
+    const blockTitle = t(`intro:${superBlock}.blocks.${block}.title`);
 
     return (
       <>
@@ -73,7 +75,7 @@ export class CompletionModalBody extends PureComponent {
           />
         </div>
         <div className='completion-block-details'>
-          <div className='completion-block-name'>{blockName}</div>
+          <div className='completion-block-name'>{blockTitle}</div>
           <div className='progress-bar-wrap'>
             <div className='progress-bar-background'>
               {t('learn.percent-complete', {

client/src/templates/Challenges/components/CompletionModalBody.test.js

@@ -6,8 +6,9 @@ import { render, fireEvent } from '@testing-library/react';
 import CompletionModalBody from './CompletionModalBody';
 
 const props = {
-  blockName: 'Basic HTML and HTML5',
-  completedPercent: Math.floor(Math.random() * 101)
+  block: 'basic-html-and-html5',
+  completedPercent: Math.floor(Math.random() * 101),
+  superBlock: 'responsive-web-design'
 };
 
 describe('<CompletionModalBody />', () => {

client/src/templates/Challenges/components/__snapshots__/CompletionModalBody.test.js.snap

@@ -64,7 +64,7 @@ exports[`<CompletionModalBody /> matches snapshot 1`] = `
     <div
       class="completion-block-name"
     >
-      Basic HTML and HTML5
+      intro:responsive-web-design.blocks.basic-html-and-html5.title
     </div>
     <div
       class="progress-bar-wrap"

client/src/templates/Challenges/projects/backend/Show.js

@@ -233,7 +233,11 @@ export class BackEnd extends Component {
                 <TestSuite tests={tests} />
                 <Spacer />
               </Col>
-              <CompletionModal blockName={blockName} />
+              <CompletionModal
+                block={block}
+                blockName={blockName}
+                superBlock={superBlock}
+              />
               <HelpModal />
             </Row>
           </Grid>

client/src/templates/Challenges/projects/frontend/Show.js

@@ -176,7 +176,11 @@ export class Project extends Component {
                 <br />
                 <Spacer />
               </Col>
-              <CompletionModal blockName={blockName} />
+              <CompletionModal
+                block={block}
+                blockName={blockName}
+                superBlock={superBlock}
+              />
               <HelpModal />
             </Row>
           </Grid>

client/src/templates/Challenges/video/Show.js

@@ -298,7 +298,11 @@ export class Project extends Component {
                 </Button>
                 <Spacer size={2} />
               </Col>
-              <CompletionModal blockName={blockName} />
+              <CompletionModal
+                block={block}
+                blockName={blockName}
+                superBlock={superBlock}
+              />
             </Row>
           </Grid>
         </LearnLayout>