Fixes height problems

app/assets/javascripts/api.js

@@ -13,6 +13,7 @@ const Api = {
   dockerfilePath: '/api/:version/templates/dockerfiles/:key',
   issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key',
   usersPath: '/api/:version/users.json',
+  commitPath: '/api/:version/projects/:id/repository/commits',
 
   group(groupId, callback) {
     const url = Api.buildUrl(Api.groupPath)
@@ -95,6 +96,21 @@ const Api = {
       .done(projects => callback(projects));
   },
 
+  commitMultiple(id, data, callback) {
+    // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
+    const url = Api.buildUrl(Api.commitPath)
+      .replace(':id', id);
+    return $.ajax({
+      url,
+      type: 'POST',
+      data: data,
+      dataType: 'json',
+    })
+      .done(commitData => callback(commitData))
+      .fail(message => callback(message.responseJSON));
+
+  },
+
   // Return text for a specific license
   licenseText(key, data, callback) {
     const url = Api.buildUrl(Api.licensePath)

app/assets/javascripts/project.js

@@ -77,6 +77,7 @@ import Cookies from 'js-cookie';
               },
               dataType: "json"
             }).done(function(refs) {
+              console.log(refs)
               return callback(refs);
             });
           },

app/assets/javascripts/repo/index.js

@@ -3,9 +3,9 @@ import $ from 'jquery';
 import Vue from 'vue';
 import RepoSidebar from './repo_sidebar.vue';
 import EditButton from './repo_edit_button';
-import CommitSection from './repo_commit_section';
 import Service from './repo_service';
 import Store from './repo_store';
+import RepoCommitSection from './repo_commit_section.vue';
 import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoBinaryViewer from './repo_binary_viewer.vue';
@@ -18,6 +18,9 @@ function initRepo() {
   Store.service = Service;
   Store.service.url = repo.dataset.url;
   Store.projectName = repo.dataset.projectName;
+  Store.service.refsUrl = repo.dataset.refsUrl;
+  Store.currentBranch = $("button.dropdown-menu-toggle").attr('data-ref');
+  Store.checkIsCommitable();
 
   new Vue({
     el: repo,
@@ -30,6 +33,7 @@ function initRepo() {
           <repo-editor/>
           <repo-binary-viewer/>
         </div>
+        <repo-commit-section/>
       </div>
     `,
     mixins: [RepoMiniMixin],
@@ -39,14 +43,12 @@ function initRepo() {
       'repo-file-buttons': RepoFileButtons,
       'repo-binary-viewer': RepoBinaryViewer,
       'repo-editor': RepoEditor,
+      'repo-commit-section': RepoCommitSection
     },
   });
 
   const editButton = document.getElementById('editable-mode');
-  const commitSection = document.getElementById('commit-area');
-
   Store.editButton = new EditButton(editButton);
-  Store.commitSection = new CommitSection(commitSection);
 }
 
 $(initRepo);

app/assets/javascripts/repo/repo_commit_section.js

-import Vue from 'vue';
-import Store from './repo_store';
-
-export default class RepoCommitSection {
-  constructor(el) {
-    this.initVue(el);
-  }
-
-  initVue(el) {
-    this.vue = new Vue({
-      el,
-      data: () => Store,
-
-      computed: {
-        changedFiles() {
-          const changedFileList = this.openedFiles
-          .filter(file => file.changed);
-          return changedFileList;
-        },
-      },
-    });
-  }
-}

app/assets/javascripts/repo/repo_commit_section.vue

+<script>
+import Vue from 'vue';
+import Store from './repo_store';
+
+const RepoCommitSection = {
+  data: () => Store,
+  
+  methods: {
+    makeCommit() {
+      // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
+      // branch  string
+      // commit_message  string
+      // actions[]
+      // author_email
+      // author_name
+      const branchName = $("button.dropdown-menu-toggle").attr('data-ref');
+      const commitMessage = this.commitMessage;
+      const actions = this.changedFiles.map(f => {
+          return f.url.split(branchName)[1];
+      });
+      console.log(branchName, commitMessage, actions);
+    }
+  },
+
+  computed: {
+    changedFiles() {
+      const changedFileList = this.openedFiles
+      .filter(file => file.changed);
+      return changedFileList;
+    },
+  },
+}
+
+export default RepoCommitSection;
+</script>
+
+<template>
+<div id="commit-area" v-if="isCommitable && changedFiles.length" >
+  <form class="form-horizontal">
+    <fieldset>
+      <div class="form-group">
+        <label class="col-md-4 control-label">Staged files ({{changedFiles.length}})</label>
+        <div class="col-md-4">
+          <ul class="list-unstyled">
+            <li v-for="file in changedFiles">
+              <span class="help-block">
+                {{file.url}}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <!-- Textarea
+      -->
+      <div class="form-group">
+        <label class="col-md-4 control-label" for="commit-message">Commit message</label>
+        <div class="col-md-4">
+          <textarea class="form-control" id="commit-message" name="commit-message" v-model="commitMessage"></textarea>
+        </div>
+      </div>
+      <!-- Button Drop Down
+      -->
+      <div class="form-group">
+        <label class="col-md-4 control-label" for="target-branch">Target branch</label>
+        <div class="col-md-4">
+          <div class="input-group">
+            <div class="input-group-btn">
+              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+                Action
+                <i class="fa fa-caret-down"></i>
+              </button>
+              <ul class="dropdown-menu pull-right">
+                <li>
+                  <a href="#">Target branch</a>
+                </li>
+                <li>
+                  <a href="#">Create my own branch</a>
+                </li>
+              </ul>
+            </div>
+            <input class="form-control" id="target-branch" name="target-branch" placeholder="placeholder" type="text"></input>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="col-md-4 control-label" for="checkboxes"></label>
+        <div class="col-md-4">
+          <div class="checkbox">
+            <label for="checkboxes-0">
+              <input id="checkboxes-0" name="checkboxes" type="checkbox" value="1"></input>
+              Start a new merge request with these changes
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-offset-4 col-md-4">
+        <button type="submit" class="btn btn-success" @click.prevent="makeCommit">Commit {{changedFiles.length}} Files</button>
+      </div>
+    </fieldset>
+  </form>
+</div>
+</template>
\ No newline at end of file

app/assets/javascripts/repo/repo_service.js

+import Store from './repo_store';
 import axios from 'axios';
 
 const RepoService = {
@@ -9,6 +10,14 @@ const RepoService = {
   },
   richExtensionRegExp: /md/,
 
+  checkCurrentBranchIsCommitable() {
+    const url = Store.service.refsUrl;
+    return axios.get(url, {params: {
+        ref: Store.currentBranch,
+        search: Store.currentBranch
+      }});
+  },
+
   buildParams(url = this.url) {
     // shallow clone object without reference
     const params = Object.assign({}, this.options.params);

app/assets/javascripts/repo/repo_store.js

@@ -40,7 +40,10 @@ const RepoStore = {
   activeLine: 0,
   activeFileLabel: 'Raw',
   files: [],
+  isCommitable: false,
   binary: false,
+  currentBranch: '',
+  commitMessage: 'Update README.md',
   binaryMimeType: '',
   // scroll bar space for windows
   scrollWidth: 0,
@@ -55,6 +58,17 @@ const RepoStore = {
 
   // mutations
 
+  checkIsCommitable() {
+    RepoStore.service.checkCurrentBranchIsCommitable()
+      .then((data) => {
+        // you shouldn't be able to make commits on commits or tags. 
+        let {Branches, Commits, Tags} = data.data;
+        if(Branches && Branches.length) RepoStore.isCommitable = true;
+        if(Commits && Commits.length) RepoStore.isCommitable = false;
+        if(Tags && Tags.length) RepoStore.isCommitable = false;
+      });
+  },
+
   addFilesToDirectory(inDirectory, currentList, newList) {
     RepoStore.files = RepoHelper.getNewMergedList(inDirectory, currentList, newList);
   },

app/assets/stylesheets/pages/repo.scss

@@ -114,7 +114,7 @@
     }
 
     #ide {
-      height: 70vh;
+      height: 75vh;
     }
 
     #repo-file-buttons {
@@ -167,7 +167,7 @@
       vertical-align: top;
       width: 20%;
       border-right: 1px solid $white-normal;
-      height: 80vh;
+      height: 100vh;
       overflow: auto;
     }
 

app/views/projects/tree/_tree_content.html.haml

-#repo{ data: { url: repo_url(@project), 'project-name' => @project.name } }
-  #commit-area{ "v-if" => "changedFiles.length" }
-    %form.form-horizontal
-      %fieldset
-        .form-group
-          %label.col-md-4.control-label Staged files ({{changedFiles.length}})
-          .col-md-4
-            %ul.list-unstyled
-              %li{ "v-for" => "file in changedFiles" }
-                %span.help-block
-                  {{file.url}}
-        / Textarea
-        .form-group
-          %label.col-md-4.control-label{ :for => "commit-message" } Commit message
-          .col-md-4
-            %textarea#commit-message.form-control{ :name => "commit-message" } Updating README.md
-        / Button Drop Down
-        .form-group
-          %label.col-md-4.control-label{ :for => "target-branch" } Target branch
-          .col-md-4
-            .input-group
-              .input-group-btn
-                %button.btn.btn-default.dropdown-toggle{ "data-toggle" => "dropdown", :type => "button" }
-                  Action
-                  = icon "caret-down"
-                %ul.dropdown-menu.pull-right
-                  %li
-                    %a{ :href => "#" } Target branch
-                  %li
-                    %a{ :href => "#" } Create my own branch
-              %input#target-branch.form-control{ :name => "target-branch", :placeholder => "placeholder", :type => "text" }/
-        / Multiple Checkboxes
-        .form-group
-          %label.col-md-4.control-label{ :for => "checkboxes" }
-          .col-md-4
-            .checkbox
-              %label{ :for => "checkboxes-0" }
-                %input#checkboxes-0{ :name => "checkboxes", :type => "checkbox", :value => "1" }/
-                Start a new merge request with these changes
-
-
+#repo{ data: { url: repo_url(@project), 'project-name' => @project.name, refs_url: refs_namespace_project_path(@project.namespace, @project, format: "json") } }
 
 - if can_edit_tree?
   = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post

app/views/projects/tree/_tree_header.html.haml

@@ -3,7 +3,7 @@
     = render 'shared/ref_switcher', destination: 'tree', path: @path
 
 .tree-controls
-  %a.btn.btn-default#editable-mode{ "href"=>"#", "@click.prevent" => "editClicked", "v-cloak" => 1 }
+  %a.btn.btn-default#editable-mode{ "href"=>"#", "@click.prevent" => "editClicked", "v-cloak" => 1, "v-if" => "isCommitable" }
     %i{ ":class" => "buttonIcon" }
     %span {{buttonLabel}}