Improving how some buttons (tests and runtime environments) are displayed on exercise config page.

Author: krulis-martin

src/components/forms/EditEnvironmentSimpleForm/EditEnvironmentSimpleForm.js

@@ -117,43 +117,49 @@ class EditEnvironmentSimpleForm extends Component {
 
             {error && <Callout variant="danger">{error}</Callout>}
 
-            <div className="text-center">
-              <TheButtonGroup>
-                {dirty && (
-                  <Button type="reset" onClick={reset} variant={'danger'}>
-                    <RefreshIcon gapRight />
-                    <FormattedMessage id="generic.reset" defaultMessage="Reset" />
-                  </Button>
-                )}
-
-                <SubmitButton
-                  id="editTests"
-                  invalid={invalid}
-                  submitting={submitting}
-                  hasSucceeded={submitSucceeded}
-                  dirty={dirty}
-                  hasFailed={submitFailed}
-                  handleSubmit={handleSubmit}
-                  messages={{
-                    submit: (
-                      <FormattedMessage id="app.editEnvironmentSimpleForm.submit" defaultMessage="Save Environments" />
-                    ),
-                    submitting: (
-                      <FormattedMessage
-                        id="app.editEnvironmentSimpleForm.submitting"
-                        defaultMessage="Saving Environments..."
-                      />
-                    ),
-                    success: (
-                      <FormattedMessage
-                        id="app.editEnvironmentSimpleForm.success"
-                        defaultMessage="Environments Saved."
-                      />
-                    ),
-                  }}
-                />
-              </TheButtonGroup>
-            </div>
+            {(!invalid || dirty) && (
+              <div className="text-center">
+                <TheButtonGroup>
+                  {dirty && (
+                    <Button type="reset" onClick={reset} variant={'danger'}>
+                      <RefreshIcon gapRight />
+                      <FormattedMessage id="generic.reset" defaultMessage="Reset" />
+                    </Button>
+                  )}
+
+                  {!invalid && (
+                    <SubmitButton
+                      id="editTests"
+                      submitting={submitting}
+                      hasSucceeded={submitSucceeded}
+                      dirty={dirty}
+                      hasFailed={submitFailed}
+                      handleSubmit={handleSubmit}
+                      messages={{
+                        submit: (
+                          <FormattedMessage
+                            id="app.editEnvironmentSimpleForm.submit"
+                            defaultMessage="Save Environments"
+                          />
+                        ),
+                        submitting: (
+                          <FormattedMessage
+                            id="app.editEnvironmentSimpleForm.submitting"
+                            defaultMessage="Saving Environments..."
+                          />
+                        ),
+                        success: (
+                          <FormattedMessage
+                            id="app.editEnvironmentSimpleForm.success"
+                            defaultMessage="Environments Saved."
+                          />
+                        ),
+                      }}
+                    />
+                  )}
+                </TheButtonGroup>
+              </div>
+            )}
           </>
         ) : (
           <>

src/components/forms/EditTestsForm/EditTestsForm.js

@@ -122,6 +122,7 @@ class EditTestsForm extends Component {
       submitSucceeded,
       invalid,
       formValues,
+      initialValues,
     } = this.props;
 
     return (
@@ -188,6 +189,7 @@ class EditTestsForm extends Component {
                         hasFailed={submitFailed}
                         handleSubmit={handleSubmit}
                         defaultIcon={<SaveIcon gapRight />}
+                        disabled={formValues.tests.length === 0}
                         messages={{
                           submit: <FormattedMessage id="app.editTestsForm.submit" defaultMessage="Save Tests" />,
                           submitting: (
@@ -197,22 +199,24 @@ class EditTestsForm extends Component {
                         }}
                       />
 
-                      <OptionalTooltipWrapper
-                        tooltip={
-                          <FormattedMessage
-                            id="app.editTestsForm.changeCalculatorDisabledTooltip"
-                            defaultMessage="The scoring algorithm may be changed only when there are no unsaved modifications in this form."
-                          />
-                        }
-                        hide={!dirty}>
-                        <Button onClick={this.openDialog} variant={dirty ? 'secondary' : 'primary'} disabled={dirty}>
-                          <Icon icon="calculator" gapRight />
-                          <FormattedMessage
-                            id="app.editTestsForm.changeCalculator"
-                            defaultMessage="Scoring Algorithm"
-                          />
-                        </Button>
-                      </OptionalTooltipWrapper>
+                      {initialValues.tests.length > 0 && (
+                        <OptionalTooltipWrapper
+                          tooltip={
+                            <FormattedMessage
+                              id="app.editTestsForm.changeCalculatorDisabledTooltip"
+                              defaultMessage="The scoring algorithm may be changed only when there are no unsaved modifications in this form."
+                            />
+                          }
+                          hide={!dirty}>
+                          <Button onClick={this.openDialog} variant={dirty ? 'secondary' : 'primary'} disabled={dirty}>
+                            <Icon icon="calculator" gapRight />
+                            <FormattedMessage
+                              id="app.editTestsForm.changeCalculator"
+                              defaultMessage="Scoring Algorithm"
+                            />
+                          </Button>
+                        </OptionalTooltipWrapper>
+                      )}
                     </TheButtonGroup>
 
                     <Modal show={this.state.dialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">