diff options
Diffstat (limited to 'app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue')
-rw-r--r-- | app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue | 44 |
1 files changed, 37 insertions, 7 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue index 1e363b0f5fb..5efa0e2879e 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue @@ -7,7 +7,10 @@ import { GlLink, GlSearchBoxByType, } from '@gitlab/ui'; +import { isSafeURL } from '~/lib/utils/url_utility'; +import { s__, __ } from '~/locale'; import autofocusonshow from '~/vue_shared/directives/autofocusonshow'; +import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; import ReviewAppLink from '../review_app_link.vue'; export default { @@ -19,6 +22,7 @@ export default { GlIcon, GlLink, GlSearchBoxByType, + ModalCopyButton, ReviewAppLink, }, directives: { @@ -50,6 +54,13 @@ export default { filteredChanges() { return this.deployment?.changes?.filter((change) => change.path.includes(this.searchTerm)); }, + isSafeUrl() { + return isSafeURL(this.deploymentExternalUrl); + }, + }, + i18n: { + copy: __('Copy URL'), + copyTitle: s__('Environments|Copy live environment URL'), }, }; </script> @@ -57,11 +68,20 @@ export default { <span class="gl-display-inline-flex"> <gl-button-group v-if="shouldRenderDropdown" size="small"> <review-app-link + v-if="isSafeUrl" :display="appButtonText" :link="deploymentExternalUrl" size="small" css-class="deploy-link js-deploy-url inline gl-ml-3" /> + <modal-copy-button + v-else + :title="$options.i18n.copyTitle" + :text="deploymentExternalUrl" + size="small" + > + {{ $options.i18n.copy }} + </modal-copy-button> <gl-dropdown toggle-class="gl-px-2!" size="small" class="js-mr-wigdet-deployment-dropdown"> <template #button-content> <gl-icon @@ -90,12 +110,22 @@ export default { </gl-dropdown-item> </gl-dropdown> </gl-button-group> - <review-app-link - v-else - :display="appButtonText" - :link="deploymentExternalUrl" - size="small" - css-class="js-deploy-url deploy-link btn btn-default btn-sm inline gl-ml-3" - /> + <template v-else> + <review-app-link + v-if="isSafeUrl" + :display="appButtonText" + :link="deploymentExternalUrl" + size="small" + css-class="deploy-link js-deploy-url inline gl-ml-3" + /> + <modal-copy-button + v-else + :title="$options.i18n.copyTitle" + :text="deploymentExternalUrl" + size="small" + > + {{ $options.i18n.copy }} + </modal-copy-button> + </template> </span> </template> |