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