1 files changed, 60 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
new file mode 100644
index 00000000000..9c386896448
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -0,0 +1,60 @@
+<script>
+  import icon from '~/vue_shared/components/icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+  import timeAgoMixin from '~/vue_shared/mixins/timeago';
+
+  export default {
+    components: {
+      icon,
+    },
+    directives: {
+      tooltip,
+    },
+    mixins: [
+      timeAgoMixin,
+    ],
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="ide-status-bar">
+    <div class="ref-name">
+      <icon
+        name="branch"
+        :size="12"
+      />
+      {{ file.branchId }}
+    </div>
+    <div>
+      <div v-if="file.lastCommit && file.lastCommit.id">
+        Last commit:
+        <a
+          v-tooltip
+          :title="file.lastCommit.message"
+          :href="file.lastCommit.url"
+        >
+          {{ timeFormated(file.lastCommit.updatedAt) }} by
+          {{ file.lastCommit.author }}
+        </a>
+      </div>
+    </div>
+    <div class="text-right">
+      {{ file.name }}
+    </div>
+    <div class="text-right">
+      {{ file.eol }}
+    </div>
+    <div class="text-right">
+      {{ file.editorRow }}:{{ file.editorColumn }}
+    </div>
+    <div class="text-right">
+      {{ file.fileLanguage }}
+    </div>
+  </div>
+</template>