1 files changed, 21 insertions, 4 deletions
diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue
index 0779e87e6b6..ca41fd0a2b1 100644
--- a/app/assets/javascripts/snippets/components/show.vue
+++ b/app/assets/javascripts/snippets/components/show.vue
@@ -1,13 +1,16 @@
 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import SnippetHeader from './snippet_header.vue';
 import SnippetTitle from './snippet_title.vue';
 import SnippetBlob from './snippet_blob_view.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
+import CloneDropdownButton from '~/vue_shared/components/clone_dropdown.vue';
 
 import { getSnippetMixin } from '../mixins/snippets';
 import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
 
+import { SNIPPET_MARK_VIEW_APP_START } from '~/performance_constants';
+
 export default {
   components: {
     BlobEmbeddable,
@@ -15,12 +18,19 @@ export default {
     SnippetTitle,
     GlLoadingIcon,
     SnippetBlob,
+    CloneDropdownButton,
   },
   mixins: [getSnippetMixin],
   computed: {
     embeddable() {
       return this.snippet.visibilityLevel === SNIPPET_VISIBILITY_PUBLIC;
     },
+    canBeCloned() {
+      return Boolean(this.snippet.sshUrlToRepo || this.snippet.httpUrlToRepo);
+    },
+  },
+  beforeCreate() {
+    performance.mark(SNIPPET_MARK_VIEW_APP_START);
   },
 };
 </script>
@@ -35,10 +45,17 @@ export default {
     <template v-else>
       <snippet-header :snippet="snippet" />
       <snippet-title :snippet="snippet" />
-      <blob-embeddable v-if="embeddable" class="gl-mb-5" :url="snippet.webUrl" />
-      <div v-for="blob in blobs" :key="blob.path">
-        <snippet-blob :snippet="snippet" :blob="blob" />
+      <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" />
+        <clone-dropdown-button
+          v-if="canBeCloned"
+          class="gl-ml-3"
+          :ssh-link="snippet.sshUrlToRepo"
+          :http-link="snippet.httpUrlToRepo"
+          data-qa-selector="clone_button"
+        />
       </div>
+      <snippet-blob v-for="blob in blobs" :key="blob.path" :snippet="snippet" :blob="blob" />
     </template>
   </div>
 </template>