Moving add test button to the top of the form so it will not be scrolled away when pressed.

Author: krulis-martin

src/components/forms/EditTestsForm/EditTestsForm.js

@@ -14,7 +14,7 @@ import Box from '../../widgets/Box';
 import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import Callout from '../../widgets/Callout';
 import OptionalTooltipWrapper from '../../widgets/OptionalTooltipWrapper';
-import Icon, { AddIcon, CloseIcon, SaveIcon, RefreshIcon, WarningIcon } from '../../icons';
+import Icon, { CloseIcon, SaveIcon, RefreshIcon, WarningIcon } from '../../icons';
 import {
   UNIFORM_ID,
   WEIGHTED_ID,
@@ -99,14 +99,25 @@ class EditTestsForm extends Component {
     this.props.registerExtraData && this.props.registerExtraData(this.getAst().getRoot());
   };
 
+  addNewTest = () => {
+    const { change, formValues } = this.props;
+    change('tests', [
+      ...formValues.tests,
+      {
+        id: this.getUniqueId(),
+        name: 'Test ' + (formValues.tests.length + 1).toString().padStart(2, '0'),
+        weight: '100',
+      },
+    ]);
+  };
+
   render() {
     const {
       calculator = UNIFORM_ID,
       readOnly = false,
       dirty,
       submitting,
       handleSubmit,
-      change,
       submitFailed,
       submitSucceeded,
       invalid,
@@ -155,29 +166,12 @@ class EditTestsForm extends Component {
                   readOnly={readOnly}
                   usedTests={this.getUsedTests()}
                   calculator={calculator}
+                  addNewTest={this.addNewTest}
                 />
 
                 {!readOnly && (
                   <div className="text-center">
                     <TheButtonGroup>
-                      {formValues && formValues.tests.length < 99 && (
-                        <Button
-                          onClick={() =>
-                            change('tests', [
-                              ...formValues.tests,
-                              {
-                                id: this.getUniqueId(),
-                                name: 'Test ' + (formValues.tests.length + 1).toString().padStart(2, '0'),
-                                weight: '100',
-                              },
-                            ])
-                          }
-                          variant="primary">
-                          <AddIcon gapRight />
-                          <FormattedMessage id="app.editTestsTest.add" defaultMessage="Add Test" />
-                        </Button>
-                      )}
-
                       {(dirty || (this.getAst() && this.getAst().canUndo())) && !submitting && (
                         <Button type="reset" onClick={this.reset} variant="danger">
                           <RefreshIcon gapRight />

src/components/forms/EditTestsForm/EditTestsTest.js

@@ -6,11 +6,13 @@ import { FormattedMessage } from 'react-intl';
 
 import EditTestsTestRow from './EditTestsTestRow';
 import Callout from '../../widgets/Callout';
+import Button from '../../widgets/TheButton';
+import { AddIcon } from '../../icons';
 import { prettyPrintPercent } from '../../helpers/stringFormatters';
 import { safeGet } from '../../../helpers/common';
 import { WEIGHTED_ID, UNIVERSAL_ID } from '../../../helpers/exercise/testsAndScore';
 
-const EditTestsTest = ({ fields, calculator, testValues, usedTests, readOnly = false }) => {
+const EditTestsTest = ({ fields, calculator, testValues, usedTests, addNewTest, readOnly = false }) => {
   const weightSum = Math.max(
     1, // make sure the sum is not zero (it is used in division)
     calculator === WEIGHTED_ID
@@ -37,7 +39,16 @@ const EditTestsTest = ({ fields, calculator, testValues, usedTests, readOnly = f
                   <FormattedMessage id="app.editTestsTest.pointsPercentage" defaultMessage="Points Percentage:" />
                 </th>
               )}
-              {!readOnly && <th />}
+              {!readOnly && addNewTest && (
+                <th className="valign-middle text-right">
+                  {fields.length < 99 && (
+                    <Button onClick={addNewTest} variant="primary" size="xs">
+                      <AddIcon gapRight />
+                      <FormattedMessage id="app.editTestsTest.add" defaultMessage="Add Test" />
+                    </Button>
+                  )}
+                </th>
+              )}
             </tr>
           </thead>
           <tbody>
@@ -72,6 +83,7 @@ EditTestsTest.propTypes = {
   calculator: PropTypes.string,
   testValues: PropTypes.array,
   usedTests: PropTypes.object,
+  addNewTest: PropTypes.func,
 };
 
 export default formValues({