Add latest changes from gitlab-org/gitlab@master

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>