Merge branch 'ce-5276-5-terminal-sync-status-label' into 'master'

[CE for Part 5] 5276 Extract ide_status_list from ide_status_bar

See merge request gitlab-org/gitlab-ce!29371

5 files changed, 124 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 {
diff --git a/spec/frontend/ide/components/ide_status_list_spec.js b/spec/frontend/ide/components/ide_status_list_spec.js
new file mode 100644
index 00000000000..4e0e8a9f0e3
--- /dev/null
+++ b/spec/frontend/ide/components/ide_status_list_spec.js
@@ -0,0 +1,91 @@
+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import IdeStatusList from '~/ide/components/ide_status_list';
+
+const TEST_FILE = {
+  name: 'lorem.md',
+  eol: 'LF',
+  editorRow: 3,
+  editorColumn: 23,
+  fileLanguage: 'markdown',
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('ide/components/ide_status_list', () => {
+  let activeFile;
+  let store;
+  let wrapper;
+
+  const createComponent = (options = {}) => {
+    store = new Vuex.Store({
+      getters: {
+        activeFile: () => activeFile,
+      },
+    });
+
+    wrapper = shallowMount(localVue.extend(IdeStatusList), {
+      localVue,
+      sync: false,
+      store,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    activeFile = TEST_FILE;
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+
+    store = null;
+    wrapper = null;
+  });
+
+  const getEditorPosition = file => `${file.editorRow}:${file.editorColumn}`;
+
+  describe('with regular file', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows file name', () => {
+      expect(wrapper.text()).toContain(TEST_FILE.name);
+    });
+
+    it('shows file eol', () => {
+      expect(wrapper.text()).toContain(TEST_FILE.name);
+    });
+
+    it('shows file editor position', () => {
+      expect(wrapper.text()).toContain(getEditorPosition(TEST_FILE));
+    });
+
+    it('shows file language', () => {
+      expect(wrapper.text()).toContain(TEST_FILE.fileLanguage);
+    });
+  });
+
+  describe('with binary file', () => {
+    beforeEach(() => {
+      activeFile.binary = true;
+      createComponent();
+    });
+
+    it('does not show file editor position', () => {
+      expect(wrapper.text()).not.toContain(getEditorPosition(TEST_FILE));
+    });
+  });
+
+  it('adds slot as child of list', () => {
+    createComponent({
+      slots: {
+        default: ['<div class="js-test">Hello</div>', '<div class="js-test">World</div>'],
+      },
+    });
+
+    expect(wrapper.find('.ide-status-list').findAll('.js-test').length).toEqual(2);
+  });
+});