pull-requests: fixed cases with default expected refs are closed or unavailable.

- for Mercurial with closed default branch a compare across forks can fail.
- fixes  #5436

rhodecode/public/js/src/rhodecode/pullrequests.js

@@ -1,587 +1,593 b''
 // # Copyright (C) 2010-2018 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 
 var prButtonLockChecks = {
   'compare': false,
   'reviewers': false
 };
 
 /**
  * lock button until all checks and loads are made. E.g reviewer calculation
  * should prevent from submitting a PR
  * @param lockEnabled
  * @param msg
  * @param scope
  */
 var prButtonLock = function(lockEnabled, msg, scope) {
       scope = scope || 'all';
       if (scope == 'all'){
           prButtonLockChecks['compare'] = !lockEnabled;
           prButtonLockChecks['reviewers'] = !lockEnabled;
       } else if (scope == 'compare') {
           prButtonLockChecks['compare'] = !lockEnabled;
       } else if (scope == 'reviewers'){
           prButtonLockChecks['reviewers'] = !lockEnabled;
       }
       var checksMeet = prButtonLockChecks.compare && prButtonLockChecks.reviewers;
       if (lockEnabled) {
           $('#save').attr('disabled', 'disabled');
       }
       else if (checksMeet) {
           $('#save').removeAttr('disabled');
       }
 
       if (msg) {
           $('#pr_open_message').html(msg);
       }
 };
 
 
 /**
 Generate Title and Description for a PullRequest.
 In case of 1 commits, the title and description is that one commit
 in case of multiple commits, we iterate on them with max N number of commits,
 and build description in a form
 - commitN
 - commitN+1
 ...
 
 Title is then constructed from branch names, or other references,
 replacing '-' and '_' into spaces
 
 * @param sourceRef
 * @param elements
 * @param limit
 * @returns {*[]}
 */
 var getTitleAndDescription = function(sourceRef, elements, limit) {
   var title = '';
   var desc = '';
 
   $.each($(elements).get().reverse().slice(0, limit), function(idx, value) {
       var rawMessage = $(value).find('td.td-description .message').data('messageRaw');
       desc += '- ' + rawMessage.split('\n')[0].replace(/\n+$/, "") + '\n';
   });
   // only 1 commit, use commit message as title
   if (elements.length === 1) {
       title = $(elements[0]).find('td.td-description .message').data('messageRaw').split('\n')[0];
   }
   else {
       // use reference name
       title = sourceRef.replace(/-/g, ' ').replace(/_/g, ' ').capitalizeFirstLetter();
   }
 
   return [title, desc]
 };
 
 
 
 ReviewersController = function () {
     var self = this;
     this.$reviewRulesContainer = $('#review_rules');
     this.$rulesList = this.$reviewRulesContainer.find('.pr-reviewer-rules');
     this.forbidReviewUsers = undefined;
     this.$reviewMembers = $('#review_members');
     this.currentRequest = null;
 
     this.defaultForbidReviewUsers = function() {
         return [
             {'username': 'default',
              'user_id': templateContext.default_user.user_id}
         ];
     };
 
     this.hideReviewRules = function() {
         self.$reviewRulesContainer.hide();
     };
 
     this.showReviewRules = function() {
         self.$reviewRulesContainer.show();
     };
 
     this.addRule = function(ruleText) {
         self.showReviewRules();
         return '<div>- {0}</div>'.format(ruleText)
     };
 
     this.loadReviewRules = function(data) {
         // reset forbidden Users
         this.forbidReviewUsers = self.defaultForbidReviewUsers();
 
         // reset state of review rules
         self.$rulesList.html('');
 
         if (!data || data.rules === undefined || $.isEmptyObject(data.rules)) {
             // default rule, case for older repo that don't have any rules stored
             self.$rulesList.append(
                 self.addRule(
                     _gettext('All reviewers must vote.'))
             );
             return self.forbidReviewUsers
         }
 
         if (data.rules.voting !== undefined) {
             if (data.rules.voting < 0) {
                 self.$rulesList.append(
                     self.addRule(
                          _gettext('All individual reviewers must vote.'))
                 )
             } else if (data.rules.voting === 1) {
                 self.$rulesList.append(
                     self.addRule(
                         _gettext('At least {0} reviewer must vote.').format(data.rules.voting))
                 )
 
             } else {
                 self.$rulesList.append(
                     self.addRule(
                         _gettext('At least {0} reviewers must vote.').format(data.rules.voting))
                 )
             }
         }
 
         if (data.rules.voting_groups !== undefined) {
             $.each(data.rules.voting_groups, function(index, rule_data) {
                 self.$rulesList.append(
                     self.addRule(rule_data.text)
                 )
             });
         }
 
         if (data.rules.use_code_authors_for_review) {
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Reviewers picked from source code changes.'))
             )
         }
         if (data.rules.forbid_adding_reviewers) {
             $('#add_reviewer_input').remove();
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Adding new reviewers is forbidden.'))
             )
         }
         if (data.rules.forbid_author_to_review) {
             self.forbidReviewUsers.push(data.rules_data.pr_author);
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Author is not allowed to be a reviewer.'))
             )
         }
         if (data.rules.forbid_commit_author_to_review) {
 
             if (data.rules_data.forbidden_users) {
                 $.each(data.rules_data.forbidden_users, function(index, member_data) {
                     self.forbidReviewUsers.push(member_data)
                 });
 
             }
 
             self.$rulesList.append(
                 self.addRule(
                     _gettext('Commit Authors are not allowed to be a reviewer.'))
             )
         }
 
         return self.forbidReviewUsers
     };
 
     this.loadDefaultReviewers = function(sourceRepo, sourceRef, targetRepo, targetRef) {
 
         if (self.currentRequest) {
             // make sure we cleanup old running requests before triggering this
             // again
             self.currentRequest.abort();
         }
 
         $('.calculate-reviewers').show();
         // reset reviewer members
         self.$reviewMembers.empty();
 
         prButtonLock(true, null, 'reviewers');
         $('#user').hide(); // hide user autocomplete before load
 
+        if (sourceRef.length !== 3 || targetRef.length !== 3) {
+            // don't load defaults in case we're missing some refs...
+            $('.calculate-reviewers').hide();
+            return
+        }
+
         var url = pyroutes.url('repo_default_reviewers_data',
                 {
                     'repo_name': templateContext.repo_name,
                     'source_repo': sourceRepo,
                     'source_ref': sourceRef[2],
                     'target_repo': targetRepo,
                     'target_ref': targetRef[2]
                 });
 
         self.currentRequest = $.get(url)
             .done(function(data) {
                 self.currentRequest = null;
 
                 // review rules
                 self.loadReviewRules(data);
 
                 for (var i = 0; i < data.reviewers.length; i++) {
                   var reviewer = data.reviewers[i];
                   self.addReviewMember(
                       reviewer, reviewer.reasons, reviewer.mandatory);
                 }
                 $('.calculate-reviewers').hide();
                 prButtonLock(false, null, 'reviewers');
                 $('#user').show(); // show user autocomplete after load
             });
     };
 
     // check those, refactor
     this.removeReviewMember = function(reviewer_id, mark_delete) {
         var reviewer = $('#reviewer_{0}'.format(reviewer_id));
 
         if(typeof(mark_delete) === undefined){
             mark_delete = false;
         }
 
         if(mark_delete === true){
             if (reviewer){
                 // now delete the input
                 $('#reviewer_{0} input'.format(reviewer_id)).remove();
                 // mark as to-delete
                 var obj = $('#reviewer_{0}_name'.format(reviewer_id));
                 obj.addClass('to-delete');
                 obj.css({"text-decoration":"line-through", "opacity": 0.5});
             }
         }
         else{
             $('#reviewer_{0}'.format(reviewer_id)).remove();
         }
     };
     this.reviewMemberEntry = function() {
 
     };
     this.addReviewMember = function(reviewer_obj, reasons, mandatory) {
         var members = self.$reviewMembers.get(0);
         var id = reviewer_obj.user_id;
         var username = reviewer_obj.username;
 
         var reasons = reasons || [];
         var mandatory = mandatory || false;
 
         // register IDS to check if we don't have this ID already in
         var currentIds = [];
         var _els = self.$reviewMembers.find('li').toArray();
         for (el in _els){
             currentIds.push(_els[el].id)
         }
 
         var userAllowedReview = function(userId) {
             var allowed = true;
             $.each(self.forbidReviewUsers, function(index, member_data) {
                 if (parseInt(userId) === member_data['user_id']) {
                     allowed = false;
                     return false // breaks the loop
                 }
             });
             return allowed
         };
 
         var userAllowed = userAllowedReview(id);
         if (!userAllowed){
            alert(_gettext('User `{0}` not allowed to be a reviewer').format(username));
         } else {
             // only add if it's not there
             var alreadyReviewer = currentIds.indexOf('reviewer_'+id) != -1;
 
             if (alreadyReviewer) {
                 alert(_gettext('User `{0}` already in reviewers').format(username));
             } else {
                 members.innerHTML += renderTemplate('reviewMemberEntry', {
                         'member': reviewer_obj,
                         'mandatory': mandatory,
                         'allowed_to_update': true,
                         'review_status': 'not_reviewed',
                         'review_status_label': _gettext('Not Reviewed'),
                         'reasons': reasons,
                         'create': true
                         });
             }
         }
 
     };
 
     this.updateReviewers = function(repo_name, pull_request_id){
         var postData = $('#reviewers input').serialize();
         _updatePullRequest(repo_name, pull_request_id, postData);
     };
 
 };
 
 
 var _updatePullRequest = function(repo_name, pull_request_id, postData) {
     var url = pyroutes.url(
         'pullrequest_update',
         {"repo_name": repo_name, "pull_request_id": pull_request_id});
     if (typeof postData === 'string' ) {
         postData += '&csrf_token=' + CSRF_TOKEN;
     } else {
         postData.csrf_token = CSRF_TOKEN;
     }
     var success = function(o) {
         window.location.reload();
     };
     ajaxPOST(url, postData, success);
 };
 
 /**
  * PULL REQUEST update commits
  */
 var updateCommits = function(repo_name, pull_request_id) {
     var postData = {
         'update_commits': true};
     _updatePullRequest(repo_name, pull_request_id, postData);
 };
 
 
 /**
  * PULL REQUEST edit info
  */
 var editPullRequest = function(repo_name, pull_request_id, title, description) {
     var url = pyroutes.url(
         'pullrequest_update',
         {"repo_name": repo_name, "pull_request_id": pull_request_id});
 
     var postData = {
         'title': title,
         'description': description,
         'edit_pull_request': true,
         'csrf_token': CSRF_TOKEN
     };
     var success = function(o) {
         window.location.reload();
     };
     ajaxPOST(url, postData, success);
 };
 
 var initPullRequestsCodeMirror = function (textAreaId) {
     var ta = $(textAreaId).get(0);
     var initialHeight = '100px';
 
     // default options
     var codeMirrorOptions = {
         mode: "text",
         lineNumbers: false,
         indentUnit: 4,
         theme: 'rc-input'
     };
 
     var codeMirrorInstance = CodeMirror.fromTextArea(ta, codeMirrorOptions);
     // marker for manually set description
     codeMirrorInstance._userDefinedDesc = false;
     codeMirrorInstance.setSize(null, initialHeight);
     codeMirrorInstance.on("change", function(instance, changeObj) {
         var height = initialHeight;
         var lines = instance.lineCount();
         if (lines > 6 && lines < 20) {
             height = "auto"
         }
         else if (lines >= 20) {
             height = 20 * 15;
         }
         instance.setSize(null, height);
 
         // detect if the change was trigger by auto desc, or user input
         changeOrigin = changeObj.origin;
 
         if (changeOrigin === "setValue") {
             cmLog.debug('Change triggered by setValue');
         }
         else {
             cmLog.debug('user triggered change !');
             // set special marker to indicate user has created an input.
             instance._userDefinedDesc = true;
         }
 
     });
 
     return codeMirrorInstance
 };
 
 /**
  * Reviewer autocomplete
  */
 var ReviewerAutoComplete = function(inputId) {
   $(inputId).autocomplete({
     serviceUrl: pyroutes.url('user_autocomplete_data'),
     minChars:2,
     maxHeight:400,
     deferRequestBy: 300, //miliseconds
     showNoSuggestionNotice: true,
     tabDisabled: true,
     autoSelectFirst: true,
     params: { user_id: templateContext.rhodecode_user.user_id, user_groups:true, user_groups_expand:true, skip_default_user:true },
     formatResult: autocompleteFormatResult,
     lookupFilter: autocompleteFilterResult,
     onSelect: function(element, data) {
         var mandatory = false;
         var reasons = [_gettext('added manually by "{0}"').format(templateContext.rhodecode_user.username)];
 
         // add whole user groups
         if (data.value_type == 'user_group') {
             reasons.push(_gettext('member of "{0}"').format(data.value_display));
 
             $.each(data.members, function(index, member_data) {
                 var reviewer = member_data;
                 reviewer['user_id'] = member_data['id'];
                 reviewer['gravatar_link'] = member_data['icon_link'];
                 reviewer['user_link'] = member_data['profile_link'];
                 reviewer['rules'] = [];
                 reviewersController.addReviewMember(reviewer, reasons, mandatory);
             })
         }
         // add single user
         else {
             var reviewer = data;
             reviewer['user_id'] = data['id'];
             reviewer['gravatar_link'] = data['icon_link'];
             reviewer['user_link'] = data['profile_link'];
             reviewer['rules'] = [];
             reviewersController.addReviewMember(reviewer, reasons, mandatory);
         }
 
       $(inputId).val('');
     }
   });
 };
 
 
 VersionController = function () {
     var self = this;
     this.$verSource = $('input[name=ver_source]');
     this.$verTarget = $('input[name=ver_target]');
     this.$showVersionDiff = $('#show-version-diff');
 
     this.adjustRadioSelectors = function (curNode) {
         var getVal = function (item) {
             if (item == 'latest') {
                 return Number.MAX_SAFE_INTEGER
             }
             else {
                 return parseInt(item)
             }
         };
 
         var curVal = getVal($(curNode).val());
         var cleared = false;
 
         $.each(self.$verSource, function (index, value) {
             var elVal = getVal($(value).val());
 
             if (elVal > curVal) {
                 if ($(value).is(':checked')) {
                     cleared = true;
                 }
                 $(value).attr('disabled', 'disabled');
                 $(value).removeAttr('checked');
                 $(value).css({'opacity': 0.1});
             }
             else {
                 $(value).css({'opacity': 1});
                 $(value).removeAttr('disabled');
             }
         });
 
         if (cleared) {
             // if we unchecked an active, set the next one to same loc.
             $(this.$verSource).filter('[value={0}]'.format(
                 curVal)).attr('checked', 'checked');
         }
 
         self.setLockAction(false,
             $(curNode).data('verPos'),
             $(this.$verSource).filter(':checked').data('verPos')
         );
     };
 
 
     this.attachVersionListener = function () {
         self.$verTarget.change(function (e) {
             self.adjustRadioSelectors(this)
         });
         self.$verSource.change(function (e) {
             self.adjustRadioSelectors(self.$verTarget.filter(':checked'))
         });
     };
 
     this.init = function () {
 
         var curNode = self.$verTarget.filter(':checked');
         self.adjustRadioSelectors(curNode);
         self.setLockAction(true);
         self.attachVersionListener();
 
     };
 
     this.setLockAction = function (state, selectedVersion, otherVersion) {
         var $showVersionDiff = this.$showVersionDiff;
 
         if (state) {
             $showVersionDiff.attr('disabled', 'disabled');
             $showVersionDiff.addClass('disabled');
             $showVersionDiff.html($showVersionDiff.data('labelTextLocked'));
         }
         else {
             $showVersionDiff.removeAttr('disabled');
             $showVersionDiff.removeClass('disabled');
 
             if (selectedVersion == otherVersion) {
                 $showVersionDiff.html($showVersionDiff.data('labelTextShow'));
             } else {
                 $showVersionDiff.html($showVersionDiff.data('labelTextDiff'));
             }
         }
 
     };
 
     this.showVersionDiff = function () {
         var target = self.$verTarget.filter(':checked');
         var source = self.$verSource.filter(':checked');
 
         if (target.val() && source.val()) {
             var params = {
                 'pull_request_id': templateContext.pull_request_data.pull_request_id,
                 'repo_name': templateContext.repo_name,
                 'version': target.val(),
                 'from_version': source.val()
             };
             window.location = pyroutes.url('pullrequest_show', params)
         }
 
         return false;
     };
 
     this.toggleVersionView = function (elem) {
 
         if (this.$showVersionDiff.is(':visible')) {
             $('.version-pr').hide();
             this.$showVersionDiff.hide();
             $(elem).html($(elem).data('toggleOn'))
         } else {
             $('.version-pr').show();
             this.$showVersionDiff.show();
             $(elem).html($(elem).data('toggleOff'))
         }
 
         return false
     }
 
 };
  No newline at end of file

rhodecode/templates/pullrequests/pullrequest.mako

@@ -1,530 +1,537 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${c.repo_name} ${_('New pull request')}
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${_('New pull request')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='showpullrequest')}
 </%def>
 
 <%def name="main()">
 <div class="box">
     <div class="title">
         ${self.repo_page_title(c.rhodecode_db_repo)}
     </div>
 
     ${h.secure_form(h.route_path('pullrequest_create', repo_name=c.repo_name, _query=request.GET.mixed()), id='pull_request_form', request=request)}
 
         ${self.breadcrumbs()}
 
         <div class="box pr-summary">
 
             <div class="summary-details block-left">
 
 
                 <div class="pr-details-title">
                     ${_('Pull request summary')}
                 </div>
 
                 <div class="form" style="padding-top: 10px">
                     <!-- fields -->
 
                     <div class="fields" >
 
                          <div class="field">
                             <div class="label">
                                 <label for="pullrequest_title">${_('Title')}:</label>
                             </div>
                             <div class="input">
                                 ${h.text('pullrequest_title', c.default_title, class_="medium autogenerated-title")}
                             </div>
                          </div>
 
                         <div class="field">
                             <div class="label label-textarea">
                                 <label for="pullrequest_desc">${_('Description')}:</label>
                             </div>
                             <div class="textarea text-area editor">
                                 ${h.textarea('pullrequest_desc',size=30, )}
                                 <span class="help-block">${_('Write a short description on this pull request')}</span>
                             </div>
                         </div>
 
                         <div class="field">
                             <div class="label label-textarea">
                                 <label for="pullrequest_desc">${_('Commit flow')}:</label>
                             </div>
 
                             ## TODO: johbo: Abusing the "content" class here to get the
                             ## desired effect. Should be replaced by a proper solution.
 
                             ##ORG
                             <div class="content">
                                 <strong>${_('Source repository')}:</strong>
                                 ${c.rhodecode_db_repo.description}
                             </div>
                             <div class="content">
                                 ${h.hidden('source_repo')}
                                 ${h.hidden('source_ref')}
                             </div>
 
                             ##OTHER, most Probably the PARENT OF THIS FORK
                             <div class="content">
                                 ## filled with JS
                                 <div id="target_repo_desc"></div>
                             </div>
 
                             <div class="content">
                                 ${h.hidden('target_repo')}
                                 ${h.hidden('target_ref')}
                                 <span id="target_ref_loading" style="display: none">
                                     ${_('Loading refs...')}
                                 </span>
                             </div>
                         </div>
 
                         <div class="field">
                             <div class="label label-textarea">
                                 <label for="pullrequest_submit"></label>
                             </div>
                             <div class="input">
                                 <div class="pr-submit-button">
                                     ${h.submit('save',_('Submit Pull Request'),class_="btn")}
                                 </div>
                                 <div id="pr_open_message"></div>
                             </div>
                         </div>
 
                         <div class="pr-spacing-container"></div>
                     </div>
                 </div>
             </div>
             <div>
                 ## AUTHOR
                 <div class="reviewers-title block-right">
                   <div class="pr-details-title">
                       ${_('Author of this pull request')}
                   </div>
                 </div>
                 <div class="block-right pr-details-content reviewers">
                     <ul class="group_members">
                       <li>
                         ${self.gravatar_with_user(c.rhodecode_user.email, 16)}
                       </li>
                     </ul>
                 </div>
 
                 ## REVIEW RULES
                 <div id="review_rules" style="display: none" class="reviewers-title block-right">
                     <div class="pr-details-title">
                         ${_('Reviewer rules')}
                     </div>
                     <div class="pr-reviewer-rules">
                         ## review rules will be appended here, by default reviewers logic
                     </div>
                 </div>
 
                 ## REVIEWERS
                 <div class="reviewers-title block-right">
                     <div class="pr-details-title">
                         ${_('Pull request reviewers')}
                         <span class="calculate-reviewers"> - ${_('loading...')}</span>
                     </div>
                 </div>
                 <div id="reviewers" class="block-right pr-details-content reviewers">
                     ## members goes here, filled via JS based on initial selection !
                     <input type="hidden" name="__start__" value="review_members:sequence">
                     <ul id="review_members" class="group_members"></ul>
                     <input type="hidden" name="__end__" value="review_members:sequence">
                     <div id="add_reviewer_input" class='ac'>
                         <div class="reviewer_ac">
                             ${h.text('user', class_='ac-input', placeholder=_('Add reviewer or reviewer group'))}
                             <div id="reviewers_container"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="box">
             <div>
                 ## overview pulled by ajax
                 <div id="pull_request_overview"></div>
             </div>
         </div>
     ${h.end_form()}
 </div>
 
 <script type="text/javascript">
 $(function(){
   var defaultSourceRepo = '${c.default_repo_data['source_repo_name']}';
   var defaultSourceRepoData = ${c.default_repo_data['source_refs_json']|n};
   var defaultTargetRepo = '${c.default_repo_data['target_repo_name']}';
   var defaultTargetRepoData = ${c.default_repo_data['target_refs_json']|n};
 
   var $pullRequestForm = $('#pull_request_form');
   var $sourceRepo = $('#source_repo', $pullRequestForm);
   var $targetRepo = $('#target_repo', $pullRequestForm);
   var $sourceRef = $('#source_ref', $pullRequestForm);
   var $targetRef = $('#target_ref', $pullRequestForm);
 
   var sourceRepo = function() { return $sourceRepo.eq(0).val() };
   var sourceRef = function() { return $sourceRef.eq(0).val().split(':') };
 
   var targetRepo = function() { return $targetRepo.eq(0).val() };
   var targetRef = function() { return $targetRef.eq(0).val().split(':') };
 
   var calculateContainerWidth = function() {
       var maxWidth = 0;
       var repoSelect2Containers = ['#source_repo', '#target_repo'];
       $.each(repoSelect2Containers, function(idx, value) {
           $(value).select2('container').width('auto');
           var curWidth = $(value).select2('container').width();
           if (maxWidth <= curWidth) {
               maxWidth = curWidth;
           }
           $.each(repoSelect2Containers, function(idx, value) {
               $(value).select2('container').width(maxWidth + 10);
           });
       });
   };
 
   var initRefSelection = function(selectedRef) {
       return function(element, callback) {
           // translate our select2 id into a text, it's a mapping to show
           // simple label when selecting by internal ID.
           var id, refData;
-          if (selectedRef === undefined) {
+          if (selectedRef === undefined || selectedRef === null) {
             id = element.val();
             refData = element.val().split(':');
+
+            if (refData.length !== 3){
+                refData = ["", "", ""]
+            }
           } else {
             id = selectedRef;
             refData = selectedRef.split(':');
           }
 
           var text = refData[1];
           if (refData[0] === 'rev') {
               text = text.substring(0, 12);
           }
 
           var data = {id: id, text: text};
-
           callback(data);
       };
   };
 
   var formatRefSelection = function(item) {
       var prefix = '';
       var refData = item.id.split(':');
       if (refData[0] === 'branch') {
           prefix = '<i class="icon-branch"></i>';
       }
       else if (refData[0] === 'book') {
           prefix = '<i class="icon-bookmark"></i>';
       }
       else if (refData[0] === 'tag') {
           prefix = '<i class="icon-tag"></i>';
       }
 
       var originalOption = item.element;
       return prefix + item.text;
   };
 
   // custom code mirror
   var codeMirrorInstance = initPullRequestsCodeMirror('#pullrequest_desc');
 
   reviewersController = new ReviewersController();
 
   var queryTargetRepo = function(self, query) {
       // cache ALL results if query is empty
       var cacheKey = query.term || '__';
       var cachedData = self.cachedDataSource[cacheKey];
 
       if (cachedData) {
           query.callback({results: cachedData.results});
       } else {
           $.ajax({
               url: pyroutes.url('pullrequest_repo_destinations', {'repo_name': templateContext.repo_name}),
               data: {query: query.term},
               dataType: 'json',
               type: 'GET',
               success: function(data) {
                   self.cachedDataSource[cacheKey] = data;
                   query.callback({results: data.results});
               },
               error: function(data, textStatus, errorThrown) {
                   alert(
                     "Error while fetching entries.\nError code {0} ({1}).".format(data.status, data.statusText));
               }
           });
       }
   };
 
   var queryTargetRefs = function(initialData, query) {
       var data = {results: []};
       // filter initialData
       $.each(initialData, function() {
           var section = this.text;
           var children = [];
           $.each(this.children, function() {
               if (query.term.length === 0 ||
                   this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ) {
                   children.push({'id': this.id, 'text': this.text})
               }
           });
           data.results.push({'text': section, 'children': children})
       });
       query.callback({results: data.results});
   };
 
   var loadRepoRefDiffPreview = function() {
 
       var url_data = {
           'repo_name': targetRepo(),
           'target_repo': sourceRepo(),
           'source_ref': targetRef()[2],
           'source_ref_type': 'rev',
           'target_ref': sourceRef()[2],
           'target_ref_type': 'rev',
           'merge': true,
           '_': Date.now() // bypass browser caching
       }; // gather the source/target ref and repo here
 
       if (sourceRef().length !== 3 || targetRef().length !== 3) {
           prButtonLock(true, "${_('Please select source and target')}");
           return;
       }
       var url = pyroutes.url('repo_compare', url_data);
 
       // lock PR button, so we cannot send PR before it's calculated
       prButtonLock(true, "${_('Loading compare ...')}", 'compare');
 
       if (loadRepoRefDiffPreview._currentRequest) {
           loadRepoRefDiffPreview._currentRequest.abort();
       }
 
       loadRepoRefDiffPreview._currentRequest = $.get(url)
           .error(function(data, textStatus, errorThrown) {
                 if (textStatus !== 'abort') {
                     alert(
                         "Error while processing request.\nError code {0} ({1}).".format(
                                 data.status, data.statusText));
                 }
 
           })
           .done(function(data) {
               loadRepoRefDiffPreview._currentRequest = null;
               $('#pull_request_overview').html(data);
 
               var commitElements = $(data).find('tr[commit_id]');
 
               var prTitleAndDesc = getTitleAndDescription(
                   sourceRef()[1], commitElements, 5);
 
               var title = prTitleAndDesc[0];
               var proposedDescription = prTitleAndDesc[1];
 
               var useGeneratedTitle = (
                    $('#pullrequest_title').hasClass('autogenerated-title') ||
                    $('#pullrequest_title').val() === "");
 
               if (title && useGeneratedTitle) {
                   // use generated title if we haven't specified our own
                   $('#pullrequest_title').val(title);
                   $('#pullrequest_title').addClass('autogenerated-title');
 
               }
 
               var useGeneratedDescription = (
                   !codeMirrorInstance._userDefinedDesc ||
                    codeMirrorInstance.getValue() === "");
 
               if (proposedDescription && useGeneratedDescription) {
                   // set proposed content, if we haven't defined our own,
                   // or we don't have description written
                   codeMirrorInstance._userDefinedDesc = false; // reset state
                   codeMirrorInstance.setValue(proposedDescription);
               }
 
               var msg = '';
               if (commitElements.length === 1) {
                   msg = "${_ungettext('This pull request will consist of __COMMITS__ commit.', 'This pull request will consist of __COMMITS__ commits.', 1)}";
               } else {
                   msg = "${_ungettext('This pull request will consist of __COMMITS__ commit.', 'This pull request will consist of __COMMITS__ commits.', 2)}";
               }
 
               msg += ' <a id="pull_request_overview_url" href="{0}" target="_blank">${_('Show detailed compare.')}</a>'.format(url);
 
               if (commitElements.length) {
                   var commitsLink = '<a href="#pull_request_overview"><strong>{0}</strong></a>'.format(commitElements.length);
                   prButtonLock(false, msg.replace('__COMMITS__', commitsLink), 'compare');
               }
               else {
                   prButtonLock(true, "${_('There are no commits to merge.')}", 'compare');
               }
 
 
           });
   };
 
   var Select2Box = function(element, overrides) {
     var globalDefaults = {
         dropdownAutoWidth: true,
         containerCssClass: "drop-menu",
         dropdownCssClass: "drop-menu-dropdown"
     };
 
     var initSelect2 = function(defaultOptions) {
       var options = jQuery.extend(globalDefaults, defaultOptions, overrides);
       element.select2(options);
     };
 
     return {
       initRef: function() {
         var defaultOptions = {
           minimumResultsForSearch: 5,
           formatSelection: formatRefSelection
         };
 
         initSelect2(defaultOptions);
       },
 
       initRepo: function(defaultValue, readOnly) {
         var defaultOptions = {
           initSelection : function (element, callback) {
             var data = {id: defaultValue, text: defaultValue};
             callback(data);
           }
         };
 
         initSelect2(defaultOptions);
 
         element.select2('val', defaultSourceRepo);
         if (readOnly === true) {
           element.select2('readonly', true);
         }
       }
     };
   };
 
-  var initTargetRefs = function(refsData, selectedRef){
+  var initTargetRefs = function(refsData, selectedRef) {
+
     Select2Box($targetRef, {
+        placeholder: "${_('Select commit reference')}",
       query: function(query) {
         queryTargetRefs(refsData, query);
       },
       initSelection : initRefSelection(selectedRef)
     }).initRef();
 
     if (!(selectedRef === undefined)) {
         $targetRef.select2('val', selectedRef);
     }
   };
 
   var targetRepoChanged = function(repoData) {
       // generate new DESC of target repo displayed next to select
       var prLink = pyroutes.url('pullrequest_new', {'repo_name': repoData['name']});
       $('#target_repo_desc').html(
           "<strong>${_('Target repository')}</strong>: {0}. <a href=\"{1}\">Switch base, and use as source.</a>".format(repoData['description'], prLink)
       );
 
       // generate dynamic select2 for refs.
       initTargetRefs(repoData['refs']['select2_refs'],
                      repoData['refs']['selected_ref']);
 
   };
 
   var sourceRefSelect2 = Select2Box($sourceRef, {
       placeholder: "${_('Select commit reference')}",
       query: function(query) {
         var initialData = defaultSourceRepoData['refs']['select2_refs'];
         queryTargetRefs(initialData, query)
       },
       initSelection: initRefSelection()
     }
   );
 
   var sourceRepoSelect2 = Select2Box($sourceRepo, {
     query: function(query) {}
   });
 
   var targetRepoSelect2 = Select2Box($targetRepo, {
     cachedDataSource: {},
     query: $.debounce(250, function(query) {
       queryTargetRepo(this, query);
     }),
     formatResult: formatResult
   });
 
   sourceRefSelect2.initRef();
 
   sourceRepoSelect2.initRepo(defaultSourceRepo, true);
 
   targetRepoSelect2.initRepo(defaultTargetRepo, false);
 
   $sourceRef.on('change', function(e){
     loadRepoRefDiffPreview();
     reviewersController.loadDefaultReviewers(
         sourceRepo(), sourceRef(), targetRepo(), targetRef());
   });
 
   $targetRef.on('change', function(e){
     loadRepoRefDiffPreview();
     reviewersController.loadDefaultReviewers(
         sourceRepo(), sourceRef(), targetRepo(), targetRef());
   });
 
   $targetRepo.on('change', function(e){
       var repoName = $(this).val();
       calculateContainerWidth();
       $targetRef.select2('destroy');
       $('#target_ref_loading').show();
 
       $.ajax({
           url: pyroutes.url('pullrequest_repo_refs',
             {'repo_name': templateContext.repo_name, 'target_repo_name':repoName}),
           data: {},
           dataType: 'json',
           type: 'GET',
           success: function(data) {
               $('#target_ref_loading').hide();
               targetRepoChanged(data);
               loadRepoRefDiffPreview();
           },
           error: function(data, textStatus, errorThrown) {
               alert("Error while fetching entries.\nError code {0} ({1}).".format(data.status, data.statusText));
           }
       })
 
   });
 
   prButtonLock(true, "${_('Please select source and target')}", 'all');
 
   // auto-load on init, the target refs select2
   calculateContainerWidth();
   targetRepoChanged(defaultTargetRepoData);
 
   $('#pullrequest_title').on('keyup', function(e){
       $(this).removeClass('autogenerated-title');
   });
 
   % if c.default_source_ref:
   // in case we have a pre-selected value, use it now
   $sourceRef.select2('val', '${c.default_source_ref}');
+  // diff preview load
   loadRepoRefDiffPreview();
+  // default reviewers
   reviewersController.loadDefaultReviewers(
       sourceRepo(), sourceRef(), targetRepo(), targetRef());
   % endif
 
   ReviewerAutoComplete('#user');
 });
 </script>
 
 </%def>