diff options
Diffstat (limited to 'app/assets/javascripts/ci/pipeline_editor/components/popovers/file_tree_popover.vue')
-rw-r--r-- | app/assets/javascripts/ci/pipeline_editor/components/popovers/file_tree_popover.vue | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/popovers/file_tree_popover.vue b/app/assets/javascripts/ci/pipeline_editor/components/popovers/file_tree_popover.vue new file mode 100644 index 00000000000..efa6a54c638 --- /dev/null +++ b/app/assets/javascripts/ci/pipeline_editor/components/popovers/file_tree_popover.vue @@ -0,0 +1,56 @@ +<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: { + dismissPermanently() { + this.showPopover = false; + 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="dismissPermanently" 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> |