Commit 8b7c86ea authored by Mike Greiling's avatar Mike Greiling

Prettify vue_merge_request_widget modules

parent 550f5574
...@@ -22,9 +22,7 @@ export default { ...@@ -22,9 +22,7 @@ export default {
directives: { directives: {
tooltip, tooltip,
}, },
mixins: [ mixins: [timeagoMixin],
timeagoMixin,
],
props: { props: {
deployment: { deployment: {
type: Object, type: Object,
...@@ -50,7 +48,7 @@ export default { ...@@ -50,7 +48,7 @@ export default {
return !!(this.deployment.url && this.deployment.name); return !!(this.deployment.url && this.deployment.name);
}, },
hasMetrics() { hasMetrics() {
return !!(this.deployment.metrics_url); return !!this.deployment.metrics_url;
}, },
}, },
methods: { methods: {
...@@ -63,7 +61,7 @@ export default { ...@@ -63,7 +61,7 @@ export default {
MRWidgetService.stopEnvironment(this.deployment.stop_url) MRWidgetService.stopEnvironment(this.deployment.stop_url)
.then(res => res.data) .then(res => res.data)
.then((data) => { .then(data => {
if (data.redirect_url) { if (data.redirect_url) {
visitUrl(data.redirect_url); visitUrl(data.redirect_url);
} }
......
...@@ -60,11 +60,29 @@ export default { ...@@ -60,11 +60,29 @@ export default {
let memoryUsageMsg = ''; let memoryUsageMsg = '';
if (memoryTo > memoryFrom) { if (memoryTo > memoryFrom) {
memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false); memoryUsageMsg = sprintf(
s__(
'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
),
messageProps,
false,
);
} else if (memoryTo < memoryFrom) { } else if (memoryTo < memoryFrom) {
memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false); memoryUsageMsg = sprintf(
s__(
'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
),
messageProps,
false,
);
} else { } else {
memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB'), messageProps, false); memoryUsageMsg = sprintf(
s__(
'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB',
),
messageProps,
false,
);
} }
return memoryUsageMsg; return memoryUsageMsg;
...@@ -77,7 +95,7 @@ export default { ...@@ -77,7 +95,7 @@ export default {
methods: { methods: {
getMegabytes(bytesString) { getMegabytes(bytesString) {
const valueInBytes = Number(bytesString).toFixed(2); const valueInBytes = Number(bytesString).toFixed(2);
return (bytesToMiB(valueInBytes)).toFixed(2); return bytesToMiB(valueInBytes).toFixed(2);
}, },
computeGraphData(metrics, deploymentTime) { computeGraphData(metrics, deploymentTime) {
this.loadingMetrics = false; this.loadingMetrics = false;
...@@ -103,7 +121,7 @@ export default { ...@@ -103,7 +121,7 @@ export default {
loadMetrics() { loadMetrics() {
backOff((next, stop) => { backOff((next, stop) => {
MRWidgetService.fetchMetrics(this.metricsUrl) MRWidgetService.fetchMetrics(this.metricsUrl)
.then((res) => { .then(res => {
if (res.status === statusCodes.NO_CONTENT) { if (res.status === statusCodes.NO_CONTENT) {
this.backOffRequestCounter += 1; this.backOffRequestCounter += 1;
/* eslint-disable no-unused-expressions */ /* eslint-disable no-unused-expressions */
...@@ -114,14 +132,14 @@ export default { ...@@ -114,14 +132,14 @@ export default {
}) })
.catch(stop); .catch(stop);
}) })
.then((res) => { .then(res => {
if (res.status === statusCodes.NO_CONTENT) { if (res.status === statusCodes.NO_CONTENT) {
return res; return res;
} }
return res.data; return res.data;
}) })
.then((data) => { .then(data => {
this.computeGraphData(data.metrics, data.deployment_time); this.computeGraphData(data.metrics, data.deployment_time);
return data; return data;
}) })
......
<script> <script>
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
export default { export default {
name: 'MrWidgetAuthor', name: 'MrWidgetAuthor',
directives: { directives: {
tooltip, tooltip,
},
props: {
author: {
type: Object,
required: true,
}, },
props: { showAuthorName: {
author: { type: Boolean,
type: Object, required: false,
required: true, default: true,
},
showAuthorName: {
type: Boolean,
required: false,
default: true,
},
showAuthorTooltip: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { showAuthorTooltip: {
authorUrl() { type: Boolean,
return this.author.webUrl || this.author.web_url; required: false,
}, default: false,
avatarUrl() {
return this.author.avatarUrl || this.author.avatar_url;
},
}, },
}; },
computed: {
authorUrl() {
return this.author.webUrl || this.author.web_url;
},
avatarUrl() {
return this.author.avatarUrl || this.author.avatar_url;
},
},
};
</script> </script>
<template> <template>
<a <a
......
<script> <script>
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import MrWidgetAuthor from './mr_widget_author.vue'; import MrWidgetAuthor from './mr_widget_author.vue';
export default { export default {
name: 'MrWidgetAuthorTime', name: 'MrWidgetAuthorTime',
components: { components: {
MrWidgetAuthor, MrWidgetAuthor,
},
directives: {
tooltip,
},
props: {
actionText: {
type: String,
required: true,
}, },
directives: { author: {
tooltip, type: Object,
required: true,
}, },
props: { dateTitle: {
actionText: { type: String,
type: String, required: true,
required: true,
},
author: {
type: Object,
required: true,
},
dateTitle: {
type: String,
required: true,
},
dateReadable: {
type: String,
required: true,
},
}, },
}; dateReadable: {
type: String,
required: true,
},
},
};
</script> </script>
<template> <template>
<h4 class="js-mr-widget-author"> <h4 class="js-mr-widget-author">
......
<script> <script>
import { sprintf, s__ } from '~/locale'; import { sprintf, s__ } from '~/locale';
export default { export default {
name: 'MRWidgetMergeHelp', name: 'MRWidgetMergeHelp',
props: { props: {
missingBranch: { missingBranch: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
},
}, },
computed: { },
missingBranchInfo() { computed: {
return sprintf( missingBranchInfo() {
s__('mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the'), return sprintf(
{ branch: this.missingBranch }, s__(
); 'mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the',
}, ),
{ branch: this.missingBranch },
);
}, },
}; },
};
</script> </script>
<template> <template>
<section class="mr-widget-help"> <section class="mr-widget-help">
......
<script> <script>
import { s__ } from '~/locale'; import { s__ } from '~/locale';
export default { export default {
name: 'MRWidgetRelatedLinks', name: 'MRWidgetRelatedLinks',
props: { props: {
relatedLinks: { relatedLinks: {
type: Object, type: Object,
required: true, required: true,
default: () => ({}), default: () => ({}),
},
state: {
type: String,
required: false,
default: '',
},
}, },
computed: { state: {
closesText() { type: String,
if (this.state === 'merged') { required: false,
return s__('mrWidget|Closed'); default: '',
}
if (this.state === 'closed') {
return s__('mrWidget|Did not close');
}
return s__('mrWidget|Closes');
},
}, },
}; },
computed: {
closesText() {
if (this.state === 'merged') {
return s__('mrWidget|Closed');
}
if (this.state === 'closed') {
return s__('mrWidget|Did not close');
}
return s__('mrWidget|Closes');
},
},
};
</script> </script>
<template> <template>
<section class="mr-info-list mr-links"> <section class="mr-info-list mr-links">
......
<script> <script>
import ciIcon from '../../vue_shared/components/ci_icon.vue'; import ciIcon from '../../vue_shared/components/ci_icon.vue';
export default { export default {
components: { components: {
ciIcon, ciIcon,
},
props: {
status: {
type: String,
required: true,
}, },
props: { showDisabledButton: {
status: { type: Boolean,
type: String, required: false,
required: true, default: false,
},
showDisabledButton: {
type: Boolean,
required: false,
default: false,
},
}, },
computed: { },
isLoading() { computed: {
return this.status === 'loading'; isLoading() {
}, return this.status === 'loading';
statusObj() {
return {
group: this.status,
icon: `status_${this.status}`,
};
},
}, },
}; statusObj() {
return {
group: this.status,
icon: `status_${this.status}`,
};
},
},
};
</script> </script>
<template> <template>
<div class="space-children d-flex append-right-10 widget-status-icon"> <div class="space-children d-flex append-right-10 widget-status-icon">
......
<script> <script>
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import { __ } from '../../locale'; import { __ } from '../../locale';
export default { export default {
directives: { directives: {
tooltip, tooltip,
}, },
created() { created() {
this.removesBranchText = __('<strong>Removes</strong> source branch'); this.removesBranchText = __('<strong>Removes</strong> source branch');
this.tooltipTitle = __('A user with write access to the source branch selected this option'); this.tooltipTitle = __('A user with write access to the source branch selected this option');
}, },
}; };
</script> </script>
<template> <template>
......
<script> <script>
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetArchived', name: 'MRWidgetArchived',
components: { components: {
statusIcon, statusIcon,
}, },
}; };
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetAutoMergeFailed', name: 'MRWidgetAutoMergeFailed',
components: { components: {
statusIcon, statusIcon,
},
props: {
mr: {
type: Object,
required: true,
}, },
props: { },
mr: { data() {
type: Object, return {
required: true, isRefreshing: false,
}, };
},
methods: {
refreshWidget() {
this.isRefreshing = true;
eventHub.$emit('MRWidgetUpdateRequested', () => {
this.isRefreshing = false;
});
}, },
data() { },
return { };
isRefreshing: false,
};
},
methods: {
refreshWidget() {
this.isRefreshing = true;
eventHub.$emit('MRWidgetUpdateRequested', () => {
this.isRefreshing = false;
});
},
},
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetChecking', name: 'MRWidgetChecking',
components: { components: {
statusIcon, statusIcon,
}, },
}; };
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue'; import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetClosed', name: 'MRWidgetClosed',
components: { components: {
MrWidgetAuthorTime, MrWidgetAuthorTime,
statusIcon, statusIcon,
}, },
props: { props: {
/* TODO: This is providing all store and service down when it /* TODO: This is providing all store and service down when it
only needs metrics and targetBranch */ only needs metrics and targetBranch */
mr: { mr: {
type: Object, type: Object,
required: true, required: true,
default: () => ({}), default: () => ({}),
},
}, },
}; },
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetConflicts', name: 'MRWidgetConflicts',
components: { components: {
statusIcon, statusIcon,
}, },
props: { props: {
/* TODO: This is providing all store and service down when it /* TODO: This is providing all store and service down when it
only needs a few props */ only needs a few props */
mr: { mr: {
type: Object, type: Object,
required: true, required: true,
default: () => ({}), default: () => ({}),
},
}, },
}; },
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import Flash from '../../../flash'; import Flash from '../../../flash';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
import MrWidgetAuthor from '../../components/mr_widget_author.vue'; import MrWidgetAuthor from '../../components/mr_widget_author.vue';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
name: 'MRWidgetMergeWhenPipelineSucceeds', name: 'MRWidgetMergeWhenPipelineSucceeds',
components: { components: {
MrWidgetAuthor, MrWidgetAuthor,
statusIcon, statusIcon,
},
props: {
mr: {
type: Object,
required: true,
default: () => ({}),
}, },
props: { service: {
mr: { type: Object,
type: Object, required: true,
required: true, default: () => ({}),
default: () => ({}),
},
service: {
type: Object,
required: true,
default: () => ({}),
},
}, },
data() { },
return { data() {
isCancellingAutoMerge: false, return {
isRemovingSourceBranch: false, isCancellingAutoMerge: false,
}; isRemovingSourceBranch: false,
}, };
computed: { },
canRemoveSourceBranch() { computed: {
const { canRemoveSourceBranch() {
shouldRemoveSourceBranch, const {
canRemoveSourceBranch, shouldRemoveSourceBranch,
mergeUserId, canRemoveSourceBranch,
currentUserId, mergeUserId,
} = this.mr; currentUserId,
} = this.mr;
return !shouldRemoveSourceBranch && return !shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId;
canRemoveSourceBranch &&
mergeUserId === currentUserId;
},
}, },
methods: { },
cancelAutomaticMerge() { methods: {
this.isCancellingAutoMerge = true; cancelAutomaticMerge() {
this.service.cancelAutomaticMerge() this.isCancellingAutoMerge = true;
.then(res => res.data) this.service
.then((data) => { .cancelAutomaticMerge()
eventHub.$emit('UpdateWidgetData', data); .then(res => res.data)
}) .then(data => {
.catch(() => { eventHub.$emit('UpdateWidgetData', data);
this.isCancellingAutoMerge = false; })
Flash('Something went wrong. Please try again.'); .catch(() => {
}); this.isCancellingAutoMerge = false;
}, Flash('Something went wrong. Please try again.');
removeSourceBranch() { });
const options = { },
sha: this.mr.sha, removeSourceBranch() {
merge_when_pipeline_succeeds: true, const options = {
should_remove_source_branch: true, sha: this.mr.sha,
}; merge_when_pipeline_succeeds: true,
should_remove_source_branch: true,
};
this.isRemovingSourceBranch = true; this.isRemovingSourceBranch = true;
this.service.merge(options) this.service
.then(res => res.data) .merge(options)
.then((data) => { .then(res => res.data)
if (data.status === 'merge_when_pipeline_succeeds') { .then(data => {
eventHub.$emit('MRWidgetUpdateRequested'); if (data.status === 'merge_when_pipeline_succeeds') {
} eventHub.$emit('MRWidgetUpdateRequested');
}) }
.catch(() => { })
this.isRemovingSourceBranch = false; .catch(() => {
Flash('Something went wrong. Please try again.'); this.isRemovingSourceBranch = false;
}); Flash('Something went wrong. Please try again.');
}, });
}, },
}; },
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import Flash from '~/flash'; import Flash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import { s__, __ } from '~/locale'; import { s__, __ } from '~/locale';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue'; import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
export default { export default {
name: 'MRWidgetMerged', name: 'MRWidgetMerged',
directives: { directives: {
tooltip, tooltip,
},
components: {
MrWidgetAuthorTime,
statusIcon,
ClipboardButton,
},
props: {
mr: {
type: Object,
required: true,
default: () => ({}),
}, },
components: { service: {
MrWidgetAuthorTime, type: Object,
statusIcon, required: true,
ClipboardButton, default: () => ({}),
}, },
props: { },
mr: { data() {
type: Object, return {
required: true, isMakingRequest: false,
default: () => ({}), };
}, },
service: { computed: {
type: Object, shouldShowRemoveSourceBranch() {
required: true, const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
default: () => ({}),
}, return (
!sourceBranchRemoved &&
canRemoveSourceBranch &&
!this.isMakingRequest &&
!isRemovingSourceBranch
);
}, },
data() { shouldShowSourceBranchRemoving() {
return { const { sourceBranchRemoved, isRemovingSourceBranch } = this.mr;
isMakingRequest: false, return !sourceBranchRemoved && (isRemovingSourceBranch || this.isMakingRequest);
};
}, },
computed: { shouldShowMergedButtons() {
shouldShowRemoveSourceBranch() { const {
const { canRevertInCurrentMR,
sourceBranchRemoved, canCherryPickInCurrentMR,
isRemovingSourceBranch, revertInForkPath,
canRemoveSourceBranch, cherryPickInForkPath,
} = this.mr; } = this.mr;
return !sourceBranchRemoved &&
canRemoveSourceBranch &&
!this.isMakingRequest &&
!isRemovingSourceBranch;
},
shouldShowSourceBranchRemoving() {
const {
sourceBranchRemoved,
isRemovingSourceBranch,
} = this.mr;
return !sourceBranchRemoved &&
(isRemovingSourceBranch || this.isMakingRequest);
},
shouldShowMergedButtons() {
const {
canRevertInCurrentMR,
canCherryPickInCurrentMR,
revertInForkPath,
cherryPickInForkPath,
} = this.mr;
return canRevertInCurrentMR || return (
canCherryPickInCurrentMR || canRevertInCurrentMR || canCherryPickInCurrentMR || revertInForkPath || cherryPickInForkPath
revertInForkPath || );
cherryPickInForkPath; },
}, revertTitle() {
revertTitle() { return s__('mrWidget|Revert this merge request in a new merge request');
return s__('mrWidget|Revert this merge request in a new merge request'); },
}, cherryPickTitle() {
cherryPickTitle() { return s__('mrWidget|Cherry-pick this merge request in a new merge request');
return s__('mrWidget|Cherry-pick this merge request in a new merge request'); },
}, revertLabel() {
revertLabel() { return s__('mrWidget|Revert');
return s__('mrWidget|Revert'); },
}, cherryPickLabel() {
cherryPickLabel() { return s__('mrWidget|Cherry-pick');
return s__('mrWidget|Cherry-pick');
},
}, },
methods: { },
removeSourceBranch() { methods: {
this.isMakingRequest = true; removeSourceBranch() {
this.isMakingRequest = true;
this.service.removeSourceBranch() this.service
.then(res => res.data) .removeSourceBranch()
.then((data) => { .then(res => res.data)
if (data.message === 'Branch was removed') { .then(data => {
eventHub.$emit('MRWidgetUpdateRequested', () => { if (data.message === 'Branch was removed') {
this.isMakingRequest = false; eventHub.$emit('MRWidgetUpdateRequested', () => {
}); this.isMakingRequest = false;
} });
}) }
.catch(() => { })
this.isMakingRequest = false; .catch(() => {
Flash(__('Something went wrong. Please try again.')); this.isMakingRequest = false;
}); Flash(__('Something went wrong. Please try again.'));
}, });
}, },
}; },
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetMerging', name: 'MRWidgetMerging',
components: { components: {
statusIcon, statusIcon,
},
props: {
mr: {
type: Object,
required: true,
default: () => ({}),
}, },
props: { },
mr: { };
type: Object,
required: true,
default: () => ({}),
},
},
};
</script> </script>
<template> <template>
<div class="mr-widget-body mr-state-locked media"> <div class="mr-widget-body mr-state-locked media">
......
<script> <script>
import { sprintf, s__ } from '~/locale'; import { sprintf, s__ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue'; import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
export default { export default {
name: 'MRWidgetMissingBranch', name: 'MRWidgetMissingBranch',
directives: { directives: {
tooltip, tooltip,
},
components: {
mrWidgetMergeHelp,
statusIcon,
},
props: {
mr: {
type: Object,
required: true,
}, },
components: { },
mrWidgetMergeHelp, computed: {
statusIcon, missingBranchName() {
return this.mr.sourceBranchRemoved ? 'source' : 'target';
}, },
props: { missingBranchNameMessage() {
mr: { return sprintf(
type: Object, s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'),
required: true, {
},
},
computed: {
missingBranchName() {
return this.mr.sourceBranchRemoved ? 'source' : 'target';
},
missingBranchNameMessage() {
return sprintf(s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'), {
missingBranchName: this.missingBranchName, missingBranchName: this.missingBranchName,
}); },
}, );
message() { },
return sprintf(s__('mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line'), { message() {
return sprintf(
s__(
'mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line',
),
{
missingBranchName: this.missingBranchName, missingBranchName: this.missingBranchName,
}); },
}, );
}, },
}; },
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import StatusIcon from '../mr_widget_status_icon.vue'; import StatusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetNotAllowed', name: 'MRWidgetNotAllowed',
components: { components: {
StatusIcon, StatusIcon,
}, },
}; };
</script> </script>
<template> <template>
......
<script> <script>
import StatusIcon from '../mr_widget_status_icon.vue'; import StatusIcon from '../mr_widget_status_icon.vue';
export default { export default {
name: 'MRWidgetPipelineBlocked', name: 'MRWidgetPipelineBlocked',
components: { components: {
StatusIcon, StatusIcon,
}, },
}; };
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
<script> <script>
import simplePoll from '../../../lib/utils/simple_poll'; import simplePoll from '../../../lib/utils/simple_poll';
import eventHub from '../../event_hub'; import eventHub from '../../event_hub';
import statusIcon from '../mr_widget_status_icon.vue'; import statusIcon from '../mr_widget_status_icon.vue';
import Flash from '../../../flash'; import Flash from '../../../flash';
export default { export default {
name: 'MRWidgetRebase', name: 'MRWidgetRebase',
components: { components: {
statusIcon, statusIcon,
},
props: {
mr: {
type: Object,
required: true,
}, },
props: { service: {
mr: { type: Object,
type: Object, required: true,
required: true,
},
service: {
type: Object,
required: true,
},
}, },
data() { },
return { data() {
isMakingRequest: false, return {
rebasingError: null, isMakingRequest: false,
}; rebasingError: null,
};
},
computed: {
status() {
if (this.mr.rebaseInProgress || this.isMakingRequest) {
return 'loading';
}
if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
return 'warning';
}
return 'success';
}, },
computed: { showDisabledButton() {
status() { return ['failed', 'loading'].includes(this.status);
if (this.mr.rebaseInProgress || this.isMakingRequest) {
return 'loading';
}
if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
return 'warning';
}
return 'success';
},
showDisabledButton() {
return ['failed', 'loading'].includes(this.status);
},
}, },
methods: { },
rebase() { methods: {
this.isMakingRequest = true; rebase() {
this.rebasingError = null; this.isMakingRequest = true;
this.rebasingError = null;
this.service.rebase() this.service
.then(() => { .rebase()
simplePoll(this.checkRebaseStatus); .then(() => {
}) simplePoll(this.checkRebaseStatus);
.catch((error) => { })
this.rebasingError = error.merge_error; .catch(error => {
this.rebasingError = error.merge_error;
this.isMakingRequest = false;
Flash('Something went wrong. Please try again.');
});
},
checkRebaseStatus(continuePolling, stopPolling) {
this.service
.poll()
.then(res => res.data)
.then(res => {
if (res.rebase_in_progress) {
continuePolling();
} else {
this.isMakingRequest = false; this.isMakingRequest = false;
Flash('Something went wrong. Please try again.');
});
},
checkRebaseStatus(continuePolling, stopPolling) {
this.service.poll()
.then(res => res.data)
.then((res) => {
if (res.rebase_in_progress) {
continuePolling();
} else {
this.isMakingRequest = false;
if (res.merge_error && res.merge_error.length) {
this.rebasingError = res.merge_error;
Flash('Something went wrong. Please try again.');
}
eventHub.$emit('MRWidgetUpdateRequested'); if (res.merge_error && res.merge_error.length) {
stopPolling(); this.rebasingError = res.merge_error;
Flash('Something went wrong. Please try again.');
} }
})
.catch(() => { eventHub.$emit('MRWidgetUpdateRequested');
this.isMakingRequest = false;
Flash('Something went wrong. Please try again.');
stopPolling(); stopPolling();
}); }
}, })
.catch(() => {
this.isMakingRequest = false;
Flash('Something went wrong. Please try again.');
stopPolling();
});
}, },
}; },
};
</script> </script>
<template> <template>
<div class="mr-widget-body media"> <div class="mr-widget-body media">
......
...@@ -24,9 +24,10 @@ export default { ...@@ -24,9 +24,10 @@ export default {
methods: { methods: {
removeWIP() { removeWIP() {
this.isMakingRequest = true; this.isMakingRequest = true;
this.service.removeWIP() this.service
.removeWIP()
.then(res => res.data) .then(res => res.data)
.then((data) => { .then(data => {
eventHub.$emit('UpdateWidgetData', data); eventHub.$emit('UpdateWidgetData', data);
new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
$('.merge-request .detail-page-description .title').text(this.mr.title); $('.merge-request .detail-page-description .title').text(this.mr.title);
......
<script> <script>
import Project from '~/pages/projects/project'; import Project from '~/pages/projects/project';
import SmartInterval from '~/smart_interval'; import SmartInterval from '~/smart_interval';
import createFlash from '../flash'; import createFlash from '../flash';
...@@ -100,8 +99,11 @@ export default { ...@@ -100,8 +99,11 @@ export default {
return !!this.mr.relatedLinks && !this.mr.isNothingToMergeState; return !!this.mr.relatedLinks && !this.mr.isNothingToMergeState;
}, },
shouldRenderSourceBranchRemovalStatus() { shouldRenderSourceBranchRemovalStatus() {
return !this.mr.canRemoveSourceBranch && this.mr.shouldRemoveSourceBranch && return (
(!this.mr.isNothingToMergeState && !this.mr.isMergedState); !this.mr.canRemoveSourceBranch &&
this.mr.shouldRemoveSourceBranch &&
(!this.mr.isNothingToMergeState && !this.mr.isMergedState)
);
}, },
}, },
created() { created() {
...@@ -133,9 +135,10 @@ export default { ...@@ -133,9 +135,10 @@ export default {
return new MRWidgetService(endpoints); return new MRWidgetService(endpoints);
}, },
checkStatus(cb) { checkStatus(cb) {
return this.service.checkStatus() return this.service
.checkStatus()
.then(res => res.data) .then(res => res.data)
.then((data) => { .then(data => {
this.handleNotification(data); this.handleNotification(data);
this.mr.setData(data); this.mr.setData(data);
this.setFaviconHelper(); this.setFaviconHelper();
...@@ -172,20 +175,24 @@ export default { ...@@ -172,20 +175,24 @@ export default {
return Promise.resolve(); return Promise.resolve();
}, },
fetchDeployments() { fetchDeployments() {
return this.service.fetchDeployments() return this.service
.fetchDeployments()
.then(res => res.data) .then(res => res.data)
.then((data) => { .then(data => {
if (data.length) { if (data.length) {
this.mr.deployments = data; this.mr.deployments = data;
} }
}) })
.catch(() => { .catch(() => {
createFlash('Something went wrong while fetching the environments for this merge request. Please try again.'); createFlash(
'Something went wrong while fetching the environments for this merge request. Please try again.',
);
}); });
}, },
fetchActionsContent() { fetchActionsContent() {
this.service.fetchMergeActionsContent() this.service
.then((res) => { .fetchMergeActionsContent()
.then(res => {
if (res.data) { if (res.data) {
const el = document.createElement('div'); const el = document.createElement('div');
el.innerHTML = res.data; el.innerHTML = res.data;
...@@ -212,22 +219,22 @@ export default { ...@@ -212,22 +219,22 @@ export default {
this.pollingInterval.stopTimer(); this.pollingInterval.stopTimer();
}, },
bindEventHubListeners() { bindEventHubListeners() {
eventHub.$on('MRWidgetUpdateRequested', (cb) => { eventHub.$on('MRWidgetUpdateRequested', cb => {
this.checkStatus(cb); this.checkStatus(cb);
}); });
// `params` should be an Array contains a Boolean, like `[true]` // `params` should be an Array contains a Boolean, like `[true]`
// Passing parameter as Boolean didn't work. // Passing parameter as Boolean didn't work.
eventHub.$on('SetBranchRemoveFlag', (params) => { eventHub.$on('SetBranchRemoveFlag', params => {
[this.mr.isRemovingSourceBranch] = params; [this.mr.isRemovingSourceBranch] = params;
}); });
eventHub.$on('FailedToMerge', (mergeError) => { eventHub.$on('FailedToMerge', mergeError => {
this.mr.state = 'failedToMerge'; this.mr.state = 'failedToMerge';
this.mr.mergeError = mergeError; this.mr.mergeError = mergeError;
}); });
eventHub.$on('UpdateWidgetData', (data) => { eventHub.$on('UpdateWidgetData', data => {
this.mr.setData(data); this.mr.setData(data);
}); });
......
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