Now save response filter on request

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,

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 {
           <table className="pad-top-sm">
             <tbody>
             <tr>
-              <td><code className="selectable">$.store.books[*].title</code></td>
+              <td><code className="selectable">$.store.books[*].title</code>
+              </td>
               <td>Get titles of all books in the store</td>
             </tr>
             <tr>
-              <td><code className="selectable">$.store.books[?(@.price &lt; 10)].title</code></td>
+              <td><code className="selectable">$.store.books[?(@.price &lt;
+                10)].title</code></td>
               <td>Get books costing more than $10</td>
             </tr>
             <tr>
@@ -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 = (
         <div className="editor__filter">
           <div className="form-control form-control--outlined">
             <input
               type="text"
+              defaultValue={filter || ''}
               placeholder="$.store.book[*].author"
               onChange={e => this._handleFilterChange(e.target.value)}
             />
@@ -310,7 +312,7 @@ class Editor extends Component {
           readOnly={readOnly}
           autoComplete='off'>
         </textarea>
-        {filter}
+        {filterElement}
       </div>
     );
   }
@@ -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;

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 (
-        <ResponseError
-          url={url}
-          error={body}
-        />
+        <ResponseError url={url} error={body}/>
       )
     }
 
@@ -51,7 +50,8 @@ class ResponseViewer extends Component {
         return (
           <Editor
             value={body || ''}
-            showFilter={true}
+            updateFilter={updateFilter}
+            filter={filter}
             prettify={true}
             mode={contentType}
             readOnly={true}
@@ -74,11 +74,13 @@ class ResponseViewer extends Component {
 ResponseViewer.propTypes = {
   body: PropTypes.string.isRequired,
   previewMode: PropTypes.string.isRequired,
+  filter: PropTypes.string.isRequired,
   editorFontSize: PropTypes.number.isRequired,
   editorLineWrapping: PropTypes.bool.isRequired,
   url: PropTypes.string.isRequired,
 
   // Optional
+  updateFilter: PropTypes.func,
   contentType: PropTypes.string,
   error: PropTypes.bool
 };

app/containers/App.js

@@ -513,7 +513,9 @@ class App extends Component {
           editorFontSize={settings.editorFontSize}
           editorLineWrapping={settings.editorLineWrapping}
           previewMode={activeRequest ? activeRequest.metaPreviewMode : PREVIEW_MODE_FRIENDLY}
+          responseFilter={activeRequest ? activeRequest.metaResponseFilter : ''}
           updatePreviewMode={metaPreviewMode => db.requestUpdate(activeRequest, {metaPreviewMode})}
+          updateResponseFilter={metaResponseFilter => db.requestUpdate(activeRequest, {metaResponseFilter})}
           loadingRequests={requests.loadingRequests}
           showCookiesModal={() => getModal(CookiesModal).show(workspace)}
         />

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;

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 {

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;

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]: () => ({