Replace issues time tracking progress bar with gitlab-ui's progress bar

app/assets/javascripts/commons/gitlab_ui.js

+import Vue from 'vue';
+import progressBar from '@gitlab-org/gitlab-ui/dist/base/progress_bar';
+
+Vue.component('gl-progress-bar', progressBar);

app/assets/javascripts/commons/index.js

@@ -3,4 +3,5 @@ import './polyfills';
 import './jquery';
 import './bootstrap';
 import './vue';
+import './gitlab_ui';
 import '../lib/utils/axios_utils';

app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue

@@ -42,11 +42,14 @@ export default {
       return this.timeEstimate - this.timeSpent;
     },
     timeRemainingPercent() {
-      return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
+      return Math.floor((this.timeSpent / this.timeEstimate) * 100);
     },
     timeRemainingStatusClass() {
       return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
     },
+    progressBarVariant() {
+      return this.timeRemainingPercent > 100 ? 'danger' : 'primary';
+    },
   },
 };
 </script>
@@ -62,16 +65,10 @@ export default {
       data-placement="top"
       role="timeRemainingDisplay"
     >
-      <div
-        :aria-valuenow="timeRemainingPercent"
-        class="meter-container"
-      >
-        <div
-          :style="{ width: timeRemainingPercent }"
-          class="meter-fill"
-        >
-        </div>
-      </div>
+      <gl-progress-bar
+        :value="timeRemainingPercent"
+        :variant="progressBarVariant"
+      />
       <div class="compare-display-container">
         <div class="compare-display float-left">
           <span class="compare-label">

app/assets/stylesheets/framework/common.scss

@@ -370,11 +370,14 @@ img.emoji {
   margin-right: 10px;
 }
 
-.alert,
-.progress {
+.alert {
   margin-bottom: $gl-padding;
 }
 
+.progress {
+  height: 4px;
+}
+
 .project-item-select-holder {
   display: inline-block;
   position: relative;

app/assets/stylesheets/pages/issuable.scss

@@ -834,17 +834,7 @@
   }
 
   .compare-meter {
-    &.within_estimate {
-      .meter-fill {
-        background: $gl-primary;
-      }
-    }
-
     &.over_estimate {
-      .meter-fill {
-        background: $red-500;
-      }
-
       .time-remaining,
       .compare-value.spent {
         color: $red-500;
@@ -852,18 +842,6 @@
     }
   }
 
-  .meter-container {
-    background: $border-gray-light;
-    border-radius: 3px;
-
-    .meter-fill {
-      max-width: 100%;
-      height: 5px;
-      border-radius: 3px;
-      background: $gl-primary;
-    }
-  }
-
   .compare-display-container {
     display: flex;
     justify-content: space-between;

config/dependency_decisions.yml

@@ -540,3 +540,9 @@
     :why: https://github.com/xtuc/webassemblyjs/blob/master/LICENSE
     :versions: []
     :when: 2018-06-08 05:30:56.764116000 Z
+- - :approve
+  - "@gitlab-org/gitlab-ui"
+  - :who: Clement Ho
+    :why: Our own library
+    :versions: []
+    :when: 2018-07-17 21:02:54.529227000 Z

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@gitlab-org/gitlab-svgs": "^1.26.0",
+    "@gitlab-org/gitlab-ui": "1.0.5",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.3",

spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js

-import $ from 'jquery';
 import Vue from 'vue';
 
 import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
@@ -94,21 +93,14 @@ describe('Issuable Time Tracker', () => {
         describe('Remaining meter', () => {
           it('should display the remaining meter with the correct width', done => {
             Vue.nextTick(() => {
-              const meterWidth = vm.$el.querySelector('.time-tracking-comparison-pane .meter-fill')
-                .style.width;
-              const correctWidth = '5%';
-
-              expect(meterWidth).toBe(correctWidth);
+              expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[value="5"]')).not.toBeNull();
               done();
             });
           });
 
           it('should display the remaining meter with the correct background color when within estimate', done => {
             Vue.nextTick(() => {
-              const styledMeter = $(vm.$el).find(
-                '.time-tracking-comparison-pane .within_estimate .meter-fill',
-              );
-              expect(styledMeter.length).toBe(1);
+              expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="primary"]')).not.toBeNull();
               done();
             });
           });
@@ -117,10 +109,7 @@ describe('Issuable Time Tracker', () => {
             vm.time_estimate = 100000;
             vm.time_spent = 20000000;
             Vue.nextTick(() => {
-              const styledMeter = $(vm.$el).find(
-                '.time-tracking-comparison-pane .over_estimate .meter-fill',
-              );
-              expect(styledMeter.length).toBe(1);
+              expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull();
               done();
             });
           });