Blob refactor: Hide copy and view raw buttons when viewing binary files

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

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: false,
     },
+    isBinary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     activeViewerType: {
       type: String,
       required: false,
@@ -81,6 +86,7 @@ export default {
         :raw-path="blob.rawPath"
         :active-viewer="viewer"
         :has-render-error="hasRenderError"
+        :is-binary="isBinary"
         @copy="proxyCopyRequest"
       />
     </div>

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

@@ -32,6 +32,11 @@ export default {
       required: false,
       default: false,
     },
+    isBinary: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     downloadUrl() {
@@ -43,6 +48,9 @@ export default {
     getBlobHashTarget() {
       return `[data-blob-hash="${this.blobHash}"]`;
     },
+    showCopyButton() {
+      return !this.hasRenderError && !this.isBinary;
+    },
   },
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -52,7 +60,7 @@ export default {
 <template>
   <gl-button-group data-qa-selector="default_actions_container">
     <gl-button
-      v-if="!hasRenderError"
+      v-if="showCopyButton"
       v-gl-tooltip.hover
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
@@ -65,6 +73,7 @@ export default {
       variant="default"
     />
     <gl-button
+      v-if="!isBinary"
       v-gl-tooltip.hover
       :aria-label="$options.BTN_RAW_TITLE"
       :title="$options.BTN_RAW_TITLE"

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -169,6 +169,7 @@ export default {
       <blob-header
         :blob="blobInfo"
         :hide-viewer-switcher="!hasRichViewer || isBinary"
+        :is-binary="isBinary"
         :active-viewer-type="viewer.type"
         :has-render-error="hasRenderError"
         @viewer-changed="switchViewer"

spec/frontend/blob/components/blob_header_default_actions_spec.js

@@ -39,6 +39,9 @@ describe('Blob Header Default Actions', () => {
   });
 
   describe('renders', () => {
+    const findCopyButton = () => wrapper.find('[data-testid="copyContentsButton"]');
+    const findViewRawButton = () => wrapper.find('[data-testid="viewRawButton"]');
+
     it('gl-button-group component', () => {
       expect(btnGroup.exists()).toBe(true);
     });
@@ -76,7 +79,14 @@ describe('Blob Header Default Actions', () => {
         hasRenderError: true,
       });
 
-      expect(wrapper.find('[data-testid="copyContentsButton"]').exists()).toBe(false);
+      expect(findCopyButton().exists()).toBe(false);
+    });
+
+    it('does not render the copy and view raw button if isBinary is set to true', () => {
+      createComponent({ isBinary: true });
+
+      expect(findCopyButton().exists()).toBe(false);
+      expect(findViewRawButton().exists()).toBe(false);
     });
   });
 });

spec/frontend/blob/components/blob_header_spec.js

@@ -29,6 +29,8 @@ describe('Blob Header Default Actions', () => {
   });
 
   describe('rendering', () => {
+    const findDefaultActions = () => wrapper.find(DefaultActions);
+
     const slots = {
       prepend: 'Foo Prepend',
       actions: 'Actions Bar',
@@ -42,7 +44,7 @@ describe('Blob Header Default Actions', () => {
     it('renders all components', () => {
       createComponent();
       expect(wrapper.find(ViewerSwitcher).exists()).toBe(true);
-      expect(wrapper.find(DefaultActions).exists()).toBe(true);
+      expect(findDefaultActions().exists()).toBe(true);
       expect(wrapper.find(BlobFilepath).exists()).toBe(true);
     });
 
@@ -100,7 +102,13 @@ describe('Blob Header Default Actions', () => {
           hasRenderError: true,
         },
       );
-      expect(wrapper.find(DefaultActions).props('hasRenderError')).toBe(true);
+      expect(findDefaultActions().props('hasRenderError')).toBe(true);
+    });
+
+    it('passes the correct isBinary value to default actions when viewing a binary file', () => {
+      createComponent({}, {}, { isBinary: true });
+
+      expect(findDefaultActions().props('isBinary')).toBe(true);
     });
   });
 

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -349,6 +349,17 @@ describe('Blob content viewer component', () => {
       });
     });
 
+    it('passes the correct isBinary value to blob header when viewing a binary file', async () => {
+      fullFactory({
+        mockData: { blobInfo: richMockData, isBinary: true },
+        stubs: { BlobContent: true, BlobReplace: true },
+      });
+
+      await nextTick();
+
+      expect(findBlobHeader().props('isBinary')).toBe(true);
+    });
+
     describe('BlobButtonGroup', () => {
       const { name, path, replacePath, webPath } = simpleMockData;
       const {