Merge branch 'ide' of gitlab.com:gitlab-org/gitlab-ce into ide

app/assets/javascripts/repo/repo_commit_section.vue

@@ -61,7 +61,7 @@ export default RepoCommitSection;
         <label class="col-md-4 control-label staged-files">Staged files ({{changedFiles.length}})</label>
         <div class="col-md-4">
           <ul class="list-unstyled changed-files">
-            <li v-for="file in branchPaths">
+            <li v-for="file in branchPaths" :key="file.id">
               <span class="help-block">{{file}}</span>
             </li>
           </ul>
@@ -77,7 +77,7 @@ export default RepoCommitSection;
       </div>
       <!-- Button Drop Down
       -->
-      <div class="form-group">
+      <div class="form-group target-branch">
         <label class="col-md-4 control-label" for="target-branch">Target branch</label>
         <div class="col-md-4">
           <span class="help-block">{{targetBranch}}</span>

app/assets/javascripts/repo/repo_file.vue

@@ -42,7 +42,7 @@ export default RepoFile;
 <template>
 <tr class="file" v-if="!loading.tree || hasFiles" :class="{'active': activeFile.url === file.url}">
   <td @click.prevent="linkClicked(file)">
-    <i class="fa" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
+    <i class="fa file-icon" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
     <i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>
     <a :href="file.url" class="repo-file-name" :title="file.url">{{file.name}}</a>
   </td>

app/assets/javascripts/repo/repo_file_buttons.vue

@@ -51,7 +51,6 @@ export default RepoFileButtons;
     <a :href="blameFileURL" class="btn btn-default blame">Blame</a>
     <a :href="historyFileURL" class="btn btn-default history">History</a>
     <a href="#" class="btn btn-default permalink">Permalink</a>
-    <a href="#" class="btn btn-default lock">Lock</a>
   </div>
 
   <a href="#" v-if="canPreview" @click.prevent="rawPreviewToggle" class="btn btn-default preview">{{activeFileLabel}}</a>

app/assets/javascripts/repo/repo_helper.js

@@ -283,8 +283,7 @@ const RepoHelper = {
     }
   },
 
-  loadingError(e) {
-    console.log(e)
+  loadingError() {
     Flash('Unable to load the file at this time.');
   },
 };

app/assets/javascripts/repo/repo_loading_file.vue

@@ -32,19 +32,19 @@ export default RepoLoadingFile;
 <tr v-if="loading.tree && !hasFiles" class="loading-file">
   <td>
     <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)"></div>
+      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
     </div>
   </td>
 
   <td v-if="!isMini" class="hidden-sm hidden-xs">
     <div class="animation-container">
-      <div v-for="n in 6" :class="lineOfCode(n)"></div>
+      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
     </div>
   </td>
 
   <td v-if="!isMini" class="hidden-xs">
     <div class="animation-container animation-container-small">
-      <div v-for="n in 6" :class="lineOfCode(n)"></div>
+      <div v-for="n in 6" :class="lineOfCode(n)" :key="n"></div>
     </div>
   </td>
 </tr>

spec/javascripts/repo/repo_binary_viewer_spec.js

@@ -9,40 +9,77 @@ describe('RepoBinaryViewer', () => {
     return new RepoBinaryViewer().$mount();
   }
 
-  it('renders an img if its png', () => {
-    const binaryTypes = {
-      png: true,
-    };
-    const activeFile = {
-      name: 'name',
-    };
+  function createActiveFile(type, activeFile = {}) {
+    const file = activeFile;
+
+    switch (type) {
+      case 'svg':
+      case 'png':
+        file.name = 'name';
+        break;
+      case 'md':
+        file.html = 'html';
+        break;
+      default:
+        break;
+    }
+
+    return file;
+  }
+
+  function setActiveBinary(type) {
+    const binaryTypes = {};
+    binaryTypes[type] = true;
+
+    const activeFile = createActiveFile(type);
+
     const uri = 'uri';
     Store.binary = true;
     Store.binaryTypes = binaryTypes;
     Store.activeFile = activeFile;
     Store.pngBlobWithDataURI = uri;
+
+    return {
+      activeFile,
+      uri,
+    };
+  }
+
+  function assertBinaryImg(img, activeFile, uri) {
+    expect(img.src).toMatch(`/${uri}`);
+    expect(img.alt).toEqual(activeFile.name);
+  }
+
+  it('renders an img if its png', () => {
+    const { activeFile, uri } = setActiveBinary('png');
     const vm = createComponent();
     const img = vm.$el.querySelector(':scope > img');
 
-    expect(img.src).toMatch(`/${uri}`);
-    expect(img.alt).toEqual(activeFile.name);
+    assertBinaryImg(img, activeFile, uri);
+  });
+
+  it('renders an img if its svg', () => {
+    const { activeFile, uri } = setActiveBinary('svg');
+    const vm = createComponent();
+    const img = vm.$el.querySelector(':scope > img');
+
+    assertBinaryImg(img, activeFile, uri);
   });
 
   it('renders an div with content if its markdown', () => {
-    const binaryTypes = {
-      md: true,
-    };
-    const activeFile = {
-      html: 'markdown',
-    };
-    Store.binary = true;
-    Store.binaryTypes = binaryTypes;
-    Store.activeFile = activeFile;
+    const { activeFile } = setActiveBinary('md');
     const vm = createComponent();
 
     expect(vm.$el.querySelector(':scope > div').innerHTML).toEqual(activeFile.html);
   });
 
+  it('renders no preview message if its unknown', () => {
+    setActiveBinary('unknown');
+    const vm = createComponent();
+
+    expect(vm.$el.querySelector('.binary-unknown').textContent).toMatch('Binary file. No preview available.');
+  });
+
   it('does not render if no binary', () => {
     Store.binary = false;
     const vm = createComponent();

spec/javascripts/repo/repo_commit_section_spec.js

@@ -5,21 +5,21 @@ import RepoHelper from '~/repo/repo_helper';
 import Api from '~/api';
 
 describe('RepoCommitSection', () => {
+  const branch = 'master';
   const openedFiles = [{
     id: 0,
     changed: true,
-    url: 'master/url0',
+    url: `${branch}/url0`,
     newContent: 'a',
   }, {
     id: 1,
     changed: true,
-    url: 'master/url1',
+    url: `${branch}/url1`,
     newContent: 'b',
   }, {
     id: 2,
     changed: false,
   }];
-  const branch = 'master';
 
   function createComponent() {
     const RepoCommitSection = Vue.extend(repoCommitSection);
@@ -29,13 +29,16 @@ describe('RepoCommitSection', () => {
 
   it('renders a commit section', () => {
     RepoStore.isCommitable = true;
+    RepoStore.targetBranch = branch;
     RepoStore.openedFiles = openedFiles;
+
     spyOn(RepoHelper, 'getBranch').and.returnValue(branch);
 
     const vm = createComponent();
     const changedFiles = [...vm.$el.querySelectorAll('.changed-files > li')];
     const commitMessage = vm.$el.querySelector('#commit-message');
     const submitCommit = vm.$el.querySelector('.submit-commit');
+    const targetBranch = vm.$el.querySelector('.target-branch');
 
     expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
     expect(vm.$el.querySelector('.staged-files').textContent).toEqual('Staged files (2)');
@@ -51,7 +54,10 @@ describe('RepoCommitSection', () => {
     expect(commitMessage.name).toEqual('commit-message');
     expect(submitCommit.type).toEqual('submit');
     expect(submitCommit.disabled).toBeTruthy();
+    expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy();
     expect(vm.$el.querySelector('.commit-summary').textContent).toEqual('Commit 2 files');
+    expect(targetBranch.querySelector(':scope > label').textContent).toEqual('Target branch');
+    expect(targetBranch.querySelector('.help-block').textContent).toEqual(branch);
   });
 
   it('does not render if not isCommitable', () => {
@@ -82,6 +88,8 @@ describe('RepoCommitSection', () => {
     RepoStore.openedFiles = openedFiles;
     RepoStore.projectId = projectId;
 
+    spyOn(RepoHelper, 'getBranch').and.returnValue(branch);
+
     const vm = createComponent();
     const commitMessageEl = vm.$el.querySelector('#commit-message');
     const submitCommit = vm.$el.querySelector('.submit-commit');
@@ -102,15 +110,20 @@ describe('RepoCommitSection', () => {
         expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeTruthy();
 
         const args = Api.commitMultiple.calls.allArgs()[0];
-        const { commit_message, actions } = args[1];
+        const { commit_message, actions, branch: payloadBranch } = args[1];
 
         expect(args[0]).toBe(projectId);
         expect(commit_message).toBe(commitMessage);
         expect(actions.length).toEqual(2);
+        expect(payloadBranch).toEqual(branch);
         expect(actions[0].action).toEqual('update');
         expect(actions[1].action).toEqual('update');
-        expect(actions[0].content).toEqual('a');
-        expect(actions[1].content).toEqual('b');
+        expect(actions[0].content).toEqual(openedFiles[0].newContent);
+        expect(actions[1].content).toEqual(openedFiles[1].newContent);
+        expect(actions[0].file_path)
+          .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[0].url, branch));
+        expect(actions[1].file_path)
+          .toEqual(RepoHelper.getFilePathFromFullPath(openedFiles[1].url, branch));
 
         done();
       });

spec/javascripts/repo/repo_file_buttons_spec.js

@@ -9,7 +9,7 @@ describe('RepoFileButtons', () => {
     return new RepoFileButtons().$mount();
   }
 
-  it('renders Raw, Blame, History, Permalink, Lock and Preview toggle', () => {
+  it('renders Raw, Blame, History, Permalink and Preview toggle', () => {
     const activeFile = {
       extension: 'md',
       url: 'url',
@@ -34,7 +34,6 @@ describe('RepoFileButtons', () => {
     expect(history.href).toMatch(`/${activeFile.url}`);
     expect(history.textContent).toEqual('History');
     expect(vm.$el.querySelector('.permalink').textContent).toEqual('Permalink');
-    expect(vm.$el.querySelector('.lock').textContent).toEqual('Lock');
     expect(vm.$el.querySelector('.preview').textContent).toEqual(activeFileLabel);
   });
 

spec/javascripts/repo/repo_file_spec.js

@@ -33,6 +33,7 @@ describe('RepoFile', () => {
       activeFile,
     });
     const name = vm.$el.querySelector('.repo-file-name');
+    const fileIcon = vm.$el.querySelector('.file-icon');
 
     expect(vm.$el.classList.contains('active')).toBeTruthy();
     expect(vm.$el.querySelector(`.${file.icon}`).style.marginLeft).toEqual('100px');
@@ -41,6 +42,8 @@ describe('RepoFile', () => {
     expect(name.textContent).toEqual(file.name);
     expect(vm.$el.querySelector('.commit-message').textContent).toBe(file.lastCommitMessage);
     expect(vm.$el.querySelector('.commit-update').textContent).toBe(updated);
+    expect(fileIcon.classList.contains(file.icon)).toBeTruthy();
+    expect(fileIcon.style.marginLeft).toEqual(`${file.level * 10}px`);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
@@ -54,6 +57,22 @@ describe('RepoFile', () => {
     });
 
     expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
+  });
+
+  it('renders a spinner if the file is loading', () => {
+    file.loading = true;
+    const vm = createComponent({
+      file,
+      activeFile,
+      loading: {
+        tree: true,
+      },
+      hasFiles: true,
+    });
+
+    expect(vm.$el.innerHTML).toBeTruthy();
+    expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${file.level * 10}px`);
   });
 
   it('does not render if loading tree', () => {