diff options
author | Phil Hughes <me@iamphill.com> | 2018-10-03 08:34:13 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-10-03 08:34:13 +0000 |
commit | fb438b9f3011e6793ee2029a3502f3a27866ab14 (patch) | |
tree | ebe12ab2efd4a194a93fd9a0ae608c910bb40821 | |
parent | 474231eab20718699a416d7030aba995973df8c1 (diff) | |
parent | 65d7bf20e3b962f7f0db3dbc1dc331ec076a6823 (diff) | |
download | gitlab-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
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', }); |