Change Button component to take children instead of text prop (#710)

2016-12-28 10:24:52 -05:00
parent 39ebd81dc5
commit 7fa60d0724
28 changed files with 103 additions and 140 deletions
@@ -4,12 +4,12 @@ const classnames = require('classnames');
 const baseClass = 'button';

 interface IButtonProps {
+  children: React.ReactChild;
  className: string;
  disabled: boolean;
  onClick: (evt: React.MouseEvent<HTMLButtonElement>) => boolean;
  size: string;
  tabIndex: number;
-  text: any;
  type: string;
  variant: string;
 }
@@ -19,6 +19,7 @@ interface IButtonState {}
 class Button extends React.Component<IButtonProps, IButtonState> {
  static defaultProps = {
    size: '',
+    type: 'button',
    variant: 'default',
  };

@@ -38,7 +39,7 @@ class Button extends React.Component<IButtonProps, IButtonState> {

  render () {
    const { handleClick } = this;
-    const { className, disabled, size, tabIndex, text, type, variant } = this.props;
+    const { children, className, disabled, size, tabIndex, type, variant } = this.props;
    const fullClassName = classnames(baseClass, `${baseClass}--${variant}`, className, {
      [baseClass]: variant !== 'unstyled',
      [`${baseClass}--disabled`]: disabled,
@@ -53,7 +54,7 @@ class Button extends React.Component<IButtonProps, IButtonState> {
        tabIndex={tabIndex}
        type={type}
      >
-        {text}
+        {children}
      </button>
    );
  }
@@ -39,17 +39,8 @@ class ChangePasswordForm extends Component {
          label="New Password Confirmation"
          type="password"
        />
-        <Button
-          onClick={onCancel}
-          text="CANCEL"
-          type="button"
-          variant="inverse"
-        />
-        <Button
-          text="CHANGE PASSWORD"
-          type="submit"
-          variant="brand"
-        />
+        <Button onClick={onCancel} variant="inverse">CANCEL</Button>
+        <Button type="submit" variant="brand">CHANGE PASSWORD</Button>
      </form>
    );
  }
@@ -39,7 +39,7 @@ describe('ChangePasswordForm - component', () => {
  it('calls the onCancel prop when CANCEL is clicked', () => {
    const onCancelSpy = createSpy();
    const form = mount(<ChangePasswordForm handleSubmit={noop} onCancel={onCancelSpy} />);
-    const cancelBtn = form.find('Button').findWhere(n => n.prop('text') === 'CANCEL').find('button');
+    const cancelBtn = form.find('Button').findWhere(n => n.prop('children') === 'CANCEL').find('button');

    cancelBtn.simulate('click');

@@ -90,18 +90,12 @@ class ConfigurePackQueryForm extends Component {
            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
          />
          <div className={`${baseClass}__btn-wrapper`}>
-            <Button
-              className={`${baseClass}__cancel-btn`}
-              onClick={onCancel}
-              text="Cancel"
-              variant="inverse"
-            />
-            <Button
-              className={`${baseClass}__submit-btn`}
-              text="Save"
-              type="submit"
-              variant="brand"
-            />
+            <Button className={`${baseClass}__cancel-btn`} onClick={onCancel} variant="inverse">
+              Cancel
+            </Button>
+            <Button className={`${baseClass}__submit-btn`} type="submit" variant="brand">
+              Save
+            </Button>
          </div>
        </div>
      </form>
@@ -33,9 +33,10 @@ class ForgotPasswordForm extends Component {
          <Button
            className={`${baseClass}__submit-btn`}
            type="submit"
-            text="Reset Password"
            variant="gradient"
-          />
+          >
+            Reset Password
+          </Button>
        </div>
      </form>
    );
@@ -165,18 +165,17 @@ class InviteUserForm extends Component {
          /> ADMIN
        </div>
        <div className={`${baseClass}__btn-wrap`}>
-          <Button
-            className={`${baseClass}__btn`}
-            text="Invite"
-            type="submit"
-          />
+          <Button className={`${baseClass}__btn`} type="submit">
+            Invite
+          </Button>
          <Button
            className={`${baseClass}__btn`}
            onClick={onCancel}
-            text="Cancel"
            type="input"
            variant="inverse"
-          />
+          >
+            Cancel
+          </Button>
        </div>
      </form>
    );
@@ -54,10 +54,11 @@ class LoginForm extends Component {
        <Button
          className={`${baseClass}__submit-btn`}
          onClick={handleSubmit}
-          text="Login"
          type="submit"
          variant="gradient"
-        />
+        >
+          Login
+        </Button>
      </form>
    );
  }
@@ -34,10 +34,11 @@ class LogoutForm extends Component {
        <Button
          className={`${baseClass}__submit-btn`}
          onClick={onFormSubmit}
-          text="Logout"
          type="submit"
          variant="gradient"
-        />
+        >
+          Logout
+        </Button>
      </form>
    );
  }
@@ -56,12 +56,9 @@ class AdminDetails extends Component {
            tabIndex={tabIndex}
          />
        </div>
-        <Button
-          onClick={handleSubmit}
-          text="Submit"
-          variant="gradient"
-          tabIndex={tabIndex}
-        />
+        <Button onClick={handleSubmit} variant="gradient" tabIndex={tabIndex}>
+          Submit
+        </Button>
      </div>
    );
  }
@@ -71,12 +71,9 @@ class ConfirmationPage extends Component {
          </div>
        </div>

-        <Button
-          onClick={onSubmit}
-          text="Finish"
-          variant="gradient"
-          className={`${baseClass}__submit`}
-        />
+        <Button onClick={onSubmit} variant="gradient" className={`${baseClass}__submit`}>
+          Finish
+        </Button>
      </div>
    );
  }
@@ -33,12 +33,9 @@ class KolideDetails extends Component {
            hint={['Don’t include ', <code key="hint">/v1</code>, ' or any other path']}
          />
        </div>
-        <Button
-          onClick={handleSubmit}
-          text="Submit"
-          variant="gradient"
-          tabIndex={tabIndex}
-        />
+        <Button onClick={handleSubmit} variant="gradient" tabIndex={tabIndex}>
+          Submit
+        </Button>
      </div>
    );
  }
@@ -39,12 +39,9 @@ class OrgDetails extends Component {
            hint="must start with https://"
          />
        </div>
-        <Button
-          onClick={handleSubmit}
-          text="Submit"
-          variant="gradient"
-          tabIndex={tabIndex}
-        />
+        <Button onClick={handleSubmit} variant="gradient" tabIndex={tabIndex}>
+          Submit
+        </Button>
      </div>
    );
  }
@@ -42,10 +42,11 @@ class ResetPasswordForm extends Component {
          <Button
            onClick={handleSubmit}
            className={`${baseClass}__btn`}
-            text="Reset Password"
            type="submit"
            variant="gradient"
-          />
+          >
+            Reset Password
+          </Button>
        </div>
      </form>
    );
@@ -44,17 +44,8 @@ class UserSettingsForm extends Component {
          label="Position"
        />
        <div className={`${baseClass}__button-wrap`}>
-          <Button
-            onClick={onCancel}
-            text="CANCEL"
-            type="button"
-            variant="inverse"
-          />
-          <Button
-            text="UPDATE"
-            type="submit"
-            variant="brand"
-          />
+          <Button onClick={onCancel} variant="inverse">CANCEL</Button>
+          <Button type="submit" variant="brand">UPDATE</Button>
        </div>
      </form>
    );
@@ -161,7 +161,7 @@ class AppConfigForm extends Component {
          <div className={`${baseClass}__details`}>
            <p>What base URL should <strong>osqueryd</strong> clients user to connect and register with <strong>Kolide</strong>?</p>
            <p className={`${baseClass}__note`}><strong>Note:</strong>Please ensure the URL you choose is accessible to all endpoints that need to communicate with Kolide, otherwise they will not be able to correctly register.</p>
-            <Button text="SEND TEST" variant="inverse" />
+            <Button variant="inverse">SEND TEST</Button>
          </div>
        </div>
        <div className={`${baseClass}__section`}>
@@ -212,10 +212,11 @@ class AppConfigForm extends Component {
          {renderAdvancedOptions()}
        </div>
        <Button
-          text="UPDATE SETTINGS"
          type="submit"
          variant="brand"
-        />
+        >
+          UPDATE SETTINGS
+        </Button>
      </form>
    );
  }
@@ -56,16 +56,18 @@ class EditUserForm extends Component {
        <div className={`${baseClass}__btn-wrap`}>
          <Button
            className={`${baseClass}__form-btn ${baseClass}__form-btn--submit`}
-            text="Submit"
            type="submit"
            variant="brand"
-          />
+          >
+            Submit
+          </Button>
          <Button
            className={`${baseClass}__form-btn`}
            onClick={onCancel}
-            text="Cancel"
            variant="inverse"
-          />
+          >
+            Cancel
+          </Button>
        </div>
      </form>
    );
@@ -29,17 +29,8 @@ class EditPackForm extends Component {
        <InputField
          {...fields.description}
        />
-        <Button
-          onClick={onCancel}
-          text="CANCEL"
-          type="button"
-          variant="inverse"
-        />
-        <Button
-          text="SAVE"
-          type="submit"
-          variant="brand"
-        />
+        <Button onClick={onCancel} type="button" variant="inverse">CANCEL</Button>
+        <Button type="submit" variant="brand">SAVE</Button>
      </form>
    );
  }
@@ -44,9 +44,9 @@ describe('EditPackForm - component', () => {
    it('calls the onCancel prop when "CANCEL" is clicked', () => {
      const spy = createSpy();
      const form = mount(<EditPackForm formData={packStub} handleSubmit={noop} onCancel={spy} />);
-      const cancelBtn = form.find('Button').findWhere(f => f.prop('text') === 'CANCEL');
+      const cancelBtn = form.find('Button').find({ children: 'CANCEL' });

-      cancelBtn.simulate('click');
+      cancelBtn.first().simulate('click');

      expect(spy).toHaveBeenCalled();
    });
@@ -62,11 +62,9 @@ class PackForm extends Component {
          />
        </div>
        <div className={`${baseClass}__pack-buttons`}>
-          <Button
-            text="Save Query pack"
-            type="submit"
-            variant="brand"
-          />
+          <Button type="submit" variant="brand">
+            Save Query Pack
+          </Button>
        </div>
      </form>
    );
@@ -180,18 +180,20 @@ class QueryForm extends Component {
        <Button
          className={`${baseClass}__stop-query-btn`}
          onClick={onStopQuery}
-          text="Stop Query"
          variant="alert"
-        />
+        >
+          Stop Query
+        </Button>
      );
    } else {
      runQueryButton = (
        <Button
          className={`${baseClass}__run-query-btn`}
          onClick={onRunQuery}
-          text="Run Query"
          variant="brand"
-        />
+        >
+          Run Query
+        </Button>
      );
    }

@@ -201,16 +203,18 @@ class QueryForm extends Component {
          <Button
            className={`${baseClass}__save-changes-btn`}
            onClick={onCancel}
-            text="Cancel"
            variant="inverse"
-          />
+          >
+            Cancel
+          </Button>
          <Button
            className={`${baseClass}__save-as-new-btn`}
            disabled={!canSaveAsNew(formData, query)}
            onClick={onSave}
-            text="Save Label"
            variant="brand"
-          />
+          >
+            Save Label
+          </Button>
        </div>
      );
    }
@@ -221,16 +225,18 @@ class QueryForm extends Component {
          className={`${baseClass}__save-changes-btn`}
          disabled={!canSaveChanges(formData, query)}
          onClick={onUpdate}
-          text="Save Changes"
          variant="inverse"
-        />
+        >
+          Save Changes
+        </Button>
        <Button
          className={`${baseClass}__save-as-new-btn`}
          disabled={!canSaveAsNew(formData, query)}
          onClick={onSave}
-          text="Save As New..."
          variant="success"
-        />
+        >
+          Save As New...
+        </Button>
        {runQueryButton}
      </div>
    );
@@ -44,12 +44,7 @@ class EditPackFormWrapper extends Component {

    return (
      <div className={className}>
-        <Button
-          onClick={onEditPack}
-          text="EDIT"
-          type="button"
-          variant="brand"
-        />
+        <Button onClick={onEditPack} variant="brand">EDIT</Button>
        <h1><Icon name="packs" /> {pack.name}</h1>
        <p>{pack.description}</p>
        <SelectTargetsDropdown
@@ -39,12 +39,13 @@ describe('EditPackFormWrapper - component', () => {
    const spy = createSpy();
    const component = mount(
      <EditPackFormWrapper
+        isEdit={false}
        onCancelEditPack={noop}
        onEditPack={spy}
        pack={packStub}
      />
    );
-    const editBtn = component.find('Button').findWhere(b => b.prop('text') === 'EDIT');
+    const editBtn = component.find('Button').find({ children: 'EDIT' });

    editBtn.simulate('click');

@@ -87,9 +87,10 @@ class QueriesListWrapper extends Component {
        <Button
          className={`${baseClass}__query-btn`}
          onClick={onRemoveScheduledQueries}
-          text={`Remove ${queryText}`}
          variant="alert"
-        />
+        >
+          Remove {queryText}
+        </Button>
      );
    }

@@ -25,8 +25,8 @@ describe('QueriesListWrapper - component', () => {

    component.find('Checkbox').last().find('input').simulate('change');

-    const addQueryBtn = component.find('Button').findWhere(b => b.prop('text') === 'Add New Query');
-    const removeQueryBtn = component.find('Button').findWhere(b => b.prop('text') === 'Remove Query');
+    const addQueryBtn = component.find('Button').find({ children: 'Add New Query' });
+    const removeQueryBtn = component.find('Button').find({ children: ['Remove ', 'Query'] });

    expect(addQueryBtn.length).toEqual(0);
    expect(removeQueryBtn.length).toEqual(1);
@@ -44,7 +44,7 @@ describe('QueriesListWrapper - component', () => {

    component.find('Checkbox').last().find('input').simulate('change');

-    const removeQueryBtn = component.find('Button').findWhere(b => b.prop('text') === 'Remove Query');
+    const removeQueryBtn = component.find('Button').find({ children: ['Remove ', 'Query'] });

    removeQueryBtn.simulate('click');

@@ -17,8 +17,8 @@ const SmtpWarning = ({ onDismiss, shouldShowWarning }) => {
        <span className={`${baseClass}__label`}>Warning!</span>
      </div>
      <span className={`${baseClass}__text`}>Email is not currently configured in Kolide. Many features rely on email to work.</span>
-      <Button onClick={onDismiss} text="Dismiss" variant="unstyled" />
-      <Button text="Resolve" variant="unstyled" />
+      <Button onClick={onDismiss} variant="unstyled">Dismiss</Button>
+      <Button variant="unstyled">Resolve</Button>
    </div>
  );
 };
@@ -192,11 +192,9 @@ class UserManagementPage extends Component {
      <div className={`${baseClass} body-wrap`}>
        <h1 className={`${baseClass}__user-count`}>Listing {resourcesCount} users</h1>
        <div className={`${baseClass}__add-user-wrap`}>
-          <Button
-            onClick={toggleInviteUserModal}
-            className={`${baseClass}__add-user-btn`}
-            text="Add User"
-          />
+          <Button onClick={toggleInviteUserModal} className={`${baseClass}__add-user-btn`}>
+            Add User
+          </Button>
        </div>
        <div className={`${baseClass}__users`}>
          {users.map((user) => {
@@ -138,9 +138,13 @@ class UserSettingsPage extends Component {
            <Icon name="lock-big" />
            <strong>Password</strong>
          </div>
-          <Button onClick={onShowModal} text="CHANGE PASSWORD" variant="brand" className={`${baseClass}__button`} />
+          <Button onClick={onShowModal} variant="brand" className={`${baseClass}__button`}>
+            CHANGE PASSWORD
+          </Button>
          <p className={`${baseClass}__last-updated`}>Last changed: {lastUpdatedAt}</p>
-          <Button onClick={onLogout} text="LOGOUT" variant="alert" className={`${baseClass}__button`} />
+          <Button onClick={onLogout} variant="alert" className={`${baseClass}__button`}>
+            LOGOUT
+          </Button>
        </div>
        {renderModal()}
      </div>
@@ -63,11 +63,9 @@ class AllPacksPage extends Component {
            Query Packs
          </p>
          <div className={`${baseClass}__new_pack`}>
-            <Button
-              text="CREATE NEW PACK"
-              variant="brand"
-              onClick={goToNewPackPage}
-            />
+            <Button variant="brand" onClick={goToNewPackPage}>
+              CREATE NEW PACK
+            </Button>
          </div>
          <table className={`${baseClass}__table`}>
            <thead>