Add latest changes from gitlab-org/gitlab@master

6 files changed, 196 insertions, 107 deletions

diff --git a/app/assets/javascripts/search/components/dropdown_filter.vue b/app/assets/javascripts/search/components/dropdown_filter.vue
new file mode 100644
index 00000000000..cd9237026f2
--- /dev/null
+++ b/app/assets/javascripts/search/components/dropdown_filter.vue
@@ -0,0 +1,111 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
+import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
+import { sprintf, s__ } from '~/locale';
+
+export default {
+  name: 'DropdownFilter',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+  },
+  props: {
+    initialFilter: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    filters: {
+      type: Object,
+      required: true,
+    },
+    filtersArray: {
+      type: Array,
+      required: true,
+    },
+    header: {
+      type: String,
+      required: true,
+    },
+    param: {
+      type: String,
+      required: true,
+    },
+    scope: {
+      type: String,
+      required: true,
+    },
+    supportedScopes: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    filter() {
+      return this.initialFilter || this.filters.ANY.value;
+    },
+    selectedFilterText() {
+      const f = this.filtersArray.find(({ value }) => value === this.selectedFilter);
+      if (!f || f === this.filters.ANY) {
+        return sprintf(s__('Any %{header}'), { header: this.header });
+      }
+
+      return f.label;
+    },
+    showDropdown() {
+      return this.supportedScopes.includes(this.scope);
+    },
+    selectedFilter: {
+      get() {
+        if (this.filtersArray.some(({ value }) => value === this.filter)) {
+          return this.filter;
+        }
+
+        return this.filters.ANY.value;
+      },
+      set(filter) {
+        visitUrl(setUrlParams({ [this.param]: filter }));
+      },
+    },
+  },
+  methods: {
+    dropDownItemClass(filter) {
+      return {
+        'gl-border-b-solid gl-border-b-gray-100 gl-border-b-1 gl-pb-2! gl-mb-2':
+          filter === this.filters.ANY,
+      };
+    },
+    isFilterSelected(filter) {
+      return filter === this.selectedFilter;
+    },
+    handleFilterChange(filter) {
+      this.selectedFilter = filter;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    v-if="showDropdown"
+    :text="selectedFilterText"
+    class="col-3 gl-pt-4 gl-pl-0 gl-pr-0 gl-mr-4"
+    menu-class="gl-w-full! gl-pl-0"
+  >
+    <header class="gl-text-center gl-font-weight-bold gl-font-lg">
+      {{ header }}
+    </header>
+    <gl-dropdown-divider />
+    <gl-dropdown-item
+      v-for="f in filtersArray"
+      :key="f.value"
+      :is-check-item="true"
+      :is-checked="isFilterSelected(f.value)"
+      :class="dropDownItemClass(f)"
+      @click="handleFilterChange(f.value)"
+    >
+      {{ f.label }}
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/search/confidential_filter/constants.js b/app/assets/javascripts/search/confidential_filter/constants.js
new file mode 100644
index 00000000000..4665ce6a5d1
--- /dev/null
+++ b/app/assets/javascripts/search/confidential_filter/constants.js
@@ -0,0 +1,28 @@
+import { __ } from '~/locale';
+
+export const FILTER_HEADER = __('Confidentiality');
+
+export const FILTER_STATES = {
+  ANY: {
+    label: __('Any'),
+    value: null,
+  },
+  CONFIDENTIAL: {
+    label: __('Confidential'),
+    value: 'yes',
+  },
+  NOT_CONFIDENTIAL: {
+    label: __('Not confidential'),
+    value: 'no',
+  },
+};
+
+export const SCOPES = {
+  ISSUES: 'issues',
+};
+
+export const FILTER_STATES_BY_SCOPE = {
+  [SCOPES.ISSUES]: [FILTER_STATES.ANY, FILTER_STATES.CONFIDENTIAL, FILTER_STATES.NOT_CONFIDENTIAL],
+};
+
+export const FILTER_PARAM = 'confidential';
diff --git a/app/assets/javascripts/search/confidential_filter/index.js b/app/assets/javascripts/search/confidential_filter/index.js
new file mode 100644
index 00000000000..bec772be0dd
--- /dev/null
+++ b/app/assets/javascripts/search/confidential_filter/index.js
@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import DropdownFilter from '../components/dropdown_filter.vue';
+import {
+  FILTER_HEADER,
+  FILTER_PARAM,
+  FILTER_STATES_BY_SCOPE,
+  FILTER_STATES,
+  SCOPES,
+} from './constants';
+
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-search-filter-by-confidential');
+
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    data() {
+      return { ...el.dataset };
+    },
+
+    render(createElement) {
+      return createElement(DropdownFilter, {
+        props: {
+          initialFilter: this.filter,
+          filtersArray: FILTER_STATES_BY_SCOPE[this.scope],
+          filters: FILTER_STATES,
+          header: FILTER_HEADER,
+          param: FILTER_PARAM,
+          scope: this.scope,
+          supportedScopes: Object.values(SCOPES),
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/search/state_filter/components/state_filter.vue b/app/assets/javascripts/search/state_filter/components/state_filter.vue
deleted file mode 100644
index f08adaf8c83..00000000000
--- a/app/assets/javascripts/search/state_filter/components/state_filter.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<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
index 2f11cab9044..00ae1bd9750 100644
--- a/app/assets/javascripts/search/state_filter/constants.js
+++ b/app/assets/javascripts/search/state_filter/constants.js
@@ -2,8 +2,6 @@ import { __ } from '~/locale';
 
 export const FILTER_HEADER = __('Status');
 
-export const FILTER_TEXT = __('Any Status');
-
 export const FILTER_STATES = {
   ANY: {
     label: __('Any'),
@@ -37,3 +35,5 @@ export const FILTER_STATES_BY_SCOPE = {
     FILTER_STATES.CLOSED,
   ],
 };
+
+export const FILTER_PARAM = 'state';
diff --git a/app/assets/javascripts/search/state_filter/index.js b/app/assets/javascripts/search/state_filter/index.js
index 13708574cfb..2c12885c40b 100644
--- a/app/assets/javascripts/search/state_filter/index.js
+++ b/app/assets/javascripts/search/state_filter/index.js
@@ -1,6 +1,13 @@
 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
-import StateFilter from './components/state_filter.vue';
+import DropdownFilter from '../components/dropdown_filter.vue';
+import {
+  FILTER_HEADER,
+  FILTER_PARAM,
+  FILTER_STATES_BY_SCOPE,
+  FILTER_STATES,
+  SCOPES,
+} from './constants';
 
 Vue.use(Translate);
 
@@ -11,22 +18,20 @@ export default () => {
 
   return new Vue({
     el,
-    components: {
-      StateFilter,
-    },
     data() {
-      const { dataset } = this.$options.el;
-      return {
-        scope: dataset.scope,
-        state: dataset.state,
-      };
+      return { ...el.dataset };
     },
 
     render(createElement) {
-      return createElement('state-filter', {
+      return createElement(DropdownFilter, {
         props: {
+          initialFilter: this.filter,
+          filtersArray: FILTER_STATES_BY_SCOPE[this.scope],
+          filters: FILTER_STATES,
+          header: FILTER_HEADER,
+          param: FILTER_PARAM,
           scope: this.scope,
-          state: this.state,
+          supportedScopes: Object.values(SCOPES),
         },
       });
     },