summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2018-10-03 08:34:13 +0000
committerPhil Hughes <me@iamphill.com>2018-10-03 08:34:13 +0000
commitfb438b9f3011e6793ee2029a3502f3a27866ab14 (patch)
treeebe12ab2efd4a194a93fd9a0ae608c910bb40821
parent474231eab20718699a416d7030aba995973df8c1 (diff)
parent65d7bf20e3b962f7f0db3dbc1dc331ec076a6823 (diff)
downloadgitlab-ce-fb438b9f3011e6793ee2029a3502f3a27866ab14.tar.gz
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
-rw-r--r--app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue8
-rw-r--r--app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue46
-rw-r--r--app/assets/javascripts/sidebar/mount_milestone_sidebar.js10
-rw-r--r--spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js33
4 files changed, 44 insertions, 53 deletions
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
index 2e1d6e9643a..8660b0546cf 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
+++ b/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>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 2ee3e1f322e..ef76dc13ce9 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/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
diff --git a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js b/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
index b15ad0e5586..87da65a1b1f 100644
--- a/app/assets/javascripts/sidebar/mount_milestone_sidebar.js
+++ b/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: '/',
},
}),
diff --git a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
index 9dff52a9d49..0e30759c41d 100644
--- a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
+++ b/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',
});