Extract ide_status_list from ide_status_bar

**Why?**
The ide_status_list will be used and extended in EE.

4 files changed, 33 insertions, 23 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index e41b1530226..363a8f43033 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -146,7 +146,7 @@ export default {
       </div>
       <component :is="rightPaneComponent" v-if="currentProjectId" />
     </div>
-    <ide-status-bar :file="activeFile" />
+    <ide-status-bar />
     <new-modal />
   </article>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index ce577ae85b0..206b8341aad 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
+import IdeStatusList from 'ee_else_ce/ide/components/ide_status_list.vue';
 import icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import timeAgoMixin from '~/vue_shared/mixins/timeago';
@@ -12,18 +13,12 @@ export default {
     icon,
     userAvatarImage,
     CiIcon,
+    IdeStatusList,
   },
   directives: {
     tooltip,
   },
   mixins: [timeAgoMixin],
-  props: {
-    file: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-  },
   data() {
     return {
       lastCommitFormatedAge: null,
@@ -125,11 +120,6 @@ export default {
         >{{ lastCommitFormatedAge }}</time
       >
     </div>
-    <div v-if="file" class="ide-status-file">{{ file.name }}</div>
-    <div v-if="file" class="ide-status-file">{{ file.eol }}</div>
-    <div v-if="file && !file.binary" class="ide-status-file">
-      {{ file.editorRow }}:{{ file.editorColumn }}
-    </div>
-    <div v-if="file" class="ide-status-file">{{ file.fileLanguage }}</div>
+    <ide-status-list class="ml-auto" />
   </footer>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_status_list.vue b/app/assets/javascripts/ide/components/ide_status_list.vue
new file mode 100644
index 00000000000..364e3f081a1
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_status_list.vue
@@ -0,0 +1,23 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters(['activeFile']),
+  },
+};
+</script>
+
+<template>
+  <div class="ide-status-list d-flex">
+    <template v-if="activeFile">
+      <div class="ide-status-file">{{ activeFile.name }}</div>
+      <div class="ide-status-file">{{ activeFile.eol }}</div>
+      <div v-if="!activeFile.binary" class="ide-status-file">
+        {{ activeFile.editorRow }}:{{ activeFile.editorColumn }}
+      </div>
+      <div class="ide-status-file">{{ activeFile.fileLanguage }}</div>
+    </template>
+    <slot></slot>
+  </div>
+</template>
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index f08fa80495d..cbcd8a474f1 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -396,10 +396,6 @@ $ide-commit-header-height: 48px;
     font-size: inherit;
   }
 
-  > div + div {
-    padding-left: $gl-padding;
-  }
-
   svg {
     vertical-align: sub;
   }
@@ -410,13 +406,14 @@ $ide-commit-header-height: 48px;
   }
 }
 
+.ide-status-list {
+  > div + div {
+    padding-left: $gl-padding;
+  }
+}
+
 .ide-status-file {
   text-align: right;
-
-  .ide-status-branch + &,
-  &:first-child {
-    margin-left: auto;
-  }
 }
 // Not great, but this is to deal with our current output
 .multi-file-preview-holder {