Merge branch 'ps-step-1-add-mime-type-to-ide-file' into 'master'

Step 1 - Update IDE to track mimeType

See merge request gitlab-org/gitlab!50245

app/assets/javascripts/ide/components/new_dropdown/upload.vue

@@ -25,10 +25,10 @@ export default {
   },
   methods: {
     createFile(target, file) {
-      const { name } = file;
+      const { name, type: mimeType } = file;
       const encodedContent = target.result.split('base64,')[1];
       const rawContent = encodedContent ? atob(encodedContent) : '';
-      const isText = isTextFile({ content: rawContent, mimeType: file.type, name });
+      const isText = isTextFile({ content: rawContent, mimeType, name });
 
       const emitCreateEvent = content =>
         this.$emit('create', {
@@ -36,6 +36,7 @@ export default {
           type: 'blob',
           content,
           rawPath: !isText ? URL.createObjectURL(file) : '',
+          mimeType,
         });
 
       if (isText) {

app/assets/javascripts/ide/lib/files.js

@@ -11,8 +11,20 @@ export const splitParent = path => {
 
 /**
  * Create file objects from a list of file paths.
+ *
+ * @param {Array} options.data Array of blob paths to parse and create a file tree from.
+ * @param {Boolean} options.tempFile Web IDE flag for whether this is a "new" file or not.
+ * @param {String} options.content Content to initialize the new blob with.
+ * @param {String} options.rawPath Raw path used for the new blob.
+ * @param {Object} options.blobData Extra values to initialize each blob with.
  */
-export const decorateFiles = ({ data, tempFile = false, content = '', rawPath = '' }) => {
+export const decorateFiles = ({
+  data,
+  tempFile = false,
+  content = '',
+  rawPath = '',
+  blobData = {},
+}) => {
   const treeList = [];
   const entries = {};
 
@@ -73,6 +85,7 @@ export const decorateFiles = ({ data, tempFile = false, content = '', rawPath =
         content,
         rawPath,
         parentPath,
+        ...blobData,
       });
 
       Object.assign(entries, {

app/assets/javascripts/ide/stores/actions.js

@@ -31,7 +31,7 @@ export const setResizingStatus = ({ commit }, resizing) => {
 
 export const createTempEntry = (
   { state, commit, dispatch, getters },
-  { name, type, content = '', rawPath = '', openFile = true, makeFileActive = true },
+  { name, type, content = '', rawPath = '', openFile = true, makeFileActive = true, mimeType = '' },
 ) => {
   const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
 
@@ -56,6 +56,9 @@ export const createTempEntry = (
     tempFile: true,
     content,
     rawPath,
+    blobData: {
+      mimeType,
+    },
   });
   const { file, parentPath } = data;
 

app/assets/javascripts/ide/stores/utils.js

@@ -31,6 +31,7 @@ export const dataStructure = () => ({
   mrChange: null,
   deleted: false,
   prevPath: undefined,
+  mimeType: '',
 });
 
 export const decorateData = entity => {
@@ -47,6 +48,7 @@ export const decorateData = entity => {
     rawPath = '',
     file_lock,
     parentPath = '',
+    mimeType = '',
   } = entity;
 
   return Object.assign(dataStructure(), {
@@ -63,6 +65,7 @@ export const decorateData = entity => {
     rawPath,
     file_lock,
     parentPath,
+    mimeType,
   });
 };
 

spec/frontend/ide/components/new_dropdown/upload_spec.js

@@ -62,8 +62,8 @@ describe('new dropdown upload', () => {
       result: 'base64,8PDw8A==', // ðððð
     };
 
-    const textFile = new File(['plain text'], 'textFile');
-    const binaryFile = new File(['😺'], 'binaryFile');
+    const textFile = new File(['plain text'], 'textFile', { type: 'test/mime-text' });
+    const binaryFile = new File(['😺'], 'binaryFile', { type: 'test/mime-binary' });
 
     beforeEach(() => {
       jest.spyOn(FileReader.prototype, 'readAsText');
@@ -83,6 +83,7 @@ describe('new dropdown upload', () => {
             type: 'blob',
             content: 'plain text',
             rawPath: '',
+            mimeType: 'test/mime-text',
           });
         })
         .then(done)
@@ -99,6 +100,7 @@ describe('new dropdown upload', () => {
         type: 'blob',
         content: 'ðððð',
         rawPath: 'blob:https://gitlab.com/048c7ac1-98de-4a37-ab1b-0206d0ea7e1b',
+        mimeType: 'test/mime-binary',
       });
     });
   });

spec/frontend/ide/lib/files_spec.js

 import { decorateFiles, splitParent } from '~/ide/lib/files';
 import { decorateData } from '~/ide/stores/utils';
 
+const TEST_BLOB_DATA = { mimeType: 'test/mime' };
+
 const createEntries = paths => {
   const createEntry = (acc, { path, type, children }) => {
     const { name, parent } = splitParent(path);
@@ -14,6 +16,7 @@ const createEntries = paths => {
         parentPath: parent,
       }),
       tree: children.map(childName => expect.objectContaining({ name: childName })),
+      ...(type === 'blob' ? TEST_BLOB_DATA : {}),
     };
 
     return acc;
@@ -43,7 +46,7 @@ describe('IDE lib decorate files', () => {
       { path: 'README.md', type: 'blob', children: [] },
     ]);
 
-    const { entries, treeList } = decorateFiles({ data });
+    const { entries, treeList } = decorateFiles({ data, blobData: TEST_BLOB_DATA });
 
     // Here we test the keys and then each key/value individually because `expect(entries).toEqual(expectedEntries)`
     // was taking a very long time for some reason. Probably due to large objects and nested `expect.objectContaining`.

spec/frontend/ide/stores/actions_spec.js

@@ -195,11 +195,13 @@ describe('Multi-file store actions', () => {
           .dispatch('createTempEntry', {
             name,
             type: 'blob',
+            mimeType: 'test/mime',
           })
           .then(() => {
             const f = store.state.entries[name];
 
             expect(f.tempFile).toBeTruthy();
+            expect(f.mimeType).toBe('test/mime');
             expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1);
 
             done();