Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

5 files changed, 67 insertions, 9 deletions

diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index 1645469a218..c5ab28e6ec5 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -42,6 +42,11 @@ export default {
       required: false,
       default: false,
     },
+    showPath: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -55,6 +60,9 @@ export default {
     showDefaultActions() {
       return !this.hideDefaultActions;
     },
+    isEmpty() {
+      return this.blob.rawSize === 0;
+    },
   },
   watch: {
     viewer(newVal, oldVal) {
@@ -74,7 +82,7 @@ export default {
   <div class="js-file-title file-title-flex-parent">
     <div class="gl-display-flex">
       <table-of-contents class="gl-pr-2" />
-      <blob-filepath :blob="blob">
+      <blob-filepath :blob="blob" :show-path="showPath">
         <template #filepath-prepend>
           <slot name="prepend"></slot>
         </template>
@@ -88,10 +96,13 @@ export default {
 
       <default-actions
         v-if="showDefaultActions"
-        :raw-path="blob.rawPath"
+        :raw-path="blob.externalStorageUrl || blob.rawPath"
         :active-viewer="viewer"
         :has-render-error="hasRenderError"
         :is-binary="isBinary"
+        :environment-name="blob.environmentFormattedExternalUrl"
+        :environment-path="blob.environmentExternalUrlForRouteMap"
+        :is-empty="isEmpty"
         @copy="proxyCopyRequest"
       />
     </div>
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 2798a918b15..12bcb24b0cc 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
 import {
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -37,6 +38,21 @@ export default {
       required: false,
       default: false,
     },
+    environmentName: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    environmentPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    isEmpty: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     downloadUrl() {
@@ -51,6 +67,11 @@ export default {
     showCopyButton() {
       return !this.hasRenderError && !this.isBinary;
     },
+    environmentTitle() {
+      return sprintf(s__('BlobViewer|View on %{environmentName}'), {
+        environmentName: this.environmentName,
+      });
+    },
   },
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -71,6 +92,7 @@ export default {
       icon="copy-to-clipboard"
       category="primary"
       variant="default"
+      class="js-copy-blob-source-btn"
     />
     <gl-button
       v-if="!isBinary"
@@ -84,6 +106,7 @@ export default {
       variant="default"
     />
     <gl-button
+      v-if="!isEmpty"
       v-gl-tooltip.hover
       :aria-label="$options.BTN_DOWNLOAD_TITLE"
       :title="$options.BTN_DOWNLOAD_TITLE"
@@ -93,5 +116,17 @@ export default {
       category="primary"
       variant="default"
     />
+    <gl-button
+      v-if="environmentName && environmentPath"
+      v-gl-tooltip.hover
+      :aria-label="environmentTitle"
+      :title="environmentTitle"
+      :href="environmentPath"
+      data-testid="environment"
+      target="_blank"
+      icon="external-link"
+      category="primary"
+      variant="default"
+    />
   </gl-button-group>
 </template>
diff --git a/app/assets/javascripts/blob/components/blob_header_filepath.vue b/app/assets/javascripts/blob/components/blob_header_filepath.vue
index 90d01358451..62355306655 100644
--- a/app/assets/javascripts/blob/components/blob_header_filepath.vue
+++ b/app/assets/javascripts/blob/components/blob_header_filepath.vue
@@ -15,6 +15,11 @@ export default {
       type: Object,
       required: true,
     },
+    showPath: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     blobSize() {
@@ -26,6 +31,13 @@ export default {
     showLfsBadge() {
       return this.blob.storedExternally && this.blob.externalStorage === 'lfs';
     },
+    fileName() {
+      if (this.showPath) {
+        return this.blob.path;
+      }
+
+      return this.blob.name;
+    },
   },
 };
 </script>
@@ -33,12 +45,12 @@ export default {
   <div class="file-header-content d-flex align-items-center lh-100">
     <slot name="filepath-prepend"></slot>
 
-    <template v-if="blob.path">
-      <file-icon :file-name="blob.path" :size="16" aria-hidden="true" css-classes="mr-2" />
+    <template v-if="fileName">
+      <file-icon :file-name="fileName" :size="16" aria-hidden="true" css-classes="mr-2" />
       <strong
         class="file-title-name mr-1 js-blob-header-filepath"
         data-qa-selector="file_title_content"
-        >{{ blob.path }}</strong
+        >{{ fileName }}</strong
       >
     </template>
 
diff --git a/app/assets/javascripts/blob/components/constants.js b/app/assets/javascripts/blob/components/constants.js
index a129c537fa5..adac4d6408d 100644
--- a/app/assets/javascripts/blob/components/constants.js
+++ b/app/assets/javascripts/blob/components/constants.js
@@ -42,7 +42,7 @@ export const BLOB_RENDER_ERRORS = {
       id: 'load',
       text: __('load it anyway'),
       conjunction: __('or'),
-      href: '#',
+      href: '?expanded=true&viewer=simple',
       target: '',
       event: BLOB_RENDER_EVENT_LOAD,
     },
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index 47a0c4ba2d1..b4ca29114cb 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
-import Cookies from 'js-cookie';
+import { getCookie, removeCookie } from '~/lib/utils/common_utils';
 import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 
@@ -62,7 +62,7 @@ export default {
       return this.commitCookiePath || this.projectMergeRequestsPath;
     },
     commitCookiePath() {
-      const cookieVal = Cookies.get(this.commitCookie);
+      const cookieVal = getCookie(this.commitCookie);
 
       if (cookieVal !== 'true') return cookieVal;
       return '';
@@ -85,7 +85,7 @@ export default {
   },
   methods: {
     disableModalFromRenderingAgain() {
-      Cookies.remove(this.commitCookie);
+      removeCookie(this.commitCookie);
     },
   },
 };