Merge branch '#51699-time-tracker-naming' into 'master'

Fix props name casing in time time tracker vue component

Closes #45977 and #51699

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

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

@@ -51,10 +51,10 @@ export default {
 <template>
   <div class="block">
     <issuable-time-tracker
-      :time_estimate="store.timeEstimate"
-      :time_spent="store.totalTimeSpent"
-      :human_time_estimate="store.humanTimeEstimate"
-      :human_time_spent="store.humanTotalTimeSpent"
+      :time-estimate="store.timeEstimate"
+      :time-spent="store.totalTimeSpent"
+      :human-time-estimate="store.humanTimeEstimate"
+      :human-time-spent="store.humanTotalTimeSpent"
       :root-path="store.rootPath"
     />
   </div>

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

@@ -19,24 +19,20 @@ export default {
     TimeTrackingHelpState,
   },
   props: {
-    // eslint-disable-next-line vue/prop-name-casing
-    time_estimate: {
+    timeEstimate: {
       type: Number,
       required: true,
     },
-    // eslint-disable-next-line vue/prop-name-casing
-    time_spent: {
+    timeSpent: {
       type: Number,
       required: true,
     },
-    // eslint-disable-next-line vue/prop-name-casing
-    human_time_estimate: {
+    humanTimeEstimate: {
       type: String,
       required: false,
       default: '',
     },
-    // eslint-disable-next-line vue/prop-name-casing
-    human_time_spent: {
+    humanTimeSpent: {
       type: String,
       required: false,
       default: '',
@@ -52,18 +48,6 @@ export default {
     };
   },
   computed: {
-    timeSpent() {
-      return this.time_spent;
-    },
-    timeEstimate() {
-      return this.time_estimate;
-    },
-    timeEstimateHumanReadable() {
-      return this.human_time_estimate;
-    },
-    timeSpentHumanReadable() {
-      return this.human_time_spent;
-    },
     hasTimeSpent() {
       return !!this.timeSpent;
     },
@@ -94,10 +78,12 @@ export default {
       this.showHelp = show;
     },
     update(data) {
-      this.time_estimate = data.time_estimate;
-      this.time_spent = data.time_spent;
-      this.human_time_estimate = data.human_time_estimate;
-      this.human_time_spent = data.human_time_spent;
+      const { timeEstimate, timeSpent, humanTimeEstimate, humanTimeSpent } = data;
+
+      this.timeEstimate = timeEstimate;
+      this.timeSpent = timeSpent;
+      this.humanTimeEstimate = humanTimeEstimate;
+      this.humanTimeSpent = humanTimeSpent;
     },
   },
 };
@@ -114,8 +100,8 @@ export default {
       :show-help-state="showHelpState"
       :show-spent-only-state="showSpentOnlyState"
       :show-estimate-only-state="showEstimateOnlyState"
-      :time-spent-human-readable="timeSpentHumanReadable"
-      :time-estimate-human-readable="timeEstimateHumanReadable"
+      :time-spent-human-readable="humanTimeSpent"
+      :time-estimate-human-readable="humanTimeEstimate"
     />
     <div class="title hide-collapsed">
       {{ __('Time tracking') }}
@@ -145,11 +131,11 @@ export default {
     <div class="time-tracking-content hide-collapsed">
       <time-tracking-estimate-only-pane
         v-if="showEstimateOnlyState"
-        :time-estimate-human-readable="timeEstimateHumanReadable"
+        :time-estimate-human-readable="humanTimeEstimate"
       />
       <time-tracking-spent-only-pane
         v-if="showSpentOnlyState"
-        :time-spent-human-readable="timeSpentHumanReadable"
+        :time-spent-human-readable="humanTimeSpent"
       />
       <time-tracking-no-tracking-pane
         v-if="showNoTimeTrackingState"
@@ -158,8 +144,8 @@ export default {
         v-if="showComparisonState"
         :time-estimate="timeEstimate"
         :time-spent="timeSpent"
-        :time-spent-human-readable="timeSpentHumanReadable"
-        :time-estimate-human-readable="timeEstimateHumanReadable"
+        :time-spent-human-readable="humanTimeSpent"
+        :time-estimate-human-readable="humanTimeEstimate"
       />
       <transition name="help-state-toggle">
         <time-tracking-help-state

app/assets/javascripts/sidebar/mount_milestone_sidebar.js

@@ -7,6 +7,8 @@ export default class SidebarMilestone {
 
     if (!el) return;
 
+    const { timeEstimate, timeSpent, humanTimeEstimate, humanTimeSpent } = el.dataset;
+
     // eslint-disable-next-line no-new
     new Vue({
       el,
@@ -15,10 +17,10 @@ export default class SidebarMilestone {
       },
       render: createElement => createElement('timeTracker', {
         props: {
-          time_estimate: parseInt(el.dataset.timeEstimate, 10),
-          time_spent: parseInt(el.dataset.timeSpent, 10),
-          human_time_estimate: el.dataset.humanTimeEstimate,
-          human_time_spent: el.dataset.humanTimeSpent,
+          timeEstimate: parseInt(timeEstimate, 10),
+          timeSpent: parseInt(timeSpent, 10),
+          humanTimeEstimate,
+          humanTimeSpent,
           rootPath: '/',
         },
       }),

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

@@ -8,7 +8,10 @@ describe('Issuable Time Tracker', () => {
   let initialData;
   let vm;
 
-  const initTimeTrackingComponent = opts => {
+  const initTimeTrackingComponent = ({ timeEstimate,
+                                         timeSpent,
+                                         timeEstimateHumanReadable,
+                                         timeSpentHumanReadable }) => {
     setFixtures(`
     <div>
       <div id="mock-container"></div>
@@ -16,10 +19,10 @@ describe('Issuable Time Tracker', () => {
   `);
 
     initialData = {
-      time_estimate: opts.timeEstimate,
-      time_spent: opts.timeSpent,
-      human_time_estimate: opts.timeEstimateHumanReadable,
-      human_time_spent: opts.timeSpentHumanReadable,
+      timeEstimate,
+      timeSpent,
+      humanTimeEstimate: timeEstimateHumanReadable,
+      humanTimeSpent: timeSpentHumanReadable,
       rootPath: '/',
     };
 
@@ -43,8 +46,8 @@ describe('Issuable Time Tracker', () => {
   describe('Initialization', () => {
     beforeEach(() => {
       initTimeTrackingComponent({
-        timeEstimate: 100000,
-        timeSpent: 5000,
+        timeEstimate: 10000, // 2h 46m
+        timeSpent: 5000, // 1h 23m
         timeEstimateHumanReadable: '2h 46m',
         timeSpentHumanReadable: '1h 23m',
       });
@@ -56,14 +59,14 @@ describe('Issuable Time Tracker', () => {
 
     it('should correctly set timeEstimate', done => {
       Vue.nextTick(() => {
-        expect(vm.timeEstimate).toBe(initialData.time_estimate);
+        expect(vm.timeEstimate).toBe(initialData.timeEstimate);
         done();
       });
     });
 
     it('should correctly set time_spent', done => {
       Vue.nextTick(() => {
-        expect(vm.timeSpent).toBe(initialData.time_spent);
+        expect(vm.timeSpent).toBe(initialData.timeSpent);
         done();
       });
     });
@@ -74,8 +77,8 @@ describe('Issuable Time Tracker', () => {
       describe('Comparison pane', () => {
         beforeEach(() => {
           initTimeTrackingComponent({
-            timeEstimate: 100000,
-            timeSpent: 5000,
+            timeEstimate: 100000, // 1d 3h
+            timeSpent: 5000, // 1h 23m
             timeEstimateHumanReadable: '',
             timeSpentHumanReadable: '',
           });
@@ -106,8 +109,8 @@ describe('Issuable Time Tracker', () => {
           });
 
           it('should display the remaining meter with the correct background color when over estimate', done => {
-            vm.time_estimate = 100000;
-            vm.time_spent = 20000000;
+            vm.timeEstimate = 10000; // 2h 46m
+            vm.timeSpent = 20000000; // 231 days
             Vue.nextTick(() => {
               expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull();
               done();
@@ -119,7 +122,7 @@ describe('Issuable Time Tracker', () => {
       describe('Estimate only pane', () => {
         beforeEach(() => {
           initTimeTrackingComponent({
-            timeEstimate: 100000,
+            timeEstimate: 10000, // 2h 46m
             timeSpent: 0,
             timeEstimateHumanReadable: '2h 46m',
             timeSpentHumanReadable: '',
@@ -142,7 +145,7 @@ describe('Issuable Time Tracker', () => {
         beforeEach(() => {
           initTimeTrackingComponent({
             timeEstimate: 0,
-            timeSpent: 5000,
+            timeSpent: 5000, // 1h 23m
             timeEstimateHumanReadable: '2h 46m',
             timeSpentHumanReadable: '1h 23m',
           });