helper-blocks: fix pre formatting only for auth plugin helper texts.

- leave other as they can break if we apply same for all helper blocks.

rhodecode/public/css/main-content.less

@@ -1,383 +1,385 b''
 
 // Contains the style definitions used for .main-content
 // elements which are mainly around the admin settings.
 
 
 // TODO: johbo: Integrate in a better way, this is for "main content" which
 // should not have a limit on the width.
 .main-content-full {
     clear: both;
 }
 
 
 .main-content {
     max-width: @maincontent-maxwidth;
 
     h3,
     // TODO: johbo: Change templates to use h3 instead of h4 here
     h4 {
         line-height: 1em;
     }
 
     // TODO: johbo: Check if we can do that on a global level
     table {
         th {
             padding: 0;
         }
         td.field{
                 .help-block{
                     margin-left: 0;
                 }
         }
     }
 
     // TODO: johbo: Tweak this into the general styling, for a full width
     // textarea
     .textarea-full {
         // 2x 10px padding and 2x 1px border
         margin-right: 22px;
     }
 
 }
 
 
 // TODO: johbo: duplicated, think about a mixins.less
 .block-left{
     float: left;
 }
 
 .form {
     .checkboxes {
         // TODO: johbo: Should be changed in .checkboxes already
         width: auto;
     }
 
     // TODO: johbo: some settings pages are broken and don't have the .buttons
     // inside the .fields, tweak those templates and remove this.
     .buttons {
         margin-top: @textmargin;
     }
 
     .help-block {
         display: block;
         margin-left: @label-width;
-        white-space: pre;
+        &.pre-formatting {
+            white-space: pre;
+        }
     }
 
     .action_button {
         color: @grey4;
     }
 }
 
 .main-content-full-width {
     .main-content;
     width: 100%;
     min-width: 100%;
 }
 
 .field {
     clear: left;
     margin-bottom: @padding;
 
 }
 
 .input-monospace {
     font-family: @font-family-monospace;
 }
 
 .fields {
 	label {
 		color: @grey2;
 	}
 
     .field {
         clear: right;
         margin-bottom: @textmargin;
         width: 100%;
 
         .label {
             float: left;
             margin-right: @form-vertical-margin;
             margin-top: 0;
             padding-top: @input-padding-px + @border-thickness-inputs;
             width: @label-width - @form-vertical-margin;
         }
         // used in forms for fields that show just text
         .label-text {
             .label;
             padding-top: 5px;
         }
         // Used to position content on the right side of a .label
         .content,
         .side-by-side-selector {
             padding-top: @input-padding-px + @input-border-thickness;
         }
 
         .checkboxes,
         .input,
         .select,
         .textarea,
         .content {
             float: none;
             margin-left: @label-width;
 
             .help-block {
                 margin-left: 0;
             }
         }
 
         .checkboxes,
         .input,
         .select {
             .help-block {
                 display: block;
             }
         }
 
         .checkboxes,
         .radios {
             // TODO: johbo: We get a 4px margin from the from-bootstrap,
             // compensating here to align well with labels on the left.
             padding-top: @input-padding-px + @input-border-thickness - 3px;
         }
 
         .checkbox,
         .radio {
             display: block;
             width: auto;
         }
 
         .checkbox + .checkbox {
             display: block;
         }
 
         .input,
         .select {
             .help-block,
             .info-block {
                 margin-top: @form-vertical-margin / 2;
             }
         }
 
         .input {
             .medium {
                 width: @fields-input-m;
             }
             .large {
                 width: @fields-input-l;
             }
 
             .text-as-placeholder {
                 padding-top: @input-padding-px + @border-thickness-inputs;
             }
         }
 
         // TODO: johbo: Try to find a better integration of this bit.
         // When using a select2 inside of a field, it should not have the
         // top margin.
         .select .drop-menu {
             margin-top: 0;
         }
 
         .textarea {
             float: none;
 
             textarea {
                 // TODO: johbo: From somewhere we get a clear which does
                 // more harm than good here.
                 clear: none;
             }
 
             .CodeMirror {
                // TODO: johbo: Tweak to position the .help-block nicer,
                // figure out how to apply for .text-block instead.
                 margin-bottom: 10px;
             }
 
             // TODO: johbo: Check if we can remove the grey background on
             // the global level and remove this if possible.
             .help-block {
                 background: transparent;
                 padding: 0;
             }
         }
 
         &.tag_patterns,
         &.branch_patterns {
 
             input {
                 max-width: 430px;
             }
         }
     }
 
     .field-sm {
         .label {
             padding-top: @input-padding-px / 2 + @input-border-thickness;
         }
         .checkboxes,
         .radios {
             // TODO: johbo: We get a 4px margin from the from-bootstrap,
             // compensating here to align well with labels on the left.
             padding-top: @input-padding-px / 2 + @input-border-thickness - 3px;
         }
     }
 
     .field.customhooks {
         .label {
             padding-top: 0;
         }
         .input-wrapper {
             padding-right: 25px;
 
             input {
                 width: 100%;
             }
         }
         .input {
             padding-right: 25px;
         }
     }
 
     .buttons {
         // TODO: johbo: define variable for this value.
         // Note that this should be 40px but since most elements add some
         // space in the bottom, we are with 20 closer to 40.
         margin-top: 20px;
 		clear: both;
         margin-bottom: @padding;
     }
 
     .desc{
         margin-right: @textmargin;
     }
 
     input,
     .drop-menu {
         margin-right: @padding/3;
     }
 
 }
 
 .form-vertical .fields .field {
 
     .label {
         float: none;
         width: auto;
     }
 
     .checkboxes,
     .input,
     .select,
     .textarea {
         margin-left: 0;
     }
 
     // TODO: johbo: had to tweak the width here to make it big enough for
     // the license.
     .textarea.editor {
         max-width: none;
     }
 
     .textarea.large textarea {
         min-height: 200px;
     }
 
     .help-block {
         margin-left: 0;
     }
 }
 
 
 
 
 .main-content {
     .block-left;
 
     .section {
         margin-bottom: @space;
     }
 
 
     // Table aligning same way as forms in admin section, e.g.
     // python packages table
     table.formalign {
         float: left;
         width: auto;
 
         .label {
             width: @label-width;
         }
 
     }
 
 
     table.issuetracker {
 
         color: @text-color;
 
         .issue-tracker-example {
             color: @grey4;
         }
     }
 
     .side-by-side-selector{
         .left-group,
         .middle-group,
         .right-group{
             float: left;
         }
 
         .left-group,
         .right-group{
             width: 45%;
             text-align: center;
 
             label{
                 width: 100%;
                 text-align: left;
             }
 
             select{
                 width: 100%;
                 background: none;
                 border-color: @border-highlight-color;
                 color: @text-color;
                 font-family: @text-light;
                 font-size: @basefontsize;
                 color: @grey1;
                 padding: @textmargin/2;
             }
 
             select:after{
                 content: "";
             }
 
         }
 
         .middle-group{
             width: 10%;
             text-align: center;
             padding-top: 4em;
             i {
                 font-size: 18px;
                 cursor: pointer;
                 line-height: 2em;
             }
         }
 
     }
 
     .permissions_boxes{
         label, .label{
             margin-right: @textmargin/2;
         }
     }
 
     .radios{
         label{
             margin-right: @textmargin;
         }
     }
 }
 

rhodecode/templates/admin/auth/plugin_settings.mako

@@ -1,118 +1,118 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
   ${_('Authentication Settings')}
   %if c.rhodecode_name:
     &middot; ${h.branding(c.rhodecode_name)}}
   %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
   ${h.link_to(_('Admin'),h.url('admin_home'))}
   &raquo;
   ${h.link_to(_('Authentication Plugins'),request.resource_path(resource.__parent__, route_name='auth_home'))}
   &raquo;
   ${resource.display_name}
 </%def>
 
 <%def name="menu_bar_nav()">
   ${self.menu_items(active='admin')}
 </%def>
 
 <%def name="main()">
   <div class="box">
     <div class="title">
       ${self.breadcrumbs()}
     </div>
     <div class='sidebar-col-wrapper'>
 
       ## TODO: This is repeated in the auth root template and should be merged
       ##       into a single solution.
       <div class="sidebar">
         <ul class="nav nav-pills nav-stacked">
           % for item in resource.get_root().get_nav_list():
             <li ${'class=active' if item == resource else ''}>
               <a href="${request.resource_path(item, route_name='auth_home')}">${item.display_name}</a>
             </li>
           % endfor
         </ul>
       </div>
 
       <div class="main-content-full-width">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h3 class="panel-title">${_('Plugin')}: ${resource.display_name}</h3>
           </div>
           <div class="panel-body">
             <div class="plugin_form">
               <div class="fields">
                 ${h.secure_form(request.resource_path(resource, route_name='auth_home'))}
                 <div class="form">
 
                   %for node in plugin.get_settings_schema():
                     <% label_css_class = ("label-checkbox" if (node.widget == "bool") else "") %>
                     <div class="field">
                       <div class="label ${label_css_class}"><label for="${node.name}">${node.title}</label></div>
                       <div class="input">
                         %if node.widget in ["string", "int", "unicode"]:
                           ${h.text(node.name, defaults.get(node.name), class_="medium")}
                         %elif node.widget == "password":
                           ${h.password(node.name, defaults.get(node.name), class_="medium")}
                         %elif node.widget == "bool":
                           <div class="checkbox">${h.checkbox(node.name, True, checked=defaults.get(node.name))}</div>
                         %elif node.widget == "select":
                           ${h.select(node.name, defaults.get(node.name), node.validator.choices)}
                         %elif node.widget == "readonly":
                           ${node.default}
                         %else:
                           This field is of type ${node.typ}, which cannot be displayed. Must be one of [string|int|bool|select].
                         %endif
                         %if node.name in errors:
                           <span class="error-message">${errors.get(node.name)}</span>
                           <br />
                         %endif
-                        <p class="help-block">${node.description}</p>
+                        <p class="help-block pre-formatting">${node.description}</p>
                       </div>
                     </div>
                   %endfor
 
                   ## Allow derived templates to add something below the form
                   ## input fields
                   %if hasattr(next, 'below_form_fields'):
                     ${next.below_form_fields()}
                   %endif
 
                   <div class="buttons">
                     ${h.submit('save',_('Save'),class_="btn")}
                   </div>
 
                 </div>
                 ${h.end_form()}
               </div>
             </div>
           </div>
         </div>
       </div>
 
     </div>
   </div>
 
 ## TODO: Ugly hack to get ldap select elements to work.
 ##       Find a solution to integrate this nicely.
 <script>
 $(document).ready(function() {
   var select2Options = {
         containerCssClass: 'drop-menu',
         dropdownCssClass: 'drop-menu-dropdown',
         dropdownAutoWidth: true,
         minimumResultsForSearch: -1
     };
     $("#tls_kind").select2(select2Options);
     $("#tls_reqcert").select2(select2Options);
     $("#search_scope").select2(select2Options);
     $("#group_extraction_type").select2(select2Options);
     $("#admin_groups_sync").select2(select2Options);
 });
 </script>
 </%def>

rhodecode/templates/admin/repos/repo_edit_vcs.mako

@@ -1,76 +1,74 b''
 <%namespace name="vcss" file="/base/vcs_settings.mako"/>
 
 <div id="repo_vcs_settings" class="${'inherited' if c.inherit_global_settings else ''}">
     ${h.secure_form(url('repo_vcs_settings', repo_name=c.repo_info.repo_name), method='post')}
         <div class="form panel panel-default">
             <div class="fields panel-body">
                 <div class="field">
                     <div class="label label-checkbox">
                         <label for="inherit_global_settings">${_('Inherit from global settings')}:</label>
                     </div>
                     <div class="checkboxes">
                         ${h.checkbox('inherit_global_settings',value=True)}
-                        <span class="help-block">
-                          ${h.literal(_('Select to inherit global vcs settings.'))}
-                        </span>
+                        <span class="help-block">${h.literal(_('Select to inherit global vcs settings.'))}</span>
                     </div>
                 </div>
             </div>
         </div>
 
         <div id="inherit_overlay_vcs_default">
             <div>
                 ${vcss.vcs_settings_fields(
                     suffix='_inherited',
                     svn_tag_patterns=c.global_svn_tag_patterns,
                     svn_branch_patterns=c.global_svn_branch_patterns,
                     repo_type=c.repo_info.repo_type,
                     disabled='disabled'
                 )}
             </div>
         </div>
 
         <div id="inherit_overlay_vcs_custom">
             <div>
                 ${vcss.vcs_settings_fields(
                     suffix='',
                     svn_tag_patterns=c.svn_tag_patterns,
                     svn_branch_patterns=c.svn_branch_patterns,
                     repo_type=c.repo_info.repo_type
                 )}
             </div>
         </div>
 
         <div class="buttons">
                 ${h.submit('save',_('Save settings'),class_="btn")}
                 ${h.reset('reset',_('Reset'),class_="btn")}
         </div>
 
     ${h.end_form()}
 </div>
 
 <script type="text/javascript">
 
     function ajaxDeletePattern(pattern_id, field_id) {
         var sUrl = "${h.url('repo_vcs_settings', repo_name=c.repo_info.repo_name)}";
         var callback =  function (o) {
             var elem = $("#"+field_id);
             elem.remove();
         };
         var postData = {
             '_method': 'delete',
             'delete_svn_pattern': pattern_id,
             'csrf_token': CSRF_TOKEN
         };
         var request = $.post(sUrl, postData)
             .done(callback)
             .fail(function (data, textStatus, errorThrown) {
                 alert("Error while deleting hooks.\nError code {0} ({1}). URL: {2}".format(data.status,data.statusText,$(this)[0].url));
             });
     }
 
     $('#inherit_global_settings').on('change', function(e){
         $('#repo_vcs_settings').toggleClass('inherited', this.checked);
     });
 
 </script>

rhodecode/templates/login.mako

@@ -1,88 +1,87 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base/root.mako"/>
 
 <%def name="title()">
     ${_('Sign In')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <style>body{background-color:#eeeeee;}</style>
 <div class="loginbox">
     <div class="header">
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
                     <a href="${h.url('home')}"><img src="${h.asset('images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 %if c.rhodecode_name:
                 <div class="branding"> ${h.branding(c.rhodecode_name)}</div>
                 %endif
             </div>
         </div>
     </div>
 
     <div class="loginwrapper">
         <div class="left-column">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
         <%block name="above_login_button" />
         <div id="login" class="right-column">
             <!-- login -->
             <div class="sign-in-title">
                 <h1>${_('Sign In')}</h1>
                 %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():
                 <h4>${h.link_to(_("Go to the registration page to create a new account."), request.route_path('register'))}</h4>
                 %endif
             </div>
             <div class="inner form">
                 ${h.form(request.route_path('login', _query={'came_from': came_from}), needs_csrf_token=False)}
 
                     <label for="username">${_('Username')}:</label>
                     ${h.text('username', class_='focus', value=defaults.get('username'))}
                     %if 'username' in errors:
                     <span class="error-message">${errors.get('username')}</span>
                     <br />
                     %endif
 
                     <label for="password">${_('Password')}:</label>
                     ${h.password('password', class_='focus')}
                     %if 'password' in errors:
                     <span class="error-message">${errors.get('password')}</span>
                     <br />
                     %endif
 
                     ${h.checkbox('remember', value=True, checked=defaults.get('remember'))}
                     <label class="checkbox" for="remember">${_('Remember me')}</label>
 
                     %if h.HasPermissionAny('hg.password_reset.enabled')():
                         <p class="links">
                             ${h.link_to(_('Forgot your password?'), h.route_path('reset_password'), class_='pwd_reset')}
                         </p>
                     %elif h.HasPermissionAny('hg.password_reset.hidden')():
                         <p class="help-block">
                             ${_('Password reset is disabled. Please contact ')}
                             % if c.visual.rhodecode_support_url:
                                 <a href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a>
                                 ${_('or')}
                             % endif
                             ${_('an administrator if you need help.')}
                         </p>
-                            %endif
-                    
+                    %endif
 
                     ${h.submit('sign_in', _('Sign In'), class_="btn sign-in")}
 
                 ${h.end_form()}
                 <script type="text/javascript">
                     $(document).ready(function(){
                         $('#username').focus();
                     })
                 </script>
             </div>
             <!-- end login -->
             <%block name="below_login_button" />
         </div>
     </div>
 </div>

rhodecode/templates/pullrequests/pullrequest.mako

@@ -1,593 +1,591 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)}
         ${self.breadcrumbs()}
     </div>
 
     ${h.secure_form(url('pullrequest', repo_name=c.repo_name), method='post', id='pull_request_form')}
         <div class="box pr-summary">
 
             <div class="summary-details block-left">
 
                 <div class="form">
                     <!-- 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>
+                                <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>${_('Origin 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>
                 <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'))}
                             <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 targetRepoName = '${c.repo_name}';
 
   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 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) {
             id = element.val();
             refData = element.val().split(':');
           } 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');
 
   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': targetRepoName}),
               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 prButtonLockChecks = {
       'compare': false,
       'reviewers': false
   };
 
   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);
       }
   };
 
   var loadRepoRefDiffPreview = function() {
       var sourceRepo = $sourceRepo.eq(0).val();
       var sourceRef = $sourceRef.eq(0).val().split(':');
 
       var targetRepo = $targetRepo.eq(0).val();
       var targetRef = $targetRef.eq(0).val().split(':');
 
       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 origin and destination')}");
           return;
       }
       var url = pyroutes.url('compare_url', 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) {
                 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');
               }
 
 
           });
   };
 
   /**
    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]
   };
 
   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){
     Select2Box($targetRef, {
       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
       $('#target_repo_desc').html(
           "<strong>${_('Destination repository')}</strong>: {0}".format(repoData['description'])
       );
 
       // 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();
     loadDefaultReviewers();
   });
 
   $targetRef.on('change', function(e){
     loadRepoRefDiffPreview();
     loadDefaultReviewers();
   });
 
   $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': targetRepoName, '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));
           }
       })
 
   });
 
   var loadDefaultReviewers = function() {
     if (loadDefaultReviewers._currentRequest) {
         loadDefaultReviewers._currentRequest.abort();
     }
     $('.calculate-reviewers').show();
     prButtonLock(true, null, 'reviewers');
 
     var url = pyroutes.url('repo_default_reviewers_data', {'repo_name': targetRepoName});
 
     var sourceRepo = $sourceRepo.eq(0).val();
     var sourceRef = $sourceRef.eq(0).val().split(':');
     var targetRepo = $targetRepo.eq(0).val();
     var targetRef = $targetRef.eq(0).val().split(':');
     url += '?source_repo=' + sourceRepo;
     url += '&source_ref=' + sourceRef[2];
     url += '&target_repo=' + targetRepo;
     url += '&target_ref=' + targetRef[2];
 
     loadDefaultReviewers._currentRequest = $.get(url)
         .done(function(data) {
             loadDefaultReviewers._currentRequest = null;
 
             // reset && add the reviewer based on selected repo
             $('#review_members').html('');
             for (var i = 0; i < data.reviewers.length; i++) {
               var reviewer = data.reviewers[i];
               addReviewMember(
                   reviewer.user_id, reviewer.firstname,
                   reviewer.lastname, reviewer.username,
                   reviewer.gravatar_link, reviewer.reasons);
             }
             $('.calculate-reviewers').hide();
             prButtonLock(false, null, 'reviewers');
         });
   };
 
   prButtonLock(true, "${_('Please select origin and destination')}", '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}');
       loadRepoRefDiffPreview();
       loadDefaultReviewers();
   % endif
 
   ReviewerAutoComplete('user');
 });
 </script>
 
 </%def>