Add latest changes from gitlab-org/gitlab@master

4 files changed, 76 insertions, 40 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 a43aed6c521..eb7e85bde41 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -45,6 +45,7 @@ import {
   PAGE_SIZE,
   PARAM_PAGE_AFTER,
   PARAM_PAGE_BEFORE,
+  PARAM_SORT,
   PARAM_STATE,
   RELATIVE_POSITION_ASC,
   TOKEN_TYPE_ASSIGNEE,
@@ -138,43 +139,17 @@ export default {
     },
   },
   data() {
-    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(this.initialSort);
-    const graphQLSortKey =
-      isSortKey(this.initialSort?.toUpperCase()) && this.initialSort.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.
-    let sortKey = dashboardSortKey || graphQLSortKey || defaultSortKey;
-
-    if (this.isIssueRepositioningDisabled && sortKey === RELATIVE_POSITION_ASC) {
-      this.showIssueRepositioningMessage();
-      sortKey = defaultSortKey;
-    }
-
-    const isSearchDisabled =
-      this.isAnonymousSearchDisabled &&
-      !this.isSignedIn &&
-      window.location.search.includes('search=');
-
-    if (isSearchDisabled) {
-      this.showAnonymousSearchingMessage();
-    }
-
     return {
       exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
-      filterTokens: isSearchDisabled ? [] : getFilterTokens(window.location.search),
+      filterTokens: [],
       issues: [],
       issuesCounts: {},
       issuesError: null,
       pageInfo: {},
-      pageParams: getInitialPageParams(sortKey, pageAfter, pageBefore),
+      pageParams: {},
       showBulkEditSidebar: false,
-      sortKey,
-      state: state || IssuableStates.Opened,
+      sortKey: CREATED_DESC,
+      state: IssuableStates.Opened,
     };
   },
   apollo: {
@@ -416,7 +391,15 @@ export default {
       };
     },
   },
+  watch: {
+    $route(newValue, oldValue) {
+      if (newValue.fullPath !== oldValue.fullPath) {
+        this.updateData(getParameterByName(PARAM_SORT));
+      }
+    },
+  },
   created() {
+    this.updateData(this.initialSort);
     this.cache = {};
   },
   mounted() {
@@ -516,6 +499,8 @@ export default {
         this.pageParams = getInitialPageParams(this.sortKey);
       }
       this.state = state;
+
+      this.$router.push({ query: this.urlParams });
     },
     handleDismissAlert() {
       this.issuesError = null;
@@ -525,8 +510,11 @@ export default {
         this.showAnonymousSearchingMessage();
         return;
       }
+
       this.pageParams = getInitialPageParams(this.sortKey);
       this.filterTokens = filter;
+
+      this.$router.push({ query: this.urlParams });
     },
     handleNextPage() {
       this.pageParams = {
@@ -534,6 +522,8 @@ export default {
         firstPageSize: PAGE_SIZE,
       };
       scrollUp();
+
+      this.$router.push({ query: this.urlParams });
     },
     handlePreviousPage() {
       this.pageParams = {
@@ -541,6 +531,8 @@ export default {
         lastPageSize: PAGE_SIZE,
       };
       scrollUp();
+
+      this.$router.push({ query: this.urlParams });
     },
     handleReorder({ newIndex, oldIndex }) {
       const issueToMove = this.issues[oldIndex];
@@ -592,6 +584,8 @@ export default {
       if (this.isSignedIn) {
         this.saveSortPreference(sortKey);
       }
+
+      this.$router.push({ query: this.urlParams });
     },
     saveSortPreference(sortKey) {
       this.$apollo
@@ -623,6 +617,39 @@ export default {
     toggleBulkEditSidebar(showBulkEditSidebar) {
       this.showBulkEditSidebar = showBulkEditSidebar;
     },
+    updateData(sortValue) {
+      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.
+      let sortKey = dashboardSortKey || graphQLSortKey || defaultSortKey;
+
+      if (this.isIssueRepositioningDisabled && sortKey === RELATIVE_POSITION_ASC) {
+        this.showIssueRepositioningMessage();
+        sortKey = defaultSortKey;
+      }
+
+      const isSearchDisabled =
+        this.isAnonymousSearchDisabled &&
+        !this.isSignedIn &&
+        window.location.search.includes('search=');
+
+      if (isSearchDisabled) {
+        this.showAnonymousSearchingMessage();
+      }
+
+      this.exportCsvPathWithQuery = this.getExportCsvPathWithQuery();
+      this.filterTokens = isSearchDisabled ? [] : getFilterTokens(window.location.search);
+      this.pageParams = getInitialPageParams(sortKey, pageAfter, pageBefore);
+      this.sortKey = sortKey;
+      this.state = state || IssuableStates.Opened;
+    },
   },
 };
 </script>
@@ -649,10 +676,10 @@ export default {
       :is-manual-ordering="isManualOrdering"
       :show-bulk-edit-sidebar="showBulkEditSidebar"
       :show-pagination-controls="showPaginationControls"
-      :use-keyset-pagination="true"
+      sync-filter-and-sort
+      use-keyset-pagination
       :has-next-page="pageInfo.hasNextPage"
       :has-previous-page="pageInfo.hasPreviousPage"
-      :url-params="urlParams"
       @click-tab="handleClickTab"
       @dismiss-alert="handleDismissAlert"
       @filter="handleFilter"
diff --git a/app/assets/javascripts/issues/list/constants.js b/app/assets/javascripts/issues/list/constants.js
index 4b07a078512..d4e2cdcfb1d 100644
--- a/app/assets/javascripts/issues/list/constants.js
+++ b/app/assets/javascripts/issues/list/constants.js
@@ -58,6 +58,7 @@ export const PAGE_SIZE = 20;
 export const PAGE_SIZE_MANUAL = 100;
 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';
 
@@ -174,6 +175,7 @@ export const filters = {
       },
       [OPERATOR_IS_NOT]: {
         [NORMAL_FILTER]: 'not[milestone_title]',
+        [SPECIAL_FILTER]: 'not[milestone_title]',
       },
     },
   },
@@ -258,6 +260,7 @@ export const filters = {
       },
       [OPERATOR_IS_NOT]: {
         [NORMAL_FILTER]: 'not[iteration_id]',
+        [SPECIAL_FILTER]: 'not[iteration_id]',
       },
     },
   },
diff --git a/app/assets/javascripts/issues/list/index.js b/app/assets/javascripts/issues/list/index.js
index 3b2d37eab74..61cd3840cc1 100644
--- a/app/assets/javascripts/issues/list/index.js
+++ b/app/assets/javascripts/issues/list/index.js
@@ -1,6 +1,7 @@
 import produce from 'immer';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import VueRouter from 'vue-router';
 import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.graphql';
 import IssuesListApp from 'ee_else_ce/issues/list/components/issues_list_app.vue';
 import createDefaultClient from '~/lib/graphql';
@@ -53,6 +54,7 @@ export function mountIssuesListApp() {
   }
 
   Vue.use(VueApollo);
+  Vue.use(VueRouter);
 
   const resolvers = {
     Mutation: {
@@ -74,11 +76,6 @@ export function mountIssuesListApp() {
     },
   };
 
-  const defaultClient = createDefaultClient(resolvers);
-  const apolloProvider = new VueApollo({
-    defaultClient,
-  });
-
   const {
     autocompleteAwardEmojisPath,
     calendarPath,
@@ -121,7 +118,14 @@ export function mountIssuesListApp() {
   return new Vue({
     el,
     name: 'IssuesListRoot',
-    apolloProvider,
+    apolloProvider: new VueApollo({
+      defaultClient: createDefaultClient(resolvers),
+    }),
+    router: new VueRouter({
+      base: window.location.pathname,
+      mode: 'history',
+      routes: [{ path: '/' }],
+    }),
     provide: {
       autocompleteAwardEmojisPath,
       calendarPath,
diff --git a/app/assets/javascripts/issues/list/utils.js b/app/assets/javascripts/issues/list/utils.js
index 4b77bd9bc5f..2aa74dd2ea9 100644
--- a/app/assets/javascripts/issues/list/utils.js
+++ b/app/assets/javascripts/issues/list/utils.js
@@ -1,3 +1,4 @@
+import { createTerm } from '@gitlab/ui/src/components/base/filtered_search/filtered_search_utils';
 import { isPositiveInteger } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
 import {
@@ -195,11 +196,12 @@ const convertToFilteredSearchTerms = (locationSearch) =>
 
 export const getFilterTokens = (locationSearch) => {
   if (!locationSearch) {
-    return [];
+    return [createTerm()];
   }
   const filterTokens = convertToFilteredTokens(locationSearch);
   const searchTokens = convertToFilteredSearchTerms(locationSearch);
-  return filterTokens.concat(searchTokens);
+  const tokens = filterTokens.concat(searchTokens);
+  return tokens.length ? tokens : [createTerm()];
 };
 
 const getFilterType = (data, tokenType = '') =>