Further updates to tweak UX:

- Don't show unnessecary logs in console
- Tweak handling of filter to provide better feedback upon JQ filter execution and errors by appropriately changing the border of the filter textbox
- Better UI under Load Filters modal
    - Add confirmation dialog when deleting filters
    - Make [x] into an actual button that only displays when hovering over the filter
    - Other CSS tweaks

Signed-off-by: Brian Goad <bdgoad@gmail.com>

src/css/skeleton.css

@@ -660,7 +660,7 @@ button:active {
     margin-top: auto;
     height: 20px;
     display: inline-block;
-    color: red;
+    color: #990000;
 }
 
 #filter {
@@ -669,6 +669,14 @@ button:active {
     margin-top: auto;
 }
 
+#filter.executed {
+    border: 3px solid #448abe
+}
+
+#filter.errored {
+    border: 2px solid #990000
+}
+
 #filterLabel {
     display: inherit;
 }
@@ -782,23 +790,46 @@ button:active {
 .saved-filter-wrapper {
     display: flex;
     justify-content: space-between;
+    margin: 0.2em 0;
+}
+
+.saved-filter-wrapper:hover {
+    border-top: 1px dashed #999;
+    border-bottom: 1px dashed #999;
 }
 
 .saved-filter {
     display: inline-block;
-    margin: 1rem 0 2.5rem 0;
+    margin: 0.5rem;
     cursor: pointer;
     white-space: pre-wrap;
     flex-grow: 1;
+    padding: 0.25em;
 }
 
 .saved-filter:hover {
     background-color: lightgray;
 }
 
-.remove-filter {
+.saved-filter-wrapper > button {
     display: inline-block;
-    margin: 1rem 0 2.5rem 1.5rem;
+    visibility: hidden;
+    margin: 0.25rem;
+    padding: 0.3em;
+    height: auto;
+    line-height: normal;
+    background: #FF6666;
+    color: #FFF;
+    letter-spacing: normal;
+}
+
+.saved-filter-wrapper:hover > button:hover {
+    border: 1px solid #333 !important;
+    background: #990000 !important;
+}
+
+.saved-filter-wrapper:hover > button {
+    visibility: visible;
 }
 
 .hidden {

src/ts/App/Components/braceEditor.tsx

@@ -79,7 +79,6 @@ export default class BraceEditor extends Component<BraceProps, BraceState> {
     editor.$blockScrolling = Infinity;
     editor.resize(true);
     editor.setShowPrintMargin(false);
-    console.log(options);
     editor.setOptions({
       ...options
     });

src/ts/App/filterBar.tsx

@@ -3,14 +3,16 @@ import { h, Component } from 'preact';
 export interface FilterBarProps {
   filter: string;
   updateFilter: (newFilter: string) => void;
+  filterStatus: string;
 }
 
 interface FilterBarState {
   value: string;
   lastValue: string;
+  filterStatus: string;
 }
 
-const WAIT_INTERVAL = 1000;
+const WAIT_INTERVAL = 1500;
 const ENTER_KEY = 13;
 
 export default class FilterBar extends Component<FilterBarProps, FilterBarState> {
@@ -20,7 +22,8 @@ export default class FilterBar extends Component<FilterBarProps, FilterBarState>
 
     this.state = {
       value: props.filter,
-      lastValue: ''
+      lastValue: '',
+      filterStatus: "clear"
     };
   }
 
@@ -30,7 +33,8 @@ export default class FilterBar extends Component<FilterBarProps, FilterBarState>
 
   componentWillReceiveProps(newProps: FilterBarProps) {
     this.setState({
-      value: newProps.filter
+      value: newProps.filter,
+      filterStatus: newProps.filterStatus
     });
   }
 
@@ -47,6 +51,8 @@ export default class FilterBar extends Component<FilterBarProps, FilterBarState>
   handleKeyDown = (e) => {
     this.handleChange(e);
     if (e.keyCode === ENTER_KEY) {
+      // Prevent calling triggerChange twice because of race condition
+      window.clearTimeout(this.timer);
       this.triggerChange();
     }
   }
@@ -62,7 +68,7 @@ export default class FilterBar extends Component<FilterBarProps, FilterBarState>
   }
 
   render() {
-    const { value } = this.state;
+    const { value, filterStatus } = this.state;
 
     return (
       <div class="one-half column">
@@ -72,6 +78,7 @@ export default class FilterBar extends Component<FilterBarProps, FilterBarState>
           name="filter"
           type="text"
           value={value}
+          class={filterStatus}
         />
       </div>
     );

src/ts/App/filterPicker.tsx

@@ -13,13 +13,20 @@ interface FilterPickerState {
 export default class FilterPicker extends Component<FilterPickerProps, FilterPickerState> {
 
   deleteFilter = (filter: string) => {
-    removeFilter(filter, () => this.loadFilters())
+    var confirmDelete = confirm("Are you sure you want to delete the following filter?\n\t" + filter);
+    if(confirmDelete == true) {
+      removeFilter(filter, () => this.loadFilters())
+    }
   }
 
   componentDidMount() {
     this.loadFilters();
   }
 
+  componentDidUpdate() {
+    this.loadFilters();
+  }
+
   loadFilters() {
     getFilters((filters) => {
       this.setState({
@@ -39,7 +46,7 @@ export default class FilterPicker extends Component<FilterPickerProps, FilterPic
         {filters.map(filter => (
           <div class='saved-filter-wrapper'>
             <pre class='saved-filter' onClick={() => props.close(filter)}>{filter}</pre>
-            <a href='#' class='remove-filter' title='Delete' onClick={() => this.deleteFilter(filter)}>X</a>
+            <button label='Delete' onClick={() => this.deleteFilter(filter)}>X</button>
           </div>
         ))}
       </Modal>;

src/ts/App/index.tsx

@@ -20,6 +20,7 @@ interface AppState {
   errors: string;
   options: Object;
   loading: boolean;
+  filterStatus: string;
 }
 
 export default class App extends Component<AppProps, AppState> {
@@ -32,6 +33,7 @@ export default class App extends Component<AppProps, AppState> {
       inputJson: props.inputJson,
       options: JSON.parse(props.options),
       loading: false,
+      filterStatus: "clear",
     };
   }
 
@@ -43,7 +45,8 @@ export default class App extends Component<AppProps, AppState> {
       this.setState({
         outputJson: msg.jqResult,
         errors: msg.error,
-        loading: false
+        loading: false,
+        filterStatus: msg.error ? "errored" : "clear"
       });
     });
     this.runJqFilter();
@@ -77,12 +80,12 @@ export default class App extends Component<AppProps, AppState> {
 
   runJqFilter = () => {
     const { inputJson, filter } = this.state;
-    this.setState({loading: true, errors: ""});
+    this.setState({loading: true, errors: "", filterStatus: "executed"});
     this.port.postMessage({ json: inputJson, filter: filter });
   }
 
   render() {
-    const { inputJson, outputJson, errors, filter, options, loading } = this.state;
+    const { inputJson, outputJson, errors, filter, filterStatus, options, loading } = this.state;
     const { documentUrl } = this.props;
     return <div>
       {!!this.state.loading && <LoadingBar /> }
@@ -95,7 +98,7 @@ export default class App extends Component<AppProps, AppState> {
         <div id="leftSideDiv" class="flex-column">
           <FilterHeaderBar filter={filter} documentUrl={documentUrl} updateFilter={this.updateFilter} />
           <div class="row">
-            <FilterBar filter={filter} updateFilter={this.updateFilter} />
+            <FilterBar filter={filter} updateFilter={this.updateFilter} filterStatus={filterStatus} />
             <Errors errors={errors} />
           </div>
         </div>

src/ts/App/inputOutput.tsx

@@ -30,6 +30,10 @@ export default class InputOutput extends Component<InputOutputProps, InputOutput
     const { hideUnfilteredJson } = this.state;
     const prettyInput = prettyJson(inputJson);
     const prettyOutput = prettyJson(outputJson);
+    // Remove extension specific options before passing to Brace 
+    // so that we don't get a misspelled option warning
+    delete options['liveUrlQuery'];
+    delete options['hideUnfilteredJsonByDefault'];
     const prettyOptions = options;
     return (
       <div class="row" id="editorDiv">