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
This commit is contained in:
commit
0c5b3d08de
|
@ -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 {
|
||||||
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 {
|
||||||
: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 {
|
||||||
</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 {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
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 {
|
||||||
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 {
|
||||||
: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 {
|
||||||
</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 @@
|
||||||
*
|
*
|
||||||
* @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 @@
|
||||||
.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 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn svg {
|
|
||||||
fill: $gray-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
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', () => {
|
||||||
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 {
|
||||||
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',
|
||||||
|
|
Loading…
Reference in New Issue