diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-29 12:09:48 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-29 12:09:48 +0300 |
commit | 7510fe06eba02c3cee247f8ceb4ee6f6a4de54f6 (patch) | |
tree | 95025711e64d000172e47209bfdc1d7cd7d6b972 /app/assets/javascripts/issues | |
parent | 401607eed7e0918553e985e1f12e99dc1ff9e948 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/issues')
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 = '') => |