diff --git a/app/components/ResponsePane.js b/app/components/ResponsePane.js index 2e84b54714..4ede6887f3 100644 --- a/app/components/ResponsePane.js +++ b/app/components/ResponsePane.js @@ -44,9 +44,11 @@ class ResponsePane extends Component { request, previewMode, updatePreviewMode, + updateResponseFilter, loadingRequests, editorLineWrapping, editorFontSize, + responseFilter, showCookiesModal } = this.props; @@ -184,6 +186,8 @@ class ResponsePane extends Component { key={response._id} contentType={response.contentType} previewMode={response.error ? PREVIEW_MODE_SOURCE : previewMode} + filter={response.error ? '' : responseFilter} + updateFilter={response.error ? null : updateResponseFilter} body={response.error ? response.error : response.body} error={!!response.error} editorLineWrapping={editorLineWrapping} @@ -213,10 +217,12 @@ class ResponsePane extends Component { ResponsePane.propTypes = { // Functions updatePreviewMode: PropTypes.func.isRequired, + updateResponseFilter: PropTypes.func.isRequired, showCookiesModal: PropTypes.func.isRequired, // Required previewMode: PropTypes.string.isRequired, + responseFilter: PropTypes.string.isRequired, loadingRequests: PropTypes.object.isRequired, editorFontSize: PropTypes.number.isRequired, editorLineWrapping: PropTypes.bool.isRequired, diff --git a/app/components/base/Editor.js b/app/components/base/Editor.js index 69f08188cc..fd7bb53ff9 100644 --- a/app/components/base/Editor.js +++ b/app/components/base/Editor.js @@ -67,10 +67,10 @@ const BASE_CODEMIRROR_OPTIONS = { }; class Editor extends Component { - constructor () { - super(); + constructor (props) { + super(props); this.state = { - filter: '' + filter: props.filter || '' }; this._originalCode = ''; } @@ -206,12 +206,8 @@ class Editor extends Component { try { let obj = JSON.parse(code); - if (this.state.filter) { - obj = JSONPath({ - json: obj, - path: this.state.filter - }); - console.log('OBJ', obj); + if (this.props.updateFilter && this.state.filter) { + obj = JSONPath({json: obj, path: this.state.filter}); } code = JSON.stringify(obj, null, '\t'); @@ -229,6 +225,9 @@ class Editor extends Component { this._filterTimeout = setTimeout(() => { this.setState({filter}); this._codemirrorSetValue(this._originalCode); + if (this.props.updateFilter) { + this.props.updateFilter(filter); + } }, DEBOUNCE_MILLIS); } @@ -245,11 +244,13 @@ class Editor extends Component { - + - + @@ -272,7 +273,7 @@ class Editor extends Component { } render () { - const {readOnly, fontSize, lightTheme, mode} = this.props; + const {readOnly, fontSize, lightTheme, mode, filter} = this.props; const classes = classnames( 'editor', @@ -284,13 +285,14 @@ class Editor extends Component { } ); - let filter = null; - if (this._isJSON(mode)) { - filter = ( + let filterElement = null; + if (this.props.updateFilter && this._isJSON(mode)) { + filterElement = (
this._handleFilterChange(e.target.value)} /> @@ -310,7 +312,7 @@ class Editor extends Component { readOnly={readOnly} autoComplete='off'> - {filter} + {filterElement}
); } @@ -327,7 +329,8 @@ Editor.propTypes = { prettify: PropTypes.bool, className: PropTypes.any, lightTheme: PropTypes.bool, - showFilter: PropTypes.bool + updateFilter: PropTypes.func, + filter: PropTypes.string }; export default Editor; diff --git a/app/components/viewers/ResponseViewer.js b/app/components/viewers/ResponseViewer.js index e6637a3fe3..9e2c74077c 100644 --- a/app/components/viewers/ResponseViewer.js +++ b/app/components/viewers/ResponseViewer.js @@ -21,9 +21,11 @@ class ResponseViewer extends Component { render () { const { previewMode, + filter, contentType, editorLineWrapping, editorFontSize, + updateFilter, body, url, error @@ -31,10 +33,7 @@ class ResponseViewer extends Component { if (error) { return ( - + ) } @@ -51,7 +50,8 @@ class ResponseViewer extends Component { return ( db.requestUpdate(activeRequest, {metaPreviewMode})} + updateResponseFilter={metaResponseFilter => db.requestUpdate(activeRequest, {metaResponseFilter})} loadingRequests={requests.loadingRequests} showCookiesModal={() => getModal(CookiesModal).show(workspace)} /> diff --git a/app/css/components/editor.less b/app/css/components/editor.less index 808c795eb3..c2be88667c 100644 --- a/app/css/components/editor.less +++ b/app/css/components/editor.less @@ -8,6 +8,7 @@ width: 100%; display: grid; grid-template-rows: 1fr auto; + grid-template-columns: 100%; .editor__filter { display: flex; diff --git a/app/css/components/scrollbars.less b/app/css/components/scrollbars.less index 2dbfdd203a..6caccc30d9 100644 --- a/app/css/components/scrollbars.less +++ b/app/css/components/scrollbars.less @@ -2,8 +2,8 @@ @import '../constants/dimensions'; ::-webkit-scrollbar { - width: @padding-sm; - height: @padding-sm; + width: @scrollbar-width; + height: @scrollbar-width; } ::-webkit-scrollbar-track { diff --git a/app/css/constants/dimensions.less b/app/css/constants/dimensions.less index f93c1d7b26..f69b0a83b1 100644 --- a/app/css/constants/dimensions.less +++ b/app/css/constants/dimensions.less @@ -27,6 +27,9 @@ /* Sidebar */ @sidebar-width: 19rem; +/* Scrollbars */ +@scrollbar-width: 0.8rem; + /* Borders */ @radius-sm: 0.15rem; @radius-md: 0.3rem; diff --git a/app/database/index.js b/app/database/index.js index a015701c88..d25ea84d6e 100644 --- a/app/database/index.js +++ b/app/database/index.js @@ -85,6 +85,7 @@ export const MODEL_DEFAULTS = { headers: [], authentication: {}, metaPreviewMode: PREVIEW_MODE_SOURCE, + metaResponseFilter: '', metaSortKey: -1 * Date.now() }), [TYPE_RESPONSE]: () => ({
$.store.books[*].title$.store.books[*].title + Get titles of all books in the store
$.store.books[?(@.price < 10)].title$.store.books[?(@.price < + 10)].title Get books costing more than $10