1 files changed, 15 insertions, 1 deletions
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index b8def676e7d..04a390fbba7 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -1,6 +1,8 @@
 <script>
 import { GlTooltipDirective, GlButton } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+import { s__, __ } from '~/locale';
+import { isSafeURL } from '~/lib/utils/url_utility';
 
 /**
  * Renders the external url link in environments table.
@@ -8,6 +10,7 @@ import { s__ } from '~/locale';
 export default {
   components: {
     GlButton,
+    ModalCopyButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -21,11 +24,19 @@ export default {
   i18n: {
     title: s__('Environments|Open live environment'),
     open: s__('Environments|Open'),
+    copy: __('Copy URL'),
+    copyTitle: s__('Environments|Copy live environment URL'),
+  },
+  computed: {
+    isSafeUrl() {
+      return isSafeURL(this.externalUrl);
+    },
   },
 };
 </script>
 <template>
   <gl-button
+    v-if="isSafeUrl"
     v-gl-tooltip
     :title="$options.i18n.title"
     :aria-label="$options.i18n.title"
@@ -37,4 +48,7 @@ export default {
   >
     {{ $options.i18n.open }}
   </gl-button>
+  <modal-copy-button v-else :title="$options.i18n.copyTitle" :text="externalUrl">
+    {{ $options.i18n.copy }}
+  </modal-copy-button>
 </template>