Update 'ide_status_bar' to use 'time_ago_auto'backstage/timeago-auto-component

2 files changed, 7 insertions, 59 deletions

diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index 715dc1bfb42..488e764142a 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
 import icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
-import timeAgoMixin from '~/vue_shared/mixins/timeago';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
 import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import Timeago from '../../vue_shared/components/time_ago_auto.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
 import { rightSidebarViews } from '../constants';
 
 export default {
@@ -12,11 +12,9 @@ export default {
     icon,
     userAvatarImage,
     CiIcon,
+    Timeago,
   },
-  directives: {
-    tooltip,
-  },
-  mixins: [timeAgoMixin],
+  directives: { tooltip },
   props: {
     file: {
       type: Object,
@@ -24,11 +22,6 @@ export default {
       default: null,
     },
   },
-  data() {
-    return {
-      lastCommitFormatedAge: null,
-    };
-  },
   computed: {
     ...mapState(['currentBranchId', 'currentProjectId']),
     ...mapGetters(['currentProject', 'lastCommit']),
@@ -39,34 +32,17 @@ export default {
       this.initPipelinePolling();
     },
   },
-  mounted() {
-    this.startTimer();
-  },
   beforeDestroy() {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
-
     this.stopPipelinePolling();
   },
   methods: {
     ...mapActions(['setRightPane']),
     ...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']),
-    startTimer() {
-      this.intervalId = setInterval(() => {
-        this.commitAgeUpdate();
-      }, 1000);
-    },
     initPipelinePolling() {
       if (this.lastCommit) {
         this.fetchLatestPipeline();
       }
     },
-    commitAgeUpdate() {
-      if (this.lastCommit) {
-        this.lastCommitFormatedAge = this.timeFormated(this.lastCommit.committed_date);
-      }
-    },
     getCommitPath(shortSha) {
       return `${this.currentProject.web_url}/commit/${shortSha}`;
     },
@@ -115,15 +91,9 @@ export default {
       >{{ lastCommit.short_id }}</a>
       by
       {{ lastCommit.author_name }}
-      <time
-        v-tooltip
-        :datetime="lastCommit.committed_date"
-        :title="tooltipTitle(lastCommit.committed_date)"
-        data-placement="top"
-        data-container="body"
-      >
-        {{ lastCommitFormatedAge }}
-      </time>
+      <timeago
+        :time="lastCommit.committed_date"
+      />
     </div>
     <div
       v-if="file"
diff --git a/spec/javascripts/ide/components/ide_status_bar_spec.js b/spec/javascripts/ide/components/ide_status_bar_spec.js
index 0e93c5193a1..af8b803952b 100644
--- a/spec/javascripts/ide/components/ide_status_bar_spec.js
+++ b/spec/javascripts/ide/components/ide_status_bar_spec.js
@@ -34,28 +34,6 @@ describe('ideStatusBar', () => {
     });
   });
 
-  describe('commitAgeUpdate', () => {
-    beforeEach(function() {
-      jasmine.clock().install();
-      spyOn(vm, 'commitAgeUpdate').and.callFake(() => {});
-      vm.startTimer();
-    });
-
-    afterEach(function() {
-      jasmine.clock().uninstall();
-    });
-
-    it('gets called every second', () => {
-      expect(vm.commitAgeUpdate).not.toHaveBeenCalled();
-
-      jasmine.clock().tick(1100);
-      expect(vm.commitAgeUpdate.calls.count()).toEqual(1);
-
-      jasmine.clock().tick(1000);
-      expect(vm.commitAgeUpdate.calls.count()).toEqual(2);
-    });
-  });
-
   describe('getCommitPath', () => {
     it('returns the path to the commit details', () => {
       expect(vm.getCommitPath('abc123de')).toBe('/commit/abc123de');