Added the basic Snippet Blob View

The new view contains only Blob Embeddable component as of now. The
Blob Embeddable component to the Snippet view that allows for
embedding and sharing of a snippet

app/assets/javascripts/blob/components/blob_embeddable.vue

+<script>
+import { GlFormInputGroup, GlButton, GlIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlFormInputGroup,
+    GlButton,
+    GlIcon,
+  },
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      optionValues: [
+        // eslint-disable-next-line no-useless-escape
+        { name: __('Embed'), value: `<script src='${this.url}.js'><\/script>` },
+        { name: __('Share'), value: this.url },
+      ],
+    };
+  },
+};
+</script>
+<template>
+  <gl-form-input-group
+    id="embeddable-text"
+    :predefined-options="optionValues"
+    readonly
+    select-on-click
+  >
+    <template #append>
+      <gl-button new-style data-clipboard-target="#embeddable-text">
+        <gl-icon name="copy-to-clipboard" :title="__('Copy')" />
+      </gl-button>
+    </template>
+  </gl-form-input-group>
+</template>

app/assets/javascripts/snippets/components/app.vue

@@ -2,6 +2,7 @@
 import GetSnippetQuery from '../queries/snippet.query.graphql';
 import SnippetHeader from './snippet_header.vue';
 import SnippetTitle from './snippet_title.vue';
+import SnippetBlob from './snippet_blob_view.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
@@ -9,6 +10,7 @@ export default {
     SnippetHeader,
     SnippetTitle,
     GlLoadingIcon,
+    SnippetBlob,
   },
   apollo: {
     snippet: {
@@ -50,6 +52,7 @@ export default {
     <template v-else>
       <snippet-header :snippet="snippet" />
       <snippet-title :snippet="snippet" />
+      <snippet-blob :snippet="snippet" />
     </template>
   </div>
 </template>

app/assets/javascripts/snippets/components/snippet_blob_view.vue

+<script>
+import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
+import { SNIPPET_VISIBILITY_PUBLIC } from '../constants';
+
+export default {
+  components: {
+    BlobEmbeddable,
+  },
+  props: {
+    snippet: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    embeddable() {
+      return this.snippet.visibilityLevel === SNIPPET_VISIBILITY_PUBLIC;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <blob-embeddable v-if="embeddable" class="mb-3" :url="snippet.webUrl" />
+  </div>
+</template>

app/assets/javascripts/snippets/constants.js

+export const SNIPPET_VISIBILITY_PRIVATE = 'private';
+export const SNIPPET_VISIBILITY_INTERNAL = 'internal';
+export const SNIPPET_VISIBILITY_PUBLIC = 'public';

spec/frontend/blob/components/blob_embeddable_spec.js

+import { shallowMount } from '@vue/test-utils';
+import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
+import { GlFormInputGroup } from '@gitlab/ui';
+
+describe('Blob Embeddable', () => {
+  let wrapper;
+  const url = 'https://foo.bar';
+
+  function createComponent() {
+    wrapper = shallowMount(BlobEmbeddable, {
+      propsData: {
+        url,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders gl-form-input-group component', () => {
+    expect(wrapper.find(GlFormInputGroup).exists()).toBe(true);
+  });
+
+  it('makes up optionValues based on the url prop', () => {
+    expect(wrapper.vm.optionValues).toEqual([
+      { name: 'Embed', value: expect.stringContaining(`${url}.js`) },
+      { name: 'Share', value: url },
+    ]);
+  });
+});

spec/frontend/snippets/components/app_spec.js

 import SnippetApp from '~/snippets/components/app.vue';
 import SnippetHeader from '~/snippets/components/snippet_header.vue';
+import SnippetTitle from '~/snippets/components/snippet_title.vue';
+import SnippetBlob from '~/snippets/components/snippet_blob_view.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 
 import { shallowMount } from '@vue/test-utils';
@@ -35,8 +37,10 @@ describe('Snippet view app', () => {
     expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
   });
 
-  it('renders SnippetHeader component after the query is finished', () => {
+  it('renders all components after the query is finished', () => {
     createComponent();
     expect(wrapper.find(SnippetHeader).exists()).toBe(true);
+    expect(wrapper.find(SnippetTitle).exists()).toBe(true);
+    expect(wrapper.find(SnippetBlob).exists()).toBe(true);
   });
 });

spec/frontend/snippets/components/snippet_blob_view_spec.js

+import { shallowMount } from '@vue/test-utils';
+import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue';
+import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
+import {
+  SNIPPET_VISIBILITY_PRIVATE,
+  SNIPPET_VISIBILITY_INTERNAL,
+  SNIPPET_VISIBILITY_PUBLIC,
+} from '~/snippets/constants';
+
+describe('Blob Embeddable', () => {
+  let wrapper;
+  const snippet = {
+    id: 'gid://foo.bar/snippet',
+    webUrl: 'https://foo.bar',
+    visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
+  };
+
+  function createComponent(props = {}) {
+    wrapper = shallowMount(SnippetBlobView, {
+      propsData: {
+        snippet: {
+          ...snippet,
+          ...props,
+        },
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders blob-embeddable component', () => {
+    createComponent();
+    expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
+  });
+
+  it('does not render blob-embeddable for internal snippet', () => {
+    createComponent({
+      visibilityLevel: SNIPPET_VISIBILITY_INTERNAL,
+    });
+    expect(wrapper.find(BlobEmbeddable).exists()).toBe(false);
+
+    createComponent({
+      visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
+    });
+    expect(wrapper.find(BlobEmbeddable).exists()).toBe(false);
+
+    createComponent({
+      visibilityLevel: 'foo',
+    });
+    expect(wrapper.find(BlobEmbeddable).exists()).toBe(false);
+  });
+});