Skip to content

Commit

Permalink
Merge pull request #132 from hdwilber/feature/request-fields_aligned
Browse files Browse the repository at this point in the history
Request inputs aligned in one line for better vertical space use #79
  • Loading branch information
Espen Henriksen authored Apr 15, 2018
2 parents d1f3138 + 39f9c01 commit d650434
Show file tree
Hide file tree
Showing 9 changed files with 340 additions and 190 deletions.
39 changes: 14 additions & 25 deletions src/components/Request/MethodField.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,33 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Col, Row, FormGroup, FormControl, ControlLabel, Button } from 'react-bootstrap';
import { Col, Row, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';

import * as Actions from 'store/config/actions';
import { isEditMode } from 'store/config/selectors';
import { REQUEST_METHODS } from 'constants/constants';

function MethodField({ input, meta, editMode }) {
const isCustom = !REQUEST_METHODS.slice(0, -1).includes(input.value);
export function checkIfCustom(value) {
return !REQUEST_METHODS.slice(0, -1).includes(value);
}
function MethodField({ input, meta }) {
const isCustom = checkIfCustom(input.value);

return (
<FormGroup
controlId="method"
validationState={meta.invalid ? 'error' : undefined}
>
<Col
componentClass={ControlLabel}
sm={2}
>
Method
</Col>

<Col sm={7}>
<Col xs={12}>
<Row>
<Col xs={isCustom ? 6 : 12}>

<ControlLabel
srOnly
>
Method
</ControlLabel>

<FormControl
componentClass="select"
placeholder="Method"
Expand All @@ -44,26 +48,11 @@ function MethodField({ input, meta, editMode }) {
)}
</Row>
</Col>
<Col sm={3}>
{editMode
? (
<Button type="submit" bsStyle="success">
Update request
</Button>
)
: (
<Button type="submit" bsStyle="primary">
Send request
</Button>
)
}
</Col>
</FormGroup>
);
}

MethodField.propTypes = {
editMode: PropTypes.bool.isRequired,
/* eslint-disable react/forbid-prop-types */
input: PropTypes.object.isRequired,
meta: PropTypes.object.isRequired,
Expand Down
27 changes: 27 additions & 0 deletions src/components/Request/SubmitButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { PropTypes } from 'react';
import { Button } from 'react-bootstrap';

function SubmitButton(props) {
if (props.editMode) {
return (
<Button type="submit" bsStyle="success" block>
{(props.compact ? 'Update' : 'Update request')}
</Button>
);
}

return (
<Button type="submit" bsStyle="primary" block>
{(props.compact ? 'Send' : 'Send request')}
</Button>
);
}

SubmitButton.propTypes = {
editMode: PropTypes.bool.isRequired,
compact: PropTypes.bool,
/* eslint-enable react/forbid-prop-types */
};

export default SubmitButton;

17 changes: 8 additions & 9 deletions src/components/Request/URLField.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import React, { PropTypes } from 'react';
import { Col, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';

function URLField({ input, meta, placeholderUrl }) {
function URLField(props) {
const { input, meta, placeholderUrl } = props;
return (
<FormGroup
controlId="url"
validationState={meta.touched && meta.invalid ? 'error' : null}
>
<Col
componentClass={ControlLabel}
sm={2}
>
URL
</Col>

<Col sm={10}>
<Col sm={12}>
<ControlLabel
srOnly
>
URL
</ControlLabel>
<FormControl
type="text"
placeholder={placeholderUrl}
Expand Down
38 changes: 27 additions & 11 deletions src/components/Request/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field, Fields, FieldArray, getFormValues } from 'redux-form';
import { Panel, Form } from 'react-bootstrap';
import { Row, Col, Panel, Form } from 'react-bootstrap';
import flow from 'lodash.flow';

import * as requestActions from 'store/request/actions';
Expand All @@ -11,7 +11,8 @@ import { DEFAULT_REQUEST } from 'constants/constants';

import Titlebar from './Titlebar';
import URLField from './URLField';
import MethodField from './MethodField';
import MethodField, { checkIfCustom } from './MethodField';
import SubmitButton from './SubmitButton';
import HeadersField from './HeadersField';
import BasicAuthField from './BasicAuthField';
import BodyField from './BodyField';
Expand All @@ -28,21 +29,36 @@ function Request(props) {
editMode,
} = props;

const isCustom = checkIfCustom(formValues.method);

return (
<Panel header={<Titlebar />}>
<Form
horizontal
onSubmit={handleSubmit(editMode ? updateRequest : sendRequest)}
>
<Field
name="url"
component={URLField}
placeholderUrl={placeholderUrl}
/>
<Field
name="method"
component={MethodField}
/>
<Row>
<Col sm={isCustom ? 4 : 2}>
<Field
name="method"
component={MethodField}
/>
</Col>
<Col sm={isCustom ? 6 : 7}>
<Field
name="url"
component={URLField}
placeholderUrl={placeholderUrl}
/>
</Col>
<Col xsHidden mdHidden lgHidden sm={3}>
<SubmitButton compact editMode={editMode} />
</Col>
<Col smHidden xs={12} md={3}>
<SubmitButton compact={false} editMode={editMode} />
</Col>
</Row>

<FieldArray
name="headers"
component={HeadersField}
Expand Down
87 changes: 87 additions & 0 deletions test/components/request/SubmitButton.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { mount } from 'enzyme';

/* eslint-disable import/no-unresolved */
import SubmitButton from 'components/Request/SubmitButton';

describe('SubmitButton', () => {
describe('EditMode: false', () => {
let initialProps;

beforeEach(() => {
initialProps = {
editMode: false,
};
});

it('should match the previous snapshot with editMode false', () => {
const tree = renderer
.create(<SubmitButton {...initialProps} />);

expect(tree).toMatchSnapshot();
});

it('should render a submit button with a New Request Label', () => {
const tree = mount(
<SubmitButton {...initialProps} />,
);

expect(tree.find('button').length).toBe(1);
expect(tree.find('button').text()).toBe('Send request');
});
});

describe('EditMode: true', () => {
let initialProps;

beforeEach(() => {
initialProps = {
editMode: true,
};
});

it('should match the previous snapshot with editMode true', () => {
const tree = renderer
.create(<SubmitButton {...initialProps} />);

expect(tree).toMatchSnapshot();
});

it('should render a submit button with Update label', () => {
const tree = mount(
<SubmitButton {...initialProps} />,
);
expect(tree.find('button').length).toBe(1);
expect(tree.find('button').text()).toBe('Update request');
});
});

describe('Compact: true', () => {
let initialProps;

beforeEach(() => {
initialProps = {
editMode: false,
compact: true,
};
});

it('should match the previous snapshot with compact true', () => {
const tree = renderer
.create(<SubmitButton {...initialProps} />);

expect(tree).toMatchSnapshot();
});

it('should render a submit button with a Compact Request Label', () => {
const tree = mount(
<SubmitButton {...initialProps} />,
);

expect(tree.find('button').length).toBe(1);
expect(tree.find('button').text()).toBe('Send');
});
});
});

50 changes: 14 additions & 36 deletions test/components/request/__snapshots__/MethodField.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@ exports[`MethodField should match the previous snapshot 1`] = `
<div
className="form-group"
>
<label
className="col-sm-2 control-label"
htmlFor="method"
>
Method
</label>
<div
className="col-sm-7"
className="col-xs-12"
>
<div
className="row"
>
<div
className="col-xs-6"
>
<label
className="control-label sr-only"
htmlFor="method"
>
Method
</label>
<select
className="form-control"
id="method"
Expand Down Expand Up @@ -79,39 +79,28 @@ exports[`MethodField should match the previous snapshot 1`] = `
</div>
</div>
</div>
<div
className="col-sm-3"
>
<button
className="btn btn-primary"
disabled={false}
type="submit"
>
Send request
</button>
</div>
</div>
`;

exports[`MethodField should match the previous snapshot with invalid field state 1`] = `
<div
className="form-group has-error"
>
<label
className="col-sm-2 control-label"
htmlFor="method"
>
Method
</label>
<div
className="col-sm-7"
className="col-xs-12"
>
<div
className="row"
>
<div
className="col-xs-6"
>
<label
className="control-label sr-only"
htmlFor="method"
>
Method
</label>
<select
className="form-control"
id="method"
Expand Down Expand Up @@ -172,16 +161,5 @@ exports[`MethodField should match the previous snapshot with invalid field state
</div>
</div>
</div>
<div
className="col-sm-3"
>
<button
className="btn btn-primary"
disabled={false}
type="submit"
>
Send request
</button>
</div>
</div>
`;
Loading

0 comments on commit d650434

Please sign in to comment.