Add latest changes from gitlab-org/gitlab@master

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;