Use arraybuffer for binary files in Web IDE

Also prevents monaco from initializing in the
repo_editor when binary files are opened.

app/assets/javascripts/ide/components/repo_editor.vue

@@ -74,8 +74,11 @@ export default {
     fileEditor() {
       return getFileEditorOrDefault(this.fileEditors, this.file.path);
     },
+    isBinaryFile() {
+      return !isTextFile(this.file);
+    },
     shouldHideEditor() {
-      return this.file && !this.file.loading && !isTextFile(this.file);
+      return this.file && !this.file.loading && this.isBinaryFile;
     },
     showContentViewer() {
       return (
@@ -244,6 +247,10 @@ export default {
       );
     },
     createEditorInstance() {
+      if (this.isBinaryFile) {
+        return;
+      }
+
       this.editor.dispose();
 
       this.$nextTick(() => {

app/assets/javascripts/ide/services/index.js

@@ -27,9 +27,12 @@ export default {
       return Promise.resolve(file.raw);
     }
 
+    const options = file.binary ? { responseType: 'arraybuffer' } : {};
+
     return axios
       .get(file.rawPath, {
         transformResponse: [f => f],
+        ...options,
       })
       .then(({ data }) => data);
   },

app/assets/javascripts/vue_shared/components/content_viewer/content_viewer.vue

@@ -11,7 +11,7 @@ export default {
   },
   props: {
     content: {
-      type: String,
+      type: [String, ArrayBuffer],
       default: '',
       required: false,
     },

spec/frontend/ide/components/repo_editor_spec.js

@@ -205,6 +205,8 @@ describe('RepoEditor', () => {
       beforeEach(done => {
         vm.file.name = 'file.dat';
         vm.file.content = '🐱'; // non-ascii binary content
+        jest.spyOn(vm.editor, 'createInstance').mockImplementation();
+        jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation();
 
         vm.$nextTick(done);
       });
@@ -212,6 +214,16 @@ describe('RepoEditor', () => {
       it('does not render the IDE', () => {
         expect(vm.shouldHideEditor).toBeTruthy();
       });
+
+      it('does not call createInstance', async () => {
+        // Mirror the act's in the `createEditorInstance`
+        vm.createEditorInstance();
+
+        await vm.$nextTick();
+
+        expect(vm.editor.createInstance).not.toHaveBeenCalled();
+        expect(vm.editor.createDiffInstance).not.toHaveBeenCalled();
+      });
     });
 
     describe('createEditorInstance', () => {

spec/frontend/ide/services/index_spec.js

@@ -117,6 +117,21 @@ describe('IDE services', () => {
 
       it('sends a request to file.rawPath', () => {
         return services.getRawFileData(file).then(raw => {
+          expect(axios.get).toHaveBeenCalledWith(file.rawPath, {
+            transformResponse: [expect.any(Function)],
+          });
+          expect(raw).toEqual('raw content');
+        });
+      });
+
+      it('returns arraybuffer for binary files', () => {
+        file.binary = true;
+
+        return services.getRawFileData(file).then(raw => {
+          expect(axios.get).toHaveBeenCalledWith(file.rawPath, {
+            transformResponse: [expect.any(Function)],
+            responseType: 'arraybuffer',
+          });
           expect(raw).toEqual('raw content');
         });
       });