1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue b/app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue
new file mode 100644
index 00000000000..b820ca837bc
--- /dev/null
+++ b/app/assets/javascripts/search/sidebar/components/language_filter/checkbox_filter.vue
@@ -0,0 +1,91 @@
+<script>
+import Vue from 'vue';
+import { GlFormCheckboxGroup, GlFormCheckbox } from '@gitlab/ui';
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { intersection } from 'lodash';
+import Tracking from '~/tracking';
+import { NAV_LINK_COUNT_DEFAULT_CLASSES, LABEL_DEFAULT_CLASSES } from '../../constants';
+import { formatSearchResultCount } from '../../../store/utils';
+
+export const TRACKING_LABEL_SET = 'set';
+export const TRACKING_LABEL_CHECKBOX = 'checkbox';
+
+export default {
+  name: 'CheckboxFilter',
+  components: {
+    GlFormCheckboxGroup,
+    GlFormCheckbox,
+  },
+  props: {
+    filtersData: {
+      type: Object,
+      required: true,
+    },
+    trackingNamespace: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['query', 'useNewNavigation']),
+    ...mapGetters(['queryLanguageFilters']),
+    dataFilters() {
+      return Object.values(this.filtersData?.filters || []);
+    },
+    flatDataFilterValues() {
+      return this.dataFilters.map(({ value }) => value);
+    },
+    selectedFilter: {
+      get() {
+        return intersection(this.flatDataFilterValues, this.queryLanguageFilters);
+      },
+      async set(value) {
+        this.setQuery({ key: this.filtersData?.filterParam, value });
+
+        await Vue.nextTick();
+        this.trackSelectCheckbox();
+      },
+    },
+    labelCountClasses() {
+      return [...NAV_LINK_COUNT_DEFAULT_CLASSES, 'gl-text-gray-500'];
+    },
+  },
+  methods: {
+    ...mapActions(['setQuery']),
+    getFormattedCount(count) {
+      return formatSearchResultCount(count);
+    },
+    trackSelectCheckbox() {
+      Tracking.event(this.trackingNamespace, TRACKING_LABEL_CHECKBOX, {
+        label: TRACKING_LABEL_SET,
+        property: this.selectedFilter,
+      });
+    },
+  },
+  NAV_LINK_COUNT_DEFAULT_CLASSES,
+  LABEL_DEFAULT_CLASSES,
+};
+</script>
+
+<template>
+  <gl-form-checkbox-group v-model="selectedFilter">
+    <gl-form-checkbox
+      v-for="f in dataFilters"
+      :key="f.label"
+      :value="f.label"
+      class="gl-flex-grow-1 gl-display-inline-flex gl-justify-content-space-between gl-w-full"
+      :class="$options.LABEL_DEFAULT_CLASSES"
+    >
+      <span
+        class="gl-flex-grow-1 gl-display-inline-flex gl-justify-content-space-between gl-w-full"
+      >
+        <span data-testid="label">
+          {{ f.label }}
+        </span>
+        <span v-if="f.count" :class="labelCountClasses" data-testid="labelCount">
+          {{ getFormattedCount(f.count) }}
+        </span>
+      </span>
+    </gl-form-checkbox>
+  </gl-form-checkbox-group>
+</template>