Add latest changes from gitlab-org/gitlab@master

4 files changed, 107 insertions, 12 deletions

diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
new file mode 100644
index 00000000000..61a66513838
--- /dev/null
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -0,0 +1,76 @@
+<script>
+import ViewerSwitcher from './blob_header_viewer_switcher.vue';
+import DefaultActions from './blob_header_default_actions.vue';
+import BlobFilepath from './blob_header_filepath.vue';
+import eventHub from '../event_hub';
+import { RICH_BLOB_VIEWER, SIMPLE_BLOB_VIEWER } from './constants';
+
+export default {
+  components: {
+    ViewerSwitcher,
+    DefaultActions,
+    BlobFilepath,
+  },
+  props: {
+    blob: {
+      type: Object,
+      required: true,
+    },
+    hideDefaultActions: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hideViewerSwitcher: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      activeViewer: this.blob.richViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER,
+    };
+  },
+  computed: {
+    showViewerSwitcher() {
+      return !this.hideViewerSwitcher && Boolean(this.blob.simpleViewer && this.blob.richViewer);
+    },
+    showDefaultActions() {
+      return !this.hideDefaultActions;
+    },
+  },
+  created() {
+    if (this.showViewerSwitcher) {
+      eventHub.$on('switch-viewer', this.setActiveViewer);
+    }
+  },
+  beforeDestroy() {
+    if (this.showViewerSwitcher) {
+      eventHub.$off('switch-viewer', this.setActiveViewer);
+    }
+  },
+  methods: {
+    setActiveViewer(viewer) {
+      this.activeViewer = viewer;
+    },
+  },
+};
+</script>
+<template>
+  <div class="js-file-title file-title-flex-parent">
+    <blob-filepath :blob="blob">
+      <template #filepathPrepend>
+        <slot name="prepend"></slot>
+      </template>
+    </blob-filepath>
+
+    <div class="file-actions d-none d-sm-block">
+      <viewer-switcher v-if="showViewerSwitcher" :blob="blob" :active-viewer="activeViewer" />
+
+      <slot name="actions"></slot>
+
+      <default-actions v-if="showDefaultActions" :blob="blob" :active-viewer="activeViewer" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
index b0522c08a65..e526fae0dba 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -1,6 +1,13 @@
 <script>
 import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { BTN_COPY_CONTENTS_TITLE, BTN_DOWNLOAD_TITLE, BTN_RAW_TITLE } from './constants';
+import {
+  BTN_COPY_CONTENTS_TITLE,
+  BTN_DOWNLOAD_TITLE,
+  BTN_RAW_TITLE,
+  RICH_BLOB_VIEWER,
+  SIMPLE_BLOB_VIEWER,
+} from './constants';
+import eventHub from '../event_hub';
 
 export default {
   components: {
@@ -16,6 +23,11 @@ export default {
       type: Object,
       required: true,
     },
+    activeViewer: {
+      type: String,
+      default: SIMPLE_BLOB_VIEWER,
+      required: false,
+    },
   },
   computed: {
     rawUrl() {
@@ -24,10 +36,13 @@ export default {
     downloadUrl() {
       return `${this.blob.rawPath}?inline=false`;
     },
+    copyDisabled() {
+      return this.activeViewer === RICH_BLOB_VIEWER;
+    },
   },
   methods: {
     requestCopyContents() {
-      this.$emit('copy');
+      eventHub.$emit('copy');
     },
   },
   BTN_COPY_CONTENTS_TITLE,
@@ -41,6 +56,7 @@ export default {
       v-gl-tooltip.hover
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
+      :disabled="copyDisabled"
       @click="requestCopyContents"
     >
       <gl-icon name="copy-to-clipboard" :size="14" />
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 7acdd574359..13ea87c99b1 100644
--- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
+++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
@@ -6,6 +6,7 @@ import {
   SIMPLE_BLOB_VIEWER,
   SIMPLE_BLOB_VIEWER_TITLE,
 } from './constants';
+import eventHub from '../event_hub';
 
 export default {
   components: {
@@ -21,25 +22,24 @@ export default {
       type: Object,
       required: true,
     },
-  },
-  data() {
-    return {
-      viewer: this.blob.richViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER,
-    };
+    activeViewer: {
+      type: String,
+      default: SIMPLE_BLOB_VIEWER,
+      required: false,
+    },
   },
   computed: {
     isSimpleViewer() {
-      return this.viewer === SIMPLE_BLOB_VIEWER;
+      return this.activeViewer === SIMPLE_BLOB_VIEWER;
     },
     isRichViewer() {
-      return this.viewer === RICH_BLOB_VIEWER;
+      return this.activeViewer === RICH_BLOB_VIEWER;
     },
   },
   methods: {
     switchToViewer(viewer) {
-      if (viewer !== this.viewer) {
-        this.viewer = viewer;
-        this.$emit('switch-viewer', viewer);
+      if (viewer !== this.activeViewer) {
+        eventHub.$emit('switch-viewer', viewer);
       }
     },
   },
diff --git a/app/assets/javascripts/blob/event_hub.js b/app/assets/javascripts/blob/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/blob/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();