Add latest changes from gitlab-org/gitlab@master

2 files changed, 81 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
new file mode 100644
index 00000000000..7acdd574359
--- /dev/null
+++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
@@ -0,0 +1,75 @@
+<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>
diff --git a/app/assets/javascripts/blob/components/constants.js b/app/assets/javascripts/blob/components/constants.js
index fe2ac7b7c51..d3fed9e51e9 100644
--- a/app/assets/javascripts/blob/components/constants.js
+++ b/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');