1 files changed, 44 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue
index 62453a25f62..0825c3a76ea 100644
--- a/app/assets/javascripts/vue_shared/components/registry/registry_search.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/registry_search.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlSorting, GlSortingItem, GlFilteredSearch } from '@gitlab/ui';
+import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants';
 
 const ASCENDING_ORDER = 'asc';
 const DESCENDING_ORDER = 'desc';
@@ -45,18 +46,60 @@ export default {
     isSortAscending() {
       return this.sorting.sort === ASCENDING_ORDER;
     },
+    baselineQueryStringFilters() {
+      return this.tokens.reduce((acc, curr) => {
+        acc[curr.type] = '';
+        return acc;
+      }, {});
+    },
   },
   methods: {
+    generateQueryData({ sorting = {}, filter = [] } = {}) {
+      // Ensure that we clean up the query when we remove a token from the search
+      const result = { ...this.baselineQueryStringFilters, ...sorting, search: [] };
+
+      filter.forEach((f) => {
+        if (f.type === FILTERED_SEARCH_TERM) {
+          result.search.push(f.value.data);
+        } else {
+          result[f.type] = f.value.data;
+        }
+      });
+      return result;
+    },
     onDirectionChange() {
       const sort = this.isSortAscending ? DESCENDING_ORDER : ASCENDING_ORDER;
+      const newQueryString = this.generateQueryData({
+        sorting: { ...this.sorting, sort },
+        filter: this.filter,
+      });
       this.$emit('sorting:changed', { sort });
+      this.$emit('query:changed', newQueryString);
     },
     onSortItemClick(item) {
+      const newQueryString = this.generateQueryData({
+        sorting: { ...this.sorting, orderBy: item },
+        filter: this.filter,
+      });
       this.$emit('sorting:changed', { orderBy: item });
+      this.$emit('query:changed', newQueryString);
+    },
+    submitSearch() {
+      const newQueryString = this.generateQueryData({
+        sorting: this.sorting,
+        filter: this.filter,
+      });
+      this.$emit('filter:submit');
+      this.$emit('query:changed', newQueryString);
     },
     clearSearch() {
+      const newQueryString = this.generateQueryData({
+        sorting: this.sorting,
+      });
+
       this.$emit('filter:changed', []);
       this.$emit('filter:submit');
+      this.$emit('query:changed', newQueryString);
     },
   },
 };
@@ -69,7 +112,7 @@ export default {
       class="gl-mr-4 gl-flex-fill-1"
       :placeholder="__('Filter results')"
       :available-tokens="tokens"
-      @submit="$emit('filter:submit')"
+      @submit="submitSearch"
       @clear="clearSearch"
     />
     <gl-sorting