Fix zalando-incubator#350

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

src/css/skeleton.css

@@ -791,6 +791,8 @@ button:active {
     display: flex;
     justify-content: space-between;
     margin: 0.2em 0;
+    border-top: 1px solid #FFF;
+    border-bottom: 1px solid #FFF;
 }
 
 .saved-filter-wrapper:hover {
@@ -814,7 +816,7 @@ button:active {
 .saved-filter-wrapper > button {
     display: inline-block;
     visibility: hidden;
-    margin: 0.25rem;
+    margin: .5em 0.25rem;
     padding: 0.3em;
     height: auto;
     line-height: normal;
@@ -910,4 +912,4 @@ button:active {
     animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
 }
-
+

src/ts/App/filterPicker.tsx

@@ -23,10 +23,6 @@ export default class FilterPicker extends Component<FilterPickerProps, FilterPic
     this.loadFilters();
   }
 
-  componentDidUpdate() {
-    this.loadFilters();
-  }
-
   loadFilters() {
     getFilters((filters) => {
       this.setState({
@@ -37,16 +33,25 @@ export default class FilterPicker extends Component<FilterPickerProps, FilterPic
 
   render(props: FilterPickerProps, { filters }: FilterPickerState) {
     if (filters === undefined) {
-      return; //waiting for filters to load
+      return; // waiting for filters to load
     } else if (filters.length === 0) {
-      alert('You don\'t have any saved filters yet.');
+      alert('You don\'t have any saved filters.');
+      props.close(); // close out the modal if its showing
       return;
     } else {
       return <Modal close={() => props.close()}>
         {filters.map(filter => (
           <div class='saved-filter-wrapper'>
             <pre class='saved-filter' onClick={() => props.close(filter)}>{filter}</pre>
-            <button label='Delete' onClick={() => this.deleteFilter(filter)}>X</button>
+            <button label='Delete' onClick={() => {
+                this.deleteFilter(filter);
+                // if there was only one filter left (that has now been deleted),
+                // make sure to close the modal
+                if(filters.length === 1) { 
+                  props.close()
+                }
+              }
+            }>X</button>
           </div>
         ))}
       </Modal>;