ui: Search view - Fixes the color style of the filter icon (#4917)

* fixes the color style of the filter icon

* fixes for router leave/enter

ui/src/components/view/SearchView.vue

@@ -40,7 +40,7 @@
           slot="addonBefore"
           trigger="click"
           v-model="visibleFilter">
-          <template slot="content">
+          <template slot="content" v-if="visibleFilter">
             <a-form
               style="min-width: 170px"
               :form="form"
@@ -104,7 +104,7 @@
             class="filter-button"
             size="small"
             @click="() => { searchQuery = null }">
-            <a-icon type="filter" :theme="Object.keys(searchParams).length > 0 ? 'twoTone' : 'outlined'" />
+            <a-icon type="filter" :theme="isFiltered ? 'twoTone' : 'outlined'" />
           </a-button>
         </a-popover>
       </a-input-search>
@@ -140,7 +140,8 @@ export default {
       fields: [],
       inputKey: null,
       inputValue: null,
-      fieldValues: {}
+      fieldValues: {},
+      isFiltered: false
     }
   },
   beforeCreate () {
@@ -157,6 +158,13 @@ export default {
       if (to && to.query && 'q' in to.query) {
         this.searchQuery = to.query.q
       }
+      this.isFiltered = false
+      this.searchFilters.some(item => {
+        if (this.searchParams[item]) {
+          this.isFiltered = true
+          return true
+        }
+      })
     }
   },
   mounted () {
@@ -417,6 +425,7 @@ export default {
         field[item] = undefined
         this.form.setFieldsValue(field)
       })
+      this.isFiltered = false
       this.inputKey = null
       this.inputValue = null
       this.searchQuery = null
@@ -430,6 +439,7 @@ export default {
         if (err) {
           return
         }
+        this.isFiltered = true
         for (const key in values) {
           const input = values[key]
           if (input === '' || input === null || input === undefined) {