Merge branch '34820-blob-embeddable' into 'master'

Added the basic Snippet Blob View with Blob Embeddable

See merge request gitlab-org/gitlab!24045

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);
+  });
+});