Hid copy contents button on render error

When a blob returns a render error, we do not have the blob's content,
hence there's nothing to copy. That's why we hide the button in these
cases. However, if, for example, user forces loading the content (in
case of a collapsed blob), we do render the button again.

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

@@ -30,6 +30,11 @@ export default {
       required: false,
       default: SIMPLE_BLOB_VIEWER,
     },
+    hasRenderError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -75,6 +80,7 @@ export default {
         v-if="showDefaultActions"
         :raw-path="blob.rawPath"
         :active-viewer="viewer"
+        :has-render-error="hasRenderError"
         @copy="proxyCopyRequest"
       />
     </div>

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

@@ -27,6 +27,11 @@ export default {
       default: SIMPLE_BLOB_VIEWER,
       required: false,
     },
+    hasRenderError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     downloadUrl() {
@@ -44,11 +49,13 @@ export default {
 <template>
   <gl-button-group>
     <gl-deprecated-button
+      v-if="!hasRenderError"
       v-gl-tooltip.hover
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
       :disabled="copyDisabled"
       data-clipboard-target="#blob-code-content"
+      data-testid="copyContentsButton"
     >
       <gl-icon name="copy-to-clipboard" :size="14" />
     </gl-deprecated-button>

app/assets/javascripts/snippets/components/snippet_blob_view.vue

@@ -74,6 +74,9 @@ export default {
     canBeCloned() {
       return this.snippet.sshUrlToRepo || this.snippet.httpUrlToRepo;
     },
+    hasRenderError() {
+      return Boolean(this.viewer.renderError);
+    },
   },
   methods: {
     switchViewer(newViewer) {
@@ -92,7 +95,12 @@ export default {
   <div>
     <blob-embeddable v-if="embeddable" class="mb-3" :url="snippet.webUrl" />
     <article class="file-holder snippet-file-content">
-      <blob-header :blob="blob" :active-viewer-type="viewer.type" @viewer-changed="switchViewer">
+      <blob-header
+        :blob="blob"
+        :active-viewer-type="viewer.type"
+        :has-render-error="hasRenderError"
+        @viewer-changed="switchViewer"
+      >
         <template #actions>
           <clone-dropdown-button
             v-if="canBeCloned"

changelogs/unreleased/218510-hide-copy-btn-for-rendering-error.yml

+---
+title: Hid copy contents button when blob has rendering error
+merge_request: 32632
+author:
+type: fixed

spec/frontend/blob/components/blob_header_default_actions_spec.js

@@ -66,5 +66,13 @@ describe('Blob Header Default Actions', () => {
 
       expect(buttons.at(0).attributes('disabled')).toBeTruthy();
     });
+
+    it('does not render the copy button if a rendering error is set', () => {
+      createComponent({
+        hasRenderError: true,
+      });
+
+      expect(wrapper.find('[data-testid="copyContentsButton"]').exists()).toBe(false);
+    });
   });
 });

spec/frontend/blob/components/blob_header_spec.js

@@ -87,6 +87,17 @@ describe('Blob Header Default Actions', () => {
         expect(wrapper.text()).toContain(slotContent);
       });
     });
+
+    it('passes information about render error down to default actions', () => {
+      createComponent(
+        {},
+        {},
+        {
+          hasRenderError: true,
+        },
+      );
+      expect(wrapper.find(DefaultActions).props('hasRenderError')).toBe(true);
+    });
   });
 
   describe('functionality', () => {

spec/frontend/snippets/components/snippet_blob_view_spec.js

@@ -3,7 +3,11 @@ import SnippetBlobView from '~/snippets/components/snippet_blob_view.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import BlobContent from '~/blob/components/blob_content.vue';
-import { BLOB_RENDER_EVENT_LOAD, BLOB_RENDER_EVENT_SHOW_SOURCE } from '~/blob/components/constants';
+import {
+  BLOB_RENDER_EVENT_LOAD,
+  BLOB_RENDER_EVENT_SHOW_SOURCE,
+  BLOB_RENDER_ERRORS,
+} from '~/blob/components/constants';
 import { RichViewer, SimpleViewer } from '~/vue_shared/components/blob_viewers';
 import {
   SNIPPET_VISIBILITY_PRIVATE,
@@ -109,6 +113,20 @@ describe('Blob Embeddable', () => {
         });
     });
 
+    it('passes information about render error down to blob header', () => {
+      createComponent({
+        blob: {
+          ...BlobMock,
+          simpleViewer: {
+            ...SimpleViewerMock,
+            renderError: BLOB_RENDER_ERRORS.REASONS.COLLAPSED.id,
+          },
+        },
+      });
+
+      expect(wrapper.find(BlobHeader).props('hasRenderError')).toBe(true);
+    });
+
     describe('URLS with hash', () => {
       beforeEach(() => {
         window.location.hash = '#LC2';