diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
commit | 36a59d088eca61b834191dacea009677a96c052f (patch) | |
tree | e4f33972dab5d8ef79e3944a9f403035fceea43f /app/assets/javascripts/pipeline_editor | |
parent | a1761f15ec2cae7c7f7bbda39a75494add0dfd6f (diff) |
Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
15 files changed, 332 insertions, 51 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue index 8536db78dfb..d9da238358f 100644 --- a/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue +++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue @@ -54,15 +54,15 @@ export default { return { message: this.defaultMessage, openMergeRequest: false, - targetBranch: this.currentBranch, + sourceBranch: this.currentBranch, }; }, computed: { isCommitFormFilledOut() { - return this.message && this.targetBranch; + return this.message && this.sourceBranch; }, - isCurrentBranchTarget() { - return this.targetBranch === this.currentBranch; + isCurrentBranchSourceBranch() { + return this.sourceBranch === this.currentBranch; }, isSubmitDisabled() { return !this.isCommitFormFilledOut || (!this.hasUnsavedChanges && !this.isNewCiConfigFile); @@ -79,7 +79,7 @@ export default { onSubmit() { this.$emit('submit', { message: this.message, - targetBranch: this.targetBranch, + sourceBranch: this.sourceBranch, openMergeRequest: this.openMergeRequest, }); }, @@ -93,7 +93,7 @@ export default { }, i18n: { commitMessage: __('Commit message'), - targetBranch: __('Target Branch'), + sourceBranch: __('Branch'), startMergeRequest: __('Start a %{new_merge_request} with these changes'), newMergeRequest: __('new merge request'), commitChanges: __('Commit changes'), @@ -120,20 +120,20 @@ export default { /> </gl-form-group> <gl-form-group - id="target-branch-group" - :label="$options.i18n.targetBranch" + id="source-branch-group" + :label="$options.i18n.sourceBranch" label-cols-sm="2" - label-for="target-branch-field" + label-for="source-branch-field" > <gl-form-input - id="target-branch-field" - v-model="targetBranch" + id="source-branch-field" + v-model="sourceBranch" class="gl-font-monospace!" required - data-qa-selector="target_branch_field" + data-qa-selector="source_branch_field" /> <gl-form-checkbox - v-if="!isCurrentBranchTarget" + v-if="!isCurrentBranchSourceBranch" v-model="openMergeRequest" data-testid="new-mr-checkbox" data-qa-selector="new_mr_checkbox" diff --git a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue index 4ef598d6ff3..9cbf60b1c8f 100644 --- a/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue +++ b/app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue @@ -75,7 +75,7 @@ export default { }, }, methods: { - async onCommitSubmit({ message, targetBranch, openMergeRequest }) { + async onCommitSubmit({ message, sourceBranch, openMergeRequest }) { this.isSaving = true; try { @@ -88,7 +88,7 @@ export default { variables: { action: this.action, projectPath: this.projectFullPath, - branch: targetBranch, + branch: sourceBranch, startBranch: this.currentBranch, message, filePath: this.ciConfigPath, @@ -104,12 +104,11 @@ export default { if (errors?.length) { this.$emit('showError', { type: COMMIT_FAILURE, reasons: errors }); } else { - const commitBranch = targetBranch; const params = openMergeRequest ? { type: COMMIT_SUCCESS_WITH_REDIRECT, params: { - sourceBranch: commitBranch, + sourceBranch, targetBranch: this.currentBranch, }, } @@ -119,10 +118,10 @@ export default { ...params, }); - this.updateLastCommitBranch(targetBranch); - this.updateCurrentBranch(targetBranch); + this.updateLastCommitBranch(sourceBranch); + this.updateCurrentBranch(sourceBranch); - if (this.currentBranch === targetBranch) { + if (this.currentBranch === sourceBranch) { this.$emit('updateCommitSha'); } } diff --git a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue index 853e839a7ab..42e2d34fa3a 100644 --- a/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue +++ b/app/assets/javascripts/pipeline_editor/components/editor/ci_config_merged_preview.vue @@ -46,7 +46,9 @@ export default { :value="mergedYaml" :file-name="ciConfigPath" :file-global-id="fileGlobalId" - :editor-options="{ readOnly: true }" + :editor-options="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ { + readOnly: true, + } /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" v-on="$listeners" /> </div> diff --git a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue index 83b074dd55c..58df98d0fb7 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue @@ -1,26 +1,74 @@ <script> +import { GlButton } from '@gitlab/ui'; +import getAppStatus from '~/pipeline_editor/graphql/queries/client/app_status.query.graphql'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { EDITOR_APP_STATUS_EMPTY, EDITOR_APP_STATUS_LOADING } from '../../constants'; +import FileTreePopover from '../popovers/file_tree_popover.vue'; import BranchSwitcher from './branch_switcher.vue'; export default { components: { BranchSwitcher, + FileTreePopover, + GlButton, }, + mixins: [glFeatureFlagMixin()], props: { hasUnsavedChanges: { type: Boolean, required: false, default: false, }, + isNewCiConfigFile: { + type: Boolean, + required: false, + default: false, + }, shouldLoadNewBranch: { type: Boolean, required: false, default: false, }, }, + apollo: { + appStatus: { + query: getAppStatus, + update(data) { + return data.app.status; + }, + }, + }, + computed: { + isAppLoading() { + return this.appStatus === EDITOR_APP_STATUS_LOADING; + }, + showFileTreeToggle() { + return ( + this.glFeatures.pipelineEditorFileTree && + !this.isNewCiConfigFile && + this.appStatus !== EDITOR_APP_STATUS_EMPTY + ); + }, + }, + methods: { + onFileTreeBtnClick() { + this.$emit('toggle-file-tree'); + }, + }, }; </script> <template> <div class="gl-mb-4"> + <gl-button + v-if="showFileTreeToggle" + id="file-tree-toggle" + icon="file-tree" + data-testid="file-tree-toggle" + :aria-label="__('File Tree')" + :loading="isAppLoading" + @click="onFileTreeBtnClick" + /> + <file-tree-popover v-if="showFileTreeToggle" /> <branch-switcher :has-unsaved-changes="hasUnsavedChanges" :should-load-new-branch="shouldLoadNewBranch" diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue new file mode 100644 index 00000000000..280cd729a43 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue @@ -0,0 +1,78 @@ +<script> +import { GlAlert, GlTooltipDirective } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +import FileIcon from '~/vue_shared/components/file_icon.vue'; +import { FILE_TREE_TIP_DISMISSED_KEY } from '../../constants'; +import FileItem from './file_item.vue'; + +const i18n = { + tipBtn: __('Learn more'), + tipDescription: s__( + 'PipelineEditorFileTree|When you use the include keyword to add pipeline configuration from files in the project, those files will be listed here.', + ), + tipTitle: s__('PipelineEditorFileTree|Configuration files added with the include keyword'), +}; + +export default { + i18n, + name: 'PipelineEditorFileTreeContainer', + components: { + FileIcon, + FileItem, + GlAlert, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + inject: ['ciConfigPath', 'includesHelpPagePath'], + props: { + includes: { + type: Array, + required: true, + }, + }, + data() { + return { + canShowTip: localStorage.getItem(FILE_TREE_TIP_DISMISSED_KEY) !== 'true', + }; + }, + computed: { + showTip() { + return this.includes.length === 0 && this.canShowTip; + }, + }, + methods: { + dismissTip() { + this.canShowTip = false; + localStorage.setItem(FILE_TREE_TIP_DISMISSED_KEY, 'true'); + }, + }, +}; +</script> +<template> + <aside class="file-tree-container gl-mr-5 gl-mb-5"> + <div + v-gl-tooltip + :title="ciConfigPath" + class="gl-bg-gray-50 gl-py-2 gl-px-3 gl-mb-3 gl-rounded-base" + > + <span class="file-row-name gl-str-truncated" :title="ciConfigPath"> + <file-icon class="file-row-icon" :file-name="ciConfigPath" /> + <span data-testid="current-config-filename">{{ ciConfigPath }}</span> + </span> + </div> + <gl-alert + v-if="showTip" + variant="tip" + :title="$options.i18n.tipTitle" + :secondary-button-text="$options.i18n.tipBtn" + :secondary-button-link="includesHelpPagePath" + @dismiss="dismissTip" + > + {{ $options.i18n.tipDescription }} + </gl-alert> + <div class="gl-overflow-y-auto"> + <file-item v-for="file in includes" :key="file.location" :file="file" /> + </div> + </aside> +</template> diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue new file mode 100644 index 00000000000..786d483b5b9 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue @@ -0,0 +1,45 @@ +<script> +import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui'; +import FileIcon from '~/vue_shared/components/file_icon.vue'; + +export default { + name: 'PipelineEditorFileItem', + components: { + FileIcon, + GlIcon, + GlLink, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + file: { + type: Object, + required: true, + }, + }, + computed: { + fileName() { + return this.file.location; + }, + filePath() { + return this.file.blob || this.file.raw; + }, + }, +}; +</script> +<template> + <gl-link + v-gl-tooltip + :href="filePath" + :title="fileName" + target="_blank" + class="file-tree-includes-link gl-display-flex gl-justify-content-space-between gl-hover-bg-gray-50 gl-text-body gl-hover-text-gray-900 gl-hover-text-decoration-none gl-py-2 gl-px-3 gl-rounded-base" + > + <span class="file-row-name gl-str-truncated" :title="fileName"> + <file-icon class="file-row-icon" :file-name="fileName" /> + <span>{{ fileName }}</span> + </span> + <gl-icon class="gl-display-none gl-relative gl-text-gray-500" name="external-link" /> + </gl-link> +</template> diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue index 25a78aab933..7beabcfe403 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_editor_mini_graph.vue @@ -47,6 +47,12 @@ export default { downstreamPipelines() { return this.linkedPipelines?.downstream?.nodes || []; }, + hasDownstreamPipelines() { + return this.downstreamPipelines.length > 0; + }, + hasPipelineStages() { + return this.pipelineStages.length > 0; + }, pipelinePath() { return this.pipeline.detailedStatus?.detailsPath || ''; }, @@ -73,9 +79,6 @@ export default { }; }); }, - showDownstreamPipelines() { - return this.downstreamPipelines.length > 0; - }, upstreamPipeline() { return this.linkedPipelines?.upstream; }, @@ -84,15 +87,20 @@ export default { </script> <template> - <div v-if="pipelineStages.length > 0" class="stage-cell gl-mr-5"> + <div + v-if="hasPipelineStages" + class="gl-align-items-center gl-display-inline-flex gl-flex-wrap stage-cell gl-mr-5" + > <linked-pipelines-mini-list v-if="upstreamPipeline" - :triggered-by="[upstreamPipeline]" + :triggered-by="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [ + upstreamPipeline, + ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */" data-testid="pipeline-editor-mini-graph-upstream" /> - <pipeline-mini-graph class="gl-display-inline" :stages="pipelineStages" /> + <pipeline-mini-graph :stages="pipelineStages" /> <linked-pipelines-mini-list - v-if="showDownstreamPipelines" + v-if="hasDownstreamPipelines" :triggered="downstreamPipelines" :pipeline-path="pipelinePath" data-testid="pipeline-editor-mini-graph-downstream" 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 d50e6f9a623..da31fc62d09 100644 --- a/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue +++ b/app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue @@ -23,7 +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'; +import WalkthroughPopover from './popovers/walkthrough_popover.vue'; export default { i18n: { diff --git a/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue new file mode 100644 index 00000000000..6270429535d --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue @@ -0,0 +1,59 @@ +<script> +import { GlLink, GlPopover, GlOutsideDirective as Outside, GlSprintf } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import { FILE_TREE_POPOVER_DISMISSED_KEY } from '../../constants'; + +export default { + name: 'PipelineEditorFileTreePopover', + directives: { Outside }, + i18n: { + description: s__( + 'pipelineEditorWalkthrough|You can use the file tree to view your pipeline configuration files. %{linkStart}Learn more%{linkEnd}', + ), + }, + components: { + GlLink, + GlPopover, + GlSprintf, + }, + inject: ['includesHelpPagePath'], + data() { + return { + showPopover: false, + }; + }, + mounted() { + this.showPopover = localStorage.getItem(FILE_TREE_POPOVER_DISMISSED_KEY) !== 'true'; + }, + methods: { + closePopover() { + this.showPopover = false; + }, + dismissPermanently() { + this.closePopover(); + localStorage.setItem(FILE_TREE_POPOVER_DISMISSED_KEY, 'true'); + }, + }, +}; +</script> + +<template> + <gl-popover + v-if="showPopover" + show + show-close-button + target="file-tree-toggle" + triggers="manual" + placement="right" + data-qa-selector="file_tree_popover" + @close-button-clicked="dismissPermanently" + > + <div v-outside="closePopover" class="gl-font-base gl-mb-3"> + <gl-sprintf :message="$options.i18n.description"> + <template #link="{ content }"> + <gl-link :href="includesHelpPagePath" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </div> + </gl-popover> +</template> diff --git a/app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue b/app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue index 5742b11b841..c636d8b8e34 100644 --- a/app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue +++ b/app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue @@ -76,7 +76,7 @@ export default { @click="handleClickCta" > <gl-emoji data-name="rocket" /> - {{ this.$options.i18n.ctaText }} + {{ $options.i18n.ctaText }} </gl-button> </div> </gl-popover> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index 9b4732b26d2..ff7c742f588 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -49,6 +49,10 @@ export const BRANCH_PAGINATION_LIMIT = 20; export const BRANCH_SEARCH_DEBOUNCE = '500'; export const SOURCE_EDITOR_DEBOUNCE = 500; +export const FILE_TREE_DISPLAY_KEY = 'pipeline_editor_file_tree_display'; +export const FILE_TREE_POPOVER_DISMISSED_KEY = 'pipeline_editor_file_tree_popover_dismissed'; +export const FILE_TREE_TIP_DISMISSED_KEY = 'pipeline_editor_file_tree_tip_dismissed'; + export const STARTER_TEMPLATE_NAME = 'Getting-Started'; export const pipelineEditorTrackingOptions = { diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql index df7de6a1f54..5354ed7c2d5 100644 --- a/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql +++ b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql @@ -3,6 +3,12 @@ query getCiConfigData($projectPath: ID!, $sha: String, $content: String!) { ciConfig(projectPath: $projectPath, sha: $sha, content: $content) { errors + includes { + location + type + blob + raw + } mergedYaml status stages { diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js index 732fc665c9e..e13d9cf9df0 100644 --- a/app/assets/javascripts/pipeline_editor/index.js +++ b/app/assets/javascripts/pipeline_editor/index.js @@ -30,6 +30,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { defaultBranch, emptyStateIllustrationPath, helpPaths, + includesHelpPagePath, lintHelpPagePath, lintUnavailableHelpPagePath, needsHelpPagePath, @@ -41,7 +42,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { runnerHelpPagePath, totalBranches, ymlHelpPagePath, - } = el?.dataset; + } = el.dataset; const configurationPaths = Object.fromEntries( Object.entries(CODE_SNIPPET_SOURCE_SETTINGS).map(([source, { datasetKey }]) => [ @@ -118,6 +119,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => { defaultBranch, emptyStateIllustrationPath, helpPaths, + includesHelpPagePath, lintHelpPagePath, lintUnavailableHelpPagePath, needsHelpPagePath, diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index 4e6a4ffa6d2..3fd31edec2c 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -104,6 +104,7 @@ export default { this.setAppStatus(EDITOR_APP_STATUS_EMPTY); } + this.isNewCiConfigFile = false; if (!hasCIFile) { if (this.shouldSkipStartScreen) { this.setNewEmptyCiConfigFile(); @@ -381,7 +382,7 @@ export default { </script> <template> - <div class="gl-mt-4 gl-relative"> + <div class="gl-mt-4 gl-relative" data-qa-selector="pipeline_editor_app"> <gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" /> <pipeline-editor-empty-state v-else-if="showStartScreen" diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index 23e3ce10d5a..59022a91322 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -1,12 +1,14 @@ <script> import { GlModal } from '@gitlab/ui'; import { __ } from '~/locale'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import CommitSection from './components/commit/commit_section.vue'; import PipelineEditorDrawer from './components/drawer/pipeline_editor_drawer.vue'; import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_nav.vue'; +import PipelineEditorFileTree from './components/file_tree/container.vue'; import PipelineEditorHeader from './components/header/pipeline_editor_header.vue'; import PipelineEditorTabs from './components/pipeline_editor_tabs.vue'; -import { CREATE_TAB } from './constants'; +import { CREATE_TAB, FILE_TREE_DISPLAY_KEY } from './constants'; export default { commitSectionRef: 'commitSectionRef', @@ -28,9 +30,11 @@ export default { GlModal, PipelineEditorDrawer, PipelineEditorFileNav, + PipelineEditorFileTree, PipelineEditorHeader, PipelineEditorTabs, }, + mixins: [glFeatureFlagMixin()], props: { ciConfigData: { type: Object, @@ -61,6 +65,7 @@ export default { scrollToCommitForm: false, shouldLoadNewBranch: false, showDrawer: false, + showFileTree: false, showSwitchBranchModal: false, }; }, @@ -68,6 +73,15 @@ export default { showCommitForm() { return this.currentTab === CREATE_TAB; }, + includesFiles() { + return this.ciConfigData?.includes || []; + }, + isFileTreeVisible() { + return this.showFileTree && this.glFeatures.pipelineEditorFileTree; + }, + }, + mounted() { + this.showFileTree = JSON.parse(localStorage.getItem(FILE_TREE_DISPLAY_KEY)) || false; }, methods: { closeBranchModal() { @@ -82,6 +96,10 @@ export default { openDrawer() { this.showDrawer = true; }, + toggleFileTree() { + this.showFileTree = !this.showFileTree; + localStorage.setItem(FILE_TREE_DISPLAY_KEY, this.showFileTree); + }, switchBranch() { this.showSwitchBranchModal = false; this.shouldLoadNewBranch = true; @@ -114,28 +132,39 @@ export default { </gl-modal> <pipeline-editor-file-nav :has-unsaved-changes="hasUnsavedChanges" + :is-new-ci-config-file="isNewCiConfigFile" :should-load-new-branch="shouldLoadNewBranch" @select-branch="handleConfirmSwitchBranch" + @toggle-file-tree="toggleFileTree" v-on="$listeners" /> - <pipeline-editor-header - :ci-config-data="ciConfigData" - :commit-sha="commitSha" - :is-new-ci-config-file="isNewCiConfigFile" - v-on="$listeners" - /> - <pipeline-editor-tabs - :ci-config-data="ciConfigData" - :ci-file-content="ciFileContent" - :commit-sha="commitSha" - :is-new-ci-config-file="isNewCiConfigFile" - :show-drawer="showDrawer" - v-on="$listeners" - @open-drawer="openDrawer" - @close-drawer="closeDrawer" - @set-current-tab="setCurrentTab" - @walkthrough-popover-cta-clicked="setScrollToCommitForm" - /> + <div class="gl-display-flex gl-w-full gl-sm-flex-direction-column"> + <pipeline-editor-file-tree + v-if="isFileTreeVisible" + class="gl-flex-shrink-0" + :includes="includesFiles" + /> + <div class="gl-flex-grow-1 gl-min-w-0"> + <pipeline-editor-header + :ci-config-data="ciConfigData" + :commit-sha="commitSha" + :is-new-ci-config-file="isNewCiConfigFile" + v-on="$listeners" + /> + <pipeline-editor-tabs + :ci-config-data="ciConfigData" + :ci-file-content="ciFileContent" + :commit-sha="commitSha" + :is-new-ci-config-file="isNewCiConfigFile" + :show-drawer="showDrawer" + v-on="$listeners" + @open-drawer="openDrawer" + @close-drawer="closeDrawer" + @set-current-tab="setCurrentTab" + @walkthrough-popover-cta-clicked="setScrollToCommitForm" + /> + </div> + </div> <commit-section v-if="showCommitForm" :ref="$options.commitSectionRef" |