Add milestone wildcard filters to issues page refactor

Add ability to filter issues by milestone None, Any, Upcoming,
and Started values on the issues page refactor.

Also adds merge request count on issues card

app/assets/javascripts/issues_list/components/issues_list_app.vue

@@ -306,7 +306,6 @@ export default {
           icon: 'clock',
           token: MilestoneToken,
           unique: true,
-          defaultMilestones: [],
           fetchMilestones: this.fetchMilestones,
         },
         {

app/assets/javascripts/issues_list/constants.js

@@ -5,6 +5,8 @@ import {
   FILTER_ANY,
   FILTER_CURRENT,
   FILTER_NONE,
+  FILTER_STARTED,
+  FILTER_UPCOMING,
   OPERATOR_IS,
   OPERATOR_IS_NOT,
 } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -186,7 +188,13 @@ export const URL_PARAM = 'urlParam';
 export const NORMAL_FILTER = 'normalFilter';
 export const SPECIAL_FILTER = 'specialFilter';
 export const ALTERNATIVE_FILTER = 'alternativeFilter';
-export const SPECIAL_FILTER_VALUES = [FILTER_NONE, FILTER_ANY, FILTER_CURRENT];
+export const SPECIAL_FILTER_VALUES = [
+  FILTER_NONE,
+  FILTER_ANY,
+  FILTER_CURRENT,
+  FILTER_UPCOMING,
+  FILTER_STARTED,
+];
 
 export const TOKEN_TYPE_AUTHOR = 'author_username';
 export const TOKEN_TYPE_ASSIGNEE = 'assignee_username';
@@ -231,10 +239,12 @@ export const filters = {
   [TOKEN_TYPE_MILESTONE]: {
     [API_PARAM]: {
       [NORMAL_FILTER]: 'milestoneTitle',
+      [SPECIAL_FILTER]: 'milestoneWildcardId',
     },
     [URL_PARAM]: {
       [OPERATOR_IS]: {
         [NORMAL_FILTER]: 'milestone_title',
+        [SPECIAL_FILTER]: 'milestone_title',
       },
       [OPERATOR_IS_NOT]: {
         [NORMAL_FILTER]: 'not[milestone_title]',

app/assets/javascripts/issues_list/queries/get_issues.query.graphql

@@ -12,6 +12,7 @@ query getProjectIssues(
   $authorUsername: String
   $labelName: [String]
   $milestoneTitle: [String]
+  $milestoneWildcardId: MilestoneWildcardId
   $not: NegatedIssueFilterInput
   $beforeCursor: String
   $afterCursor: String
@@ -28,6 +29,7 @@ query getProjectIssues(
       authorUsername: $authorUsername
       labelName: $labelName
       milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
       not: $not
       before: $beforeCursor
       after: $afterCursor

app/assets/javascripts/issues_list/queries/get_issues_count.query.graphql

@@ -7,6 +7,7 @@ query getProjectIssuesCount(
   $authorUsername: String
   $labelName: [String]
   $milestoneTitle: [String]
+  $milestoneWildcardId: MilestoneWildcardId
   $not: NegatedIssueFilterInput
 ) {
   project(fullPath: $projectPath) {
@@ -18,6 +19,7 @@ query getProjectIssuesCount(
       authorUsername: $authorUsername
       labelName: $labelName
       milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
       not: $not
     ) {
       count

app/assets/javascripts/issues_list/queries/issue.fragment.graphql

@@ -7,6 +7,7 @@ fragment IssueFragment on Issue {
   downvotes
   dueDate
   humanTimeEstimate
+  mergeRequestsCount
   moved
   title
   updatedAt

app/assets/javascripts/issues_list/utils.js

@@ -21,6 +21,7 @@ import {
   SPECIAL_FILTER_VALUES,
   TOKEN_TYPE_ASSIGNEE,
   TOKEN_TYPE_ITERATION,
+  TOKEN_TYPE_MILESTONE,
   UPDATED_ASC,
   UPDATED_DESC,
   URL_PARAM,
@@ -186,8 +187,14 @@ const getFilterType = (data, tokenType = '') =>
     ? SPECIAL_FILTER
     : NORMAL_FILTER;
 
-const isIterationSpecialValue = (tokenType, value) =>
-  tokenType === TOKEN_TYPE_ITERATION && SPECIAL_FILTER_VALUES.includes(value);
+const requiresUpperCaseValue = (tokenType, value) =>
+  (tokenType === TOKEN_TYPE_ITERATION || tokenType === TOKEN_TYPE_MILESTONE) &&
+  SPECIAL_FILTER_VALUES.includes(value);
+
+const formatData = (token) =>
+  requiresUpperCaseValue(token.type, token.value.data)
+    ? token.value.data.toUpperCase()
+    : token.value.data;
 
 export const convertToApiParams = (filterTokens) => {
   const params = {};
@@ -199,9 +206,7 @@ export const convertToApiParams = (filterTokens) => {
       const filterType = getFilterType(token.value.data, token.type);
       const field = filters[token.type][API_PARAM][filterType];
       const obj = token.value.operator === OPERATOR_IS_NOT ? not : params;
-      const data = isIterationSpecialValue(token.type, token.value.data)
-        ? token.value.data.toUpperCase()
-        : token.value.data;
+      const data = formatData(token);
       Object.assign(obj, {
         [field]: obj[field] ? [obj[field], data].flat() : data,
       });

app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js

@@ -7,6 +7,8 @@ export const WEIGHT_TOKEN_SUGGESTIONS_SIZE = 21;
 export const FILTER_NONE = 'None';
 export const FILTER_ANY = 'Any';
 export const FILTER_CURRENT = 'Current';
+export const FILTER_UPCOMING = 'Upcoming';
+export const FILTER_STARTED = 'Started';
 
 export const OPERATOR_IS = '=';
 export const OPERATOR_IS_TEXT = __('is');
@@ -28,8 +30,8 @@ export const DEFAULT_ITERATIONS = DEFAULT_NONE_ANY.concat([
 export const DEFAULT_LABELS = [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY];
 
 export const DEFAULT_MILESTONES = DEFAULT_NONE_ANY.concat([
-  { value: 'Upcoming', text: __('Upcoming') }, // eslint-disable-line @gitlab/require-i18n-strings
-  { value: 'Started', text: __('Started') }, // eslint-disable-line @gitlab/require-i18n-strings
+  { value: FILTER_UPCOMING, text: __(FILTER_UPCOMING) },
+  { value: FILTER_STARTED, text: __(FILTER_STARTED) },
 ]);
 
 export const SortDirection = {

ee/app/assets/javascripts/issues_list/queries/get_issues.query.graphql

@@ -12,6 +12,7 @@ query getProjectIssues(
   $authorUsername: String
   $labelName: [String]
   $milestoneTitle: [String]
+  $milestoneWildcardId: MilestoneWildcardId
   $epicId: String
   $iterationId: [ID]
   $iterationWildcardId: IterationWildcardId
@@ -32,6 +33,7 @@ query getProjectIssues(
       authorUsername: $authorUsername
       labelName: $labelName
       milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
       epicId: $epicId
       iterationId: $iterationId
       iterationWildcardId: $iterationWildcardId

ee/app/assets/javascripts/issues_list/queries/get_issues_count.query.graphql

@@ -7,6 +7,7 @@ query getProjectIssuesCount(
   $authorUsername: String
   $labelName: [String]
   $milestoneTitle: [String]
+  $milestoneWildcardId: MilestoneWildcardId
   $epicId: String
   $iterationId: [ID]
   $iterationWildcardId: IterationWildcardId
@@ -22,6 +23,7 @@ query getProjectIssuesCount(
       authorUsername: $authorUsername
       labelName: $labelName
       milestoneTitle: $milestoneTitle
+      milestoneWildcardId: $milestoneWildcardId
       epicId: $epicId
       iterationId: $iterationId
       iterationWildcardId: $iterationWildcardId

spec/frontend/issues_list/mock_data.js

@@ -23,6 +23,7 @@ export const getIssuesQueryResponse = {
             downvotes: 2,
             dueDate: '2021-05-29',
             humanTimeEstimate: null,
+            mergeRequestsCount: false,
             moved: false,
             title: 'Issue title',
             updatedAt: '2021-05-22T04:08:01Z',
@@ -108,6 +109,7 @@ export const locationSearchWithSpecialValues = [
   'assignee_username=bart',
   'my_reaction_emoji=None',
   'iteration_id=Current',
+  'milestone_title=Upcoming',
   'epic_id=None',
   'weight=None',
 ].join('&');
@@ -142,6 +144,7 @@ export const filteredTokensWithSpecialValues = [
   { type: 'assignee_username', value: { data: 'bart', operator: OPERATOR_IS } },
   { type: 'my_reaction_emoji', value: { data: 'None', operator: OPERATOR_IS } },
   { type: 'iteration', value: { data: 'Current', operator: OPERATOR_IS } },
+  { type: 'milestone', value: { data: 'Upcoming', operator: OPERATOR_IS } },
   { type: 'epic_id', value: { data: 'None', operator: OPERATOR_IS } },
   { type: 'weight', value: { data: 'None', operator: OPERATOR_IS } },
 ];
@@ -172,6 +175,7 @@ export const apiParamsWithSpecialValues = {
   assigneeUsernames: 'bart',
   myReactionEmoji: 'None',
   iterationWildcardId: 'CURRENT',
+  milestoneWildcardId: 'UPCOMING',
   epicId: 'None',
   weight: 'None',
 };
@@ -200,6 +204,7 @@ export const urlParamsWithSpecialValues = {
   'assignee_username[]': 'bart',
   my_reaction_emoji: 'None',
   iteration_id: 'Current',
+  milestone_title: 'Upcoming',
   epic_id: 'None',
   weight: 'None',
 };