Add issue type filtering to issues list refactor

https://gitlab.com/gitlab-org/gitlab/-/issues/322755

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

@@ -36,6 +36,7 @@ import {
   TOKEN_TYPE_LABEL,
   TOKEN_TYPE_MILESTONE,
   TOKEN_TYPE_MY_REACTION,
+  TOKEN_TYPE_TYPE,
   TOKEN_TYPE_WEIGHT,
   UPDATED_DESC,
   urlSortParams,
@@ -63,6 +64,7 @@ import {
   TOKEN_TITLE_LABEL,
   TOKEN_TITLE_MILESTONE,
   TOKEN_TITLE_MY_REACTION,
+  TOKEN_TITLE_TYPE,
   TOKEN_TITLE_WEIGHT,
 } from '~/vue_shared/components/filtered_search_bar/constants';
 import AuthorToken from '~/vue_shared/components/filtered_search_bar/tokens/author_token.vue';
@@ -315,6 +317,18 @@ export default {
           defaultLabels: DEFAULT_NONE_ANY,
           fetchLabels: this.fetchLabels,
         },
+        {
+          type: TOKEN_TYPE_TYPE,
+          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' },
+            { icon: 'issue-type-test-case', title: 'test_case', value: 'test_case' },
+          ],
+        },
       ];
 
       if (this.isSignedIn) {

app/assets/javascripts/issues_list/constants.js

@@ -200,6 +200,7 @@ export const TOKEN_TYPE_AUTHOR = 'author_username';
 export const TOKEN_TYPE_ASSIGNEE = 'assignee_username';
 export const TOKEN_TYPE_MILESTONE = 'milestone';
 export const TOKEN_TYPE_LABEL = 'labels';
+export const TOKEN_TYPE_TYPE = 'type';
 export const TOKEN_TYPE_MY_REACTION = 'my_reaction_emoji';
 export const TOKEN_TYPE_CONFIDENTIAL = 'confidential';
 export const TOKEN_TYPE_ITERATION = 'iteration';
@@ -266,6 +267,18 @@ export const filters = {
       },
     },
   },
+  [TOKEN_TYPE_TYPE]: {
+    [API_PARAM]: {
+      [NORMAL_FILTER]: 'types',
+      [SPECIAL_FILTER]: 'types',
+    },
+    [URL_PARAM]: {
+      [OPERATOR_IS]: {
+        [NORMAL_FILTER]: 'type[]',
+        [SPECIAL_FILTER]: 'type[]',
+      },
+    },
+  },
   [TOKEN_TYPE_MY_REACTION]: {
     [API_PARAM]: {
       [NORMAL_FILTER]: 'myReactionEmoji',

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

@@ -13,6 +13,7 @@ query getProjectIssues(
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $types: [IssueType!]
   $not: NegatedIssueFilterInput
   $beforeCursor: String
   $afterCursor: String
@@ -30,6 +31,7 @@ query getProjectIssues(
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      types: $types
       not: $not
       before: $beforeCursor
       after: $afterCursor

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

@@ -8,6 +8,7 @@ query getProjectIssuesCount(
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $types: [IssueType!]
   $not: NegatedIssueFilterInput
 ) {
   project(fullPath: $projectPath) {
@@ -20,6 +21,7 @@ query getProjectIssuesCount(
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      types: $types
       not: $not
     ) {
       count

app/assets/javascripts/issues_list/utils.js

@@ -22,6 +22,7 @@ import {
   TOKEN_TYPE_ASSIGNEE,
   TOKEN_TYPE_ITERATION,
   TOKEN_TYPE_MILESTONE,
+  TOKEN_TYPE_TYPE,
   UPDATED_ASC,
   UPDATED_DESC,
   URL_PARAM,
@@ -187,10 +188,13 @@ const getFilterType = (data, tokenType = '') =>
     ? SPECIAL_FILTER
     : NORMAL_FILTER;
 
-const requiresUpperCaseValue = (tokenType, value) =>
+const isWildcardValue = (tokenType, value) =>
   (tokenType === TOKEN_TYPE_ITERATION || tokenType === TOKEN_TYPE_MILESTONE) &&
   SPECIAL_FILTER_VALUES.includes(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()

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

@@ -46,6 +46,7 @@ export const TOKEN_TITLE_AUTHOR = __('Author');
 export const TOKEN_TITLE_ASSIGNEE = __('Assignee');
 export const TOKEN_TITLE_MILESTONE = __('Milestone');
 export const TOKEN_TITLE_LABEL = __('Label');
+export const TOKEN_TITLE_TYPE = __('Type');
 export const TOKEN_TITLE_MY_REACTION = __('My-Reaction');
 export const TOKEN_TITLE_CONFIDENTIAL = __('Confidential');
 export const TOKEN_TITLE_ITERATION = __('Iteration');

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

@@ -13,6 +13,7 @@ query getProjectIssues(
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $types: [IssueType!]
   $epicId: String
   $iterationId: [ID]
   $iterationWildcardId: IterationWildcardId
@@ -34,6 +35,7 @@ query getProjectIssues(
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      types: $types
       epicId: $epicId
       iterationId: $iterationId
       iterationWildcardId: $iterationWildcardId

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

@@ -8,6 +8,7 @@ query getProjectIssuesCount(
   $labelName: [String]
   $milestoneTitle: [String]
   $milestoneWildcardId: MilestoneWildcardId
+  $types: [IssueType!]
   $epicId: String
   $iterationId: [ID]
   $iterationWildcardId: IterationWildcardId
@@ -24,6 +25,7 @@ query getProjectIssuesCount(
       labelName: $labelName
       milestoneTitle: $milestoneTitle
       milestoneWildcardId: $milestoneWildcardId
+      types: $types
       epicId: $epicId
       iterationId: $iterationId
       iterationWildcardId: $iterationWildcardId

spec/frontend/issues_list/components/issues_list_app_spec.js

@@ -36,6 +36,7 @@ import {
   TOKEN_TYPE_LABEL,
   TOKEN_TYPE_MILESTONE,
   TOKEN_TYPE_MY_REACTION,
+  TOKEN_TYPE_TYPE,
   TOKEN_TYPE_WEIGHT,
   urlSortParams,
 } from '~/issues_list/constants';
@@ -556,6 +557,7 @@ describe('IssuesListApp component', () => {
           { type: TOKEN_TYPE_ASSIGNEE, preloadedAuthors },
           { type: TOKEN_TYPE_MILESTONE },
           { type: TOKEN_TYPE_LABEL },
+          { type: TOKEN_TYPE_TYPE },
           { type: TOKEN_TYPE_MY_REACTION },
           { type: TOKEN_TYPE_CONFIDENTIAL },
           { type: TOKEN_TYPE_ITERATION },

spec/frontend/issues_list/mock_data.js

@@ -107,6 +107,8 @@ export const locationSearch = [
 export const locationSearchWithSpecialValues = [
   'assignee_id=123',
   'assignee_username=bart',
+  'type[]=issue',
+  'type[]=incident',
   'my_reaction_emoji=None',
   'iteration_id=Current',
   'milestone_title=Upcoming',
@@ -142,6 +144,8 @@ 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: 'milestone', value: { data: 'Upcoming', operator: OPERATOR_IS } },
@@ -173,6 +177,7 @@ export const apiParams = {
 export const apiParamsWithSpecialValues = {
   assigneeId: '123',
   assigneeUsernames: 'bart',
+  types: ['ISSUE', 'INCIDENT'],
   myReactionEmoji: 'None',
   iterationWildcardId: 'CURRENT',
   milestoneWildcardId: 'UPCOMING',
@@ -202,6 +207,7 @@ export const urlParams = {
 export const urlParamsWithSpecialValues = {
   assignee_id: '123',
   'assignee_username[]': 'bart',
+  'type[]': ['issue', 'incident'],
   my_reaction_emoji: 'None',
   iteration_id: 'Current',
   milestone_title: 'Upcoming',