Commit 0c5b3d08 authored by Fatih Acet's avatar Fatih Acet

Merge branch '10761-add-mr-widget-review-instructions-ce-backport' into 'master'

CE Backport for Add Visual Review instructions to the MR Widget

See merge request gitlab-org/gitlab-ce!28196
parents 24c49658 68fd2bdd
......@@ -23,6 +23,8 @@ export default {
TooltipOnTruncate,
FilteredSearchDropdown,
ReviewAppLink,
VisualReviewAppLink: () =>
import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
},
directives: {
GlTooltip: GlTooltipDirective,
......@@ -37,6 +39,20 @@ export default {
type: Boolean,
required: true,
},
showVisualReviewApp: {
type: Boolean,
required: false,
default: false,
},
visualReviewAppMeta: {
type: Object,
required: false,
default: () => ({
sourceProjectId: '',
issueId: '',
appUrl: '',
}),
},
},
deployedTextMap: {
running: __('Deploying to'),
......@@ -168,6 +184,11 @@ export default {
:link="deploymentExternalUrl"
:css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
/>
<visual-review-app-link
v-if="showVisualReviewApp"
:link="deploymentExternalUrl"
:app-metadata="visualReviewAppMeta"
/>
</template>
<template slot="result" slot-scope="slotProps">
......@@ -187,11 +208,17 @@ export default {
</a>
</template>
</filtered-search-dropdown>
<review-app-link
v-else
:link="deploymentExternalUrl"
css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
/>
<template v-else>
<review-app-link
:link="deploymentExternalUrl"
css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inline"
/>
<visual-review-app-link
v-if="showVisualReviewApp"
:link="deploymentExternalUrl"
:app-metadata="visualReviewAppMeta"
/>
</template>
</template>
<span
v-if="deployment.stop_url"
......
......@@ -30,9 +30,6 @@ export default {
},
},
computed: {
pipeline() {
return this.isPostMerge ? this.mr.mergePipeline : this.mr.pipeline;
},
branch() {
return this.isPostMerge ? this.mr.targetBranch : this.mr.sourceBranch;
},
......@@ -48,6 +45,19 @@ export default {
hasDeploymentMetrics() {
return this.isPostMerge;
},
visualReviewAppMeta() {
return {
appUrl: this.mr.appUrl,
issueId: this.mr.iid,
sourceProjectId: this.mr.sourceProjectId,
};
},
pipeline() {
return this.isPostMerge ? this.mr.mergePipeline : this.mr.pipeline;
},
showVisualReviewAppLink() {
return !!(this.mr.visualReviewFF && this.mr.visualReviewAppAvailable);
},
},
};
</script>
......@@ -61,14 +71,18 @@ export default {
:source-branch-link="branchLink"
:troubleshooting-docs-path="mr.troubleshootingDocsPath"
/>
<div v-if="deployments.length" slot="footer" class="mr-widget-extension">
<deployment
v-for="deployment in deployments"
:key="deployment.id"
:class="deploymentClass"
:deployment="deployment"
:show-metrics="hasDeploymentMetrics"
/>
</div>
<template v-slot:footer>
<div v-if="deployments.length" class="mr-widget-extension">
<deployment
v-for="deployment in deployments"
:key="deployment.id"
:class="deploymentClass"
:deployment="deployment"
:show-metrics="hasDeploymentMetrics"
:show-visual-review-app="true"
:visual-review-app-meta="visualReviewAppMeta"
/>
</div>
</template>
</mr-widget-container>
</template>
......@@ -19,6 +19,6 @@ export default {
</script>
<template>
<a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
{{ __('View app') }} <icon name="external-link" />
{{ __('View app') }} <icon css-classes="fgray" name="external-link" />
</a>
</template>
......@@ -7,7 +7,7 @@
*
* @example
* <clipboard-button
* title="Copy to clipbard"
* title="Copy to clipboard"
* text="Content to be copied"
* css-class="btn-transparent"
* />
......
......@@ -5,6 +5,9 @@
.cgreen { color: $green-600; }
.cdark { color: $common-gray-dark; }
.fwhite { fill: $white-light; }
.fgray { fill: $gray-700; }
.text-plain,
.text-plain:hover {
color: $gl-text-color;
......
......@@ -972,10 +972,6 @@
}
}
.btn svg {
fill: $gray-700;
}
.dropdown-menu {
width: 400px;
}
......
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { mount, createLocalVue } from '@vue/test-utils';
import MrWidgetPipelineContainer from '~/vue_merge_request_widget/components/mr_widget_pipeline_container.vue';
import MrWidgetPipeline from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
import { mockStore } from '../mock_data';
......@@ -9,7 +9,7 @@ describe('MrWidgetPipelineContainer', () => {
const factory = (props = {}) => {
const localVue = createLocalVue();
wrapper = shallowMount(localVue.extend(MrWidgetPipelineContainer), {
wrapper = mount(localVue.extend(MrWidgetPipelineContainer), {
propsData: {
mr: Object.assign({}, mockStore),
...props,
......
......@@ -235,11 +235,44 @@ export default {
troubleshooting_docs_path: 'help',
merge_request_pipelines_docs_path: '/help/ci/merge_request_pipelines/index.md',
squash: true,
visual_review_app_available: true,
};
export const mockStore = {
pipeline: { id: 0 },
mergePipeline: { id: 1 },
pipeline: {
id: 0,
details: {
status: {
details_path: '/root/review-app-tester/pipelines/66',
favicon:
'/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2. png',
group: 'success-with-warnings',
has_details: true,
icon: 'status_warning',
illustration: null,
label: 'passed with warnings',
text: 'passed',
tooltip: 'passed',
},
},
},
mergePipeline: {
id: 1,
details: {
status: {
details_path: '/root/review-app-tester/pipelines/66',
favicon:
'/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2. png',
group: 'success-with-warnings',
has_details: true,
icon: 'status_warning',
illustration: null,
label: 'passed with warnings',
text: 'passed',
tooltip: 'passed',
},
},
},
targetBranch: 'target-branch',
sourceBranch: 'source-branch',
sourceBranchLink: 'source-branch-link',
......
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