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>