Blob viewer switcher

Whenever a blob has richViewer available, the switcher will be shown
to switch between the simple and rich viewers

3/4 components constituting the Blob File header component

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

+<script>
+import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import {
+  RICH_BLOB_VIEWER,
+  RICH_BLOB_VIEWER_TITLE,
+  SIMPLE_BLOB_VIEWER,
+  SIMPLE_BLOB_VIEWER_TITLE,
+} from './constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlButtonGroup,
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    blob: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      viewer: this.blob.richViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER,
+    };
+  },
+  computed: {
+    isSimpleViewer() {
+      return this.viewer === SIMPLE_BLOB_VIEWER;
+    },
+    isRichViewer() {
+      return this.viewer === RICH_BLOB_VIEWER;
+    },
+  },
+  methods: {
+    switchToViewer(viewer) {
+      if (viewer !== this.viewer) {
+        this.viewer = viewer;
+        this.$emit('switch-viewer', viewer);
+      }
+    },
+  },
+  SIMPLE_BLOB_VIEWER,
+  RICH_BLOB_VIEWER,
+  SIMPLE_BLOB_VIEWER_TITLE,
+  RICH_BLOB_VIEWER_TITLE,
+};
+</script>
+<template>
+  <gl-button-group class="js-blob-viewer-switcher ml-2">
+    <gl-button
+      v-gl-tooltip.hover
+      :aria-label="$options.SIMPLE_BLOB_VIEWER_TITLE"
+      :title="$options.SIMPLE_BLOB_VIEWER_TITLE"
+      :selected="isSimpleViewer"
+      :class="{ active: isSimpleViewer }"
+      @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)"
+    >
+      <gl-icon name="code" :size="14" />
+    </gl-button>
+    <gl-button
+      v-gl-tooltip.hover
+      :aria-label="$options.RICH_BLOB_VIEWER_TITLE"
+      :title="$options.RICH_BLOB_VIEWER_TITLE"
+      :selected="isRichViewer"
+      :class="{ active: isRichViewer }"
+      @click="switchToViewer($options.RICH_BLOB_VIEWER)"
+    >
+      <gl-icon name="document" :size="14" />
+    </gl-button>
+  </gl-button-group>
+</template>

app/assets/javascripts/blob/components/constants.js

@@ -3,3 +3,9 @@ import { __ } from '~/locale';
 export const BTN_COPY_CONTENTS_TITLE = __('Copy file contents');
 export const BTN_RAW_TITLE = __('Open raw');
 export const BTN_DOWNLOAD_TITLE = __('Download');
+
+export const SIMPLE_BLOB_VIEWER = 'simple';
+export const SIMPLE_BLOB_VIEWER_TITLE = __('Display source');
+
+export const RICH_BLOB_VIEWER = 'rich';
+export const RICH_BLOB_VIEWER_TITLE = __('Display rendered file');

locale/gitlab.pot

@@ -6732,6 +6732,12 @@ msgstr ""
 msgid "Display name"
 msgstr ""
 
+msgid "Display rendered file"
+msgstr ""
+
+msgid "Display source"
+msgstr ""
+
 msgid "Displays dependencies and known vulnerabilities, based on the %{linkStart}latest pipeline%{linkEnd} scan"
 msgstr ""
 

spec/frontend/blob/components/blob_header_viewer_switcher_spec.js

+import { mount } from '@vue/test-utils';
+import BlobHeaderViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
+import {
+  RICH_BLOB_VIEWER,
+  RICH_BLOB_VIEWER_TITLE,
+  SIMPLE_BLOB_VIEWER,
+  SIMPLE_BLOB_VIEWER_TITLE,
+} from '~/blob/components/constants';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
+import { Blob } from './mock_data';
+
+describe('Blob Header Viewer Switcher', () => {
+  let wrapper;
+
+  function createComponent(props = {}) {
+    wrapper = mount(BlobHeaderViewerSwitcher, {
+      propsData: {
+        blob: Object.assign({}, Blob, props),
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('intiialization', () => {
+    it('is initialized with rich viewer as preselected when richViewer exists', () => {
+      createComponent();
+      expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
+    });
+
+    it('is initialized with simple viewer as preselected when richViewer does not exists', () => {
+      createComponent({ richViewer: null });
+      expect(wrapper.vm.viewer).toBe(SIMPLE_BLOB_VIEWER);
+    });
+  });
+
+  describe('rendering', () => {
+    let btnGroup;
+    let buttons;
+
+    beforeEach(() => {
+      createComponent();
+      btnGroup = wrapper.find(GlButtonGroup);
+      buttons = wrapper.findAll(GlButton);
+    });
+
+    it('renders gl-button-group component', () => {
+      expect(btnGroup.exists()).toBe(true);
+    });
+
+    it('renders exactly 2 buttons with predefined actions', () => {
+      expect(buttons.length).toBe(2);
+      [SIMPLE_BLOB_VIEWER_TITLE, RICH_BLOB_VIEWER_TITLE].forEach((title, i) => {
+        expect(buttons.at(i).attributes('title')).toBe(title);
+      });
+    });
+  });
+
+  describe('viewer changes', () => {
+    let buttons;
+    let simpleBtn;
+    let richBtn;
+
+    beforeEach(() => {
+      createComponent();
+      buttons = wrapper.findAll(GlButton);
+      simpleBtn = buttons.at(0);
+      richBtn = buttons.at(1);
+    });
+
+    it('does not switch the viewer if the selected one is already active', () => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
+      richBtn.vm.$emit('click');
+      expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
+      expect(wrapper.vm.$emit).not.toHaveBeenCalled();
+    });
+
+    it('emits an event when a Simple Viewer button is clicked', () => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      simpleBtn.vm.$emit('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.viewer).toBe(SIMPLE_BLOB_VIEWER);
+        expect(wrapper.vm.$emit).toHaveBeenCalledWith('switch-viewer', SIMPLE_BLOB_VIEWER);
+      });
+    });
+
+    it('emits an event when a Rich Viewer button is clicked', () => {
+      jest.spyOn(wrapper.vm, '$emit');
+
+      wrapper.setData({ viewer: SIMPLE_BLOB_VIEWER });
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          richBtn.vm.$emit('click');
+        })
+        .then(() => {
+          expect(wrapper.vm.viewer).toBe(RICH_BLOB_VIEWER);
+          expect(wrapper.vm.$emit).toHaveBeenCalledWith('switch-viewer', RICH_BLOB_VIEWER);
+        });
+    });
+  });
+});