1 files changed, 34 insertions, 0 deletions
diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
index 7351df0f93b..9b5b77ebebe 100644
--- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
+++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
@@ -5,6 +5,8 @@ import {
   RICH_BLOB_VIEWER_TITLE,
   SIMPLE_BLOB_VIEWER,
   SIMPLE_BLOB_VIEWER_TITLE,
+  BLAME_VIEWER,
+  BLAME_TITLE,
 } from './constants';
 
 export default {
@@ -26,6 +28,16 @@ export default {
       default: 'document',
       required: false,
     },
+    showViewerToggles: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showBlameToggle: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     isSimpleViewer() {
@@ -34,9 +46,16 @@ export default {
     isRichViewer() {
       return this.value === RICH_BLOB_VIEWER;
     },
+    isBlameViewer() {
+      return this.value === BLAME_VIEWER;
+    },
   },
   methods: {
     switchToViewer(viewer) {
+      if (viewer === BLAME_VIEWER) {
+        this.$emit('blame');
+      }
+
       if (viewer !== this.value) {
         this.$emit('input', viewer);
       }
@@ -46,11 +65,14 @@ export default {
   RICH_BLOB_VIEWER,
   SIMPLE_BLOB_VIEWER_TITLE,
   RICH_BLOB_VIEWER_TITLE,
+  BLAME_TITLE,
+  BLAME_VIEWER,
 };
 </script>
 <template>
   <gl-button-group class="js-blob-viewer-switcher mx-2">
     <gl-button
+      v-if="showViewerToggles"
       v-gl-tooltip.hover
       :aria-label="$options.SIMPLE_BLOB_VIEWER_TITLE"
       :title="$options.SIMPLE_BLOB_VIEWER_TITLE"
@@ -63,6 +85,7 @@ export default {
       @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)"
     />
     <gl-button
+      v-if="showViewerToggles"
       v-gl-tooltip.hover
       :aria-label="$options.RICH_BLOB_VIEWER_TITLE"
       :title="$options.RICH_BLOB_VIEWER_TITLE"
@@ -74,5 +97,16 @@ export default {
       data-viewer="rich"
       @click="switchToViewer($options.RICH_BLOB_VIEWER)"
     />
+    <gl-button
+      v-if="showBlameToggle"
+      v-gl-tooltip.hover
+      :title="$options.BLAME_TITLE"
+      :selected="isBlameViewer"
+      category="primary"
+      variant="default"
+      data-test-id="blame-toggle"
+      @click="switchToViewer($options.BLAME_VIEWER)"
+      >{{ __('Blame') }}</gl-button
+    >
   </gl-button-group>
 </template>