Add latest changes from gitlab-org/gitlab@master

2 files changed, 79 insertions, 3 deletions

diff --git a/app/assets/javascripts/snippets/components/embed_dropdown.vue b/app/assets/javascripts/snippets/components/embed_dropdown.vue
new file mode 100644
index 00000000000..37729e92f91
--- /dev/null
+++ b/app/assets/javascripts/snippets/components/embed_dropdown.vue
@@ -0,0 +1,76 @@
+<script>
+import { escape as esc } from 'lodash';
+import {
+  GlButton,
+  GlDropdown,
+  GlDropdownHeader,
+  GlDropdownText,
+  GlFormInputGroup,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const MSG_EMBED = __('Embed');
+const MSG_SHARE = __('Share');
+const MSG_COPY = __('Copy');
+
+export default {
+  components: {
+    GlButton,
+    GlDropdown,
+    GlDropdownHeader,
+    GlDropdownText,
+    GlFormInputGroup,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    sections() {
+      return [
+        // eslint-disable-next-line no-useless-escape
+        { name: MSG_EMBED, value: `<script src="${esc(this.url)}.js"><\/script>` },
+        { name: MSG_SHARE, value: this.url },
+      ];
+    },
+  },
+  MSG_EMBED,
+  MSG_COPY,
+};
+</script>
+<template>
+  <gl-dropdown
+    right
+    :text="$options.MSG_EMBED"
+    menu-class="gl-px-1! gl-pb-5! gl-dropdown-menu-wide"
+  >
+    <template v-for="{ name, value } in sections">
+      <gl-dropdown-header :key="`header_${name}`" data-testid="header">{{
+        name
+      }}</gl-dropdown-header>
+      <gl-dropdown-text
+        :key="`input_${name}`"
+        tag="div"
+        class="gl-dropdown-text-py-0 gl-dropdown-text-block"
+        data-testid="input"
+      >
+        <gl-form-input-group :value="value" readonly select-on-click>
+          <template #append>
+            <gl-button
+              v-gl-tooltip.hover
+              :title="$options.MSG_COPY"
+              :data-clipboard-text="value"
+              icon="copy-to-clipboard"
+            />
+          </template>
+        </gl-form-input-group>
+      </gl-dropdown-text>
+    </template>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue
index 46954ab864c..0ce4ec2efd2 100644
--- a/app/assets/javascripts/snippets/components/show.vue
+++ b/app/assets/javascripts/snippets/components/show.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
+import EmbedDropdown from './embed_dropdown.vue';
 import SnippetHeader from './snippet_header.vue';
 import SnippetTitle from './snippet_title.vue';
 import SnippetBlob from './snippet_blob_view.vue';
@@ -13,7 +13,7 @@ import { SNIPPET_MARK_VIEW_APP_START } from '~/performance_constants';
 
 export default {
   components: {
-    BlobEmbeddable,
+    EmbedDropdown,
     SnippetHeader,
     SnippetTitle,
     GlLoadingIcon,
@@ -46,7 +46,7 @@ export default {
       <snippet-header :snippet="snippet" />
       <snippet-title :snippet="snippet" />
       <div class="gl-display-flex gl-justify-content-end gl-mb-5">
-        <blob-embeddable v-if="embeddable" class="gl-flex-fill-1" :url="snippet.webUrl" />
+        <embed-dropdown v-if="embeddable" :url="snippet.webUrl" />
         <clone-dropdown-button
           v-if="canBeCloned"
           class="gl-ml-3"