From 0dfb5e6745e5a3c0e495ee16a440554c9270cf18 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Wed, 5 May 2021 18:55:30 +0100
Subject: [PATCH 1/4] Add epic filter token to issues page refactor

Added behind `vue_issues_list` feature flag defaulted to off,
as part of an ongoing refactor from Haml.

`epic_token.vue` was also changed to be more in line with
the other filtered search tokens:
- Before, it received a value that was either an epic iid or
  a string in the format <epic.title><epic.iid>, and received
  two separate functions for getting epics
- After, it was simplified to receive only an epic id/iid,
  and receive only one function for getting epics

https://gitlab.com/gitlab-org/gitlab/-/issues/322755
---
 .../components/issues_list_app.vue            | 25 ++++++++
 .../javascripts/issues_list/constants.js      | 10 +++
 app/assets/javascripts/issues_list/index.js   |  2 +
 .../filtered_search_bar/tokens/epic_token.vue | 61 +++++--------------
 .../roadmap/mixins/filtered_search_mixin.js   | 13 ++--
 ee/app/helpers/ee/issues_helper.rb            |  4 ++
 .../components/roadmap_filters_spec.js        |  2 +-
 ee/spec/helpers/ee/issues_helper_spec.rb      |  6 +-
 .../filtered_search_bar/mock_data.js          |  2 +-
 .../tokens/epic_token_spec.js                 | 29 ---------
 10 files changed, 67 insertions(+), 87 deletions(-)

diff --git a/app/assets/javascripts/issues_list/components/issues_list_app.vue b/app/assets/javascripts/issues_list/components/issues_list_app.vue
index 142438bec216f1..d443f5b4b1daf7 100644
--- a/app/assets/javascripts/issues_list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issues_list_app.vue
@@ -37,6 +37,7 @@ import { __ } from '~/locale';
 import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
 import EmojiToken from '~/vue_shared/components/filtered_search_bar/tokens/emoji_token.vue';
+import EpicToken from '~/vue_shared/components/filtered_search_bar/tokens/epic_token.vue';
 import IterationToken from '~/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue';
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 import MilestoneToken from '~/vue_shared/components/filtered_search_bar/tokens/milestone_token.vue';
@@ -87,6 +88,9 @@ export default {
     exportCsvPath: {
       default: '',
     },
+    groupEpicsPath: {
+      default: '',
+    },
     hasBlockedIssuesFeature: {
       default: false,
     },
@@ -241,6 +245,17 @@ export default {
         });
       }
 
+      if (this.groupEpicsPath) {
+        tokens.push({
+          type: 'epic_id',
+          title: __('Epic'),
+          icon: 'epic',
+          token: EpicToken,
+          unique: true,
+          fetchEpics: this.fetchEpics,
+        });
+      }
+
       if (this.hasIssueWeightsFeature) {
         tokens.push({
           type: 'weight',
@@ -306,6 +321,16 @@ export default {
     fetchEmojis(search) {
       return this.fetchWithCache(this.autocompleteAwardEmojisPath, 'emojis', 'name', search);
     },
+    async fetchEpics(search) {
+      const epics = await this.fetchWithCache(this.groupEpicsPath, 'epics');
+      if (!search) {
+        return epics.slice(0, MAX_LIST_SIZE);
+      }
+      const number = Number(search);
+      return Number.isNaN(number)
+        ? fuzzaldrinPlus.filter(epics, search, { key: 'title' })
+        : epics.filter((epic) => epic.id === number);
+    },
     fetchLabels(search) {
       return this.fetchWithCache(this.projectLabelsPath, 'labels', 'title', search);
     },
diff --git a/app/assets/javascripts/issues_list/constants.js b/app/assets/javascripts/issues_list/constants.js
index 3b01d0df523be6..88820a40d1b2d5 100644
--- a/app/assets/javascripts/issues_list/constants.js
+++ b/app/assets/javascripts/issues_list/constants.js
@@ -324,6 +324,16 @@ export const filters = {
       },
     },
   },
+  epic_id: {
+    apiParam: {
+      [OPERATOR_IS]: 'epic_id',
+      [OPERATOR_IS_NOT]: 'not[epic_id]',
+    },
+    urlParam: {
+      [OPERATOR_IS]: 'epic_id',
+      [OPERATOR_IS_NOT]: 'not[epic_id]',
+    },
+  },
   weight: {
     apiParam: {
       [OPERATOR_IS]: {
diff --git a/app/assets/javascripts/issues_list/index.js b/app/assets/javascripts/issues_list/index.js
index d543643b00333e..c4bd62bce5956d 100644
--- a/app/assets/javascripts/issues_list/index.js
+++ b/app/assets/javascripts/issues_list/index.js
@@ -85,6 +85,7 @@ export function mountIssuesListApp() {
     emptyStateSvgPath,
     endpoint,
     exportCsvPath,
+    groupEpicsPath,
     hasBlockedIssuesFeature,
     hasIssuableHealthStatusFeature,
     hasIssues,
@@ -121,6 +122,7 @@ export function mountIssuesListApp() {
       canBulkUpdate: parseBoolean(canBulkUpdate),
       emptyStateSvgPath,
       endpoint,
+      groupEpicsPath,
       hasBlockedIssuesFeature: parseBoolean(hasBlockedIssuesFeature),
       hasIssuableHealthStatusFeature: parseBoolean(hasIssuableHealthStatusFeature),
       hasIssues: parseBoolean(hasIssues),
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
index 101c7150c55f34..ecd83835a21598 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
@@ -1,9 +1,7 @@
 <script>
 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
 import { debounce } from 'lodash';
-
 import createFlash from '~/flash';
-import { isNumeric } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
 import { DEBOUNCE_DELAY } from '../constants';
 import { stripQuotes } from '../filtered_search_utils';
@@ -32,29 +30,13 @@ export default {
   },
   computed: {
     currentValue() {
-      /*
-       * When the URL contains the epic_iid, we'd get: '123'
-       */
-      if (isNumeric(this.value.data)) {
-        return parseInt(this.value.data, 10);
-      }
-
-      /*
-       * When the token is added in current session it'd be: 'Foo::&123'
-       */
-      const id = this.value.data.split('::&')[1];
-
-      if (id) {
-        return parseInt(id, 10);
-      }
-
-      return this.value.data;
+      return Number(this.value.data);
+    },
+    idProperty() {
+      return this.config.idProperty || 'id';
     },
     activeEpic() {
-      const currentValueIsString = typeof this.currentValue === 'string';
-      return this.epics.find(
-        (epic) => epic[currentValueIsString ? 'title' : 'iid'] === this.currentValue,
-      );
+      return this.epics.find((epic) => epic[this.idProperty] === this.currentValue);
     },
   },
   watch: {
@@ -72,20 +54,8 @@ export default {
       this.loading = true;
       this.config
         .fetchEpics(searchTerm)
-        .then(({ data }) => {
-          this.epics = data;
-        })
-        .catch(() => createFlash({ message: __('There was a problem fetching epics.') }))
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    fetchSingleEpic(iid) {
-      this.loading = true;
-      this.config
-        .fetchSingleEpic(iid)
-        .then(({ data }) => {
-          this.epics = [data];
+        .then((response) => {
+          this.epics = Array.isArray(response) ? response : response.data;
         })
         .catch(() => createFlash({ message: __('There was a problem fetching epics.') }))
         .finally(() => {
@@ -93,14 +63,11 @@ export default {
         });
     },
     searchEpics: debounce(function debouncedSearch({ data }) {
-      if (isNumeric(data)) {
-        return this.fetchSingleEpic(data);
-      }
-      return this.fetchEpicsBySearchTerm(data);
+      this.fetchEpicsBySearchTerm(data);
     }, DEBOUNCE_DELAY),
 
-    getEpicValue(epic) {
-      return `${epic.title}::&${epic.iid}`;
+    getEpicDisplayText(epic) {
+      return `${epic.title}::&${epic[this.idProperty]}`;
     },
   },
   stripQuotes,
@@ -115,17 +82,17 @@ export default {
     @input="searchEpics"
   >
     <template #view="{ inputValue }">
-      <span>{{ activeEpic ? getEpicValue(activeEpic) : $options.stripQuotes(inputValue) }}</span>
+      {{ activeEpic ? getEpicDisplayText(activeEpic) : inputValue }}
     </template>
     <template #suggestions>
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion
           v-for="epic in epics"
-          :key="epic.id"
-          :value="getEpicValue(epic)"
+          :key="epic[idProperty]"
+          :value="String(epic[idProperty])"
         >
-          <div>{{ epic.title }}</div>
+          {{ epic.title }}
         </gl-filtered-search-suggestion>
       </template>
     </template>
diff --git a/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js b/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
index 97bc2365657f8c..376291afc9f358 100644
--- a/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
+++ b/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
@@ -120,13 +120,12 @@ export default {
           symbol: '&',
           token: EpicToken,
           operators: FilterTokenOperators,
+          idProperty: 'iid',
           fetchEpics: (search = '') => {
-            return axios.get(this.listEpicsPath, { params: { search } }).then(({ data }) => {
-              return { data };
-            });
-          },
-          fetchSingleEpic: (iid) => {
-            return axios.get(`${this.listEpicsPath}/${iid}`).then(({ data }) => ({ data }));
+            const number = Number(search);
+            return !search || Number.isNaN(number)
+              ? axios.get(this.listEpicsPath, { params: { search } })
+              : axios.get(`${this.listEpicsPath}/${search}`).then(({ data }) => [data]);
           },
         },
       ];
@@ -242,7 +241,7 @@ export default {
             filterParams.myReactionEmoji = filter.value.data;
             break;
           case 'epic_iid':
-            filterParams.epicIid = Number(filter.value.data.split('::&')[1]);
+            filterParams.epicIid = filter.value.data;
             break;
           case 'filtered-search-term':
             if (filter.value.data) plainText.push(filter.value.data);
diff --git a/ee/app/helpers/ee/issues_helper.rb b/ee/app/helpers/ee/issues_helper.rb
index 4ef4b4618fde46..0f55cf1e993d5a 100644
--- a/ee/app/helpers/ee/issues_helper.rb
+++ b/ee/app/helpers/ee/issues_helper.rb
@@ -77,6 +77,10 @@ def issues_list_data(project, current_user, finder)
         has_issue_weights_feature: project.feature_available?(:issue_weights).to_s
       )
 
+      if project.feature_available?(:epics)
+        data[:group_epics_path] = group_epics_path(project&.group, format: :json)
+      end
+
       if project.feature_available?(:iterations)
         data[:project_iterations_path] = api_v4_projects_iterations_path(id: project.id)
       end
diff --git a/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js b/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js
index f18209e466f4f9..63ca8a91d57fc6 100644
--- a/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js
+++ b/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js
@@ -216,8 +216,8 @@ describe('RoadmapFilters', () => {
           symbol: '&',
           token: EpicToken,
           operators,
+          idProperty: 'iid',
           fetchEpics: expect.any(Function),
-          fetchSingleEpic: expect.any(Function),
         },
       ];
 
diff --git a/ee/spec/helpers/ee/issues_helper_spec.rb b/ee/spec/helpers/ee/issues_helper_spec.rb
index 149225120e634b..f50a84876a9410 100644
--- a/ee/spec/helpers/ee/issues_helper_spec.rb
+++ b/ee/spec/helpers/ee/issues_helper_spec.rb
@@ -137,7 +137,7 @@
 
     context 'when features are enabled' do
       before do
-        stub_licensed_features(iterations: true, issue_weights: true, issuable_health_status: true, blocked_issues: true)
+        stub_licensed_features(epics: true, iterations: true, issue_weights: true, issuable_health_status: true, blocked_issues: true)
       end
 
       it 'returns data with licensed features enabled' do
@@ -145,6 +145,7 @@
           has_blocked_issues_feature: 'true',
           has_issuable_health_status_feature: 'true',
           has_issue_weights_feature: 'true',
+          group_epics_path: group_epics_path(project&.group, format: :json),
           project_iterations_path: api_v4_projects_iterations_path(id: project.id)
         }
 
@@ -154,7 +155,7 @@
 
     context 'when features are disabled' do
       before do
-        stub_licensed_features(iterations: false, issue_weights: false, issuable_health_status: false, blocked_issues: false)
+        stub_licensed_features(epics: false, iterations: false, issue_weights: false, issuable_health_status: false, blocked_issues: false)
       end
 
       it 'returns data with licensed features disabled' do
@@ -166,6 +167,7 @@
 
         result = helper.issues_list_data(project, current_user, finder)
         expect(result).to include(expected)
+        expect(result).not_to include(:group_epics_path)
         expect(result).not_to include(:project_iterations_path)
       end
     end
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
index c49a1ab68b1e0f..3b5d0dba195cc9 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/mock_data.js
@@ -139,8 +139,8 @@ export const mockEpicToken = {
   symbol: '&',
   token: EpicToken,
   operators: [{ value: '=', description: 'is', default: 'true' }],
+  idProperty: 'iid',
   fetchEpics: () => Promise.resolve({ data: mockEpics }),
-  fetchSingleEpic: () => Promise.resolve({ data: mockEpics[0] }),
 };
 
 export const mockReactionEmojiToken = {
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js
index 0c3f9e1363f2a7..addc058f65810f 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js
@@ -68,21 +68,6 @@ describe('EpicToken', () => {
       await wrapper.vm.$nextTick();
     });
 
-    describe('currentValue', () => {
-      it.each`
-        data                                             | id
-        ${`${mockEpics[0].title}::&${mockEpics[0].iid}`} | ${mockEpics[0].iid}
-        ${mockEpics[0].iid}                              | ${mockEpics[0].iid}
-        ${'foobar'}                                      | ${'foobar'}
-      `('$data returns $id', async ({ data, id }) => {
-        wrapper.setProps({ value: { data } });
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.currentValue).toBe(id);
-      });
-    });
-
     describe('activeEpic', () => {
       it('returns object for currently present `value.data`', async () => {
         wrapper.setProps({
@@ -140,20 +125,6 @@ describe('EpicToken', () => {
         expect(wrapper.vm.loading).toBe(false);
       });
     });
-
-    describe('fetchSingleEpic', () => {
-      it('calls `config.fetchSingleEpic` with provided iid param', async () => {
-        jest.spyOn(wrapper.vm.config, 'fetchSingleEpic');
-
-        wrapper.vm.fetchSingleEpic(1);
-
-        expect(wrapper.vm.config.fetchSingleEpic).toHaveBeenCalledWith(1);
-
-        await waitForPromises();
-
-        expect(wrapper.vm.epics).toEqual([mockEpics[0]]);
-      });
-    });
   });
 
   describe('template', () => {
-- 
GitLab


From b4ec3b1032504451ef9ae5989b328acbea33efd0 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Thu, 6 May 2021 23:00:48 +0100
Subject: [PATCH 2/4] Remove unused import

---
 .../components/filtered_search_bar/tokens/epic_token.vue        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
index ecd83835a21598..b5760ca52b9c60 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
@@ -4,7 +4,6 @@ import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import { DEBOUNCE_DELAY } from '../constants';
-import { stripQuotes } from '../filtered_search_utils';
 
 export default {
   components: {
@@ -70,7 +69,6 @@ export default {
       return `${epic.title}::&${epic[this.idProperty]}`;
     },
   },
-  stripQuotes,
 };
 </script>
 
-- 
GitLab


From f91d28a06ba5c357b699c81037a8e88082cb4753 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Fri, 7 May 2021 14:08:05 +0100
Subject: [PATCH 3/4] Add None/Any to epic token

---
 .../javascripts/issues_list/constants.js      | 18 ++++++++++++----
 .../filtered_search_bar/tokens/epic_token.vue | 21 +++++++++++++++++--
 .../roadmap/mixins/filtered_search_mixin.js   |  1 +
 .../components/roadmap_filters_spec.js        |  1 +
 spec/frontend/issues_list/mock_data.js        | 12 +++++++++++
 5 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/issues_list/constants.js b/app/assets/javascripts/issues_list/constants.js
index 88820a40d1b2d5..c0441758558c9f 100644
--- a/app/assets/javascripts/issues_list/constants.js
+++ b/app/assets/javascripts/issues_list/constants.js
@@ -326,12 +326,22 @@ export const filters = {
   },
   epic_id: {
     apiParam: {
-      [OPERATOR_IS]: 'epic_id',
-      [OPERATOR_IS_NOT]: 'not[epic_id]',
+      [OPERATOR_IS]: {
+        [NORMAL_FILTER]: 'epic_id',
+        [SPECIAL_FILTER]: 'epic_id',
+      },
+      [OPERATOR_IS_NOT]: {
+        [NORMAL_FILTER]: 'not[epic_id]',
+      },
     },
     urlParam: {
-      [OPERATOR_IS]: 'epic_id',
-      [OPERATOR_IS_NOT]: 'not[epic_id]',
+      [OPERATOR_IS]: {
+        [NORMAL_FILTER]: 'epic_id',
+        [SPECIAL_FILTER]: 'epic_id',
+      },
+      [OPERATOR_IS_NOT]: {
+        [NORMAL_FILTER]: 'not[epic_id]',
+      },
     },
   },
   weight: {
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
index b5760ca52b9c60..1450807b11dc13 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue
@@ -1,12 +1,18 @@
 <script>
-import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlDropdownDivider,
+  GlFilteredSearchSuggestion,
+  GlFilteredSearchToken,
+  GlLoadingIcon,
+} from '@gitlab/ui';
 import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import { DEBOUNCE_DELAY } from '../constants';
+import { DEBOUNCE_DELAY, DEFAULT_NONE_ANY } from '../constants';
 
 export default {
   components: {
+    GlDropdownDivider,
     GlFilteredSearchToken,
     GlFilteredSearchSuggestion,
     GlLoadingIcon,
@@ -31,6 +37,9 @@ export default {
     currentValue() {
       return Number(this.value.data);
     },
+    defaultEpics() {
+      return this.config.defaultEpics || DEFAULT_NONE_ANY;
+    },
     idProperty() {
       return this.config.idProperty || 'id';
     },
@@ -83,6 +92,14 @@ export default {
       {{ activeEpic ? getEpicDisplayText(activeEpic) : inputValue }}
     </template>
     <template #suggestions>
+      <gl-filtered-search-suggestion
+        v-for="epic in defaultEpics"
+        :key="epic.value"
+        :value="epic.value"
+      >
+        {{ epic.text }}
+      </gl-filtered-search-suggestion>
+      <gl-dropdown-divider v-if="defaultEpics.length" />
       <gl-loading-icon v-if="loading" />
       <template v-else>
         <gl-filtered-search-suggestion
diff --git a/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js b/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
index 376291afc9f358..bf87cacde51afc 100644
--- a/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
+++ b/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
@@ -121,6 +121,7 @@ export default {
           token: EpicToken,
           operators: FilterTokenOperators,
           idProperty: 'iid',
+          defaultEpics: [],
           fetchEpics: (search = '') => {
             const number = Number(search);
             return !search || Number.isNaN(number)
diff --git a/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js b/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js
index 63ca8a91d57fc6..d241ec8690c126 100644
--- a/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js
+++ b/ee/spec/frontend/roadmap/components/roadmap_filters_spec.js
@@ -217,6 +217,7 @@ describe('RoadmapFilters', () => {
           token: EpicToken,
           operators,
           idProperty: 'iid',
+          defaultEpics: [],
           fetchEpics: expect.any(Function),
         },
       ];
diff --git a/spec/frontend/issues_list/mock_data.js b/spec/frontend/issues_list/mock_data.js
index eede806c42ff54..d6a23c4dcffcd5 100644
--- a/spec/frontend/issues_list/mock_data.js
+++ b/spec/frontend/issues_list/mock_data.js
@@ -16,6 +16,8 @@ export const locationSearch = [
   'confidential=no',
   'iteration_title=season:+%234',
   'not[iteration_title]=season:+%2320',
+  'epic_id=12',
+  'not[epic_id]=34',
   'weight=1',
   'not[weight]=3',
 ].join('&');
@@ -24,6 +26,7 @@ export const locationSearchWithSpecialValues = [
   'assignee_id=None',
   'my_reaction_emoji=None',
   'iteration_id=Current',
+  'epic_id=None',
   'weight=None',
 ].join('&');
 
@@ -42,6 +45,8 @@ export const filteredTokens = [
   { type: 'confidential', value: { data: 'no', operator: OPERATOR_IS } },
   { type: 'iteration', value: { data: 'season: #4', operator: OPERATOR_IS } },
   { type: 'iteration', value: { data: 'season: #20', operator: OPERATOR_IS_NOT } },
+  { type: 'epic_id', value: { data: '12', operator: OPERATOR_IS } },
+  { type: 'epic_id', value: { data: '34', operator: OPERATOR_IS_NOT } },
   { type: 'weight', value: { data: '1', operator: OPERATOR_IS } },
   { type: 'weight', value: { data: '3', operator: OPERATOR_IS_NOT } },
   { type: 'filtered-search-term', value: { data: 'find' } },
@@ -52,6 +57,7 @@ export const filteredTokensWithSpecialValues = [
   { type: 'assignee_username', value: { data: 'None', operator: OPERATOR_IS } },
   { type: 'my_reaction_emoji', value: { data: 'None', operator: OPERATOR_IS } },
   { type: 'iteration', value: { data: 'Current', operator: OPERATOR_IS } },
+  { type: 'epic_id', value: { data: 'None', operator: OPERATOR_IS } },
   { type: 'weight', value: { data: 'None', operator: OPERATOR_IS } },
 ];
 
@@ -68,6 +74,8 @@ export const apiParams = {
   confidential: 'no',
   iteration_title: 'season: #4',
   'not[iteration_title]': 'season: #20',
+  epic_id: '12',
+  'not[epic_id]': '34',
   weight: '1',
   'not[weight]': '3',
 };
@@ -76,6 +84,7 @@ export const apiParamsWithSpecialValues = {
   assignee_id: 'None',
   my_reaction_emoji: 'None',
   iteration_id: 'Current',
+  epic_id: 'None',
   weight: 'None',
 };
 
@@ -92,6 +101,8 @@ export const urlParams = {
   confidential: ['no'],
   iteration_title: ['season: #4'],
   'not[iteration_title]': ['season: #20'],
+  epic_id: ['12'],
+  'not[epic_id]': ['34'],
   weight: ['1'],
   'not[weight]': ['3'],
 };
@@ -100,5 +111,6 @@ export const urlParamsWithSpecialValues = {
   assignee_id: ['None'],
   my_reaction_emoji: ['None'],
   iteration_id: ['Current'],
+  epic_id: ['None'],
   weight: ['None'],
 };
-- 
GitLab


From 1abe3766bf5b78a3a3c0be1ebbf1fbc920043fc7 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Mon, 10 May 2021 14:46:27 +0100
Subject: [PATCH 4/4] Fix project without group edge case

---
 .../roadmap/mixins/filtered_search_mixin.js            |  3 ++-
 ee/app/helpers/ee/issues_helper.rb                     |  4 ++--
 ee/spec/helpers/ee/issues_helper_spec.rb               | 10 +++++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js b/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
index bf87cacde51afc..343894320baa65 100644
--- a/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
+++ b/ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js
@@ -2,6 +2,7 @@ import { GlFilteredSearchToken } from '@gitlab/ui';
 
 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
+import { joinPaths } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
 
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
@@ -126,7 +127,7 @@ export default {
             const number = Number(search);
             return !search || Number.isNaN(number)
               ? axios.get(this.listEpicsPath, { params: { search } })
-              : axios.get(`${this.listEpicsPath}/${search}`).then(({ data }) => [data]);
+              : axios.get(joinPaths(this.listEpicsPath, search)).then(({ data }) => [data]);
           },
         },
       ];
diff --git a/ee/app/helpers/ee/issues_helper.rb b/ee/app/helpers/ee/issues_helper.rb
index 0f55cf1e993d5a..016df581509307 100644
--- a/ee/app/helpers/ee/issues_helper.rb
+++ b/ee/app/helpers/ee/issues_helper.rb
@@ -77,8 +77,8 @@ def issues_list_data(project, current_user, finder)
         has_issue_weights_feature: project.feature_available?(:issue_weights).to_s
       )
 
-      if project.feature_available?(:epics)
-        data[:group_epics_path] = group_epics_path(project&.group, format: :json)
+      if project.feature_available?(:epics) && project.group
+        data[:group_epics_path] = group_epics_path(project.group, format: :json)
       end
 
       if project.feature_available?(:iterations)
diff --git a/ee/spec/helpers/ee/issues_helper_spec.rb b/ee/spec/helpers/ee/issues_helper_spec.rb
index f50a84876a9410..34e540d9f4efce 100644
--- a/ee/spec/helpers/ee/issues_helper_spec.rb
+++ b/ee/spec/helpers/ee/issues_helper_spec.rb
@@ -145,12 +145,20 @@
           has_blocked_issues_feature: 'true',
           has_issuable_health_status_feature: 'true',
           has_issue_weights_feature: 'true',
-          group_epics_path: group_epics_path(project&.group, format: :json),
+          group_epics_path: group_epics_path(project.group, format: :json),
           project_iterations_path: api_v4_projects_iterations_path(id: project.id)
         }
 
         expect(helper.issues_list_data(project, current_user, finder)).to include(expected)
       end
+
+      context 'when project does not have group' do
+        let(:project_with_no_group) { create :project }
+
+        it 'does not return group_epics_path' do
+          expect(helper.issues_list_data(project_with_no_group, current_user, finder)).not_to include(:group_epics_path)
+        end
+      end
     end
 
     context 'when features are disabled' do
-- 
GitLab