diff options
Diffstat (limited to 'app')
7 files changed, 124 insertions, 55 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_row.vue b/app/assets/javascripts/diffs/components/diff_file_row.vue new file mode 100644 index 00000000000..f41337762fd --- /dev/null +++ b/app/assets/javascripts/diffs/components/diff_file_row.vue @@ -0,0 +1,17 @@ +<script> +/** + * This component is an iterative step towards refactoring and simplifying `vue_shared/components/file_row.vue` + * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23720 + */ +import FileRow from '~/vue_shared/components/file_row.vue'; + +export default { + components: { + FileRow, + }, +}; +</script> + +<template> + <file-row v-bind="$attrs" v-on="$listeners" /> +</template> diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index b13619a5471..18c3002825e 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -3,7 +3,8 @@ import { mapActions, mapGetters, mapState } from 'vuex'; import { GlTooltipDirective } from '@gitlab/ui'; import { s__, sprintf } from '~/locale'; import Icon from '~/vue_shared/components/icon.vue'; -import FileRow from '~/vue_shared/components/file_row.vue'; +import FileTree from '~/vue_shared/components/file_tree.vue'; +import DiffFileRow from './diff_file_row.vue'; import FileRowStats from './file_row_stats.vue'; export default { @@ -12,7 +13,7 @@ export default { }, components: { Icon, - FileRow, + FileTree, }, props: { hideFileStats: { @@ -61,6 +62,7 @@ export default { searchPlaceholder: sprintf(s__('MergeRequest|Search files (%{modifier_key}P)'), { modifier_key: /Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl+', }), + DiffFileRow, }; </script> @@ -91,7 +93,7 @@ export default { </div> <div :class="{ 'pt-0 tree-list-blobs': !renderTreeList }" class="tree-list-scroll"> <template v-if="filteredTreeList.length"> - <file-row + <file-tree v-for="file in filteredTreeList" :key="file.key" :file="file" @@ -99,6 +101,7 @@ export default { :hide-extra-on-tree="true" :extra-component="fileRowExtraComponent" :show-changed-icon="true" + :file-row-component="$options.DiffFileRow" @toggleTreeOpen="toggleTreeOpen" @clickFile="scrollToFile" /> diff --git a/app/assets/javascripts/ide/components/ide_file_row.vue b/app/assets/javascripts/ide/components/ide_file_row.vue new file mode 100644 index 00000000000..f41337762fd --- /dev/null +++ b/app/assets/javascripts/ide/components/ide_file_row.vue @@ -0,0 +1,17 @@ +<script> +/** + * This component is an iterative step towards refactoring and simplifying `vue_shared/components/file_row.vue` + * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23720 + */ +import FileRow from '~/vue_shared/components/file_row.vue'; + +export default { + components: { + FileRow, + }, +}; +</script> + +<template> + <file-row v-bind="$attrs" v-on="$listeners" /> +</template> diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue index bacdfc7c05e..151f7f0c421 100644 --- a/app/assets/javascripts/ide/components/ide_tree_list.vue +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -1,7 +1,8 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; import { GlSkeletonLoading } from '@gitlab/ui'; -import FileRow from '~/vue_shared/components/file_row.vue'; +import FileTree from '~/vue_shared/components/file_tree.vue'; +import IdeFileRow from './ide_file_row.vue'; import NavDropdown from './nav_dropdown.vue'; import FileRowExtra from './file_row_extra.vue'; @@ -9,7 +10,7 @@ export default { components: { GlSkeletonLoading, NavDropdown, - FileRow, + FileTree, }, props: { viewerType: { @@ -36,6 +37,7 @@ export default { ...mapActions(['updateViewer', 'toggleTreeOpen']), }, FileRowExtra, + IdeFileRow, }; </script> @@ -53,12 +55,13 @@ export default { </header> <div class="ide-tree-body h-100"> <template v-if="currentTree.tree.length"> - <file-row + <file-tree v-for="file in currentTree.tree" :key="file.key" :file="file" :level="0" :extra-component="$options.FileRowExtra" + :file-row-component="$options.IdeFileRow" @toggleTreeOpen="toggleTreeOpen" /> </template> diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue index 0258a62b390..22fab1b03f2 100644 --- a/app/assets/javascripts/monitoring/components/panel_type.vue +++ b/app/assets/javascripts/monitoring/components/panel_type.vue @@ -195,8 +195,8 @@ export default { </gl-dropdown-item> <gl-dropdown-item v-if="clipboardText" + ref="copyChartLink" v-track-event="generateLinkToChartOptions(clipboardText)" - class="js-chart-link" :data-clipboard-text="clipboardText" @click="showToast(clipboardText)" > diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue index 611001df32f..d962f644ff8 100644 --- a/app/assets/javascripts/vue_shared/components/file_row.vue +++ b/app/assets/javascripts/vue_shared/components/file_row.vue @@ -62,9 +62,6 @@ export default { 'is-open': this.file.opened, }; }, - childFilesLevel() { - return this.file.isHeader ? 0 : this.level + 1; - }, }, watch: { 'file.active': function fileActiveWatch(active) { @@ -131,53 +128,38 @@ export default { </script> <template> - <div> - <file-header v-if="file.isHeader" :path="file.path" /> - <div - v-else - :class="fileClass" - :title="file.name" - class="file-row" - role="button" - @click="clickFile" - @mouseleave="toggleDropdown(false)" - > - <div class="file-row-name-container"> - <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated"> - <file-icon - v-if="!showChangedIcon || file.type === 'tree'" - class="file-row-icon" - :file-name="file.name" - :loading="file.loading" - :folder="isTree" - :opened="file.opened" - :size="16" - /> - <changed-file-icon v-else :file="file" :size="16" class="append-right-5" /> - {{ file.name }} - </span> - <component - :is="extraComponent" - v-if="extraComponent && !(hideExtraOnTree && file.type === 'tree')" - :file="file" - :dropdown-open="dropdownOpen" - @toggle="toggleDropdown($event)" + <file-header v-if="file.isHeader" :path="file.path" /> + <div + v-else + :class="fileClass" + :title="file.name" + class="file-row" + role="button" + @click="clickFile" + @mouseleave="toggleDropdown(false)" + > + <div class="file-row-name-container"> + <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated"> + <file-icon + v-if="!showChangedIcon || file.type === 'tree'" + class="file-row-icon" + :file-name="file.name" + :loading="file.loading" + :folder="isTree" + :opened="file.opened" + :size="16" /> - </div> - </div> - <template v-if="file.opened || file.isHeader"> - <file-row - v-for="childFile in file.tree" - :key="childFile.key" - :file="childFile" - :level="childFilesLevel" - :hide-extra-on-tree="hideExtraOnTree" - :extra-component="extraComponent" - :show-changed-icon="showChangedIcon" - @toggleTreeOpen="toggleTreeOpen" - @clickFile="clickedFile" + <changed-file-icon v-else :file="file" :size="16" class="append-right-5" /> + {{ file.name }} + </span> + <component + :is="extraComponent" + v-if="extraComponent && !(hideExtraOnTree && file.type === 'tree')" + :file="file" + :dropdown-open="dropdownOpen" + @toggle="toggleDropdown($event)" /> - </template> + </div> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/file_tree.vue b/app/assets/javascripts/vue_shared/components/file_tree.vue new file mode 100644 index 00000000000..e7817b8f910 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/file_tree.vue @@ -0,0 +1,47 @@ +<script> +export default { + name: 'FileTree', + props: { + fileRowComponent: { + type: Object, + required: true, + }, + level: { + type: Number, + required: true, + }, + file: { + type: Object, + required: true, + }, + }, + computed: { + childFilesLevel() { + return this.file.isHeader ? 0 : this.level + 1; + }, + }, +}; +</script> + +<template> + <div> + <component + :is="fileRowComponent" + :level="level" + :file="file" + v-bind="$attrs" + v-on="$listeners" + /> + <template v-if="file.opened || file.isHeader"> + <file-tree + v-for="childFile in file.tree" + :key="childFile.key" + :file-row-component="fileRowComponent" + :level="childFilesLevel" + :file="childFile" + v-bind="$attrs" + v-on="$listeners" + /> + </template> + </div> +</template> |