Add search filters to issues page refactor

Adds:
- Confidential filtering
- MyReaction filtering, including !=
- Author != filtering
- Type != filtering
- Including subepics when filtering by epic

The refactor from Haml to Vue of the group/project
issues page is behind the feature flag `vue_issues_list`

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

@@ -288,6 +288,7 @@ export default {
           avatar_url: gon.current_user_avatar_url,
         });
       }
+
       const tokens = [
         {
           type: TOKEN_TYPE_AUTHOR,
@@ -297,7 +298,6 @@ export default {
           dataType: 'user',
           unique: true,
           defaultAuthors: [],
-          operators: OPERATOR_IS_ONLY,
           fetchAuthors: this.fetchUsers,
           preloadedAuthors,
         },
@@ -333,7 +333,6 @@ export default {
           title: TOKEN_TITLE_TYPE,
           icon: 'issues',
           token: GlFilteredSearchToken,
-          operators: OPERATOR_IS_ONLY,
           options: [
             { icon: 'issue-type-issue', title: 'issue', value: 'issue' },
             { icon: 'issue-type-incident', title: 'incident', value: 'incident' },
@@ -349,7 +348,6 @@ export default {
           icon: 'thumb-up',
           token: EmojiToken,
           unique: true,
-          operators: OPERATOR_IS_ONLY,
           fetchEmojis: this.fetchEmojis,
         });
 

app/assets/javascripts/issues_list/constants.js

@@ -271,6 +271,7 @@ export const filters = {
       [OPERATOR_IS]: {
         [NORMAL_FILTER]: 'label_name[]',
         [SPECIAL_FILTER]: 'label_name[]',
+        [ALTERNATIVE_FILTER]: 'label_name',
       },
       [OPERATOR_IS_NOT]: {
         [NORMAL_FILTER]: 'not[label_name][]',
@@ -280,12 +281,13 @@ export const filters = {
   [TOKEN_TYPE_TYPE]: {
     [API_PARAM]: {
       [NORMAL_FILTER]: 'types',
-      [SPECIAL_FILTER]: 'types',
     },
     [URL_PARAM]: {
       [OPERATOR_IS]: {
         [NORMAL_FILTER]: 'type[]',
-        [SPECIAL_FILTER]: 'type[]',
+      },
+      [OPERATOR_IS_NOT]: {
+        [NORMAL_FILTER]: 'not[type][]',
       },
     },
   },
@@ -299,6 +301,9 @@ export const filters = {
         [NORMAL_FILTER]: 'my_reaction_emoji',
         [SPECIAL_FILTER]: 'my_reaction_emoji',
       },
+      [OPERATOR_IS_NOT]: {
+        [NORMAL_FILTER]: 'not[my_reaction_emoji]',
+      },
     },
   },
   [TOKEN_TYPE_CONFIDENTIAL]: {

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

@@ -11,9 +11,11 @@ query getIssues(
   $assigneeId: String
   $assigneeUsernames: [String!]
   $authorUsername: String
+  $confidential: Boolean
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $myReactionEmoji: String
   $types: [IssueType!]
   $not: NegatedIssueFilterInput
   $beforeCursor: String
@@ -30,9 +32,11 @@ query getIssues(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
       before: $beforeCursor
@@ -57,9 +61,11 @@ query getIssues(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
       before: $beforeCursor

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

@@ -5,9 +5,11 @@ query getIssuesCount(
   $assigneeId: String
   $assigneeUsernames: [String!]
   $authorUsername: String
+  $confidential: Boolean
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $myReactionEmoji: String
   $types: [IssueType!]
   $not: NegatedIssueFilterInput
 ) {
@@ -19,9 +21,11 @@ query getIssuesCount(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
     ) {
@@ -34,9 +38,11 @@ query getIssuesCount(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
     ) {
@@ -49,9 +55,11 @@ query getIssuesCount(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
     ) {
@@ -65,9 +73,11 @@ query getIssuesCount(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
     ) {
@@ -79,9 +89,11 @@ query getIssuesCount(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
     ) {
@@ -93,9 +105,11 @@ query getIssuesCount(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       not: $not
     ) {

app/assets/javascripts/issues_list/utils.js

@@ -22,6 +22,7 @@ import {
   SPECIAL_FILTER,
   SPECIAL_FILTER_VALUES,
   TOKEN_TYPE_ASSIGNEE,
+  TOKEN_TYPE_CONFIDENTIAL,
   TOKEN_TYPE_ITERATION,
   TOKEN_TYPE_MILESTONE,
   TOKEN_TYPE_TYPE,
@@ -200,10 +201,15 @@ const isWildcardValue = (tokenType, value) =>
 const requiresUpperCaseValue = (tokenType, value) =>
   tokenType === TOKEN_TYPE_TYPE || isWildcardValue(tokenType, value);
 
-const formatData = (token) =>
-  requiresUpperCaseValue(token.type, token.value.data)
-    ? token.value.data.toUpperCase()
-    : token.value.data;
+const formatData = (token) => {
+  if (requiresUpperCaseValue(token.type, token.value.data)) {
+    return token.value.data.toUpperCase();
+  }
+  if (token.type === TOKEN_TYPE_CONFIDENTIAL) {
+    return token.value.data === 'yes';
+  }
+  return token.value.data;
+};
 
 export const convertToApiParams = (filterTokens) => {
   const params = {};

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

@@ -11,9 +11,11 @@ query getIssues(
   $assigneeId: String
   $assigneeUsernames: [String!]
   $authorUsername: String
+  $confidential: Boolean
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $myReactionEmoji: String
   $types: [IssueType!]
   $epicId: String
   $iterationId: [ID]
@@ -27,6 +29,7 @@ query getIssues(
 ) {
   group(fullPath: $fullPath) @skip(if: $isProject) {
     issues(
+      includeSubepics: true
       includeSubgroups: true
       search: $search
       sort: $sort
@@ -34,9 +37,11 @@ query getIssues(
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId
@@ -62,15 +67,18 @@ query getIssues(
   }
   project(fullPath: $fullPath) @include(if: $isProject) {
     issues(
+      includeSubepics: true
       search: $search
       sort: $sort
       state: $state
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId

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

@@ -5,9 +5,11 @@ query getIssuesCount(
   $assigneeId: String
   $assigneeUsernames: [String!]
   $authorUsername: String
+  $confidential: Boolean
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $myReactionEmoji: String
   $types: [IssueType!]
   $epicId: String
   $iterationId: [ID]
@@ -17,15 +19,18 @@ query getIssuesCount(
 ) {
   group(fullPath: $fullPath) @skip(if: $isProject) {
     openedIssues: issues(
+      includeSubepics: true
       includeSubgroups: true
       state: opened
       search: $search
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId
@@ -36,15 +41,18 @@ query getIssuesCount(
       count
     }
     closedIssues: issues(
+      includeSubepics: true
       includeSubgroups: true
       state: closed
       search: $search
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId
@@ -55,15 +63,18 @@ query getIssuesCount(
       count
     }
     allIssues: issues(
+      includeSubepics: true
       includeSubgroups: true
       state: all
       search: $search
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId
@@ -76,14 +87,17 @@ query getIssuesCount(
   }
   project(fullPath: $fullPath) @include(if: $isProject) {
     openedIssues: issues(
+      includeSubepics: true
       state: opened
       search: $search
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId
@@ -94,14 +108,17 @@ query getIssuesCount(
       count
     }
     closedIssues: issues(
+      includeSubepics: true
       state: closed
       search: $search
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId
@@ -112,14 +129,17 @@ query getIssuesCount(
       count
     }
     allIssues: issues(
+      includeSubepics: true
       state: all
       search: $search
       assigneeId: $assigneeId
       assigneeUsernames: $assigneeUsernames
       authorUsername: $authorUsername
+      confidential: $confidential
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      myReactionEmoji: $myReactionEmoji
       types: $types
       epicId: $epicId
       iterationId: $iterationId

spec/frontend/issues_list/mock_data.js

@@ -101,8 +101,13 @@ export const locationSearch = [
   'label_name[]=tv',
   'not[label_name][]=live action',
   'not[label_name][]=drama',
+  'type[]=issue',
+  'type[]=feature',
+  'not[type][]=bug',
+  'not[type][]=incident',
   'my_reaction_emoji=thumbsup',
-  'confidential=no',
+  'not[my_reaction_emoji]=thumbsdown',
+  'confidential=yes',
   'iteration_id=4',
   'not[iteration_id]=20',
   'epic_id=12',
@@ -114,10 +119,9 @@ export const locationSearch = [
 export const locationSearchWithSpecialValues = [
   'assignee_id=123',
   'assignee_username=bart',
-  'type[]=issue',
-  'type[]=incident',
   'my_reaction_emoji=None',
   'iteration_id=Current',
+  'label_name[]=None',
   'milestone_title=Upcoming',
   'epic_id=None',
   'weight=None',
@@ -136,8 +140,13 @@ export const filteredTokens = [
   { type: 'labels', value: { data: 'tv', operator: OPERATOR_IS } },
   { type: 'labels', value: { data: 'live action', operator: OPERATOR_IS_NOT } },
   { type: 'labels', value: { data: 'drama', operator: OPERATOR_IS_NOT } },
+  { type: 'type', value: { data: 'issue', operator: OPERATOR_IS } },
+  { type: 'type', value: { data: 'feature', operator: OPERATOR_IS } },
+  { type: 'type', value: { data: 'bug', operator: OPERATOR_IS_NOT } },
+  { type: 'type', value: { data: 'incident', operator: OPERATOR_IS_NOT } },
   { type: 'my_reaction_emoji', value: { data: 'thumbsup', operator: OPERATOR_IS } },
-  { type: 'confidential', value: { data: 'no', operator: OPERATOR_IS } },
+  { type: 'my_reaction_emoji', value: { data: 'thumbsdown', operator: OPERATOR_IS_NOT } },
+  { type: 'confidential', value: { data: 'yes', operator: OPERATOR_IS } },
   { type: 'iteration', value: { data: '4', operator: OPERATOR_IS } },
   { type: 'iteration', value: { data: '20', operator: OPERATOR_IS_NOT } },
   { type: 'epic_id', value: { data: '12', operator: OPERATOR_IS } },
@@ -151,10 +160,9 @@ export const filteredTokens = [
 export const filteredTokensWithSpecialValues = [
   { type: 'assignee_username', value: { data: '123', operator: OPERATOR_IS } },
   { type: 'assignee_username', value: { data: 'bart', operator: OPERATOR_IS } },
-  { type: 'type', value: { data: 'issue', operator: OPERATOR_IS } },
-  { type: 'type', value: { data: 'incident', operator: OPERATOR_IS } },
   { type: 'my_reaction_emoji', value: { data: 'None', operator: OPERATOR_IS } },
   { type: 'iteration', value: { data: 'Current', operator: OPERATOR_IS } },
+  { type: 'labels', value: { data: 'None', 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 } },
@@ -165,8 +173,9 @@ export const apiParams = {
   assigneeUsernames: ['bart', 'lisa'],
   milestoneTitle: 'season 4',
   labelName: ['cartoon', 'tv'],
+  types: ['ISSUE', 'FEATURE'],
   myReactionEmoji: 'thumbsup',
-  confidential: 'no',
+  confidential: true,
   iterationId: '4',
   epicId: '12',
   weight: '1',
@@ -175,6 +184,8 @@ export const apiParams = {
     assigneeUsernames: ['patty', 'selma'],
     milestoneTitle: 'season 20',
     labelName: ['live action', 'drama'],
+    types: ['BUG', 'INCIDENT'],
+    myReactionEmoji: 'thumbsdown',
     iterationId: '20',
     epicId: '34',
     weight: '3',
@@ -184,7 +195,7 @@ export const apiParams = {
 export const apiParamsWithSpecialValues = {
   assigneeId: '123',
   assigneeUsernames: 'bart',
-  types: ['ISSUE', 'INCIDENT'],
+  labelName: 'None',
   myReactionEmoji: 'None',
   iterationWildcardId: 'CURRENT',
   milestoneWildcardId: 'UPCOMING',
@@ -201,8 +212,11 @@ export const urlParams = {
   'not[milestone_title]': 'season 20',
   'label_name[]': ['cartoon', 'tv'],
   'not[label_name][]': ['live action', 'drama'],
+  'type[]': ['issue', 'feature'],
+  'not[type][]': ['bug', 'incident'],
   my_reaction_emoji: 'thumbsup',
-  confidential: 'no',
+  'not[my_reaction_emoji]': 'thumbsdown',
+  confidential: 'yes',
   iteration_id: '4',
   'not[iteration_id]': '20',
   epic_id: '12',
@@ -214,7 +228,7 @@ export const urlParams = {
 export const urlParamsWithSpecialValues = {
   assignee_id: '123',
   'assignee_username[]': 'bart',
-  'type[]': ['issue', 'incident'],
+  'label_name[]': 'None',
   my_reaction_emoji: 'None',
   iteration_id: 'Current',
   milestone_title: 'Upcoming',