diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-11 06:07:57 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-11 06:07:57 +0300 |
commit | defc424997d8329613ef3951ab30adf6b3b94f01 (patch) | |
tree | ef253b2f77b033e38f7ef8d80b50cf112e9e0d6f /app/assets/javascripts/pipeline_editor | |
parent | cb2494484e33a0d3c750625908e8b4dda69ab7b4 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/pipeline_editor')
6 files changed, 80 insertions, 11 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 998db653e0c..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 @@ -2,7 +2,7 @@ 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 { EDITOR_APP_STATUS_EMPTY, EDITOR_APP_STATUS_LOADING } from '../../constants'; import FileTreePopover from '../popovers/file_tree_popover.vue'; import BranchSwitcher from './branch_switcher.vue'; @@ -39,6 +39,9 @@ export default { }, }, computed: { + isAppLoading() { + return this.appStatus === EDITOR_APP_STATUS_LOADING; + }, showFileTreeToggle() { return ( this.glFeatures.pipelineEditorFileTree && @@ -62,6 +65,7 @@ export default { icon="file-tree" data-testid="file-tree-toggle" :aria-label="__('File Tree')" + :loading="isAppLoading" @click="onFileTreeBtnClick" /> <file-tree-popover v-if="showFileTreeToggle" /> diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue index d1ff70ad518..8bffb281211 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_tree/container.vue @@ -1,6 +1,8 @@ <script> -import { GlAlert } from '@gitlab/ui'; +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 = { @@ -15,27 +17,55 @@ export default { i18n, name: 'PipelineEditorFileTreeContainer', components: { + FileIcon, FileItem, GlAlert, }, + directives: { + GlTooltip: GlTooltipDirective, + }, inject: ['ciConfigPath'], + props: { + includes: { + type: Array, + required: true, + }, + }, data() { return { - showTip: true, + canShowTip: localStorage.getItem(FILE_TREE_TIP_DISMISSED_KEY) !== 'true', }; }, + computed: { + showTip() { + return this.includes.length === 0 && this.canShowTip; + }, + }, methods: { dismissTip() { - this.showTip = false; + this.canShowTip = false; + localStorage.setItem(FILE_TREE_TIP_DISMISSED_KEY, 'true'); }, }, }; </script> <template> <aside class="file-tree-container gl-mr-5 gl-mb-5"> - <file-item class="gl-mb-3 gl-bg-gray-50" :file-name="ciConfigPath" /> + <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" @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> diff --git a/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue index d51a2874c9e..786d483b5b9 100644 --- a/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue +++ b/app/assets/javascripts/pipeline_editor/components/file_tree/file_item.vue @@ -1,24 +1,45 @@ <script> +import { GlIcon, GlLink, GlTooltipDirective } from '@gitlab/ui'; import FileIcon from '~/vue_shared/components/file_icon.vue'; export default { name: 'PipelineEditorFileItem', components: { FileIcon, + GlIcon, + GlLink, + }, + directives: { + GlTooltip: GlTooltipDirective, }, props: { - fileName: { - type: String, + file: { + type: Object, required: true, }, }, + computed: { + fileName() { + return this.file.location; + }, + filePath() { + return this.file.blob || this.file.raw; + }, + }, }; </script> <template> - <div class="gl-py-2 gl-px-3 gl-rounded-base"> - <span class="file-row-name" :title="fileName"> + <gl-link + v-gl-tooltip + :href="filePath" + :title="fileName" + target="_blank" + class="file-tree-includes-link gl-display-flex gl-justify-content-space-between gl-hover-bg-gray-50 gl-text-body gl-hover-text-gray-900 gl-hover-text-decoration-none gl-py-2 gl-px-3 gl-rounded-base" + > + <span class="file-row-name gl-str-truncated" :title="fileName"> <file-icon class="file-row-icon" :file-name="fileName" /> <span>{{ fileName }}</span> </span> - </div> + <gl-icon class="gl-display-none gl-relative gl-text-gray-500" name="external-link" /> + </gl-link> </template> diff --git a/app/assets/javascripts/pipeline_editor/constants.js b/app/assets/javascripts/pipeline_editor/constants.js index 0484da8641d..ff7c742f588 100644 --- a/app/assets/javascripts/pipeline_editor/constants.js +++ b/app/assets/javascripts/pipeline_editor/constants.js @@ -51,6 +51,7 @@ 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 FILE_TREE_TIP_DISMISSED_KEY = 'pipeline_editor_file_tree_tip_dismissed'; export const STARTER_TEMPLATE_NAME = 'Getting-Started'; diff --git a/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql index df7de6a1f54..5354ed7c2d5 100644 --- a/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql +++ b/app/assets/javascripts/pipeline_editor/graphql/queries/ci_config.query.graphql @@ -3,6 +3,12 @@ query getCiConfigData($projectPath: ID!, $sha: String, $content: String!) { ciConfig(projectPath: $projectPath, sha: $sha, content: $content) { errors + includes { + location + type + blob + raw + } mergedYaml status stages { diff --git a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue index f5277fdbcca..59022a91322 100644 --- a/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue +++ b/app/assets/javascripts/pipeline_editor/pipeline_editor_home.vue @@ -73,6 +73,9 @@ export default { showCommitForm() { return this.currentTab === CREATE_TAB; }, + includesFiles() { + return this.ciConfigData?.includes || []; + }, isFileTreeVisible() { return this.showFileTree && this.glFeatures.pipelineEditorFileTree; }, @@ -136,7 +139,11 @@ export default { v-on="$listeners" /> <div class="gl-display-flex gl-w-full gl-sm-flex-direction-column"> - <pipeline-editor-file-tree v-if="isFileTreeVisible" class="gl-flex-shrink-0" /> + <pipeline-editor-file-tree + v-if="isFileTreeVisible" + class="gl-flex-shrink-0" + :includes="includesFiles" + /> <div class="gl-flex-grow-1 gl-min-w-0"> <pipeline-editor-header :ci-config-data="ciConfigData" |