Add latest changes from gitlab-org/gitlab@master

11 files changed, 170 insertions, 185 deletions

diff --git a/app/assets/javascripts/search/confidential_filter/constants.js b/app/assets/javascripts/search/confidential_filter/constants.js
deleted file mode 100644
index 4665ce6a5d1..00000000000
--- a/app/assets/javascripts/search/confidential_filter/constants.js
+++ /dev/null
@@ -1,28 +0,0 @@
-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
deleted file mode 100644
index bec772be0dd..00000000000
--- a/app/assets/javascripts/search/confidential_filter/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-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/components/dropdown_filter.vue b/app/assets/javascripts/search/dropdown_filter/components/dropdown_filter.vue
index cd9237026f2..b6e2dd46358 100644
--- a/app/assets/javascripts/search/components/dropdown_filter.vue
+++ b/app/assets/javascripts/search/dropdown_filter/components/dropdown_filter.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapState } from 'vuex';
 import { GlDropdown, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 import { sprintf, s__ } from '~/locale';
@@ -11,50 +12,27 @@ export default {
     GlDropdownDivider,
   },
   props: {
-    initialFilter: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    filters: {
+    filterData: {
       type: Object,
       required: true,
     },
-    filtersArray: {
-      type: Array,
-      required: true,
-    },
-    header: {
-      type: String,
-      required: true,
+  },
+  computed: {
+    ...mapState(['query']),
+    scope() {
+      return this.query.scope;
     },
-    param: {
-      type: String,
-      required: true,
+    supportedScopes() {
+      return Object.values(this.filterData.scopes);
     },
-    scope: {
-      type: String,
-      required: true,
+    initialFilter() {
+      return this.query[this.filterData.filterParam];
     },
-    supportedScopes: {
-      type: Array,
-      required: true,
-    },
-  },
-  computed: {
     filter() {
-      return this.initialFilter || this.filters.ANY.value;
+      return this.initialFilter || this.filterData.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);
+    filtersArray() {
+      return this.filterData.filterByScope[this.scope];
     },
     selectedFilter: {
       get() {
@@ -62,18 +40,29 @@ export default {
           return this.filter;
         }
 
-        return this.filters.ANY.value;
+        return this.filterData.filters.ANY.value;
       },
       set(filter) {
-        visitUrl(setUrlParams({ [this.param]: filter }));
+        visitUrl(setUrlParams({ [this.filterData.filterParam]: filter }));
       },
     },
+    selectedFilterText() {
+      const f = this.filtersArray.find(({ value }) => value === this.selectedFilter);
+      if (!f || f === this.filterData.filters.ANY) {
+        return sprintf(s__('Any %{header}'), { header: this.filterData.header });
+      }
+
+      return f.label;
+    },
+    showDropdown() {
+      return this.supportedScopes.includes(this.scope);
+    },
   },
   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,
+          filter === this.filterData.filters.ANY,
       };
     },
     isFilterSelected(filter) {
@@ -94,7 +83,7 @@ export default {
     menu-class="gl-w-full! gl-pl-0"
   >
     <header class="gl-text-center gl-font-weight-bold gl-font-lg">
-      {{ header }}
+      {{ filterData.header }}
     </header>
     <gl-dropdown-divider />
     <gl-dropdown-item
diff --git a/app/assets/javascripts/search/dropdown_filter/constants/confidential_filter_data.js b/app/assets/javascripts/search/dropdown_filter/constants/confidential_filter_data.js
new file mode 100644
index 00000000000..b29daca89cb
--- /dev/null
+++ b/app/assets/javascripts/search/dropdown_filter/constants/confidential_filter_data.js
@@ -0,0 +1,36 @@
+import { __ } from '~/locale';
+
+const header = __('Confidentiality');
+
+const filters = {
+  ANY: {
+    label: __('Any'),
+    value: null,
+  },
+  CONFIDENTIAL: {
+    label: __('Confidential'),
+    value: 'yes',
+  },
+  NOT_CONFIDENTIAL: {
+    label: __('Not confidential'),
+    value: 'no',
+  },
+};
+
+const scopes = {
+  ISSUES: 'issues',
+};
+
+const filterByScope = {
+  [scopes.ISSUES]: [filters.ANY, filters.CONFIDENTIAL, filters.NOT_CONFIDENTIAL],
+};
+
+const filterParam = 'confidential';
+
+export default {
+  header,
+  filters,
+  scopes,
+  filterByScope,
+  filterParam,
+};
diff --git a/app/assets/javascripts/search/dropdown_filter/constants/state_filter_data.js b/app/assets/javascripts/search/dropdown_filter/constants/state_filter_data.js
new file mode 100644
index 00000000000..0b93aa0be29
--- /dev/null
+++ b/app/assets/javascripts/search/dropdown_filter/constants/state_filter_data.js
@@ -0,0 +1,42 @@
+import { __ } from '~/locale';
+
+const header = __('Status');
+
+const filters = {
+  ANY: {
+    label: __('Any'),
+    value: 'all',
+  },
+  OPEN: {
+    label: __('Open'),
+    value: 'opened',
+  },
+  CLOSED: {
+    label: __('Closed'),
+    value: 'closed',
+  },
+  MERGED: {
+    label: __('Merged'),
+    value: 'merged',
+  },
+};
+
+const scopes = {
+  ISSUES: 'issues',
+  MERGE_REQUESTS: 'merge_requests',
+};
+
+const filterByScope = {
+  [scopes.ISSUES]: [filters.ANY, filters.OPEN, filters.CLOSED],
+  [scopes.MERGE_REQUESTS]: [filters.ANY, filters.OPEN, filters.MERGED, filters.CLOSED],
+};
+
+const filterParam = 'state';
+
+export default {
+  header,
+  filters,
+  scopes,
+  filterByScope,
+  filterParam,
+};
diff --git a/app/assets/javascripts/search/dropdown_filter/index.js b/app/assets/javascripts/search/dropdown_filter/index.js
new file mode 100644
index 00000000000..e5e0745d990
--- /dev/null
+++ b/app/assets/javascripts/search/dropdown_filter/index.js
@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import DropdownFilter from './components/dropdown_filter.vue';
+import stateFilterData from './constants/state_filter_data';
+import confidentialFilterData from './constants/confidential_filter_data';
+
+Vue.use(Translate);
+
+const mountDropdownFilter = (store, { id, filterData }) => {
+  const el = document.getElementById(id);
+
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    store,
+    render(createElement) {
+      return createElement(DropdownFilter, {
+        props: {
+          filterData,
+        },
+      });
+    },
+  });
+};
+
+const dropdownFilters = [
+  {
+    id: 'js-search-filter-by-state',
+    filterData: stateFilterData,
+  },
+  {
+    id: 'js-search-filter-by-confidential',
+    filterData: confidentialFilterData,
+  },
+];
+
+export default store => [...dropdownFilters].map(filter => mountDropdownFilter(store, filter));
diff --git a/app/assets/javascripts/search/index.js b/app/assets/javascripts/search/index.js
new file mode 100644
index 00000000000..780d3ff0d25
--- /dev/null
+++ b/app/assets/javascripts/search/index.js
@@ -0,0 +1,9 @@
+import { queryToObject } from '~/lib/utils/url_utility';
+import createStore from './store';
+import initDropdownFilters from './dropdown_filter';
+
+export default () => {
+  const store = createStore({ query: queryToObject(window.location.search) });
+
+  initDropdownFilters(store);
+};
diff --git a/app/assets/javascripts/search/state_filter/constants.js b/app/assets/javascripts/search/state_filter/constants.js
deleted file mode 100644
index 00ae1bd9750..00000000000
--- a/app/assets/javascripts/search/state_filter/constants.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { __ } from '~/locale';
-
-export const FILTER_HEADER = __('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,
-  ],
-};
-
-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
deleted file mode 100644
index 2c12885c40b..00000000000
--- a/app/assets/javascripts/search/state_filter/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-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-state');
-
-  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/store/index.js b/app/assets/javascripts/search/store/index.js
new file mode 100644
index 00000000000..10cfb647a92
--- /dev/null
+++ b/app/assets/javascripts/search/store/index.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import createState from './state';
+
+Vue.use(Vuex);
+
+export const getStoreConfig = ({ query }) => ({
+  state: createState({ query }),
+});
+
+const createStore = config => new Vuex.Store(getStoreConfig(config));
+export default createStore;
diff --git a/app/assets/javascripts/search/store/state.js b/app/assets/javascripts/search/store/state.js
new file mode 100644
index 00000000000..9115a613767
--- /dev/null
+++ b/app/assets/javascripts/search/store/state.js
@@ -0,0 +1,4 @@
+const createState = ({ query }) => ({
+  query,
+});
+export default createState;