fix(client): add relevant placeholder to link submission (#38411)

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

@@ -15,8 +15,7 @@ import {
   initTests,
   updateBackendFormValues,
   updateChallengeMeta,
-  updateProjectFormValues,
-  backendNS
+  updateSolutionFormValues
 } from '../../redux';
 import { getGuideUrl } from '../../utils';
 
@@ -28,16 +27,14 @@ import Output from '../../components/Output';
 import CompletionModal from '../../components/CompletionModal';
 import HelpModal from '../../components/HelpModal';
 import ProjectToolPanel from '../Tool-Panel';
-import ProjectForm from '../ProjectForm';
-import { Form } from '../../../../components/formHelpers';
+import SolutionForm from '../SolutionForm';
 import Spacer from '../../../../components/helpers/Spacer';
 import { ChallengeNode } from '../../../../redux/propTypes';
 import { isSignedInSelector } from '../../../../redux';
 import Hotkeys from '../../components/Hotkeys';
 
-import { backend } from '../../../../../utils/challengeTypes';
-
 import '../../components/test-frame.css';
+import { backEndProject } from '../../../../../utils/challengeTypes';
 
 const propTypes = {
   challengeMounted: PropTypes.func.isRequired,
@@ -59,7 +56,7 @@ const propTypes = {
   title: PropTypes.string,
   updateBackendFormValues: PropTypes.func.isRequired,
   updateChallengeMeta: PropTypes.func.isRequired,
-  updateProjectFormValues: PropTypes.func.isRequired
+  updateSolutionFormValues: PropTypes.func.isRequired
 };
 
 const mapStateToProps = createSelector(
@@ -80,18 +77,7 @@ const mapDispatchToActions = {
   initTests,
   updateBackendFormValues,
   updateChallengeMeta,
-  updateProjectFormValues
-};
-
-const formFields = ['solution'];
-const options = {
-  required: ['solution'],
-  types: {
-    solution: 'url'
-  },
-  placeholders: {
-    solution: 'Link to solution, ex: https://codepen.io/camperbot/full/oNvPqqo'
-  }
+  updateSolutionFormValues
 };
 
 export class BackEnd extends Component {
@@ -99,7 +85,6 @@ export class BackEnd extends Component {
     super(props);
     this.state = {};
     this.updateDimensions = this.updateDimensions.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   componentDidMount() {
@@ -152,12 +137,6 @@ export class BackEnd extends Component {
     challengeMounted(challengeMeta.id);
   }
 
-  handleSubmit(values) {
-    const { updateBackendFormValues, executeChallenge } = this.props;
-    updateBackendFormValues(values);
-    executeChallenge();
-  }
-
   render() {
     const {
       data: {
@@ -175,15 +154,13 @@ export class BackEnd extends Component {
         challengeMeta: { introPath, nextChallengePath, prevChallengePath }
       },
       tests,
-      isSignedIn,
       executeChallenge,
-      updateProjectFormValues
+      updateSolutionFormValues,
+      updateBackendFormValues
     } = this.props;
 
-    const buttonCopy = isSignedIn
-      ? 'Submit and go to my next challenge'
-      : "I've completed this challenge";
     const blockNameTitle = `${blockName} - ${title}`;
+    const isBackEndProject = challengeType === backEndProject;
 
     return (
       <Hotkeys
@@ -203,21 +180,16 @@ export class BackEnd extends Component {
                   description={description}
                   instructions={instructions}
                 />
-                {challengeType === backend ? (
-                  <Form
-                    buttonText={`${buttonCopy}`}
-                    formFields={formFields}
-                    id={backendNS}
-                    options={options}
-                    submit={this.handleSubmit}
-                  />
-                ) : (
-                  <ProjectForm
-                    isFrontEnd={false}
-                    onSubmit={executeChallenge}
-                    updateProjectForm={updateProjectFormValues}
-                  />
-                )}
+                <SolutionForm
+                  isFrontEnd={false}
+                  isProject={isBackEndProject}
+                  onSubmit={executeChallenge}
+                  updateSolutionForm={values =>
+                    isBackEndProject
+                      ? updateSolutionFormValues(values)
+                      : updateBackendFormValues(values)
+                  }
+                />
                 <ProjectToolPanel
                   guideUrl={getGuideUrl({ forumTopicId, title })}
                 />