UI: Show applied search filters

Author: vishesh92

ui/src/views/AutogenView.vue

@@ -106,6 +106,14 @@
               @change-filter="changeFilter"/>
           </a-col>
         </a-row>
+        <a-row v-if="!dataView" style="min-height: 40px;" :wrap="true">
+          <a-col style="margin-top: 15px" v-for="filter in Object.keys($route.query)" :key="filter">
+            <a-tag v-if="!['page', 'pagesize', 'q', 'keyword'].includes(filter)" closable @close="removeFilter(filter)">
+              {{ $t('label.' + filter) === ('label.' + filter) ? filter : $t('label.' + filter) }}:
+              {{ $t('label.' + $route.query[filter].toLowerCase()) === ('label.' + $route.query[filter].toLowerCase()) ? $route.query[filter] : $t('label.' + $route.query[filter].toLowerCase()) }}
+            </a-tag>
+          </a-col>
+        </a-row>
       </a-card>
     </a-affix>
 
@@ -1105,6 +1113,11 @@ export default {
       eventBus.emit('action-closing', { action: this.currentAction })
       this.closeAction()
     },
+    removeFilter (filter) {
+      const queryParams = Object.assign({}, this.$route.query)
+      delete queryParams[filter]
+      this.onSearch(queryParams)
+    },
     onRowSelectionChange (selection) {
       this.selectedRowKeys = selection
       if (selection?.length > 0) {