Commit b3ddd76e authored by Fatih Acet's avatar Fatih Acet

Fix tooltip title and date for Merged state

Pass merged_at state to component, format and display
proper merged date in the tooltip.
parent 546ce812
...@@ -6,6 +6,8 @@ export const parseIssuableData = () => { ...@@ -6,6 +6,8 @@ export const parseIssuableData = () => {
return JSON.parse(sanitize(initialDataEl.textContent).replace(/"/g, '"')); return JSON.parse(sanitize(initialDataEl.textContent).replace(/"/g, '"'));
} catch (e) { } catch (e) {
console.error(e); // eslint-disable-line no-console
return {}; return {};
} }
}; };
......
...@@ -30,14 +30,14 @@ export default { ...@@ -30,14 +30,14 @@ export default {
computed: { computed: {
...mapState(['isFetchingMergeRequests', 'mergeRequests', 'totalCount']), ...mapState(['isFetchingMergeRequests', 'mergeRequests', 'totalCount']),
closingMergeRequestsText() { closingMergeRequestsText() {
if (this.closingMergeRequestsCount === 0) { if (!this.hasClosingMergeRequest) {
return ''; return '';
} }
const mrText = n__( const mrText = n__(
'When this merge request is accepted', 'When this merge request is accepted',
'When these merge requests are accepted', 'When these merge requests are accepted',
this.closingMergeRequestsCount, this.totalCount,
); );
return sprintf(s__('%{mrText}, this issue will be closed automatically.'), { mrText }); return sprintf(s__('%{mrText}, this issue will be closed automatically.'), { mrText });
...@@ -48,7 +48,7 @@ export default { ...@@ -48,7 +48,7 @@ export default {
this.fetchMergeRequests(); this.fetchMergeRequests();
}, },
created() { created() {
this.closingMergeRequestsCount = parseIssuableData().closingMergeRequestsCount; this.hasClosingMergeRequest = parseIssuableData().hasClosingMergeRequest;
}, },
methods: { methods: {
...mapActions(['setInitialState', 'fetchMergeRequests']), ...mapActions(['setInitialState', 'fetchMergeRequests']),
...@@ -64,14 +64,14 @@ export default { ...@@ -64,14 +64,14 @@ export default {
</script> </script>
<template> <template>
<div v-if="totalCount"> <div v-if="isFetchingMergeRequests || (!isFetchingMergeRequests && totalCount)">
<div id="merge-requests" class="card-slim mt-3"> <div id="merge-requests" class="card-slim mt-3">
<div class="card-header"> <div class="card-header">
<div class="card-title mt-0 mb-0 h5 merge-requests-title"> <div class="card-title mt-0 mb-0 h5 merge-requests-title">
<span class="mr-1"> <span class="mr-1">
{{ __('Related merge requests') }} {{ __('Related merge requests') }}
</span> </span>
<div class="d-inline-flex lh-100 align-middle"> <div v-if="totalCount" class="d-inline-flex lh-100 align-middle">
<div class="mr-count-badge"> <div class="mr-count-badge">
<div class="mr-count-badge-count"> <div class="mr-count-badge-count">
<svg class="s16 mr-1 text-secondary"> <svg class="s16 mr-1 text-secondary">
...@@ -100,6 +100,7 @@ export default { ...@@ -100,6 +100,7 @@ export default {
:assignees="getAssignees(mr)" :assignees="getAssignees(mr)"
:created-at="mr.created_at" :created-at="mr.created_at"
:closed-at="mr.closed_at" :closed-at="mr.closed_at"
:merged-at="mr.merged_at"
:path="mr.web_url" :path="mr.web_url"
:state="mr.state" :state="mr.state"
:is-merge-request="true" :is-merge-request="true"
...@@ -110,7 +111,10 @@ export default { ...@@ -110,7 +111,10 @@ export default {
</ul> </ul>
</div> </div>
</div> </div>
<div class="issue-closed-by-widget second-block"> <div
v-if="hasClosingMergeRequest && !isFetchingMergeRequests"
class="issue-closed-by-widget second-block"
>
{{ closingMergeRequestsText }} {{ closingMergeRequestsText }}
</div> </div>
</div> </div>
......
import axios from '~/lib/utils/axios_utils'; import axios from '~/lib/utils/axios_utils';
import createFlash from '~/flash'; import createFlash from '~/flash';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import { normalizeHeaders } from '~/lib/utils/common_utils';
import * as types from './mutation_types'; import * as types from './mutation_types';
import { normalizeHeaders } from '../../lib/utils/common_utils';
const REQUEST_PAGE_COUNT = 100; const REQUEST_PAGE_COUNT = 100;
...@@ -23,7 +23,7 @@ export const fetchMergeRequests = ({ state, dispatch }) => { ...@@ -23,7 +23,7 @@ export const fetchMergeRequests = ({ state, dispatch }) => {
.get(`${state.apiEndpoint}?per_page=${REQUEST_PAGE_COUNT}`) .get(`${state.apiEndpoint}?per_page=${REQUEST_PAGE_COUNT}`)
.then(res => { .then(res => {
const { headers, data } = res; const { headers, data } = res;
const total = parseInt(normalizeHeaders(headers)['X-TOTAL'], 10) || 0; const total = Number(normalizeHeaders(headers)['X-TOTAL']) || 0;
dispatch('receiveDataSuccess', { data, total }); dispatch('receiveDataSuccess', { data, total });
}) })
......
<script> <script>
import { GlTooltipDirective } from '@gitlab/ui'; import { GlTooltipDirective } from '@gitlab/ui';
import { __, sprintf } from '~/locale'; import { sprintf } from '~/locale';
import IssueMilestone from '../../components/issue/issue_milestone.vue'; import IssueMilestone from '../../components/issue/issue_milestone.vue';
import IssueAssignees from '../../components/issue/issue_assignees.vue'; import IssueAssignees from '../../components/issue/issue_assignees.vue';
import relatedIssuableMixin from '../../mixins/related_issuable_mixin'; import relatedIssuableMixin from '../../mixins/related_issuable_mixin';
...@@ -29,9 +29,9 @@ export default { ...@@ -29,9 +29,9 @@ export default {
return sprintf( return sprintf(
'<span class="bold">%{state}</span> %{timeInWords}<br/><span class="text-tertiary">%{timestamp}</span>', '<span class="bold">%{state}</span> %{timeInWords}<br/><span class="text-tertiary">%{timestamp}</span>',
{ {
state: this.isOpen ? __('Opened') : __('Closed'), state: this.stateText,
timeInWords: this.isOpen ? this.createdAtInWords : this.closedAtInWords, timeInWords: this.stateTimeInWords,
timestamp: this.isOpen ? this.createdAtTimestamp : this.closedAtTimestamp, timestamp: this.stateTimestamp,
}, },
); );
}, },
......
...@@ -59,6 +59,11 @@ const mixins = { ...@@ -59,6 +59,11 @@ const mixins = {
required: false, required: false,
default: '', default: '',
}, },
mergedAt: {
type: String,
required: false,
default: '',
},
milestone: { milestone: {
type: Object, type: Object,
required: false, required: false,
...@@ -156,12 +161,39 @@ const mixins = { ...@@ -156,12 +161,39 @@ const mixins = {
createdAtTimestamp() { createdAtTimestamp() {
return this.createdAt ? formatDate(new Date(this.createdAt)) : ''; return this.createdAt ? formatDate(new Date(this.createdAt)) : '';
}, },
mergedAtTimestamp() {
return this.mergedAt ? formatDate(new Date(this.mergedAt)) : '';
},
mergedAtInWords() {
return this.mergedAt ? this.timeFormated(this.mergedAt) : '';
},
closedAtInWords() { closedAtInWords() {
return this.closedAt ? this.timeFormated(this.closedAt) : ''; return this.closedAt ? this.timeFormated(this.closedAt) : '';
}, },
closedAtTimestamp() { closedAtTimestamp() {
return this.closedAt ? formatDate(new Date(this.closedAt)) : ''; return this.closedAt ? formatDate(new Date(this.closedAt)) : '';
}, },
stateText() {
if (this.isMerged) {
return __('Merged');
}
return this.isOpen ? __('Opened') : __('Closed');
},
stateTimeInWords() {
if (this.isMerged) {
return this.mergedAtInWords;
}
return this.isOpen ? this.createdAtInWords : this.closedAtInWords;
},
stateTimestamp() {
if (this.isMerged) {
return this.mergedAtTimestamp;
}
return this.isOpen ? this.createdAtTimestamp : this.closedAtTimestamp;
},
pipelineStatusTooltip() { pipelineStatusTooltip() {
return this.hasPipeline return this.hasPipeline
? sprintf(__('Pipeline: %{status}'), { status: this.pipelineStatus.label }) ? sprintf(__('Pipeline: %{status}'), { status: this.pipelineStatus.label })
......
...@@ -277,7 +277,7 @@ module IssuablesHelper ...@@ -277,7 +277,7 @@ module IssuablesHelper
initialTaskStatus: issuable.task_status initialTaskStatus: issuable.task_status
} }
data[:closingMergeRequestsCount] = issuable.merge_requests_count if issuable.is_a?(Issue) data[:hasClosingMergeRequest] = issuable.merge_requests_count != 0 if issuable.is_a?(Issue)
if parent.is_a?(Group) if parent.is_a?(Group)
data[:groupPath] = parent.path data[:groupPath] = parent.path
......
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
- if can?(current_user, :download_code, @project) - if can?(current_user, :download_code, @project)
#related-branches{ data: { url: related_branches_project_issue_path(@project, @issue) } } #related-branches{ data: { url: related_branches_project_issue_path(@project, @issue) } }
- # This element is filled in using JavaScript. -# This element is filled in using JavaScript.
.content-block.emoji-block.emoji-block-sticky .content-block.emoji-block.emoji-block-sticky
.row .row
......
---
title: Rewrite related MRs widget with Vue
merge_request: 27027
author:
type: other
...@@ -70,7 +70,7 @@ describe "Internal references", :js do ...@@ -70,7 +70,7 @@ describe "Internal references", :js do
page.within("#merge-requests ul") do page.within("#merge-requests ul") do
expect(page).to have_content(private_project_merge_request.title) expect(page).to have_content(private_project_merge_request.title)
expect(page).to have_css(".merge-request-status") expect(page).to have_css(".ic-issue-open-m")
end end
expect(page).to have_content("mentioned in merge request #{private_project_merge_request.to_reference(public_project)}") expect(page).to have_content("mentioned in merge request #{private_project_merge_request.to_reference(public_project)}")
......
...@@ -106,7 +106,7 @@ describe API::Issues, '(JavaScript fixtures)', type: :request do ...@@ -106,7 +106,7 @@ describe API::Issues, '(JavaScript fixtures)', type: :request do
description: issue_description description: issue_description
project.add_reporter(user) project.add_reporter(user)
related_mr = create_referencing_mr(user, project, issue) create_referencing_mr(user, project, issue)
create(:merge_request, create(:merge_request,
:simple, :simple,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment