1 files changed, 22 insertions, 1 deletions
diff --git a/app/assets/javascripts/ide/components/ide_file_row.vue b/app/assets/javascripts/ide/components/ide_file_row.vue
index f41337762fd..b777d89f0bb 100644
--- a/app/assets/javascripts/ide/components/ide_file_row.vue
+++ b/app/assets/javascripts/ide/components/ide_file_row.vue
@@ -4,14 +4,35 @@
  * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23720
  */
 import FileRow from '~/vue_shared/components/file_row.vue';
+import FileRowExtra from './file_row_extra.vue';
 
 export default {
+  name: 'IdeFileRow',
   components: {
     FileRow,
+    FileRowExtra,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dropdownOpen: false,
+    };
+  },
+  methods: {
+    toggleDropdown(val) {
+      this.dropdownOpen = val;
+    },
   },
 };
 </script>
 
 <template>
-  <file-row v-bind="$attrs" v-on="$listeners" />
+  <file-row :file="file" v-bind="$attrs" @mouseleave="toggleDropdown(false)" v-on="$listeners">
+    <file-row-extra :file="file" :dropdown-open="dropdownOpen" @toggle="toggleDropdown($event)" />
+  </file-row>
 </template>