diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-04 18:09:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-04 18:09:12 +0300 |
commit | 856e2c64ee69b055b31a8ebbeee616f13a46505e (patch) | |
tree | 0ec9b70c8f1f74516631bf87281c175e127fedd2 /app/assets/javascripts/pipeline_editor | |
parent | 8ed0a009f0ae0de789fae01b3cc9bda54aa03965 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/pipeline_editor_tabs.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue | 53 | ||||
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue (renamed from app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue) | 0 | ||||
-rw-r--r-- | app/assets/javascripts/pipeline_editor/constants.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue | 6 |
7 files changed, 67 insertions, 3 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 4ac28b3b9c0..998db653e0c 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 @@ -3,11 +3,13 @@ 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 FileTreePopover from '../popovers/file_tree_popover.vue'; import BranchSwitcher from './branch_switcher.vue'; export default { components: { BranchSwitcher, + FileTreePopover, GlButton, }, mixins: [glFeatureFlagMixin()], @@ -56,11 +58,13 @@ export default { <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')" @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/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..029fe2ec909 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/popovers/file_tree_popover.vue @@ -0,0 +1,53 @@ +<script> +import { GlPopover, GlOutsideDirective as Outside } 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.', + ), + learnMore: __('Learn more'), + }, + components: { + GlPopover, + }, + 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-display-flex gl-flex-direction-column"> + <p class="gl-font-base">{{ $options.i18n.description }}</p> + </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 c636d8b8e34..c636d8b8e34 100644 --- a/app/assets/javascripts/pipeline_editor/components/walkthrough_popover.vue +++ b/app/assets/javascripts/pipeline_editor/components/popovers/walkthrough_popover.vue diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index 9b4732b26d2..0484da8641d 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -49,6 +49,9 @@ 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 STARTER_TEMPLATE_NAME = 'Getting-Started'; export const pipelineEditorTrackingOptions = { diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue index 3c6d5b1d3ad..3fd31edec2c 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue @@ -382,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 ffe275cba68..f5277fdbcca 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -8,7 +8,7 @@ import PipelineEditorFileNav from './components/file_nav/pipeline_editor_file_na 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', @@ -77,6 +77,9 @@ export default { return this.showFileTree && this.glFeatures.pipelineEditorFileTree; }, }, + mounted() { + this.showFileTree = JSON.parse(localStorage.getItem(FILE_TREE_DISPLAY_KEY)) || false; + }, methods: { closeBranchModal() { this.showSwitchBranchModal = false; @@ -92,6 +95,7 @@ export default { }, toggleFileTree() { this.showFileTree = !this.showFileTree; + localStorage.setItem(FILE_TREE_DISPLAY_KEY, this.showFileTree); }, switchBranch() { this.showSwitchBranchModal = false; |