Add latest changes from gitlab-org/gitlab@13-4-stable-ee

3 files changed, 167 insertions, 0 deletions

diff --git a/app/assets/javascripts/search/state_filter/components/state_filter.vue b/app/assets/javascripts/search/state_filter/components/state_filter.vue
new file mode 100644
index 00000000000..f08adaf8c83
--- /dev/null
+++ b/app/assets/javascripts/search/state_filter/components/state_filter.vue
@@ -0,0 +1,94 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+import {
+  FILTER_STATES,
+  SCOPES,
+  FILTER_STATES_BY_SCOPE,
+  FILTER_HEADER,
+  FILTER_TEXT,
+} from '../constants';
+import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
+
+const FILTERS_ARRAY = Object.values(FILTER_STATES);
+
+export default {
+  name: 'StateFilter',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+  },
+  props: {
+    scope: {
+      type: String,
+      required: true,
+    },
+    state: {
+      type: String,
+      required: false,
+      default: FILTER_STATES.ANY.value,
+      validator: v => FILTERS_ARRAY.some(({ value }) => value === v),
+    },
+  },
+  computed: {
+    selectedFilterText() {
+      const filter = FILTERS_ARRAY.find(({ value }) => value === this.selectedFilter);
+      if (!filter || filter === FILTER_STATES.ANY) {
+        return FILTER_TEXT;
+      }
+
+      return filter.label;
+    },
+    showDropdown() {
+      return Object.values(SCOPES).includes(this.scope);
+    },
+    selectedFilter: {
+      get() {
+        if (FILTERS_ARRAY.some(({ value }) => value === this.state)) {
+          return this.state;
+        }
+
+        return FILTER_STATES.ANY.value;
+      },
+      set(state) {
+        visitUrl(setUrlParams({ state }));
+      },
+    },
+  },
+  methods: {
+    dropDownItemClass(filter) {
+      return {
+        'gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-pb-2! gl-mb-2':
+          filter === FILTER_STATES.ANY,
+      };
+    },
+    isFilterSelected(filter) {
+      return filter === this.selectedFilter;
+    },
+    handleFilterChange(state) {
+      this.selectedFilter = state;
+    },
+  },
+  filterStates: FILTER_STATES,
+  filterHeader: FILTER_HEADER,
+  filtersByScope: FILTER_STATES_BY_SCOPE,
+};
+</script>
+
+<template>
+  <gl-dropdown v-if="showDropdown" :text="selectedFilterText" class="col-sm-3 gl-pt-4 gl-pl-0">
+    <header class="gl-text-center gl-font-weight-bold gl-font-lg">
+      {{ $options.filterHeader }}
+    </header>
+    <gl-dropdown-divider />
+    <gl-dropdown-item
+      v-for="filter in $options.filtersByScope[scope]"
+      :key="filter.value"
+      :is-check-item="true"
+      :is-checked="isFilterSelected(filter.value)"
+      :class="dropDownItemClass(filter)"
+      @click="handleFilterChange(filter.value)"
+      >{{ filter.label }}</gl-dropdown-item
+    >
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/search/state_filter/constants.js b/app/assets/javascripts/search/state_filter/constants.js
new file mode 100644
index 00000000000..2f11cab9044
--- /dev/null
+++ b/app/assets/javascripts/search/state_filter/constants.js
@@ -0,0 +1,39 @@
+import { __ } from '~/locale';
+
+export const FILTER_HEADER = __('Status');
+
+export const FILTER_TEXT = __('Any Status');
+
+export const FILTER_STATES = {
+  ANY: {
+    label: __('Any'),
+    value: 'all',
+  },
+  OPEN: {
+    label: __('Open'),
+    value: 'opened',
+  },
+  CLOSED: {
+    label: __('Closed'),
+    value: 'closed',
+  },
+  MERGED: {
+    label: __('Merged'),
+    value: 'merged',
+  },
+};
+
+export const SCOPES = {
+  ISSUES: 'issues',
+  MERGE_REQUESTS: 'merge_requests',
+};
+
+export const FILTER_STATES_BY_SCOPE = {
+  [SCOPES.ISSUES]: [FILTER_STATES.ANY, FILTER_STATES.OPEN, FILTER_STATES.CLOSED],
+  [SCOPES.MERGE_REQUESTS]: [
+    FILTER_STATES.ANY,
+    FILTER_STATES.OPEN,
+    FILTER_STATES.MERGED,
+    FILTER_STATES.CLOSED,
+  ],
+};
diff --git a/app/assets/javascripts/search/state_filter/index.js b/app/assets/javascripts/search/state_filter/index.js
new file mode 100644
index 00000000000..13708574cfb
--- /dev/null
+++ b/app/assets/javascripts/search/state_filter/index.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import StateFilter from './components/state_filter.vue';
+
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-search-filter-by-state');
+
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    components: {
+      StateFilter,
+    },
+    data() {
+      const { dataset } = this.$options.el;
+      return {
+        scope: dataset.scope,
+        state: dataset.state,
+      };
+    },
+
+    render(createElement) {
+      return createElement('state-filter', {
+        props: {
+          scope: this.scope,
+          state: this.state,
+        },
+      });
+    },
+  });
+};