diff options
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/file_tree/container.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/file_tree/container.vue | 78 |
1 files changed, 78 insertions, 0 deletions
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..280cd729a43 --- /dev/null +++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue @@ -0,0 +1,78 @@ +<script> +import { GlAlert, GlTooltipDirective } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +import FileIcon from '~/vue_shared/components/file_icon.vue'; +import { FILE_TREE_TIP_DISMISSED_KEY } from '../../constants'; +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: { + FileIcon, + FileItem, + GlAlert, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + inject: ['ciConfigPath', 'includesHelpPagePath'], + props: { + includes: { + type: Array, + required: true, + }, + }, + data() { + return { + canShowTip: localStorage.getItem(FILE_TREE_TIP_DISMISSED_KEY) !== 'true', + }; + }, + computed: { + showTip() { + return this.includes.length === 0 && this.canShowTip; + }, + }, + methods: { + dismissTip() { + this.canShowTip = false; + localStorage.setItem(FILE_TREE_TIP_DISMISSED_KEY, 'true'); + }, + }, +}; +</script> +<template> + <aside class="file-tree-container gl-mr-5 gl-mb-5"> + <div + v-gl-tooltip + :title="ciConfigPath" + class="gl-bg-gray-50 gl-py-2 gl-px-3 gl-mb-3 gl-rounded-base" + > + <span class="file-row-name gl-str-truncated" :title="ciConfigPath"> + <file-icon class="file-row-icon" :file-name="ciConfigPath" /> + <span data-testid="current-config-filename">{{ ciConfigPath }}</span> + </span> + </div> + <gl-alert + v-if="showTip" + variant="tip" + :title="$options.i18n.tipTitle" + :secondary-button-text="$options.i18n.tipBtn" + :secondary-button-link="includesHelpPagePath" + @dismiss="dismissTip" + > + {{ $options.i18n.tipDescription }} + </gl-alert> + <div class="gl-overflow-y-auto"> + <file-item v-for="file in includes" :key="file.location" :file="file" /> + </div> + </aside> +</template> |