Merge pull request #74 from topcoder-platform/TCA-425_update-backend-project-layout

TCA-425 - Update backend projects to advance to next lesson without c…

Author: vas3a

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

@@ -21,8 +21,6 @@ import {
 import ChallengeDescription from '../../components/Challenge-Description';
 import Hotkeys from '../../components/Hotkeys';
 import ChallengeTitle from '../../components/challenge-title';
-import CompletionModal from '../../components/completion-modal';
-import HelpModal from '../../components/help-modal';
 import Output from '../../components/output';
 import TestSuite from '../../components/test-suite';
 import {
@@ -33,12 +31,12 @@ import {
   initConsole,
   initTests,
   isChallengeCompletedSelector,
+  testsRunningSelector,
   updateChallengeMeta,
-  updateSolutionFormValues
+  updateSolutionFormValues,
+  submitChallenge
 } from '../../redux';
-import { getGuideUrl } from '../../utils';
 import SolutionForm from '../solution-form';
-import ProjectToolPanel from '../tool-panel';
 
 import '../../components/test-frame.css';
 
@@ -48,16 +46,19 @@ const mapStateToProps = createSelector(
   challengeTestsSelector,
   isChallengeCompletedSelector,
   isSignedInSelector,
+  testsRunningSelector,
   (
     output: string[],
     tests: Test[],
     isChallengeCompleted: boolean,
-    isSignedIn: boolean
+    isSignedIn: boolean,
+    testsRunningSelector: boolean
   ) => ({
     tests,
     output,
     isChallengeCompleted,
-    isSignedIn
+    isSignedIn,
+    testsRunningSelector
   })
 );
 
@@ -67,7 +68,8 @@ const mapDispatchToActions = {
   initConsole,
   initTests,
   updateChallengeMeta,
-  updateSolutionFormValues
+  updateSolutionFormValues,
+  submitChallenge
 };
 
 // Types
@@ -86,8 +88,10 @@ interface BackEndProps {
   pageContext: {
     challengeMeta: ChallengeMeta;
   };
+  submitChallenge: () => void;
   t: TFunction;
   tests: Test[];
+  testsRunning: boolean;
   title: string;
   updateChallengeMeta: (arg0: ChallengeMeta) => void;
   updateSolutionFormValues: () => void;
@@ -175,24 +179,28 @@ class BackEnd extends Component<BackEndProps> {
   }
 
   handleSubmit(): void {
-    this.props.executeChallenge({
-      showCompletionModal: false
-    });
+    const { tests, submitChallenge } = this.props;
+    const isChallengeComplete = tests.every(test => test.pass && !test.err);
+
+    if (isChallengeComplete) {
+      submitChallenge();
+    } else {
+      this.props.executeChallenge({
+        showCompletionModal: false
+      });
+    }
   }
 
   render() {
     const {
       data: {
         challengeNode: {
           challenge: {
-            fields: { blockName },
             challengeType,
-            forumTopicId,
             title,
             description,
             instructions,
             translationPending,
-            certification,
             superBlock,
             block
           }
@@ -205,9 +213,15 @@ class BackEnd extends Component<BackEndProps> {
       },
       t,
       tests,
+      testsRunning,
       updateSolutionFormValues
     } = this.props;
 
+    const isChallengeComplete = tests.every(test => test.pass && !test.err);
+    const submitBtnLabel: string = !isChallengeComplete
+      ? `${t('buttons.run-test')}${testsRunning ? ' ...' : ''}`
+      : t('buttons.submit-and-go');
+
     const blockNameTitle = `${t(
       `intro:${superBlock}.blocks.${block}.title`
     )} - ${title}`;
@@ -243,9 +257,7 @@ class BackEnd extends Component<BackEndProps> {
                   // eslint-disable-next-line @typescript-eslint/unbound-method
                   onSubmit={this.handleSubmit}
                   updateSolutionForm={updateSolutionFormValues}
-                />
-                <ProjectToolPanel
-                  guideUrl={getGuideUrl({ forumTopicId, title })}
+                  buttonLabel={submitBtnLabel}
                 />
                 <br />
                 <Output
@@ -260,13 +272,6 @@ class BackEnd extends Component<BackEndProps> {
                 <TestSuite tests={tests} />
                 <Spacer />
               </Col>
-              <CompletionModal
-                block={block}
-                blockName={blockName}
-                certification={certification}
-                superBlock={superBlock}
-              />
-              <HelpModal challengeTitle={title} challengeBlock={blockName} />
             </Row>
           </Grid>
         </LearnLayout>

client/src/templates/Challenges/projects/solution-form.tsx

@@ -16,6 +16,7 @@ interface SubmitProps {
 }
 
 interface FormProps extends WithTranslation {
+  buttonLabel?: string;
   challengeType: number;
   description?: string;
   onSubmit: (arg0: SubmitProps) => void;
@@ -46,7 +47,7 @@ export class SolutionForm extends Component<FormProps> {
   };
 
   render(): JSX.Element {
-    const { challengeType, description, t } = this.props;
+    const { buttonLabel, challengeType, description, t } = this.props;
 
     // back end challenges and front end projects use a single form field
     const solutionField = [
@@ -57,7 +58,7 @@ export class SolutionForm extends Component<FormProps> {
       { name: 'githubLink', label: t('learn.github-link') }
     ];
 
-    const buttonCopy = t('learn.submit-and-go');
+    const buttonCopy: string = buttonLabel ?? t('learn.submit-and-go');
 
     const options = {
       types: {