Fixing submit/reset button appearance on create subgroup and relocate group forms.

Author: krulis-martin

src/components/forms/EditGroupForm/EditGroupForm.js

@@ -5,9 +5,11 @@ import { reduxForm, Field, FieldArray } from 'redux-form';
 import { Container, Row, Col } from 'react-bootstrap';
 
 import Callout from '../../widgets/Callout';
+import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import FormBox from '../../widgets/FormBox';
 import SubmitButton from '../SubmitButton';
 import LocalizedTextsFormField from '../LocalizedTextsFormField';
+import { RefreshIcon } from '../../icons';
 
 import { TextField, CheckboxField, NumericTextField } from '../Fields';
 import { getLocalizedTextsInitialValues, validateLocalizedTextsFormData } from '../../../helpers/localizedData';
@@ -56,26 +58,36 @@ const EditGroupForm = ({
     }
     type={submitSucceeded ? 'success' : undefined}
     footer={
-      <div className="text-center">
-        <SubmitButton
-          id="editGroup"
-          handleSubmit={handleSubmit(data => onSubmit(data).then(reset))}
-          submitting={submitting}
-          dirty={dirty}
-          hasSucceeded={submitSucceeded}
-          hasFailed={submitFailed}
-          invalid={invalid}
-          messages={{
-            submit: createNew ? (
-              <FormattedMessage id="app.editGroupForm.createGroup" defaultMessage="Create Group" />
-            ) : (
-              <FormattedMessage id="app.editGroupForm.saveGroup" defaultMessage="Save Group" />
-            ),
-            submitting: <FormattedMessage id="generic.saving" defaultMessage="Saving..." />,
-            success: <FormattedMessage id="generic.saved" defaultMessage="Saved" />,
-          }}
-        />
-      </div>
+      !createNew || dirty ? (
+        <div className="text-center">
+          <TheButtonGroup>
+            {dirty && (
+              <Button type="reset" onClick={reset} variant="danger">
+                <RefreshIcon gapRight />
+                <FormattedMessage id="generic.reset" defaultMessage="Reset" />
+              </Button>
+            )}
+            <SubmitButton
+              id="editGroup"
+              handleSubmit={handleSubmit(data => onSubmit(data).then(reset))}
+              submitting={submitting}
+              dirty={dirty}
+              hasSucceeded={submitSucceeded}
+              hasFailed={submitFailed}
+              invalid={invalid}
+              messages={{
+                submit: createNew ? (
+                  <FormattedMessage id="app.editGroupForm.createGroup" defaultMessage="Create Group" />
+                ) : (
+                  <FormattedMessage id="app.editGroupForm.saveGroup" defaultMessage="Save Group" />
+                ),
+                submitting: <FormattedMessage id="generic.saving" defaultMessage="Saving..." />,
+                success: <FormattedMessage id="generic.saved" defaultMessage="Saved" />,
+              }}
+            />
+          </TheButtonGroup>
+        </div>
+      ) : null
     }
     collapsable={collapsable}
     isOpen={isOpen}

src/components/forms/Fields/CheckboxField.js

@@ -17,7 +17,7 @@ const CheckboxField = ({
   /* eslint-disable no-unneeded-ternary */
   return (
     <FormGroup
-      className={error ? 'text-danger' : warning ? 'text-warning' : dirty && !ignoreDirty ? 'text-success' : undefined}
+      className={error ? 'text-danger' : warning ? 'text-warning' : dirty && !ignoreDirty ? 'text-primary' : undefined}
       controlId={input.name}>
       <Component
         {...props}

src/components/forms/Fields/RadioField.js

@@ -12,7 +12,7 @@ const RadioField = ({ input, meta: { error, warning, dirty }, ignoreDirty = fals
             'form-check-label': true,
             'text-danger': error && input.value === key,
             'text-warninig': !error && warning && input.value === key,
-            'text-success': dirty && !ignoreDirty && input.value === key,
+            'text-primary': dirty && !ignoreDirty && input.value === key,
           })}>
           <input type="radio" name={input.name} value={key} checked={input.value === key} onChange={input.onChange} />
           {name}

src/components/forms/NiceCheckbox/NiceCheckbox.js

@@ -37,7 +37,7 @@ const NiceCheckbox = ({
     : warning
     ? 'text-warning'
     : dirty
-    ? 'text-success'
+    ? 'text-primary'
     : !checked
     ? 'text-muted'
     : undefined;

src/components/forms/RelocateGroupForm/RelocateGroupForm.js

@@ -7,7 +7,8 @@ import { defaultMemoize } from 'reselect';
 
 import { SelectField } from '../Fields';
 import SubmitButton from '../SubmitButton';
-import Icon, { WarningIcon } from '../../icons';
+import Icon, { RefreshIcon, WarningIcon } from '../../icons';
+import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import Callout from '../../widgets/Callout';
 import { getGroupCanonicalLocalizedName } from '../../../helpers/localizedData';
 import { hasPermissions } from '../../../helpers/common';
@@ -22,8 +23,10 @@ const RelocateGroupForm = ({
   submitFailed,
   submitSucceeded,
   invalid,
+  dirty = false,
   groups,
   groupsAccessor,
+  reset,
   intl: { locale },
 }) => (
   <div>
@@ -47,20 +50,28 @@ const RelocateGroupForm = ({
       />
 
       <div className="text-center">
-        <SubmitButton
-          id="relocateGroup"
-          disabled={invalid}
-          submitting={submitting}
-          hasSucceeded={submitSucceeded}
-          hasFailed={submitFailed}
-          handleSubmit={handleSubmit}
-          defaultIcon={<Icon icon="people-carry" gapRight />}
-          messages={{
-            submit: <FormattedMessage id="app.relocateGroupForm.submit" defaultMessage="Relocate" />,
-            submitting: <FormattedMessage id="app.relocateGroupForm.submitting" defaultMessage="Relocating..." />,
-            success: <FormattedMessage id="app.relocateGroupForm.success" defaultMessage="Group Relocated" />,
-          }}
-        />
+        <TheButtonGroup>
+          {dirty && (
+            <Button type="reset" onClick={reset} variant="danger">
+              <RefreshIcon gapRight />
+              <FormattedMessage id="generic.reset" defaultMessage="Reset" />
+            </Button>
+          )}
+          <SubmitButton
+            id="relocateGroup"
+            disabled={invalid || !dirty}
+            submitting={submitting}
+            hasSucceeded={submitSucceeded}
+            hasFailed={submitFailed}
+            handleSubmit={handleSubmit}
+            defaultIcon={<Icon icon="people-carry" gapRight />}
+            messages={{
+              submit: <FormattedMessage id="app.relocateGroupForm.submit" defaultMessage="Relocate" />,
+              submitting: <FormattedMessage id="app.relocateGroupForm.submitting" defaultMessage="Relocating..." />,
+              success: <FormattedMessage id="app.relocateGroupForm.success" defaultMessage="Group Relocated" />,
+            }}
+          />
+        </TheButtonGroup>
       </div>
     </Form>
   </div>
@@ -75,10 +86,12 @@ RelocateGroupForm.propTypes = {
   submitFailed: PropTypes.bool,
   submitSucceeded: PropTypes.bool,
   invalid: PropTypes.bool,
+  dirty: PropTypes.bool,
   handleSubmit: PropTypes.func.isRequired,
   links: PropTypes.object,
   groups: PropTypes.array,
   groupsAccessor: PropTypes.func.isRequired,
+  reset: PropTypes.func,
   intl: PropTypes.object,
 };