diff --git a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue index f7c9f10ea46..07af2b848c2 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -3,6 +3,7 @@ import { GlAlert, GlLoadingIcon, GlTabs } from '@gitlab/ui'; import { s__ } from '~/locale'; import PipelineGraph from '~/pipelines/components/pipeline_graph/pipeline_graph.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility'; import { CREATE_TAB, EDITOR_APP_STATUS_EMPTY, @@ -12,6 +13,8 @@ import { EDITOR_APP_STATUS_VALID, LINT_TAB, MERGED_TAB, + TAB_QUERY_PARAM, + TABS_INDEX, VISUALIZE_TAB, } from '../constants'; import getAppStatus from '../graphql/queries/client/app_status.graphql'; @@ -42,6 +45,9 @@ export default { errorTexts: { loadMergedYaml: s__('Pipelines|Could not load merged YAML content'), }, + query: { + TAB_QUERY_PARAM, + }, tabConstants: { CREATE_TAB, LINT_TAB, @@ -98,15 +104,38 @@ export default { return this.appStatus === EDITOR_APP_STATUS_LOADING; }, }, + created() { + const [tabQueryParam] = getParameterValues(TAB_QUERY_PARAM); + + if (tabQueryParam && TABS_INDEX[tabQueryParam]) { + this.setDefaultTab(tabQueryParam); + } + }, methods: { setCurrentTab(tabName) { this.$emit('set-current-tab', tabName); }, + setDefaultTab(tabName) { + // We associate tab name with the index so that we can use tab name + // in other part of the app and load the corresponding tab closer to the + // actual component using a hash that binds the name to the indexes. + // This also means that if we ever changed tab order, we would justs need to + // update `TABS_INDEX` hash instead of all the instances in the app + // where we used the individual indexes + const newUrl = setUrlParams({ [TAB_QUERY_PARAM]: TABS_INDEX[tabName] }); + + this.setCurrentTab(tabName); + updateHistory({ url: newUrl, title: document.title, replace: true }); + }, }, };