diff --git a/app/assets/javascripts/groups_projects/components/tab_view.vue b/app/assets/javascripts/groups_projects/components/tab_view.vue index 73fc49f84a2..57800431c0c 100644 --- a/app/assets/javascripts/groups_projects/components/tab_view.vue +++ b/app/assets/javascripts/groups_projects/components/tab_view.vue @@ -205,9 +205,10 @@ export default { }, }, methods: { - onRefetch() { - this.apolloClient.resetStore(); + async onRefetch() { + await this.apolloClient.clearStore(); this.$apollo.queries.items.refetch(); + this.$emit('refetch'); }, onKeysetNext(endCursor) { this.$emit('keyset-page-change', { diff --git a/app/assets/javascripts/groups_projects/components/tabs_with_list.vue b/app/assets/javascripts/groups_projects/components/tabs_with_list.vue index 26ffb54beae..d835cd83b04 100644 --- a/app/assets/javascripts/groups_projects/components/tabs_with_list.vue +++ b/app/assets/javascripts/groups_projects/components/tabs_with_list.vue @@ -230,28 +230,7 @@ export default { }, }, async created() { - if (!Object.keys(this.tabCountsQuery).length) { - return; - } - - try { - const { data } = await this.$apollo.query({ query: this.tabCountsQuery }); - - this.tabCounts = this.tabs.reduce((accumulator, tab) => { - const { count } = get(data, tab.countsQueryPath); - - return { - ...accumulator, - [tab.value]: count, - }; - }, {}); - } catch (error) { - createAlert({ - message: this.tabCountsQueryErrorMessage, - error, - captureError: true, - }); - } + this.getTabCounts(); }, methods: { numberToMetricPrefix, @@ -359,6 +338,9 @@ export default { onOffsetPageChange(page) { this.pushQuery({ ...this.$route.query, [QUERY_PARAM_PAGE]: page }); }, + onRefetch() { + this.getTabCounts(); + }, async userPreferencesUpdateMutate(sort) { try { await this.$apollo.mutate({ @@ -374,6 +356,30 @@ export default { Sentry.captureException(error); } }, + async getTabCounts() { + if (!Object.keys(this.tabCountsQuery).length) { + return; + } + + try { + const { data } = await this.$apollo.query({ query: this.tabCountsQuery }); + + this.tabCounts = this.tabs.reduce((accumulator, tab) => { + const { count } = get(data, tab.countsQueryPath); + + return { + ...accumulator, + [tab.value]: count, + }; + }, {}); + } catch (error) { + createAlert({ + message: this.tabCountsQueryErrorMessage, + error, + captureError: true, + }); + } + }, }, }; @@ -409,6 +415,7 @@ export default { :pagination-type="paginationType" @keyset-page-change="onKeysetPageChange" @offset-page-change="onOffsetPageChange" + @refetch="onRefetch" /> diff --git a/app/assets/javascripts/projects/pipelines/charts/components/branch_collapsible_listbox.vue b/app/assets/javascripts/projects/pipelines/charts/components/branch_collapsible_listbox.vue index 12e90d625c6..9f5a7a80ffd 100644 --- a/app/assets/javascripts/projects/pipelines/charts/components/branch_collapsible_listbox.vue +++ b/app/assets/javascripts/projects/pipelines/charts/components/branch_collapsible_listbox.vue @@ -4,6 +4,7 @@ import { produce } from 'immer'; import { createAlert } from '~/alert'; import { __, s__ } from '~/locale'; import getBranchesOptionsQuery from '../graphql/queries/get_branches_options.query.graphql'; +import { BRANCH_ANY } from '../constants'; const BRANCH_PAGINATION_LIMIT = 10; @@ -85,7 +86,7 @@ export default { return [ { text: s__('PipelineCharts|All branches'), - value: '', // use '' to represent no value selected, as GlCollapsibleListbox does not accept null as a valid value + value: BRANCH_ANY, }, ...this.branchesOptions.map((branch) => ({ text: branch, @@ -152,7 +153,6 @@ export default { :block="block" :items="items" :title="__('Switch branch')" - :toggle-text="branch" :search-placeholder="s__('Branches|Filter by branch name')" :infinite-scroll-loading="loading" :infinite-scroll="infiniteScroll" diff --git a/app/assets/javascripts/projects/pipelines/charts/components/pipelines_dashboard_clickhouse.vue b/app/assets/javascripts/projects/pipelines/charts/components/pipelines_dashboard_clickhouse.vue index 7f215f84af1..3cbb19cdf4f 100644 --- a/app/assets/javascripts/projects/pipelines/charts/components/pipelines_dashboard_clickhouse.vue +++ b/app/assets/javascripts/projects/pipelines/charts/components/pipelines_dashboard_clickhouse.vue @@ -2,7 +2,8 @@ import { s__ } from '~/locale'; import { createAlert } from '~/alert'; import { getDateInPast } from '~/lib/utils/datetime_utility'; -import { SOURCE_ANY, DATE_RANGE_7_DAYS, DATE_RANGES_AS_DAYS } from '../constants'; +import { DATE_RANGES_AS_DAYS, DATE_RANGE_DEFAULT, BRANCH_ANY } from '../constants'; +import { updateQueryHistory, paramsFromQuery } from '../url_utils'; import getPipelineAnalytics from '../graphql/queries/get_pipeline_analytics.query.graphql'; import DashboardHeader from './dashboard_header.vue'; @@ -35,12 +36,15 @@ export default { }, }, data() { + const defaultParams = { + source: null, + branch: this.defaultBranch, + dateRange: DATE_RANGE_DEFAULT, + }; + return { - params: { - source: SOURCE_ANY, - dateRange: DATE_RANGE_7_DAYS, - branch: this.defaultBranch, - }, + defaultParams, + params: paramsFromQuery(window.location.search, defaultParams), pipelineAnalytics: { aggregate: { count: null, @@ -82,8 +86,8 @@ export default { return { fullPath: this.projectPath, - source: this.params.source === SOURCE_ANY ? null : this.params.source, - branch: this.params.branch || null, + source: this.params.source || null, + branch: (this.params.branch === BRANCH_ANY ? null : this.params.branch) || null, fromTime: getDateInPast(today, DATE_RANGES_AS_DAYS[this.params.dateRange] || 7), toTime: today, }; @@ -99,6 +103,22 @@ export default { }; }, }, + mounted() { + window.addEventListener('popstate', this.updateParamsFromQuery); + }, + beforeDestroy() { + window.removeEventListener('popstate', this.updateParamsFromQuery); + }, + methods: { + updateParamsFromQuery() { + this.params = paramsFromQuery(window.location.search, this.defaultParams); + }, + onFiltersInput(params) { + this.params = params; + + updateQueryHistory(this.params, this.defaultParams); + }, + }, };