diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue | 53 |
1 files changed, 47 insertions, 6 deletions
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..0cd0d17d944 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -3,15 +3,18 @@ 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 GitlabExperiment from '~/experimentation/components/gitlab_experiment.vue'; import { CREATE_TAB, EDITOR_APP_STATUS_EMPTY, - EDITOR_APP_STATUS_ERROR, EDITOR_APP_STATUS_INVALID, EDITOR_APP_STATUS_LOADING, 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'; @@ -20,6 +23,7 @@ import CiEditorHeader from './editor/ci_editor_header.vue'; import TextEditor from './editor/text_editor.vue'; import CiLint from './lint/ci_lint.vue'; import EditorTab from './ui/editor_tab.vue'; +import WalkthroughPopover from './walkthrough_popover.vue'; export default { i18n: { @@ -42,6 +46,9 @@ export default { errorTexts: { loadMergedYaml: s__('Pipelines|Could not load merged YAML content'), }, + query: { + TAB_QUERY_PARAM, + }, tabConstants: { CREATE_TAB, LINT_TAB, @@ -58,6 +65,8 @@ export default { GlTabs, PipelineGraph, TextEditor, + GitlabExperiment, + WalkthroughPopover, }, mixins: [glFeatureFlagsMixin()], props: { @@ -74,6 +83,10 @@ export default { required: false, default: '', }, + isNewCiConfigFile: { + type: Boolean, + required: true, + }, }, apollo: { appStatus: { @@ -81,9 +94,8 @@ export default { }, }, computed: { - hasAppError() { - // Not an invalid config and with `mergedYaml` data missing - return this.appStatus === EDITOR_APP_STATUS_ERROR; + isMergedYamlAvailable() { + return this.ciConfigData?.mergedYaml; }, isEmpty() { return this.appStatus === EDITOR_APP_STATUS_EMPTY; @@ -98,22 +110,51 @@ 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 }); + }, }, }; </script> <template> - <gl-tabs class="file-editor gl-mb-3"> + <gl-tabs + class="file-editor gl-mb-3" + :query-param-name="$options.query.TAB_QUERY_PARAM" + sync-active-tab-with-query-params + > <editor-tab class="gl-mb-3" + title-link-class="js-walkthrough-popover-target" :title="$options.i18n.tabEdit" lazy data-testid="editor-tab" @click="setCurrentTab($options.tabConstants.CREATE_TAB)" > + <gitlab-experiment name="pipeline_editor_walkthrough"> + <template #candidate> + <walkthrough-popover v-if="isNewCiConfigFile" v-on="$listeners" /> + </template> + </gitlab-experiment> <ci-editor-header /> <text-editor :commit-sha="commitSha" :value="ciFileContent" v-on="$listeners" /> </editor-tab> @@ -154,7 +195,7 @@ export default { @click="setCurrentTab($options.tabConstants.MERGED_TAB)" > <gl-loading-icon v-if="isLoading" size="lg" class="gl-m-3" /> - <gl-alert v-else-if="hasAppError" variant="danger" :dismissible="false"> + <gl-alert v-else-if="!isMergedYamlAvailable" variant="danger" :dismissible="false"> {{ $options.errorTexts.loadMergedYaml }} </gl-alert> <ci-config-merged-preview v-else :ci-config-data="ciConfigData" v-on="$listeners" /> |