Add latest changes from gitlab-org/gitlab@master

4 files changed, 97 insertions, 114 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 4c7092fba7c..52b89ecfd1a 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -6,7 +6,7 @@ import IssueCardStatistics from 'ee_else_ce/issues/list/components/issue_card_st
 import IssueCardTimeInfo from 'ee_else_ce/issues/list/components/issue_card_time_info.vue';
 import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql';
 import getIssuesCountsQuery from 'ee_else_ce/issues/list/queries/get_issues_counts.query.graphql';
-import createFlash, { FLASH_TYPES } from '~/flash';
+import { createAlert, FLASH_TYPES } from '~/flash';
 import { TYPE_USER } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { ITEM_TYPE } from '~/groups/constants';
@@ -18,9 +18,11 @@ import { isPositiveInteger } from '~/lib/utils/number_utils';
 import { scrollUp } from '~/lib/utils/scroll_utils';
 import { getParameterByName, joinPaths } from '~/lib/utils/url_utility';
 import {
-  OPTIONS_NONE_ANY,
   FILTERED_SEARCH_TERM,
   OPERATORS_IS,
+  OPERATORS_IS_NOT,
+  OPERATORS_IS_NOT_OR,
+  OPTIONS_NONE_ANY,
   TOKEN_TITLE_ASSIGNEE,
   TOKEN_TITLE_AUTHOR,
   TOKEN_TITLE_CONFIDENTIAL,
@@ -31,8 +33,6 @@ import {
   TOKEN_TITLE_ORGANIZATION,
   TOKEN_TITLE_RELEASE,
   TOKEN_TITLE_TYPE,
-  OPERATORS_IS_NOT_OR,
-  OPERATORS_IS_NOT,
   TOKEN_TYPE_ASSIGNEE,
   TOKEN_TYPE_AUTHOR,
   TOKEN_TYPE_CONFIDENTIAL,
@@ -62,11 +62,9 @@ import {
   PARAM_SORT,
   PARAM_STATE,
   RELATIVE_POSITION_ASC,
-  TYPE_TOKEN_TASK_OPTION,
   UPDATED_DESC,
   urlSortParams,
 } from '../constants';
-
 import eventHub from '../eventhub';
 import reorderIssuesMutation from '../queries/reorder_issues.mutation.graphql';
 import searchLabelsQuery from '../queries/search_labels.query.graphql';
@@ -253,7 +251,7 @@ export default {
       return [...defaultWorkItemTypes, ...this.eeWorkItemTypes];
     },
     typeTokenOptions() {
-      return [...defaultTypeTokenOptions, TYPE_TOKEN_TASK_OPTION, ...this.eeTypeTokenOptions];
+      return [...defaultTypeTokenOptions, ...this.eeTypeTokenOptions];
     },
     hasOrFeature() {
       return this.glFeatures.orIssuableQueries;
@@ -435,7 +433,6 @@ export default {
       return this.issues.length > 0 && (this.pageInfo.hasNextPage || this.pageInfo.hasPreviousPage);
     },
     showPageSizeControls() {
-      /** only show page size controls when the tab count is greater than the default/minimum page size control i.e 20 in this case */
       return this.currentTabCount > PAGE_SIZE;
     },
     sortOptions() {
@@ -468,7 +465,7 @@ export default {
         page_before: this.pageParams.beforeCursor ?? undefined,
       };
     },
-    shouldDisableSomeFilters() {
+    shouldDisableTextSearch() {
       return this.isAnonymousSearchDisabled && !this.isSignedIn;
     },
   },
@@ -575,9 +572,11 @@ export default {
       eventHub.$emit('issuables:enableBulkEdit');
     },
     handleClickTab(state) {
-      if (this.state !== state) {
-        this.pageParams = getInitialPageParams(this.pageSize);
+      if (this.state === state) {
+        return;
       }
+
+      this.pageParams = getInitialPageParams(this.pageSize);
       this.state = state;
 
       this.$router.push({ query: this.urlParams });
@@ -585,8 +584,8 @@ export default {
     handleDismissAlert() {
       this.issuesError = null;
     },
-    handleFilter(filter) {
-      this.setFilterTokens(filter);
+    handleFilter(tokens) {
+      this.setFilterTokens(tokens);
 
       this.pageParams = getInitialPageParams(this.pageSize);
 
@@ -647,14 +646,16 @@ export default {
         });
     },
     handleSort(sortKey) {
+      if (this.sortKey === sortKey) {
+        return;
+      }
+
       if (this.isIssueRepositioningDisabled && sortKey === RELATIVE_POSITION_ASC) {
         this.showIssueRepositioningMessage();
         return;
       }
 
-      if (this.sortKey !== sortKey) {
-        this.pageParams = getInitialPageParams(this.pageSize);
-      }
+      this.pageParams = getInitialPageParams(this.pageSize);
       this.sortKey = sortKey;
 
       if (this.isSignedIn) {
@@ -678,36 +679,26 @@ export default {
           Sentry.captureException(error);
         });
     },
-    setFilterTokens(filtersArg) {
-      const filters = this.removeDisabledSearchTerms(filtersArg);
+    setFilterTokens(tokens) {
+      this.filterTokens = this.removeDisabledSearchTerms(tokens);
 
-      this.filterTokens = filters;
-
-      // If we filtered something out, let's show a warning message
-      if (filters.length < filtersArg.length) {
+      if (this.filterTokens.length < tokens.length) {
         this.showAnonymousSearchingMessage();
       }
     },
     removeDisabledSearchTerms(filters) {
-      // If we shouldn't disable anything, let's return the same thing
-      if (!this.shouldDisableSomeFilters) {
-        return filters;
-      }
-
-      const filtersWithoutSearchTerms = filters.filter(
-        (token) => !(token.type === FILTERED_SEARCH_TERM && token.value?.data),
-      );
-
-      return filtersWithoutSearchTerms;
+      return this.shouldDisableTextSearch
+        ? filters.filter((token) => !(token.type === FILTERED_SEARCH_TERM && token.value?.data))
+        : filters;
     },
     showAnonymousSearchingMessage() {
-      createFlash({
+      createAlert({
         message: this.$options.i18n.anonymousSearchingMessage,
         type: FLASH_TYPES.NOTICE,
       });
     },
     showIssueRepositioningMessage() {
-      createFlash({
+      createAlert({
         message: this.$options.i18n.issueRepositioningMessage,
         type: FLASH_TYPES.NOTICE,
       });
@@ -716,11 +707,8 @@ export default {
       this.showBulkEditSidebar = showBulkEditSidebar;
     },
     handlePageSizeChange(newPageSize) {
-      /** make sure the page number is preserved so that the current context is not lost* */
-      const lastPageSize = getParameterByName(PARAM_LAST_PAGE_SIZE);
-      const pageNumberSize = lastPageSize ? 'lastPageSize' : 'firstPageSize';
-      /** depending upon what page or page size we are dynamically set pageParams * */
-      this.pageParams[pageNumberSize] = newPageSize;
+      const pageParam = getParameterByName(PARAM_LAST_PAGE_SIZE) ? 'lastPageSize' : 'firstPageSize';
+      this.pageParams[pageParam] = newPageSize;
       this.pageSize = newPageSize;
       scrollUp();
 
@@ -729,16 +717,14 @@ export default {
     updateData(sortValue) {
       const firstPageSize = getParameterByName(PARAM_FIRST_PAGE_SIZE);
       const lastPageSize = getParameterByName(PARAM_LAST_PAGE_SIZE);
-      const pageAfter = getParameterByName(PARAM_PAGE_AFTER);
-      const pageBefore = getParameterByName(PARAM_PAGE_BEFORE);
       const state = getParameterByName(PARAM_STATE);
 
       const defaultSortKey = state === IssuableStates.Closed ? UPDATED_DESC : CREATED_DESC;
       const dashboardSortKey = getSortKey(sortValue);
       const graphQLSortKey = isSortKey(sortValue?.toUpperCase()) && sortValue.toUpperCase();
 
-      // The initial sort is an old enum value when it is saved on the dashboard issues page.
-      // The initial sort is a GraphQL enum value when it is saved on the Vue issues list page.
+      // The initial sort is an old enum value when it is saved on the Haml dashboard issues page.
+      // The initial sort is a GraphQL enum value when it is saved on the Vue group/project issues page.
       let sortKey = dashboardSortKey || graphQLSortKey || defaultSortKey;
 
       if (this.isIssueRepositioningDisabled && sortKey === RELATIVE_POSITION_ASC) {
@@ -746,15 +732,15 @@ export default {
         sortKey = defaultSortKey;
       }
 
-      this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
       this.setFilterTokens(getFilterTokens(window.location.search));
 
+      this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
       this.pageParams = getInitialPageParams(
         this.pageSize,
         isPositiveInteger(firstPageSize) ? parseInt(firstPageSize, 10) : undefined,
         isPositiveInteger(lastPageSize) ? parseInt(lastPageSize, 10) : undefined,
-        pageAfter,
-        pageBefore,
+        getParameterByName(PARAM_PAGE_AFTER),
+        getParameterByName(PARAM_PAGE_BEFORE),
       );
       this.sortKey = sortKey;
       this.state = state || IssuableStates.Opened;
diff --git a/app/assets/javascripts/issues/list/constants.js b/app/assets/javascripts/issues/list/constants.js
index 1bbfe7a3a93..dc8adf9473f 100644
--- a/app/assets/javascripts/issues/list/constants.js
+++ b/app/assets/javascripts/issues/list/constants.js
@@ -30,6 +30,50 @@ import {
   WORK_ITEM_TYPE_ENUM_TASK,
 } from '~/work_items/constants';
 
+export const ISSUE_REFERENCE = /^#\d+$/;
+export const MAX_LIST_SIZE = 10;
+export const PAGE_SIZE = 20;
+export const PARAM_ASSIGNEE_ID = 'assignee_id';
+export const PARAM_FIRST_PAGE_SIZE = 'first_page_size';
+export const PARAM_LAST_PAGE_SIZE = 'last_page_size';
+export const PARAM_PAGE_AFTER = 'page_after';
+export const PARAM_PAGE_BEFORE = 'page_before';
+export const PARAM_SORT = 'sort';
+export const PARAM_STATE = 'state';
+export const RELATIVE_POSITION = 'relative_position';
+
+export const BLOCKING_ISSUES_ASC = 'BLOCKING_ISSUES_ASC';
+export const BLOCKING_ISSUES_DESC = 'BLOCKING_ISSUES_DESC';
+export const CLOSED_AT_ASC = 'CLOSED_AT_ASC';
+export const CLOSED_AT_DESC = 'CLOSED_AT_DESC';
+export const CREATED_ASC = 'CREATED_ASC';
+export const CREATED_DESC = 'CREATED_DESC';
+export const DUE_DATE_ASC = 'DUE_DATE_ASC';
+export const DUE_DATE_DESC = 'DUE_DATE_DESC';
+export const HEALTH_STATUS_ASC = 'HEALTH_STATUS_ASC';
+export const HEALTH_STATUS_DESC = 'HEALTH_STATUS_DESC';
+export const LABEL_PRIORITY_ASC = 'LABEL_PRIORITY_ASC';
+export const LABEL_PRIORITY_DESC = 'LABEL_PRIORITY_DESC';
+export const MILESTONE_DUE_ASC = 'MILESTONE_DUE_ASC';
+export const MILESTONE_DUE_DESC = 'MILESTONE_DUE_DESC';
+export const POPULARITY_ASC = 'POPULARITY_ASC';
+export const POPULARITY_DESC = 'POPULARITY_DESC';
+export const PRIORITY_ASC = 'PRIORITY_ASC';
+export const PRIORITY_DESC = 'PRIORITY_DESC';
+export const RELATIVE_POSITION_ASC = 'RELATIVE_POSITION_ASC';
+export const TITLE_ASC = 'TITLE_ASC';
+export const TITLE_DESC = 'TITLE_DESC';
+export const UPDATED_ASC = 'UPDATED_ASC';
+export const UPDATED_DESC = 'UPDATED_DESC';
+export const WEIGHT_ASC = 'WEIGHT_ASC';
+export const WEIGHT_DESC = 'WEIGHT_DESC';
+
+export const API_PARAM = 'apiParam';
+export const URL_PARAM = 'urlParam';
+export const NORMAL_FILTER = 'normalFilter';
+export const SPECIAL_FILTER = 'specialFilter';
+export const ALTERNATIVE_FILTER = 'alternativeFilter';
+
 export const i18n = {
   anonymousSearchingMessage: __('You must sign in to search for specific terms.'),
   calendarLabel: __('Subscribe to calendar'),
@@ -69,44 +113,6 @@ export const i18n = {
   upvotes: __('Upvotes'),
 };
 
-export const ISSUE_REFERENCE = /^#\d+$/;
-export const MAX_LIST_SIZE = 10;
-export const PAGE_SIZE = 20;
-export const PARAM_ASSIGNEE_ID = 'assignee_id';
-export const PARAM_FIRST_PAGE_SIZE = 'first_page_size';
-export const PARAM_LAST_PAGE_SIZE = 'last_page_size';
-export const PARAM_PAGE_AFTER = 'page_after';
-export const PARAM_PAGE_BEFORE = 'page_before';
-export const PARAM_SORT = 'sort';
-export const PARAM_STATE = 'state';
-export const RELATIVE_POSITION = 'relative_position';
-
-export const BLOCKING_ISSUES_ASC = 'BLOCKING_ISSUES_ASC';
-export const BLOCKING_ISSUES_DESC = 'BLOCKING_ISSUES_DESC';
-export const CREATED_ASC = 'CREATED_ASC';
-export const CREATED_DESC = 'CREATED_DESC';
-export const DUE_DATE_ASC = 'DUE_DATE_ASC';
-export const DUE_DATE_DESC = 'DUE_DATE_DESC';
-export const HEALTH_STATUS_ASC = 'HEALTH_STATUS_ASC';
-export const HEALTH_STATUS_DESC = 'HEALTH_STATUS_DESC';
-export const LABEL_PRIORITY_ASC = 'LABEL_PRIORITY_ASC';
-export const LABEL_PRIORITY_DESC = 'LABEL_PRIORITY_DESC';
-export const MILESTONE_DUE_ASC = 'MILESTONE_DUE_ASC';
-export const MILESTONE_DUE_DESC = 'MILESTONE_DUE_DESC';
-export const POPULARITY_ASC = 'POPULARITY_ASC';
-export const POPULARITY_DESC = 'POPULARITY_DESC';
-export const PRIORITY_ASC = 'PRIORITY_ASC';
-export const PRIORITY_DESC = 'PRIORITY_DESC';
-export const RELATIVE_POSITION_ASC = 'RELATIVE_POSITION_ASC';
-export const TITLE_ASC = 'TITLE_ASC';
-export const TITLE_DESC = 'TITLE_DESC';
-export const UPDATED_ASC = 'UPDATED_ASC';
-export const UPDATED_DESC = 'UPDATED_DESC';
-export const WEIGHT_ASC = 'WEIGHT_ASC';
-export const WEIGHT_DESC = 'WEIGHT_DESC';
-export const CLOSED_ASC = 'CLOSED_AT_ASC';
-export const CLOSED_DESC = 'CLOSED_AT_DESC';
-
 export const urlSortParams = {
   [PRIORITY_ASC]: 'priority',
   [PRIORITY_DESC]: 'priority_desc',
@@ -114,8 +120,8 @@ export const urlSortParams = {
   [CREATED_DESC]: 'created_date',
   [UPDATED_ASC]: 'updated_asc',
   [UPDATED_DESC]: 'updated_desc',
-  [CLOSED_ASC]: 'closed_asc',
-  [CLOSED_DESC]: 'closed_desc',
+  [CLOSED_AT_ASC]: 'closed_asc',
+  [CLOSED_AT_DESC]: 'closed_desc',
   [MILESTONE_DUE_ASC]: 'milestone',
   [MILESTONE_DUE_DESC]: 'milestone_due_desc',
   [DUE_DATE_ASC]: 'due_date',
@@ -135,12 +141,6 @@ export const urlSortParams = {
   [BLOCKING_ISSUES_DESC]: 'blocking_issues_desc',
 };
 
-export const API_PARAM = 'apiParam';
-export const URL_PARAM = 'urlParam';
-export const NORMAL_FILTER = 'normalFilter';
-export const SPECIAL_FILTER = 'specialFilter';
-export const ALTERNATIVE_FILTER = 'alternativeFilter';
-
 export const specialFilterValues = [
   FILTER_NONE,
   FILTER_ANY,
@@ -149,7 +149,6 @@ export const specialFilterValues = [
   FILTER_STARTED,
 ];
 
-export const TYPE_TOKEN_TASK_OPTION = { icon: 'issue-type-task', title: 'task', value: 'task' };
 export const TYPE_TOKEN_OBJECTIVE_OPTION = {
   icon: 'issue-type-objective',
   title: 'objective',
@@ -169,6 +168,7 @@ export const defaultTypeTokenOptions = [
   { 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' },
+  { icon: 'issue-type-task', title: 'task', value: 'task' },
 ];
 
 export const filters = {
diff --git a/app/assets/javascripts/issues/list/index.js b/app/assets/javascripts/issues/list/index.js
index c5845eb8e40..7b68b7432c9 100644
--- a/app/assets/javascripts/issues/list/index.js
+++ b/app/assets/javascripts/issues/list/index.js
@@ -2,16 +2,15 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import VueRouter from 'vue-router';
 import IssuesListApp from 'ee_else_ce/issues/list/components/issues_list_app.vue';
-import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import JiraIssuesImportStatusRoot from './components/jira_issues_import_status_app.vue';
+import JiraIssuesImportStatusApp from './components/jira_issues_import_status_app.vue';
 import { gqlClient } from './graphql';
 
 export function mountJiraIssuesListApp() {
-  const el = document.querySelector('.js-jira-issues-import-status');
+  const el = document.querySelector('.js-jira-issues-import-status-root');
 
   if (!el) {
-    return false;
+    return null;
   }
 
   const { issuesPath, projectPath } = el.dataset;
@@ -19,21 +18,19 @@ export function mountJiraIssuesListApp() {
   const isJiraConfigured = parseBoolean(el.dataset.isJiraConfigured);
 
   if (!isJiraConfigured || !canEdit) {
-    return false;
+    return null;
   }
 
   Vue.use(VueApollo);
-  const defaultClient = createDefaultClient();
-  const apolloProvider = new VueApollo({
-    defaultClient,
-  });
 
   return new Vue({
     el,
     name: 'JiraIssuesImportStatusRoot',
-    apolloProvider,
+    apolloProvider: new VueApollo({
+      defaultClient: gqlClient,
+    }),
     render(createComponent) {
-      return createComponent(JiraIssuesImportStatusRoot, {
+      return createComponent(JiraIssuesImportStatusApp, {
         props: {
           canEdit,
           isJiraConfigured,
@@ -46,10 +43,10 @@ export function mountJiraIssuesListApp() {
 }
 
 export function mountIssuesListApp() {
-  const el = document.querySelector('.js-issues-list');
+  const el = document.querySelector('.js-issues-list-root');
 
   if (!el) {
-    return false;
+    return null;
   }
 
   Vue.use(VueApollo);
diff --git a/app/assets/javascripts/issues/list/utils.js b/app/assets/javascripts/issues/list/utils.js
index 977b8fd4af9..b20827a22c7 100644
--- a/app/assets/javascripts/issues/list/utils.js
+++ b/app/assets/javascripts/issues/list/utils.js
@@ -19,8 +19,8 @@ import {
   API_PARAM,
   BLOCKING_ISSUES_ASC,
   BLOCKING_ISSUES_DESC,
-  CLOSED_ASC,
-  CLOSED_DESC,
+  CLOSED_AT_ASC,
+  CLOSED_AT_DESC,
   CREATED_ASC,
   CREATED_DESC,
   DUE_DATE_ASC,
@@ -104,8 +104,8 @@ export const getSortOptions = ({
       id: 4,
       title: __('Closed date'),
       sortDirection: {
-        ascending: CLOSED_ASC,
-        descending: CLOSED_DESC,
+        ascending: CLOSED_AT_ASC,
+        descending: CLOSED_AT_DESC,
       },
     },
     {
@@ -289,7 +289,7 @@ export const convertToApiParams = (filterTokens) => {
     .filter((token) => token.type !== FILTERED_SEARCH_TERM)
     .forEach((token) => {
       const filterType = getFilterType(token);
-      const field = filters[token.type][API_PARAM][filterType];
+      const apiField = filters[token.type][API_PARAM][filterType];
       let obj;
       if (token.value.operator === OPERATOR_NOT) {
         obj = not;
@@ -300,7 +300,7 @@ export const convertToApiParams = (filterTokens) => {
       }
       const data = formatData(token);
       Object.assign(obj, {
-        [field]: obj[field] ? [obj[field], data].flat() : data,
+        [apiField]: obj[apiField] ? [obj[apiField], data].flat() : data,
       });
     });
 
@@ -320,9 +320,9 @@ export const convertToUrlParams = (filterTokens) =>
     .filter((token) => token.type !== FILTERED_SEARCH_TERM)
     .reduce((acc, token) => {
       const filterType = getFilterType(token);
-      const param = filters[token.type][URL_PARAM][token.value.operator]?.[filterType];
+      const urlParam = filters[token.type][URL_PARAM][token.value.operator]?.[filterType];
       return Object.assign(acc, {
-        [param]: acc[param] ? [acc[param], token.value.data].flat() : token.value.data,
+        [urlParam]: acc[urlParam] ? [acc[urlParam], token.value.data].flat() : token.value.data,
       });
     }, {});