diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
5 files changed, 142 insertions, 18 deletions
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..4ac28b3b9c0 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,66 @@ <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 } from '../../constants'; import BranchSwitcher from './branch_switcher.vue'; export default { components: { BranchSwitcher, + 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: { + 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" + icon="file-tree" + data-testid="file-tree-toggle" + :aria-label="__('File Tree')" + @click="onFileTreeBtnClick" + /> <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..d1ff70ad518 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue @@ -0,0 +1,41 @@ +<script> +import { GlAlert } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +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: { + FileItem, + GlAlert, + }, + inject: ['ciConfigPath'], + data() { + return { + showTip: true, + }; + }, + methods: { + dismissTip() { + this.showTip = false; + }, + }, +}; +</script> +<template> + <aside class="file-tree-container gl-mr-5 gl-mb-5"> + <file-item class="gl-mb-3 gl-bg-gray-50" :file-name="ciConfigPath" /> + <gl-alert v-if="showTip" variant="tip" :title="$options.i18n.tipTitle" @dismiss="dismissTip"> + {{ $options.i18n.tipDescription }} + </gl-alert> + </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..d51a2874c9e --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue @@ -0,0 +1,24 @@ +<script> +import FileIcon from '~/vue_shared/components/file_icon.vue'; + +export default { + name: 'PipelineEditorFileItem', + components: { + FileIcon, + }, + props: { + fileName: { + type: String, + required: true, + }, + }, +}; +</script> +<template> + <div class="gl-py-2 gl-px-3 gl-rounded-base"> + <span class="file-row-name" :title="fileName"> + <file-icon class="file-row-icon" :file-name="fileName" /> + <span>{{ fileName }}</span> + </span> + </div> +</template> diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index 4e6a4ffa6d2..3c6d5b1d3ad 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(); diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index 23e3ce10d5a..ffe275cba68 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -1,9 +1,11 @@ <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'; @@ -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,9 @@ export default { showCommitForm() { return this.currentTab === CREATE_TAB; }, + isFileTreeVisible() { + return this.showFileTree && this.glFeatures.pipelineEditorFileTree; + }, }, methods: { closeBranchModal() { @@ -82,6 +90,9 @@ export default { openDrawer() { this.showDrawer = true; }, + toggleFileTree() { + this.showFileTree = !this.showFileTree; + }, switchBranch() { this.showSwitchBranchModal = false; this.shouldLoadNewBranch = true; @@ -114,28 +125,35 @@ 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" /> + <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" |