diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue | 48 |
1 files changed, 48 insertions, 0 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..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" |