1 files changed, 100 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_filtered_search_bar.vue b/app/assets/javascripts/ci/runner/components/runner_filtered_search_bar.vue
new file mode 100644
index 00000000000..ee56fea8282
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_filtered_search_bar.vue
@@ -0,0 +1,100 @@
+<script>
+import { cloneDeep } from 'lodash';
+import { __ } from '~/locale';
+import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import { searchValidator } from '~/ci/runner/runner_search_utils';
+import { CREATED_DESC, CREATED_ASC, CONTACTED_DESC, CONTACTED_ASC } from '../constants';
+
+const sortOptions = [
+  {
+    id: 1,
+    title: __('Created date'),
+    sortDirection: {
+      descending: CREATED_DESC,
+      ascending: CREATED_ASC,
+    },
+  },
+  {
+    id: 2,
+    title: __('Last contact'),
+    sortDirection: {
+      descending: CONTACTED_DESC,
+      ascending: CONTACTED_ASC,
+    },
+  },
+];
+
+export default {
+  components: {
+    FilteredSearch,
+  },
+  props: {
+    value: {
+      type: Object,
+      required: true,
+      validator: searchValidator,
+    },
+    tokens: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    namespace: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    // filtered_search_bar_root.vue may mutate the initial
+    // filters. Use `cloneDeep` to prevent those mutations
+    // from affecting this component
+    const { filters, sort } = cloneDeep(this.value);
+    return {
+      initialFilterValue: filters,
+      initialSortBy: sort,
+    };
+  },
+  computed: {
+    validTokens() {
+      // Some filters are only available in EE
+      // EE-only tokens are represented by `null` or `undefined`
+      // values when in CE
+      return this.tokens.filter(Boolean);
+    },
+  },
+  methods: {
+    onFilter(filters) {
+      // Apply new filters, resetting pagination
+      this.$emit('input', {
+        ...this.value,
+        filters,
+        pagination: {},
+      });
+    },
+    onSort(sort) {
+      // Apply new sort, resetting pagination
+      this.$emit('input', {
+        ...this.value,
+        sort,
+        pagination: {},
+      });
+    },
+  },
+  sortOptions,
+};
+</script>
+<template>
+  <filtered-search
+    v-bind="$attrs"
+    :namespace="namespace"
+    recent-searches-storage-key="runners-search"
+    :sort-options="$options.sortOptions"
+    :initial-filter-value="initialFilterValue"
+    :tokens="validTokens"
+    :initial-sort-by="initialSortBy"
+    :search-input-placeholder="__('Search or filter results...')"
+    data-testid="runners-filtered-search"
+    @onFilter="onFilter"
+    @onSort="onSort"
+  />
+</template>