quick-switcher: handle errors using Swal, and create a new helper to make calls the same across whole app.

rhodecode/public/js/src/plugins/jquery.autocomplete.js

@@ -1,948 +1,950 b''
 /**
 *  Ajax Autocomplete for jQuery, version dev
 *  RhodeCode additions
 *  (c) 2014 Tomas Kirda
 *  (c) 2014 Marcin Kuzminski
 *
 *  Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style license.
 *  For details, see the web site: https://github.com/devbridge/jQuery-Autocomplete
 */
 // Expose plugin as an AMD module if AMD loader is present:
 (function (factory) {
     'use strict';
     if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.
         define(['jquery'], factory);
     } else if (typeof exports === 'object' && typeof require === 'function') {
         // Browserify
         factory(require('jquery'));
     } else {
         // Browser globals
         factory(jQuery);
     }
 }(function ($) {
     'use strict';
 
     var
         utils = (function () {
             return {
                 escapeRegExChars: function (value) {
                     return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                 },
                 createNode: function (containerClass) {
                     var div = document.createElement('div');
                     div.className = containerClass;
                     div.style.position = 'absolute';
                     div.style.display = 'none';
                     return div;
                 }
             };
         }()),
 
         keys = {
             ESC: 27,
             TAB: 9,
             RETURN: 13,
             LEFT: 37,
             UP: 38,
             RIGHT: 39,
             DOWN: 40
         };
 
     function Autocomplete(el, options) {
         var noop = function () { },
             that = this,
             defaults = {
                 ajaxSettings: {},
                 autoSelectFirst: false,
                 appendTo: document.body,
                 serviceUrl: null,
                 lookup: null,
                 width: 'auto',
                 minChars: 1,
                 maxHeight: 300,
                 deferRequestBy: 0,
                 params: {},
                 formatResult: Autocomplete.formatResult,
                 lookupFilter: Autocomplete.lookupFilter,
                 delimiter: null,
                 zIndex: 9999,
                 type: 'GET',
                 noCache: false,
                 onSelect: noop,
                 onSearchStart: noop,
                 onSearchComplete: noop,
                 onSearchError: noop,
                 containerClass: 'autocomplete-suggestions',
                 tabDisabled: false,
                 dataType: 'text',
                 currentRequest: null,
                 triggerSelectOnValidInput: false,
                 preventBadQueries: true,
                 paramName: 'query',
                 transformResult: function (response) {
                     return typeof response === 'string' ? $.parseJSON(response) : response;
                 },
                 showNoSuggestionNotice: false,
                 noSuggestionNotice: _gettext('No results'),
                 orientation: 'bottom',
                 forceFixPosition: false,
                 replaceOnArrowKey: true
             };
 
         // Shared variables:
         that.element = el;
         that.el = $(el);
         that.suggestions = [];
         that.badQueries = [];
         that.selectedIndex = -1;
         that.currentValue = that.element.value;
         that.intervalId = 0;
         that.cachedResponse = {};
         that.onChangeInterval = null;
         that.onChange = null;
         that.isLocal = false;
         that.suggestionsContainer = null;
         that.noSuggestionsContainer = null;
         that.options = $.extend({}, defaults, options);
         that.classes = {
             selected: 'autocomplete-selected',
             suggestion: 'autocomplete-suggestion'
         };
         that.hint = null;
         that.hintValue = '';
         that.selection = null;
 
         // Initialize and set options:
         that.initialize();
         that.setOptions(options);
     }
 
     Autocomplete.utils = utils;
 
     $.Autocomplete = Autocomplete;
 
     Autocomplete.formatResult = function (suggestion, currentValue) {
         var pattern = '(' + utils.escapeRegExChars(currentValue) + ')';
         return suggestion.value.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
     };
     Autocomplete.lookupFilter = function (suggestion, originalQuery, queryLowerCase) {
         return suggestion.value.toLowerCase().indexOf(queryLowerCase) !== -1;
     };
 
     Autocomplete.prototype = {
 
         killerFn: null,
 
         initialize: function () {
             var that = this,
                 suggestionSelector = '.' + that.classes.suggestion,
                 selected = that.classes.selected,
                 options = that.options,
                 container;
 
             // Remove autocomplete attribute to prevent native suggestions:
             that.element.setAttribute('autocomplete', 'off');
 
             that.killerFn = function (e) {
                 if ($(e.target).closest('.' + that.options.containerClass).length === 0) {
                     that.killSuggestions();
                     that.disableKillerFn();
                 }
             };
 
             // html() deals with many types: htmlString or Element or Array or jQuery
             that.noSuggestionsContainer = $('<div class="autocomplete-no-suggestion"></div>')
                                           .html(this.options.noSuggestionNotice).get(0);
 
             that.suggestionsContainer = Autocomplete.utils.createNode(options.containerClass);
 
             container = $(that.suggestionsContainer);
 
             container.appendTo(options.appendTo);
 
             // Only set width if it was provided:
             if (options.width !== 'auto') {
                 container.width(options.width);
             }
 
             // Listen for mouse over event on suggestions list:
             container.on('mouseover.autocomplete', suggestionSelector, function () {
                 that.activate($(this).data('index'));
             });
 
             // Deselect active element when mouse leaves suggestions container:
             container.on('mouseout.autocomplete', function () {
                 that.selectedIndex = -1;
                 container.children('.' + selected).removeClass(selected);
             });
 
             // Listen for click event on suggestions list:
             container.on('click.autocomplete', suggestionSelector, function () {
                 that.select($(this).data('index'));
             });
 
             that.fixPositionCapture = function () {
                 if (that.visible) {
                     that.fixPosition();
                 }
             };
 
             $(window).on('resize.autocomplete', that.fixPositionCapture);
 
             that.el.on('keydown.autocomplete', function (e) { that.onKeyPress(e); });
             that.el.on('keyup.autocomplete', function (e) { that.onKeyUp(e); });
             that.el.on('blur.autocomplete', function () { that.onBlur(); });
             that.el.on('focus.autocomplete', function () { that.onFocus(); });
             that.el.on('change.autocomplete', function (e) { that.onKeyUp(e); });
         },
 
         onFocus: function () {
             var that = this;
             that.fixPosition();
             if (that.options.minChars <= that.el.val().length) {
                 that.onValueChange();
             }
         },
 
         onBlur: function () {
             this.enableKillerFn();
         },
 
         setOptions: function (suppliedOptions) {
             var that = this,
                 options = that.options;
 
             $.extend(options, suppliedOptions);
 
             that.isLocal = $.isArray(options.lookup);
 
             if (that.isLocal) {
                 options.lookup = that.verifySuggestionsFormat(options.lookup);
             }
 
             options.orientation = that.validateOrientation(options.orientation, 'bottom');
 
             // Adjust height, width and z-index:
             $(that.suggestionsContainer).css({
                 'max-height': options.maxHeight + 'px',
                 'width': options.width + 'px',
                 'z-index': options.zIndex
             });
         },
 
         clearCache: function () {
             this.cachedResponse = {};
             this.badQueries = [];
         },
 
         clear: function () {
             this.clearCache();
             this.currentValue = '';
             this.suggestions = [];
         },
 
         disable: function () {
             var that = this;
             that.disabled = true;
             if (that.currentRequest) {
                 that.currentRequest.abort();
             }
         },
 
         enable: function () {
             this.disabled = false;
         },
 
         fixPosition: function () {
             // Use only when container has already its content
 
             var that = this,
                 $container = $(that.suggestionsContainer),
                 containerParent = $container.parent().get(0);
             // Fix position automatically when appended to body.
             // In other cases force parameter must be given.
             if (containerParent !== document.body && !that.options.forceFixPosition)
                 return;
 
             // Choose orientation
             var orientation = that.options.orientation,
                 containerHeight = $container.outerHeight(),
                 height = that.el.outerHeight(),
                 offset = that.el.offset(),
                 styles = { 'top': offset.top, 'left': offset.left };
 
             if (orientation == 'auto') {
                 var viewPortHeight = $(window).height(),
                     scrollTop = $(window).scrollTop(),
                     topOverflow = -scrollTop + offset.top - containerHeight,
                     bottomOverflow = scrollTop + viewPortHeight - (offset.top + height + containerHeight);
 
                 orientation = (Math.max(topOverflow, bottomOverflow) === topOverflow)
                                 ? 'top'
                                 : 'bottom';
             }
 
             if (orientation === 'top') {
                 styles.top += -containerHeight;
             } else {
                 styles.top += height;
             }
 
             // If container is not positioned to body,
             // correct its position using offset parent offset
             if(containerParent !== document.body) {
                 var opacity = $container.css('opacity'),
                     parentOffsetDiff;
 
                     if (!that.visible){
                         $container.css('opacity', 0).show();
                     }
 
                 parentOffsetDiff = $container.offsetParent().offset();
                 styles.top -= parentOffsetDiff.top;
                 styles.left -= parentOffsetDiff.left;
 
                 if (!that.visible){
                     $container.css('opacity', opacity).hide();
                 }
             }
 
             // -2px to account for suggestions border.
             if (that.options.width === 'auto') {
                 styles.width = (that.el.outerWidth() - 2) + 'px';
             }
 
             $container.css(styles);
         },
 
         enableKillerFn: function () {
             var that = this;
             $(document).on('click.autocomplete', that.killerFn);
         },
 
         disableKillerFn: function () {
             var that = this;
             $(document).off('click.autocomplete', that.killerFn);
         },
 
         killSuggestions: function () {
             var that = this;
             that.stopKillSuggestions();
             that.intervalId = window.setInterval(function () {
                 that.hide();
                 that.stopKillSuggestions();
             }, 50);
         },
 
         stopKillSuggestions: function () {
             window.clearInterval(this.intervalId);
         },
 
         isCursorAtEnd: function () {
             var that = this,
                 valLength = that.el.val().length,
                 selectionStart = that.element.selectionStart,
                 range;
 
             if (typeof selectionStart === 'number') {
                 return selectionStart === valLength;
             }
             if (document.selection) {
                 range = document.selection.createRange();
                 range.moveStart('character', -valLength);
                 return valLength === range.text.length;
             }
             return true;
         },
 
         onKeyPress: function (e) {
             var that = this;
 
             // If suggestions are hidden and user presses arrow down, display suggestions:
             if (!that.disabled && !that.visible && e.which === keys.DOWN && that.currentValue) {
                 that.suggest();
                 return;
             }
 
             if (that.disabled || !that.visible) {
                 return;
             }
 
             switch (e.which) {
                 case keys.ESC:
                     that.el.val(that.currentValue);
                     that.hide();
                     break;
                 case keys.RIGHT:
                     if (that.hint && that.options.onHint && that.isCursorAtEnd()) {
                         that.selectHint();
                         break;
                     }
                     return;
                 case keys.TAB:
                     if (that.hint && that.options.onHint) {
                         that.selectHint();
                         return;
                     }
                     // Fall through to RETURN
                 case keys.RETURN:
                     if (that.selectedIndex === -1) {
                         that.hide();
                         return;
                     }
                     that.select(that.selectedIndex);
                     if (e.which === keys.TAB && that.options.tabDisabled === false) {
                         return;
                     }
                     break;
                 case keys.UP:
                     that.moveUp();
                     break;
                 case keys.DOWN:
                     that.moveDown();
                     break;
                 default:
                     return;
             }
 
             // Cancel event if function did not return:
             e.stopImmediatePropagation();
             e.preventDefault();
         },
 
         onKeyUp: function (e) {
             var that = this;
 
             if (that.disabled) {
                 return;
             }
 
             switch (e.which) {
                 case keys.UP:
                 case keys.DOWN:
                     return;
             }
 
             clearInterval(that.onChangeInterval);
 
             if (that.currentValue !== that.el.val()) {
                 that.findBestHint();
                 if (that.options.deferRequestBy > 0) {
                     // Defer lookup in case when value changes very quickly:
                     that.onChangeInterval = setInterval(function () {
                         that.onValueChange();
                     }, that.options.deferRequestBy);
                 } else {
                     that.onValueChange();
                 }
             }
         },
 
         onValueChange: function () {
             var that = this,
                 options = that.options,
                 value = that.el.val(),
                 query = that.getQuery(value),
                 index;
 
             if (that.selection && that.currentValue !== query) {
                 that.selection = null;
                 (options.onInvalidateSelection || $.noop).call(that.element);
             }
 
             clearInterval(that.onChangeInterval);
             that.currentValue = value;
             that.selectedIndex = -1;
 
             // Check existing suggestion for the match before proceeding:
             if (options.triggerSelectOnValidInput) {
                 index = that.findSuggestionIndex(query);
                 if (index !== -1) {
                     that.select(index);
                     return;
                 }
             }
 
             if (query.length < options.minChars) {
                 that.hide();
             } else {
                 that.getSuggestions(query);
             }
         },
 
         findSuggestionIndex: function (query) {
             var that = this,
                 index = -1,
                 queryLowerCase = query.toLowerCase();
 
             $.each(that.suggestions, function (i, suggestion) {
                 if (suggestion.value.toLowerCase() === queryLowerCase) {
                     index = i;
                     return false;
                 }
             });
 
             return index;
         },
 
         getQuery: function (value) {
             var delimiter = this.options.delimiter,
                 parts;
 
             if (!delimiter) {
                 return value;
             }
             parts = value.split(delimiter);
             return $.trim(parts[parts.length - 1]);
         },
 
         getSuggestionsLocal: function (query) {
             var that = this,
                 options = that.options,
                 queryLowerCase = query.toLowerCase(),
                 data;
 
             // re-pack the data as it was comming from AJAX
             data = {
                 suggestions: data
             };
             return data;
         },
 
         getSuggestions: function (query) {
             var response,
                 that = this,
                 options = that.options,
                 serviceUrl = options.serviceUrl,
                 params,
                 cacheKey,
                 ajaxSettings;
 
             options.params[options.paramName] = query;
             params = options.ignoreParams ? null : options.params;
 
             if (that.isLocal) {
                 response = that.getSuggestionsLocal(query);
             } else {
                 if ($.isFunction(serviceUrl)) {
                     serviceUrl = serviceUrl.call(that.element, query);
                 }
 
                 var callParams = {};
                 //make an evaluated copy of params
                 $.each(params, function(index, value) {
                     if($.isFunction(value)){
                         callParams[index] = value();
                     }
                     else {
                         callParams[index] = value;
                     }
                 });
 
                 cacheKey = serviceUrl + '?' + $.param(callParams);
                 response = that.cachedResponse[cacheKey];
             }
 
             if (response && $.isArray(response.suggestions)) {
                 that.suggestions = response.suggestions;
                 that.suggest();
             } else if (!that.isBadQuery(query)) {
                 if (options.onSearchStart.call(that.element, params) === false) {
                     return;
                 }
                 if (that.currentRequest) {
                     that.currentRequest.abort();
                 }
 
                 ajaxSettings = {
                     url: serviceUrl,
                     data: params,
                     type: options.type,
                     dataType: options.dataType
                 };
 
                 $.extend(ajaxSettings, options.ajaxSettings);
 
-                that.currentRequest = $.ajax(ajaxSettings).done(function (data) {
+                that.currentRequest = $.ajax(ajaxSettings)
+                .done(function (data) {
                     var result;
                     that.currentRequest = null;
                     result = options.transformResult(data);
                     that.processResponse(result, query, cacheKey);
                     options.onSearchComplete.call(that.element, query, result.suggestions);
-                }).fail(function (jqXHR, textStatus, errorThrown) {
+                })
+                .fail(function (jqXHR, textStatus, errorThrown) {
                     options.onSearchError.call(that.element, query, jqXHR, textStatus, errorThrown);
                 });
             }
         },
 
         isBadQuery: function (q) {
             if (!this.options.preventBadQueries){
                 return false;
             }
 
             var badQueries = this.badQueries,
                 i = badQueries.length;
 
             while (i--) {
                 if (q.indexOf(badQueries[i]) === 0) {
                     return true;
                 }
             }
 
             return false;
         },
 
         hide: function () {
             var that = this;
             that.visible = false;
             that.selectedIndex = -1;
             $(that.suggestionsContainer).hide();
             that.signalHint(null);
         },
 
         suggest: function () {
 
             var that = this,
                 options = that.options,
                 formatResult = options.formatResult,
                 filterResult = options.lookupFilter,
                 value = that.getQuery(that.currentValue),
                 className = that.classes.suggestion,
                 classSelected = that.classes.selected,
                 container = $(that.suggestionsContainer),
                 noSuggestionsContainer = $(that.noSuggestionsContainer),
                 beforeRender = options.beforeRender,
                 limit = parseInt(that.options.lookupLimit, 10),
                 html = '',
                 index;
 
             // filter and limit given results
             var filtered_suggestions = $.grep(that.suggestions, function (suggestion) {
                 return filterResult(suggestion, value, value.toLowerCase(), that.element);
                 });
 
             if (limit && filtered_suggestions.length > limit) {
                 filtered_suggestions = filtered_suggestions.slice(0, limit);
             }
 
             if (filtered_suggestions.length === 0) {
                 this.options.showNoSuggestionNotice ? this.noSuggestions() : this.hide();
                 return;
             }
 
             if (options.triggerSelectOnValidInput) {
                 index = that.findSuggestionIndex(value);
                 if (index !== -1) {
                     that.select(index);
                     return;
                 }
             }
 
             // Build suggestions inner HTML:
             $.each(filtered_suggestions, function (i, suggestion) {
                 html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, Autocomplete.formatResult, that.element) + '</div>';
             });
             // set internal suggestion for INDEX pick to work correctly
             that.suggestions = filtered_suggestions;
             this.adjustContainerWidth();
 
             noSuggestionsContainer.detach();
             container.html(html);
 
             // Select first value by default:
             if (options.autoSelectFirst) {
                 that.selectedIndex = 0;
                 container.children().first().addClass(classSelected);
             }
 
             if ($.isFunction(beforeRender)) {
                 beforeRender.call(that.element, container);
             }
 
             that.fixPosition();
 
             container.show();
             that.visible = true;
 
             that.findBestHint();
         },
 
         noSuggestions: function() {
              var that = this,
                  container = $(that.suggestionsContainer),
                  noSuggestionsContainer = $(that.noSuggestionsContainer);
 
             this.adjustContainerWidth();
 
             // Some explicit steps. Be careful here as it easy to get
             // noSuggestionsContainer removed from DOM if not detached properly.
             noSuggestionsContainer.detach();
             container.empty(); // clean suggestions if any
             container.append(noSuggestionsContainer);
 
             that.fixPosition();
 
             container.show();
             that.visible = true;
         },
 
         adjustContainerWidth: function() {
             var that = this,
                 options = that.options,
                 width,
                 container = $(that.suggestionsContainer);
 
             // If width is auto, adjust width before displaying suggestions,
             // because if instance was created before input had width, it will be zero.
             // Also it adjusts if input width has changed.
             // -2px to account for suggestions border.
             if (options.width === 'auto') {
                 width = that.el.outerWidth() - 2;
                 container.width(width > 0 ? width : 300);
             }
         },
 
         findBestHint: function () {
             var that = this,
                 value = that.el.val().toLowerCase(),
                 bestMatch = null;
 
             if (!value) {
                 return;
             }
 
             $.each(that.suggestions, function (i, suggestion) {
                 var foundMatch = suggestion.value.toLowerCase().indexOf(value) === 0;
                 if (foundMatch) {
                     bestMatch = suggestion;
                 }
                 return !foundMatch;
             });
             that.signalHint(bestMatch);
         },
 
         signalHint: function (suggestion) {
             var hintValue = '',
                 that = this;
             if (suggestion) {
                 hintValue = that.currentValue + suggestion.value.substr(that.currentValue.length);
             }
             if (that.hintValue !== hintValue) {
                 that.hintValue = hintValue;
                 that.hint = suggestion;
                 (this.options.onHint || $.noop)(hintValue);
             }
         },
 
         verifySuggestionsFormat: function (suggestions) {
             // If suggestions is string array, convert them to supported format:
             if (suggestions.length && typeof suggestions[0] === 'string') {
                 return $.map(suggestions, function (value) {
                     return { value: value, data: null };
                 });
             }
 
             return suggestions;
         },
 
         validateOrientation: function(orientation, fallback) {
             orientation = $.trim(orientation || '').toLowerCase();
 
             if($.inArray(orientation, ['auto', 'bottom', 'top']) === -1){
                 orientation = fallback;
             }
 
             return orientation;
         },
 
         processResponse: function (result, originalQuery, cacheKey) {
             var that = this,
                 options = that.options;
 
             result.suggestions = that.verifySuggestionsFormat(result.suggestions);
 
             // Cache results if cache is not disabled:
             if (!options.noCache) {
                 that.cachedResponse[cacheKey] = result;
                 if (options.preventBadQueries && result.suggestions.length === 0) {
                     that.badQueries.push(originalQuery);
                 }
             }
 
             // Return if originalQuery is not matching current query:
             if (originalQuery !== that.getQuery(that.currentValue)) {
                 return;
             }
 
             that.suggestions = result.suggestions;
             that.suggest();
         },
 
         activate: function (index) {
             var that = this,
                 activeItem,
                 selected = that.classes.selected,
                 container = $(that.suggestionsContainer),
                 children = container.find('.' + that.classes.suggestion);
 
             container.find('.' + selected).removeClass(selected);
 
             that.selectedIndex = index;
 
             if (that.selectedIndex !== -1 && children.length > that.selectedIndex) {
                 activeItem = children.get(that.selectedIndex);
                 $(activeItem).addClass(selected);
                 return activeItem;
             }
 
             return null;
         },
 
         selectHint: function () {
             var that = this,
                 i = $.inArray(that.hint, that.suggestions);
             that.select(i);
         },
 
         select: function (index) {
             var that = this;
             that.hide();
             that.onSelect(index);
         },
 
         moveUp: function () {
             var that = this;
 
             if (that.selectedIndex === -1) {
                 return;
             }
 
             if (that.selectedIndex === 0) {
                 $(that.suggestionsContainer).children().first().removeClass(that.classes.selected);
                 that.selectedIndex = -1;
                 that.el.val(that.currentValue);
                 that.findBestHint();
                 return;
             }
 
             that.adjustScroll(that.selectedIndex - 1);
         },
 
         moveDown: function () {
             var that = this;
 
             if (that.selectedIndex === (that.suggestions.length - 1)) {
                 return;
             }
 
             that.adjustScroll(that.selectedIndex + 1);
         },
 
         adjustScroll: function (index) {
             var that = this,
                 activeItem = that.activate(index),
                 offsetTop,
                 upperBound,
                 lowerBound,
                 heightDelta = 25;
 
             if (!activeItem) {
                 return;
             }
 
             offsetTop = activeItem.offsetTop;
             upperBound = $(that.suggestionsContainer).scrollTop();
             lowerBound = upperBound + that.options.maxHeight - heightDelta;
 
             if (offsetTop < upperBound) {
                 $(that.suggestionsContainer).scrollTop(offsetTop);
             } else if (offsetTop > lowerBound) {
                 $(that.suggestionsContainer).scrollTop(offsetTop - that.options.maxHeight + heightDelta);
             }
 
             if (that.options.replaceOnArrowKey) {
               that.el.val(that.getValue(that.suggestions[index].value));
             }
             that.signalHint(null);
         },
 
         onSelect: function (index) {
             var that = this,
                 onSelectCallback = that.options.onSelect,
                 suggestion = that.suggestions[index];
 
             that.currentValue = that.getValue(suggestion.value);
             var prevElem = {'value': that.el.val(),
                             'caret': that.element.selectionStart}
 
             if (that.currentValue !== that.el.val()) {
                 that.el.val(that.currentValue);
             }
 
             that.signalHint(null);
             that.suggestions = [];
             that.selection = suggestion;
 
             if ($.isFunction(onSelectCallback)) {
                 onSelectCallback.call(this, that.element, suggestion, prevElem);
             }
         },
 
         getValue: function (value) {
             var that = this,
                 delimiter = that.options.delimiter,
                 currentValue,
                 parts;
 
             if (!delimiter) {
                 return value;
             }
 
             currentValue = that.currentValue;
             parts = currentValue.split(delimiter);
 
             if (parts.length === 1) {
                 return value;
             }
 
             return currentValue.substr(0, currentValue.length - parts[parts.length - 1].length) + value;
         },
 
         dispose: function () {
             var that = this;
             that.el.off('.autocomplete').removeData('autocomplete');
             that.disableKillerFn();
             $(window).off('resize.autocomplete', that.fixPositionCapture);
             $(that.suggestionsContainer).remove();
         }
     };
 
     // Create chainable jQuery plugin:
     $.fn.autocomplete = $.fn.devbridgeAutocomplete = function (options, args) {
         var dataKey = 'autocomplete';
         // If function invoked without argument return
         // instance of the first matched element:
         if (arguments.length === 0) {
             return this.first().data(dataKey);
         }
 
         return this.each(function () {
             var inputElement = $(this),
                 instance = inputElement.data(dataKey);
 
             if (typeof options === 'string') {
                 if (instance && typeof instance[options] === 'function') {
                     instance[options](args);
                 }
             } else {
                 // If instance already exists, destroy it:
                 if (instance && instance.dispose) {
                     instance.dispose();
                 }
                 instance = new Autocomplete(this, options);
                 inputElement.data(dataKey, instance);
             }
         });
     };
 }));

rhodecode/public/js/src/rhodecode/comments.js

@@ -1,955 +1,946 b''
 // # Copyright (C) 2010-2020 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 firefoxAnchorFix = function() {
   // hack to make anchor links behave properly on firefox, in our inline
   // comments generation when comments are injected firefox is misbehaving
   // when jumping to anchor links
   if (location.href.indexOf('#') > -1) {
     location.href += '';
   }
 };
 
 var linkifyComments = function(comments) {
   var firstCommentId = null;
   if (comments) {
       firstCommentId = $(comments[0]).data('comment-id');
   }
 
   if (firstCommentId){
     $('#inline-comments-counter').attr('href', '#comment-' + firstCommentId);
   }
 };
 
 var bindToggleButtons = function() {
   $('.comment-toggle').on('click', function() {
         $(this).parent().nextUntil('tr.line').toggle('inline-comments');
   });
 };
 
 
 
 var _submitAjaxPOST = function(url, postData, successHandler, failHandler) {
     failHandler = failHandler || function() {};
     postData = toQueryString(postData);
     var request = $.ajax({
         url: url,
         type: 'POST',
         data: postData,
         headers: {'X-PARTIAL-XHR': true}
     })
     .done(function (data) {
         successHandler(data);
     })
     .fail(function (data, textStatus, errorThrown) {
         failHandler(data, textStatus, errorThrown)
     });
     return request;
 };
 
 
 
 
 /* Comment form for main and inline comments */
 (function(mod) {
 
     if (typeof exports == "object" && typeof module == "object") {
         // CommonJS
         module.exports = mod();
     }
     else {
         // Plain browser env
         (this || window).CommentForm = mod();
     }
 
 })(function() {
     "use strict";
 
     function CommentForm(formElement, commitId, pullRequestId, lineNo, initAutocompleteActions, resolvesCommentId) {
         if (!(this instanceof CommentForm)) {
             return new CommentForm(formElement, commitId, pullRequestId, lineNo, initAutocompleteActions, resolvesCommentId);
         }
 
         // bind the element instance to our Form
         $(formElement).get(0).CommentForm = this;
 
         this.withLineNo = function(selector) {
             var lineNo = this.lineNo;
             if (lineNo === undefined) {
                 return selector
             } else {
                 return selector + '_' + lineNo;
             }
         };
 
         this.commitId = commitId;
         this.pullRequestId = pullRequestId;
         this.lineNo = lineNo;
         this.initAutocompleteActions = initAutocompleteActions;
 
         this.previewButton = this.withLineNo('#preview-btn');
         this.previewContainer = this.withLineNo('#preview-container');
 
         this.previewBoxSelector = this.withLineNo('#preview-box');
 
         this.editButton = this.withLineNo('#edit-btn');
         this.editContainer = this.withLineNo('#edit-container');
         this.cancelButton = this.withLineNo('#cancel-btn');
         this.commentType = this.withLineNo('#comment_type');
 
         this.resolvesId = null;
         this.resolvesActionId = null;
 
         this.closesPr = '#close_pull_request';
 
         this.cmBox = this.withLineNo('#text');
         this.cm = initCommentBoxCodeMirror(this, this.cmBox, this.initAutocompleteActions);
 
         this.statusChange = this.withLineNo('#change_status');
 
         this.submitForm = formElement;
         this.submitButton = $(this.submitForm).find('input[type="submit"]');
         this.submitButtonText = this.submitButton.val();
 
         this.previewUrl = pyroutes.url('repo_commit_comment_preview',
             {'repo_name': templateContext.repo_name,
              'commit_id': templateContext.commit_data.commit_id});
 
         if (resolvesCommentId){
             this.resolvesId = '#resolve_comment_{0}'.format(resolvesCommentId);
             this.resolvesActionId = '#resolve_comment_action_{0}'.format(resolvesCommentId);
             $(this.commentType).prop('disabled', true);
             $(this.commentType).addClass('disabled');
 
             // disable select
             setTimeout(function() {
                 $(self.statusChange).select2('readonly', true);
             }, 10);
 
             var resolvedInfo = (
                 '<li class="resolve-action">' +
                 '<input type="hidden" id="resolve_comment_{0}" name="resolve_comment_{0}" value="{0}">' +
                 '<button id="resolve_comment_action_{0}" class="resolve-text btn btn-sm" onclick="return Rhodecode.comments.submitResolution({0})">{1} #{0}</button>' +
                 '</li>'
             ).format(resolvesCommentId, _gettext('resolve comment'));
             $(resolvedInfo).insertAfter($(this.commentType).parent());
         }
 
         // based on commitId, or pullRequestId decide where do we submit
         // out data
         if (this.commitId){
             this.submitUrl = pyroutes.url('repo_commit_comment_create',
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId});
             this.selfUrl = pyroutes.url('repo_commit',
                 {'repo_name': templateContext.repo_name,
                  'commit_id': this.commitId});
 
         } else if (this.pullRequestId) {
             this.submitUrl = pyroutes.url('pullrequest_comment_create',
                 {'repo_name': templateContext.repo_name,
                  'pull_request_id': this.pullRequestId});
             this.selfUrl = pyroutes.url('pullrequest_show',
                 {'repo_name': templateContext.repo_name,
                  'pull_request_id': this.pullRequestId});
 
         } else {
             throw new Error(
                 'CommentForm requires pullRequestId, or commitId to be specified.')
         }
 
         // FUNCTIONS and helpers
         var self = this;
 
         this.isInline = function(){
             return this.lineNo && this.lineNo != 'general';
         };
 
         this.getCmInstance = function(){
             return this.cm
         };
 
         this.setPlaceholder = function(placeholder) {
             var cm = this.getCmInstance();
             if (cm){
                 cm.setOption('placeholder', placeholder);
             }
         };
 
         this.getCommentStatus = function() {
           return $(this.submitForm).find(this.statusChange).val();
         };
         this.getCommentType = function() {
           return $(this.submitForm).find(this.commentType).val();
         };
 
         this.getResolvesId = function() {
             return $(this.submitForm).find(this.resolvesId).val() || null;
         };
 
         this.getClosePr = function() {
             return $(this.submitForm).find(this.closesPr).val() || null;
         };
 
         this.markCommentResolved = function(resolvedCommentId){
             $('#comment-label-{0}'.format(resolvedCommentId)).find('.resolved').show();
             $('#comment-label-{0}'.format(resolvedCommentId)).find('.resolve').hide();
         };
 
         this.isAllowedToSubmit = function() {
           return !$(this.submitButton).prop('disabled');
         };
 
         this.initStatusChangeSelector = function(){
             var formatChangeStatus = function(state, escapeMarkup) {
                 var originalOption = state.element;
                 var tmpl = '<i class="icon-circle review-status-{0}"></i><span>{1}</span>'.format($(originalOption).data('status'), escapeMarkup(state.text));
                 return tmpl
             };
             var formatResult = function(result, container, query, escapeMarkup) {
                 return formatChangeStatus(result, escapeMarkup);
             };
 
             var formatSelection = function(data, container, escapeMarkup) {
                 return formatChangeStatus(data, escapeMarkup);
             };
 
             $(this.submitForm).find(this.statusChange).select2({
                 placeholder: _gettext('Status Review'),
                 formatResult: formatResult,
                 formatSelection: formatSelection,
                 containerCssClass: "drop-menu status_box_menu",
                 dropdownCssClass: "drop-menu-dropdown",
                 dropdownAutoWidth: true,
                 minimumResultsForSearch: -1
             });
             $(this.submitForm).find(this.statusChange).on('change', function() {
                 var status = self.getCommentStatus();
 
                 if (status && !self.isInline()) {
                     $(self.submitButton).prop('disabled', false);
                 }
 
                 var placeholderText = _gettext('Comment text will be set automatically based on currently selected status ({0}) ...').format(status);
                 self.setPlaceholder(placeholderText)
             })
         };
 
         // reset the comment form into it's original state
         this.resetCommentFormState = function(content) {
             content = content || '';
 
             $(this.editContainer).show();
             $(this.editButton).parent().addClass('active');
 
             $(this.previewContainer).hide();
             $(this.previewButton).parent().removeClass('active');
 
             this.setActionButtonsDisabled(true);
             self.cm.setValue(content);
             self.cm.setOption("readOnly", false);
 
             if (this.resolvesId) {
                 // destroy the resolve action
                 $(this.resolvesId).parent().remove();
             }
             // reset closingPR flag
             $('.close-pr-input').remove();
 
             $(this.statusChange).select2('readonly', false);
         };
 
         this.globalSubmitSuccessCallback = function(){
             // default behaviour is to call GLOBAL hook, if it's registered.
             if (window.commentFormGlobalSubmitSuccessCallback !== undefined){
                 commentFormGlobalSubmitSuccessCallback()
             }
         };
 
         this.submitAjaxPOST = function(url, postData, successHandler, failHandler) {
             return _submitAjaxPOST(url, postData, successHandler, failHandler);
         };
 
         // overwrite a submitHandler, we need to do it for inline comments
         this.setHandleFormSubmit = function(callback) {
             this.handleFormSubmit = callback;
         };
 
         // overwrite a submitSuccessHandler
         this.setGlobalSubmitSuccessCallback = function(callback) {
             this.globalSubmitSuccessCallback = callback;
         };
 
         // default handler for for submit for main comments
         this.handleFormSubmit = function() {
             var text = self.cm.getValue();
             var status = self.getCommentStatus();
             var commentType = self.getCommentType();
             var resolvesCommentId = self.getResolvesId();
             var closePullRequest = self.getClosePr();
 
             if (text === "" && !status) {
                 return;
             }
 
             var excludeCancelBtn = false;
             var submitEvent = true;
             self.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
             self.cm.setOption("readOnly", true);
 
             var postData = {
                 'text': text,
                 'changeset_status': status,
                 'comment_type': commentType,
                 'csrf_token': CSRF_TOKEN
             };
 
             if (resolvesCommentId) {
                 postData['resolves_comment_id'] = resolvesCommentId;
             }
 
             if (closePullRequest) {
                 postData['close_pull_request'] = true;
             }
 
             var submitSuccessCallback = function(o) {
                 // reload page if we change status for single commit.
                 if (status && self.commitId) {
                     location.reload(true);
                 } else {
                     $('#injected_page_comments').append(o.rendered_text);
                     self.resetCommentFormState();
                     timeagoActivate();
                     tooltipActivate();
 
                     // mark visually which comment was resolved
                     if (resolvesCommentId) {
                         self.markCommentResolved(resolvesCommentId);
                     }
                 }
 
                 // run global callback on submit
                 self.globalSubmitSuccessCallback();
 
             };
             var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while submitting comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
                 self.resetCommentFormState(text);
             };
             self.submitAjaxPOST(
                 self.submitUrl, postData, submitSuccessCallback, submitFailCallback);
         };
 
         this.previewSuccessCallback = function(o) {
             $(self.previewBoxSelector).html(o);
             $(self.previewBoxSelector).removeClass('unloaded');
 
             // swap buttons, making preview active
             $(self.previewButton).parent().addClass('active');
             $(self.editButton).parent().removeClass('active');
 
             // unlock buttons
             self.setActionButtonsDisabled(false);
         };
 
         this.setActionButtonsDisabled = function(state, excludeCancelBtn, submitEvent) {
             excludeCancelBtn = excludeCancelBtn || false;
             submitEvent = submitEvent || false;
 
             $(this.editButton).prop('disabled', state);
             $(this.previewButton).prop('disabled', state);
 
             if (!excludeCancelBtn) {
                 $(this.cancelButton).prop('disabled', state);
             }
 
             var submitState = state;
             if (!submitEvent && this.getCommentStatus() && !self.isInline()) {
                 // if the value of commit review status is set, we allow
                 // submit button, but only on Main form, isInline means inline
                 submitState = false
             }
 
             $(this.submitButton).prop('disabled', submitState);
             if (submitEvent) {
               $(this.submitButton).val(_gettext('Submitting...'));
             } else {
               $(this.submitButton).val(this.submitButtonText);
             }
 
         };
 
         // lock preview/edit/submit buttons on load, but exclude cancel button
         var excludeCancelBtn = true;
         this.setActionButtonsDisabled(true, excludeCancelBtn);
 
         // anonymous users don't have access to initialized CM instance
         if (this.cm !== undefined){
             this.cm.on('change', function(cMirror) {
                 if (cMirror.getValue() === "") {
                     self.setActionButtonsDisabled(true, excludeCancelBtn)
                 } else {
                     self.setActionButtonsDisabled(false, excludeCancelBtn)
                 }
             });
         }
 
         $(this.editButton).on('click', function(e) {
             e.preventDefault();
 
             $(self.previewButton).parent().removeClass('active');
             $(self.previewContainer).hide();
 
             $(self.editButton).parent().addClass('active');
             $(self.editContainer).show();
 
         });
 
         $(this.previewButton).on('click', function(e) {
             e.preventDefault();
             var text = self.cm.getValue();
 
             if (text === "") {
                 return;
             }
 
             var postData = {
                 'text': text,
                 'renderer': templateContext.visual.default_renderer,
                 'csrf_token': CSRF_TOKEN
             };
 
             // lock ALL buttons on preview
             self.setActionButtonsDisabled(true);
 
             $(self.previewBoxSelector).addClass('unloaded');
             $(self.previewBoxSelector).html(_gettext('Loading ...'));
 
             $(self.editContainer).hide();
             $(self.previewContainer).show();
 
             // by default we reset state of comment preserving the text
             var previewFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while preview of comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
 
                 self.resetCommentFormState(text)
             };
             self.submitAjaxPOST(
                 self.previewUrl, postData, self.previewSuccessCallback,
                 previewFailCallback);
 
             $(self.previewButton).parent().addClass('active');
             $(self.editButton).parent().removeClass('active');
         });
 
         $(this.submitForm).submit(function(e) {
             e.preventDefault();
             var allowedToSubmit = self.isAllowedToSubmit();
             if (!allowedToSubmit){
                return false;
             }
             self.handleFormSubmit();
         });
 
     }
 
     return CommentForm;
 });
 
 /* comments controller */
 var CommentsController = function() {
   var mainComment = '#text';
   var self = this;
 
   this.cancelComment = function(node) {
       var $node = $(node);
       var $td = $node.closest('td');
       $node.closest('.comment-inline-form').remove();
       return false;
   };
 
   this.getLineNumber = function(node) {
       var $node = $(node);
       var lineNo = $node.closest('td').attr('data-line-no');
       if (lineNo === undefined && $node.data('commentInline')){
           lineNo = $node.data('commentLineNo')
       }
 
       return lineNo
   };
 
   this.scrollToComment = function(node, offset, outdated) {
     if (offset === undefined) {
       offset = 0;
     }
     var outdated = outdated || false;
     var klass = outdated ? 'div.comment-outdated' : 'div.comment-current';
 
     if (!node) {
       node = $('.comment-selected');
       if (!node.length) {
         node = $('comment-current')
       }
     }
 
     $wrapper = $(node).closest('div.comment');
 
     // show hidden comment when referenced.
     if (!$wrapper.is(':visible')){
         $wrapper.show();
     }
 
     $comment = $(node).closest(klass);
     $comments = $(klass);
 
     $('.comment-selected').removeClass('comment-selected');
 
     var nextIdx = $(klass).index($comment) + offset;
     if (nextIdx >= $comments.length) {
       nextIdx = 0;
     }
     var $next = $(klass).eq(nextIdx);
 
     var $cb = $next.closest('.cb');
     $cb.removeClass('cb-collapsed');
 
     var $filediffCollapseState = $cb.closest('.filediff').prev();
     $filediffCollapseState.prop('checked', false);
     $next.addClass('comment-selected');
     scrollToElement($next);
     return false;
   };
 
   this.nextComment = function(node) {
     return self.scrollToComment(node, 1);
   };
 
   this.prevComment = function(node) {
     return self.scrollToComment(node, -1);
   };
 
   this.nextOutdatedComment = function(node) {
     return self.scrollToComment(node, 1, true);
   };
 
   this.prevOutdatedComment = function(node) {
     return self.scrollToComment(node, -1, true);
   };
 
   this._deleteComment = function(node) {
       var $node = $(node);
       var $td = $node.closest('td');
       var $comment = $node.closest('.comment');
       var comment_id = $comment.attr('data-comment-id');
       var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);
       var postData = {
         'csrf_token': CSRF_TOKEN
       };
 
       $comment.addClass('comment-deleting');
       $comment.hide('fast');
 
       var success = function(response) {
         $comment.remove();
         return false;
       };
       var failure = function(jqXHR, textStatus, errorThrown) {
         var prefix = "Error while deleting this comment.\n"
         var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
         ajaxErrorSwal(message);
 
         $comment.show('fast');
         $comment.removeClass('comment-deleting');
         return false;
       };
       ajaxPOST(url, postData, success, failure);
   }
 
   this.deleteComment = function(node) {
     var $comment = $(node).closest('.comment');
     var comment_id = $comment.attr('data-comment-id');
 
-    Swal.fire({
+    SwalNoAnimation.fire({
       title: 'Delete this comment?',
       icon: 'warning',
       showCancelButton: true,
-      confirmButtonColor: '#84a5d2',
-      cancelButtonColor: '#e85e4d',
       confirmButtonText: _gettext('Yes, delete comment #{0}!').format(comment_id),
-      showClass: {
-        popup: 'swal2-noanimation',
-        backdrop: 'swal2-noanimation'
-      },
-      hideClass: {
-        popup: '',
-        backdrop: ''
-      }
+
     }).then(function(result) {
       if (result.value) {
         self._deleteComment(node);
       }
     })
   };
 
   this.toggleWideMode = function (node) {
       if ($('#content').hasClass('wrapper')) {
           $('#content').removeClass("wrapper");
           $('#content').addClass("wide-mode-wrapper");
           $(node).addClass('btn-success');
           return true
       } else {
           $('#content').removeClass("wide-mode-wrapper");
           $('#content').addClass("wrapper");
           $(node).removeClass('btn-success');
           return false
       }
 
   };
 
   this.toggleComments = function(node, show) {
     var $filediff = $(node).closest('.filediff');
     if (show === true) {
       $filediff.removeClass('hide-comments');
     } else if (show === false) {
       $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
       $filediff.addClass('hide-comments');
     } else {
       $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
       $filediff.toggleClass('hide-comments');
     }
     return false;
   };
 
   this.toggleLineComments = function(node) {
     self.toggleComments(node, true);
     var $node = $(node);
     // mark outdated comments as visible before the toggle;
     $(node.closest('tr')).find('.comment-outdated').show();
     $node.closest('tr').toggleClass('hide-line-comments');
   };
 
   this.createCommentForm = function(formElement, lineno, placeholderText, initAutocompleteActions, resolvesCommentId){
       var pullRequestId = templateContext.pull_request_data.pull_request_id;
       var commitId = templateContext.commit_data.commit_id;
 
       var commentForm = new CommentForm(
           formElement, commitId, pullRequestId, lineno, initAutocompleteActions, resolvesCommentId);
       var cm = commentForm.getCmInstance();
 
       if (resolvesCommentId){
         var placeholderText = _gettext('Leave a resolution comment, or click resolve button to resolve TODO comment #{0}').format(resolvesCommentId);
       }
 
       setTimeout(function() {
           // callbacks
           if (cm !== undefined) {
               commentForm.setPlaceholder(placeholderText);
               if (commentForm.isInline()) {
                 cm.focus();
                 cm.refresh();
               }
           }
       }, 10);
 
       // trigger scrolldown to the resolve comment, since it might be away
       // from the clicked
       if (resolvesCommentId){
         var actionNode = $(commentForm.resolvesActionId).offset();
 
         setTimeout(function() {
             if (actionNode) {
                 $('body, html').animate({scrollTop: actionNode.top}, 10);
             }
         }, 100);
       }
 
         // add dropzone support
         var insertAttachmentText = function (cm, attachmentName, attachmentStoreUrl, isRendered) {
             var renderer = templateContext.visual.default_renderer;
             if (renderer == 'rst') {
                 var attachmentUrl = '`#{0} <{1}>`_'.format(attachmentName, attachmentStoreUrl);
                 if (isRendered){
                     attachmentUrl = '\n.. image:: {0}'.format(attachmentStoreUrl);
                 }
             } else if (renderer == 'markdown') {
                 var attachmentUrl = '[{0}]({1})'.format(attachmentName, attachmentStoreUrl);
                 if (isRendered){
                     attachmentUrl = '!' + attachmentUrl;
                 }
             } else {
                 var attachmentUrl = '{}'.format(attachmentStoreUrl);
             }
             cm.replaceRange(attachmentUrl+'\n', CodeMirror.Pos(cm.lastLine()));
 
             return false;
         };
 
         //see: https://www.dropzonejs.com/#configuration
         var storeUrl = pyroutes.url('repo_commit_comment_attachment_upload',
             {'repo_name': templateContext.repo_name,
                      'commit_id': templateContext.commit_data.commit_id})
 
         var previewTmpl = $(formElement).find('.comment-attachment-uploader-template').get(0);
         if (previewTmpl !== undefined){
             var selectLink = $(formElement).find('.pick-attachment').get(0);
             $(formElement).find('.comment-attachment-uploader').dropzone({
                 url: storeUrl,
                 headers: {"X-CSRF-Token": CSRF_TOKEN},
                 paramName: function () {
                     return "attachment"
                 }, // The name that will be used to transfer the file
                 clickable: selectLink,
                 parallelUploads: 1,
                 maxFiles: 10,
                 maxFilesize: templateContext.attachment_store.max_file_size_mb,
                 uploadMultiple: false,
                 autoProcessQueue: true, // if false queue will not be processed automatically.
                 createImageThumbnails: false,
                 previewTemplate: previewTmpl.innerHTML,
 
                 accept: function (file, done) {
                     done();
                 },
                 init: function () {
 
                     this.on("sending", function (file, xhr, formData) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-text').hide();
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').show();
                     });
 
                     this.on("success", function (file, response) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-text').show();
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').hide();
 
                         var isRendered = false;
                         var ext = file.name.split('.').pop();
                         var imageExts = templateContext.attachment_store.image_ext;
                         if (imageExts.indexOf(ext) !== -1){
                             isRendered = true;
                         }
 
                         insertAttachmentText(cm, file.name, response.repo_fqn_access_path, isRendered)
                     });
 
                     this.on("error", function (file, errorMessage, xhr) {
                         $(formElement).find('.comment-attachment-uploader').find('.dropzone-upload').hide();
 
                         var error = null;
 
                         if (xhr !== undefined){
                             var httpStatus = xhr.status + " " + xhr.statusText;
                             if (xhr !== undefined && xhr.status >= 500) {
                                 error = httpStatus;
                             }
                         }
 
                         if (error === null) {
                             error = errorMessage.error || errorMessage || httpStatus;
                         }
                         $(file.previewElement).find('.dz-error-message').html('ERROR: {0}'.format(error));
 
                     });
                 }
             });
         }
       return commentForm;
   };
 
   this.createGeneralComment = function (lineNo, placeholderText, resolvesCommentId) {
 
       var tmpl = $('#cb-comment-general-form-template').html();
       tmpl = tmpl.format(null, 'general');
       var $form = $(tmpl);
 
       var $formPlaceholder = $('#cb-comment-general-form-placeholder');
       var curForm = $formPlaceholder.find('form');
       if (curForm){
           curForm.remove();
       }
       $formPlaceholder.append($form);
 
       var _form = $($form[0]);
       var autocompleteActions = ['approve', 'reject', 'as_note', 'as_todo'];
       var commentForm = this.createCommentForm(
           _form, lineNo, placeholderText, autocompleteActions, resolvesCommentId);
       commentForm.initStatusChangeSelector();
 
       return commentForm;
   };
 
   this.createComment = function(node, resolutionComment) {
       var resolvesCommentId = resolutionComment || null;
       var $node = $(node);
       var $td = $node.closest('td');
       var $form = $td.find('.comment-inline-form');
 
       if (!$form.length) {
 
           var $filediff = $node.closest('.filediff');
           $filediff.removeClass('hide-comments');
           var f_path = $filediff.attr('data-f-path');
           var lineno = self.getLineNumber(node);
           // create a new HTML from template
           var tmpl = $('#cb-comment-inline-form-template').html();
           tmpl = tmpl.format(escapeHtml(f_path), lineno);
           $form = $(tmpl);
 
           var $comments = $td.find('.inline-comments');
           if (!$comments.length) {
             $comments = $(
               $('#cb-comments-inline-container-template').html());
             $td.append($comments);
           }
 
           $td.find('.cb-comment-add-button').before($form);
 
           var placeholderText = _gettext('Leave a comment on line {0}.').format(lineno);
           var _form = $($form[0]).find('form');
           var autocompleteActions = ['as_note', 'as_todo'];
           var commentForm = this.createCommentForm(
               _form, lineno, placeholderText, autocompleteActions, resolvesCommentId);
 
           $.Topic('/ui/plugins/code/comment_form_built').prepareOrPublish({
               form: _form,
               parent: $td[0],
               lineno: lineno,
               f_path: f_path}
           );
 
           // set a CUSTOM submit handler for inline comments.
           commentForm.setHandleFormSubmit(function(o) {
             var text = commentForm.cm.getValue();
             var commentType = commentForm.getCommentType();
             var resolvesCommentId = commentForm.getResolvesId();
 
             if (text === "") {
               return;
             }
 
             if (lineno === undefined) {
               alert('missing line !');
               return;
             }
             if (f_path === undefined) {
               alert('missing file path !');
               return;
             }
 
             var excludeCancelBtn = false;
             var submitEvent = true;
             commentForm.setActionButtonsDisabled(true, excludeCancelBtn, submitEvent);
             commentForm.cm.setOption("readOnly", true);
             var postData = {
                 'text': text,
                 'f_path': f_path,
                 'line': lineno,
                 'comment_type': commentType,
                 'csrf_token': CSRF_TOKEN
             };
             if (resolvesCommentId){
                 postData['resolves_comment_id'] = resolvesCommentId;
             }
 
             var submitSuccessCallback = function(json_data) {
               $form.remove();
               try {
                 var html = json_data.rendered_text;
                 var lineno = json_data.line_no;
                 var target_id = json_data.target_id;
 
                 $comments.find('.cb-comment-add-button').before(html);
 
                 //mark visually which comment was resolved
                 if (resolvesCommentId) {
                     commentForm.markCommentResolved(resolvesCommentId);
                 }
 
                 // run global callback on submit
                 commentForm.globalSubmitSuccessCallback();
 
               } catch (e) {
                 console.error(e);
               }
 
               // re trigger the linkification of next/prev navigation
               linkifyComments($('.inline-comment-injected'));
               timeagoActivate();
               tooltipActivate();
 
               if (window.updateSticky !== undefined) {
                   // potentially our comments change the active window size, so we
                   // notify sticky elements
                   updateSticky()
               }
 
               commentForm.setActionButtonsDisabled(false);
 
             };
             var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                 var prefix = "Error while submitting comment.\n"
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
                 ajaxErrorSwal(message);
                 commentForm.resetCommentFormState(text)
             };
             commentForm.submitAjaxPOST(
                 commentForm.submitUrl, postData, submitSuccessCallback, submitFailCallback);
           });
       }
 
       $form.addClass('comment-inline-form-open');
   };
 
   this.createResolutionComment = function(commentId){
     // hide the trigger text
     $('#resolve-comment-{0}'.format(commentId)).hide();
 
     var comment = $('#comment-'+commentId);
     var commentData = comment.data();
     if (commentData.commentInline) {
         this.createComment(comment, commentId)
     } else {
         Rhodecode.comments.createGeneralComment('general', "$placeholder", commentId)
     }
 
     return false;
   };
 
   this.submitResolution = function(commentId){
     var form = $('#resolve_comment_{0}'.format(commentId)).closest('form');
     var commentForm = form.get(0).CommentForm;
 
     var cm = commentForm.getCmInstance();
     var renderer = templateContext.visual.default_renderer;
     if (renderer == 'rst'){
         var commentUrl = '`#{0} <{1}#comment-{0}>`_'.format(commentId, commentForm.selfUrl);
     } else if (renderer == 'markdown') {
         var commentUrl = '[#{0}]({1}#comment-{0})'.format(commentId, commentForm.selfUrl);
     } else {
         var commentUrl = '{1}#comment-{0}'.format(commentId, commentForm.selfUrl);
     }
 
     cm.setValue(_gettext('TODO from comment {0} was fixed.').format(commentUrl));
     form.submit();
     return false;
   };
 
 };

rhodecode/public/js/src/rhodecode/users.js

@@ -1,117 +1,97 b''
 // # Copyright (C) 2010-2020 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 generatePassword = function(length) {
     if (length === undefined){
         length = 8
     }
 
     var charset = "abcdefghijklnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
     var gen_pass = "";
 
     for (var i = 0, n = charset.length; i < length; ++i) {
         gen_pass += charset.charAt(Math.floor(Math.random() * n));
     }
     return gen_pass;
 };
 
 /**
  * User autocomplete
  */
 var UsersAutoComplete = function(input_id, user_id) {
   $('#'+input_id).autocomplete({
     serviceUrl: pyroutes.url('user_autocomplete_data'),
     minChars:2,
     maxHeight:400,
     deferRequestBy: 300, //miliseconds
     showNoSuggestionNotice: true,
     tabDisabled: true,
     autoSelectFirst: true,
     params: { user_id: user_id },
     formatResult: autocompleteFormatResult,
     lookupFilter: autocompleteFilterResult
   });
 };
 
 var _showAuthToken = function (authTokenId, showUrl) {
 
-    Swal.fire({
+    SwalNoAnimation.fire({
         title: _gettext('Show this authentication token?'),
         showCancelButton: true,
-        confirmButtonColor: '#84a5d2',
-        cancelButtonColor: '#e85e4d',
-        showClass: {
-            popup: 'swal2-noanimation',
-            backdrop: 'swal2-noanimation'
-        },
-        hideClass: {
-            popup: '',
-            backdrop: ''
-        },
         confirmButtonText: _gettext('Show'),
         showLoaderOnConfirm: true,
         allowOutsideClick: function () {
             !Swal.isLoading()
         },
         preConfirm: function () {
 
             var postData = {
                 'auth_token_id': authTokenId,
                 'csrf_token': CSRF_TOKEN
             };
             return new Promise(function (resolve, reject) {
                 $.ajax({
                     type: 'POST',
                     data: postData,
                     url: showUrl,
                     headers: {'X-PARTIAL-XHR': true}
                 })
                 .done(function (data) {
                     resolve(data);
                 })
                 .fail(function (jqXHR, textStatus, errorThrown) {
                     //reject("Failed to fetch Authentication Token")
                     var message = formatErrorMessage(jqXHR, textStatus, errorThrown);
                     ajaxErrorSwal(message);
                 });
             })
         }
 
     })
     .then(function (result) {
         if (result.value) {
             var tmpl = ('<code>{0}</code>' +
                        '<i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="{1}" title="Copy Token"></i>');
 
-            Swal.fire({
+            SwalNoAnimation.fire({
                 title: _gettext('Authentication Token'),
                 html: tmpl.format(result.value.auth_token, result.value.auth_token),
-                confirmButtonColor: '#84a5d2',
-                cancelButtonColor: '#e85e4d',
-                showClass: {
-                    popup: 'swal2-noanimation',
-                    backdrop: 'swal2-noanimation'
-                },
-                hideClass: {
-                    popup: '',
-                    backdrop: ''
-                },
             })
         }
     })
 }
  No newline at end of file

rhodecode/public/js/src/rhodecode/utils/ajax.js

@@ -1,159 +1,175 b''
 // # Copyright (C) 2010-2020 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/
 
 /**
 * turns objects into GET query string
 */
 var toQueryString = function(o) {
   if(typeof o === 'string') {
     return o;
   }
   if(typeof o !== 'object') {
     return false;
   }
   var _p, _qs = [];
   for(_p in o) {
     _qs.push(encodeURIComponent(_p) + '=' + encodeURIComponent(o[_p]));
   }
   return _qs.join('&');
 };
 
 /**
 * ajax call wrappers
 */
 
 var ajaxGET = function (url, success, failure) {
     var sUrl = url;
     var request = $.ajax({
         url: sUrl,
         headers: {'X-PARTIAL-XHR': true}
         })
         .done(function (data) {
             success(data);
         })
         .fail(function (jqXHR, textStatus, errorThrown) {
             if (failure) {
                 failure(jqXHR, textStatus, errorThrown);
             } else {
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown);
                 ajaxErrorSwal(message);
             }
         });
     return request;
 };
 
 var ajaxPOST = function (url, postData, success, failure) {
     var sUrl = url;
     var postData = toQueryString(postData);
     var request = $.ajax({
         type: 'POST',
         url: sUrl,
         data: postData,
         headers: {'X-PARTIAL-XHR': true}
         })
         .done(function (data) {
             success(data);
         })
         .fail(function (jqXHR, textStatus, errorThrown) {
             if (failure) {
                 failure(jqXHR, textStatus, errorThrown);
             } else {
                 var message = formatErrorMessage(jqXHR, textStatus, errorThrown);
                 ajaxErrorSwal(message);
             }
         });
     return request;
 };
 
+
+SwalNoAnimation = Swal.mixin({
+    confirmButtonColor: '#84a5d2',
+    cancelButtonColor: '#e85e4d',
+    showClass: {
+        popup: 'swal2-noanimation',
+        backdrop: 'swal2-noanimation'
+    },
+    hideClass: {
+        popup: '',
+        backdrop: ''
+    },
+})
+
+
+/* Example usage:
+*
+  error: function(jqXHR, textStatus, errorThrown) {
+    var prefix = "Error while fetching entries.\n"
+    var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
+    ajaxErrorSwal(message);
+   }
+*
+* */
 function formatErrorMessage(jqXHR, textStatus, errorThrown, prefix) {
     if(typeof prefix === "undefined") {
         prefix = ''
     }
 
     if (jqXHR.status === 0) {
         return (prefix + 'Not connected.\nPlease verify your network connection.');
     } else if (jqXHR.status == 401) {
         return (prefix + 'Unauthorized access. [401]');
     } else if (jqXHR.status == 404) {
         return (prefix + 'The requested page not found. [404]');
     } else if (jqXHR.status == 500) {
         return (prefix + 'Internal Server Error [500].');
     } else if (jqXHR.status == 503) {
         return (prefix + 'Service unavailable [503].');
     } else if (errorThrown === 'parsererror') {
         return (prefix + 'Requested JSON parse failed.');
     } else if (errorThrown === 'timeout') {
         return (prefix + 'Time out error.');
     } else if (errorThrown === 'abort') {
         return (prefix + 'Ajax request aborted.');
     } else {
         return (prefix + 'Uncaught Error.\n' + jqXHR.responseText);
     }
 }
 
 function ajaxErrorSwal(message) {
-    Swal.fire({
+    SwalNoAnimation.fire({
         icon: 'error',
         title: _gettext('Ajax Request Error'),
         html: '<span style="white-space: pre-line">{0}</span>'.format(message),
         showClass: {
             popup: 'swal2-noanimation',
             backdrop: 'swal2-noanimation'
         },
         hideClass: {
             popup: '',
             backdrop: ''
         }
     })
 }
 
 /*
 * use in onclick attributes e.g
 * onclick="submitConfirm(event, this, _gettext('Confirm to delete '), _gettext('Confirm Delete'), 'what we delete')">
 * */
 function submitConfirm(event, self, question, confirmText, htmlText) {
     if (htmlText === "undefined") {
         htmlText = null;
     }
     if (confirmText === "undefined") {
         confirmText = _gettext('Delete')
     }
     event.preventDefault();
 
-    Swal.fire({
+    SwalNoAnimation.fire({
       title: question,
       icon: 'warning',
       html: htmlText,
-      showClass: {
-        popup: 'swal2-noanimation',
-        backdrop: 'swal2-noanimation'
-      },
-      hideClass: {
-        popup: '',
-        backdrop: ''
-      },
+
       showCancelButton: true,
-      confirmButtonColor: '#84a5d2',
-      cancelButtonColor: '#e85e4d',
+
       confirmButtonText: confirmText
     }).then(function(result) {
       if (result.value) {
           $(self).closest("form").submit();
       }
     })
 }
  No newline at end of file

rhodecode/templates/base/base.mako

@@ -1,1195 +1,1201 b''
 ## -*- coding: utf-8 -*-
 
 <%!
     ## base64 filter e.g ${ example | base64 }
     def base64(text):
         import base64
         from rhodecode.lib.helpers import safe_str
         return base64.encodestring(safe_str(text))
 %>
 
 <%inherit file="root.mako"/>
 
 <%include file="/ejs_templates/templates.html"/>
 
 <div class="outerwrapper">
   <!-- HEADER -->
   <div class="header">
       <div id="header-inner" class="wrapper">
           <div id="logo">
               <div class="logo-wrapper">
                   <a href="${h.route_path('home')}"><img src="${h.asset('images/rhodecode-logo-white-60x60.png')}" alt="RhodeCode"/></a>
               </div>
               % if c.rhodecode_name:
                <div class="branding">
                    <a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
                </div>
               % endif
           </div>
           <!-- MENU BAR NAV -->
           ${self.menu_bar_nav()}
           <!-- END MENU BAR NAV -->
       </div>
   </div>
   ${self.menu_bar_subnav()}
   <!-- END HEADER -->
 
   <!-- CONTENT -->
   <div id="content" class="wrapper">
 
       <rhodecode-toast id="notifications"></rhodecode-toast>
 
       <div class="main">
           ${next.main()}
       </div>
   </div>
   <!-- END CONTENT -->
 
 </div>
 <!-- FOOTER -->
 <div id="footer">
    <div id="footer-inner" class="title wrapper">
        <div>
            <p class="footer-link-right">
                % if c.visual.show_version:
                    RhodeCode Enterprise ${c.rhodecode_version} ${c.rhodecode_edition}
                % endif
                &copy; 2010-${h.datetime.today().year}, <a href="${h.route_url('rhodecode_official')}" target="_blank">RhodeCode GmbH</a>. All rights reserved.
                % if c.visual.rhodecode_support_url:
                   <a href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a>
                % endif
            </p>
            <% sid = 'block' if request.GET.get('showrcid') else 'none' %>
            <p class="server-instance" style="display:${sid}">
                ## display hidden instance ID if specially defined
                % if c.rhodecode_instanceid:
                    ${_('RhodeCode instance id: {}').format(c.rhodecode_instanceid)}
                % endif
            </p>
        </div>
    </div>
 </div>
 
 <!-- END FOOTER -->
 
 ### MAKO DEFS ###
 
 <%def name="menu_bar_subnav()">
 </%def>
 
 <%def name="breadcrumbs(class_='breadcrumbs')">
     <div class="${class_}">
     ${self.breadcrumbs_links()}
     </div>
 </%def>
 
 <%def name="admin_menu(active=None)">
 
   <div id="context-bar">
     <div class="wrapper">
       <div class="title">
         <div class="title-content">
           <div class="title-main">
             % if c.is_super_admin:
                 ${_('Super-admin Panel')}
             % else:
                 ${_('Delegated Admin Panel')}
             % endif
           </div>
         </div>
       </div>
 
     <ul id="context-pages" class="navigation horizontal-list">
 
         ## super-admin case
         % if c.is_super_admin:
           <li class="${h.is_active('audit_logs', active)}"><a href="${h.route_path('admin_audit_logs')}">${_('Admin audit logs')}</a></li>
           <li class="${h.is_active('repositories', active)}"><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
           <li class="${h.is_active('repository_groups', active)}"><a href="${h.route_path('repo_groups')}">${_('Repository groups')}</a></li>
           <li class="${h.is_active('users', active)}"><a href="${h.route_path('users')}">${_('Users')}</a></li>
           <li class="${h.is_active('user_groups', active)}"><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
           <li class="${h.is_active('permissions', active)}"><a href="${h.route_path('admin_permissions_application')}">${_('Permissions')}</a></li>
           <li class="${h.is_active('authentication', active)}"><a href="${h.route_path('auth_home', traverse='')}">${_('Authentication')}</a></li>
           <li class="${h.is_active('integrations', active)}"><a href="${h.route_path('global_integrations_home')}">${_('Integrations')}</a></li>
           <li class="${h.is_active('defaults', active)}"><a href="${h.route_path('admin_defaults_repositories')}">${_('Defaults')}</a></li>
           <li class="${h.is_active('settings', active)}"><a href="${h.route_path('admin_settings')}">${_('Settings')}</a></li>
 
         ## delegated admin
         % elif c.is_delegated_admin:
            <%
            repositories=c.auth_user.repositories_admin or c.can_create_repo
            repository_groups=c.auth_user.repository_groups_admin or c.can_create_repo_group
            user_groups=c.auth_user.user_groups_admin or c.can_create_user_group
            %>
 
            %if repositories:
               <li class="${h.is_active('repositories', active)} local-admin-repos"><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
            %endif
            %if repository_groups:
               <li class="${h.is_active('repository_groups', active)} local-admin-repo-groups"><a href="${h.route_path('repo_groups')}">${_('Repository groups')}</a></li>
            %endif
            %if user_groups:
               <li class="${h.is_active('user_groups', active)} local-admin-user-groups"><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
            %endif
         % endif
     </ul>
 
     </div>
     <div class="clear"></div>
   </div>
 </%def>
 
 <%def name="dt_info_panel(elements)">
     <dl class="dl-horizontal">
     %for dt, dd, title, show_items in elements:
       <dt>${dt}:</dt>
       <dd title="${h.tooltip(title)}">
       %if callable(dd):
           ## allow lazy evaluation of elements
           ${dd()}
       %else:
           ${dd}
       %endif
       %if show_items:
           <span class="btn-collapse" data-toggle="item-${h.md5_safe(dt)[:6]}-details">${_('Show More')} </span>
       %endif
       </dd>
 
       %if show_items:
           <div class="collapsable-content" data-toggle="item-${h.md5_safe(dt)[:6]}-details" style="display: none">
           %for item in show_items:
               <dt></dt>
               <dd>${item}</dd>
           %endfor
           </div>
       %endif
 
     %endfor
     </dl>
 </%def>
 
 <%def name="tr_info_entry(element)">
     <% key, val, title, show_items = element %>
 
     <tr>
         <td style="vertical-align: top">${key}</td>
         <td title="${h.tooltip(title)}">
           %if callable(val):
               ## allow lazy evaluation of elements
               ${val()}
           %else:
               ${val}
           %endif
           %if show_items:
               <div class="collapsable-content" data-toggle="item-${h.md5_safe(val)[:6]}-details" style="display: none">
               % for item in show_items:
                   <dt></dt>
                   <dd>${item}</dd>
               % endfor
               </div>
           %endif
         </td>
         <td style="vertical-align: top">
           %if show_items:
               <span class="btn-collapse" data-toggle="item-${h.md5_safe(val)[:6]}-details">${_('Show More')} </span>
           %endif
         </td>
     </tr>
 
 </%def>
 
 <%def name="gravatar(email, size=16, tooltip=False, tooltip_alt=None, user=None, extra_class=None)">
   <%
     if size > 16:
         gravatar_class = ['gravatar','gravatar-large']
     else:
         gravatar_class = ['gravatar']
 
     data_hovercard_url = ''
     data_hovercard_alt = tooltip_alt.replace('<', '&lt;').replace('>', '&gt;') if tooltip_alt else ''
 
     if tooltip:
         gravatar_class += ['tooltip-hovercard']
     if extra_class:
         gravatar_class += extra_class
     if tooltip and user:
         if user.username == h.DEFAULT_USER:
             gravatar_class.pop(-1)
         else:
             data_hovercard_url = request.route_path('hovercard_user', user_id=getattr(user, 'user_id', ''))
     gravatar_class = ' '.join(gravatar_class)
 
   %>
   <%doc>
     TODO: johbo: For now we serve double size images to make it smooth
     for retina. This is how it worked until now. Should be replaced
     with a better solution at some point.
   </%doc>
 
   <img class="${gravatar_class}" height="${size}" width="${size}" data-hovercard-url="${data_hovercard_url}" data-hovercard-alt="${data_hovercard_alt}" src="${h.gravatar_url(email, size * 2)}" />
 </%def>
 
 
 <%def name="gravatar_with_user(contact, size=16, show_disabled=False, tooltip=False, _class='rc-user')">
   <%
       email = h.email_or_none(contact)
       rc_user = h.discover_user(contact)
   %>
 
   <div class="${_class}">
     ${self.gravatar(email, size, tooltip=tooltip, tooltip_alt=contact, user=rc_user)}
     <span class="${('user user-disabled' if show_disabled else 'user')}"> ${h.link_to_user(rc_user or contact)}</span>
   </div>
 </%def>
 
 
 <%def name="user_group_icon(user_group=None, size=16, tooltip=False)">
   <%
     if (size > 16):
         gravatar_class = 'icon-user-group-alt'
     else:
         gravatar_class = 'icon-user-group-alt'
 
     if tooltip:
         gravatar_class += ' tooltip-hovercard'
 
     data_hovercard_url = request.route_path('hovercard_user_group', user_group_id=user_group.users_group_id)
   %>
   <%doc>
     TODO: johbo: For now we serve double size images to make it smooth
     for retina. This is how it worked until now. Should be replaced
     with a better solution at some point.
   </%doc>
 
   <i style="font-size: ${size}px" class="${gravatar_class} x-icon-size-${size}" data-hovercard-url="${data_hovercard_url}"></i>
 </%def>
 
 <%def name="repo_page_title(repo_instance)">
 <div class="title-content repo-title">
 
     <div class="title-main">
         ## SVN/HG/GIT icons
         %if h.is_hg(repo_instance):
             <i class="icon-hg"></i>
         %endif
         %if h.is_git(repo_instance):
             <i class="icon-git"></i>
         %endif
         %if h.is_svn(repo_instance):
             <i class="icon-svn"></i>
         %endif
 
         ## public/private
         %if repo_instance.private:
             <i class="icon-repo-private"></i>
         %else:
             <i class="icon-repo-public"></i>
         %endif
 
         ## repo name with group name
         ${h.breadcrumb_repo_link(repo_instance)}
 
         ## Context Actions
         <div class="pull-right">
             %if c.rhodecode_user.username != h.DEFAULT_USER:
                 <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_uid, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
 
                 <a href="#WatchRepo" onclick="toggleFollowingRepo(this, templateContext.repo_id); return false" title="${_('Watch this Repository and actions on it in your personalized journal')}" class="btn btn-sm ${('watching' if c.repository_is_user_following else '')}">
                     % if c.repository_is_user_following:
                         <i class="icon-eye-off"></i>${_('Unwatch')}
                     % else:
                         <i class="icon-eye"></i>${_('Watch')}
                     % endif
 
                 </a>
             %else:
                 <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_uid)}" title="${_('RSS Feed')}" class="btn btn-sm"><i class="icon-rss-sign"></i>RSS</a>
             %endif
         </div>
 
     </div>
 
     ## FORKED
     %if repo_instance.fork:
     <p class="discreet">
         <i class="icon-code-fork"></i> ${_('Fork of')}
         ${h.link_to_if(c.has_origin_repo_read_perm,repo_instance.fork.repo_name, h.route_path('repo_summary', repo_name=repo_instance.fork.repo_name))}
     </p>
     %endif
 
     ## IMPORTED FROM REMOTE
     %if repo_instance.clone_uri:
     <p class="discreet">
        <i class="icon-code-fork"></i> ${_('Clone from')}
        <a href="${h.safe_str(h.hide_credentials(repo_instance.clone_uri))}">${h.hide_credentials(repo_instance.clone_uri)}</a>
     </p>
     %endif
 
     ## LOCKING STATUS
      %if repo_instance.locked[0]:
        <p class="locking_locked discreet">
            <i class="icon-repo-lock"></i>
            ${_('Repository locked by %(user)s') % {'user': h.person_by_id(repo_instance.locked[0])}}
        </p>
      %elif repo_instance.enable_locking:
          <p class="locking_unlocked discreet">
              <i class="icon-repo-unlock"></i>
              ${_('Repository not locked. Pull repository to lock it.')}
          </p>
      %endif
 
 </div>
 </%def>
 
 <%def name="repo_menu(active=None)">
     <%
     ## determine if we have "any" option available
     can_lock = h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name) and c.rhodecode_db_repo.enable_locking
     has_actions = can_lock
 
     %>
     % if c.rhodecode_db_repo.archived:
     <div class="alert alert-warning text-center">
         <strong>${_('This repository has been archived. It is now read-only.')}</strong>
     </div>
     % endif
 
   <!--- REPO CONTEXT BAR -->
   <div id="context-bar">
     <div class="wrapper">
 
       <div class="title">
           ${self.repo_page_title(c.rhodecode_db_repo)}
       </div>
 
       <ul id="context-pages" class="navigation horizontal-list">
         <li class="${h.is_active('summary', active)}"><a class="menulink" href="${h.route_path('repo_summary', repo_name=c.repo_name)}"><div class="menulabel">${_('Summary')}</div></a></li>
         <li class="${h.is_active('commits', active)}"><a class="menulink" href="${h.route_path('repo_commits', repo_name=c.repo_name)}"><div class="menulabel">${_('Commits')}</div></a></li>
         <li class="${h.is_active('files', active)}"><a class="menulink" href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.rhodecode_db_repo.landing_rev[1], f_path='')}"><div class="menulabel">${_('Files')}</div></a></li>
         <li class="${h.is_active('compare', active)}"><a class="menulink" href="${h.route_path('repo_compare_select',repo_name=c.repo_name)}"><div class="menulabel">${_('Compare')}</div></a></li>
 
         ## TODO: anderson: ideally it would have a function on the scm_instance "enable_pullrequest() and enable_fork()"
         %if c.rhodecode_db_repo.repo_type in ['git','hg']:
           <li class="${h.is_active('showpullrequest', active)}">
             <a class="menulink" href="${h.route_path('pullrequest_show_all', repo_name=c.repo_name)}" title="${h.tooltip(_('Show Pull Requests for %s') % c.repo_name)}">
               <div class="menulabel">
                   ${_('Pull Requests')} <span class="menulink-counter">${c.repository_pull_requests}</span>
               </div>
             </a>
           </li>
         %endif
 
         <li class="${h.is_active('artifacts', active)}">
             <a class="menulink" href="${h.route_path('repo_artifacts_list',repo_name=c.repo_name)}">
                 <div class="menulabel">
                     ${_('Artifacts')}  <span class="menulink-counter">${c.repository_artifacts}</span>
                 </div>
             </a>
         </li>
 
         %if h.HasRepoPermissionAll('repository.admin')(c.repo_name):
             <li class="${h.is_active('settings', active)}"><a class="menulink" href="${h.route_path('edit_repo',repo_name=c.repo_name)}"><div class="menulabel">${_('Repository Settings')}</div></a></li>
         %endif
 
         <li class="${h.is_active('options', active)}">
           % if has_actions:
             <a class="menulink dropdown">
               <div class="menulabel">${_('Options')}<div class="show_more"></div></div>
             </a>
             <ul class="submenu">
                 %if can_lock:
                     %if c.rhodecode_db_repo.locked[0]:
                       <li><a class="locking_del" href="${h.route_path('repo_edit_toggle_locking',repo_name=c.repo_name)}">${_('Unlock Repository')}</a></li>
                     %else:
                       <li><a class="locking_add" href="${h.route_path('repo_edit_toggle_locking',repo_name=c.repo_name)}">${_('Lock Repository')}</a></li>
                     %endif
                 %endif
             </ul>
           % endif
         </li>
 
       </ul>
     </div>
     <div class="clear"></div>
   </div>
 
   <!--- REPO END CONTEXT BAR -->
 
 </%def>
 
 <%def name="repo_group_page_title(repo_group_instance)">
 <div class="title-content">
     <div class="title-main">
         ## Repository Group icon
         <i class="icon-repo-group"></i>
 
         ## repo name with group name
         ${h.breadcrumb_repo_group_link(repo_group_instance)}
     </div>
 
     <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
     <div class="repo-group-desc discreet">
     ${dt.repo_group_desc(repo_group_instance.description_safe, repo_group_instance.personal, c.visual.stylify_metatags)}
     </div>
 
 </div>
 </%def>
 
 
 <%def name="repo_group_menu(active=None)">
     <%
     gr_name = c.repo_group.group_name if c.repo_group else None
     # create repositories with write permission on group is set to true
     group_admin = h.HasRepoGroupPermissionAny('group.admin')(gr_name, 'group admin index page')
 
     %>
 
 
   <!--- REPO GROUP CONTEXT BAR -->
   <div id="context-bar">
     <div class="wrapper">
       <div class="title">
           ${self.repo_group_page_title(c.repo_group)}
       </div>
 
       <ul id="context-pages" class="navigation horizontal-list">
         <li class="${h.is_active('home', active)}">
             <a class="menulink" href="${h.route_path('repo_group_home', repo_group_name=c.repo_group.group_name)}"><div class="menulabel">${_('Group Home')}</div></a>
         </li>
         % if c.is_super_admin or group_admin:
             <li class="${h.is_active('settings', active)}">
                 <a class="menulink" href="${h.route_path('edit_repo_group',repo_group_name=c.repo_group.group_name)}" title="${_('You have admin right to this group, and can edit it')}"><div class="menulabel">${_('Group Settings')}</div></a>
             </li>
         % endif
 
       </ul>
     </div>
     <div class="clear"></div>
   </div>
 
   <!--- REPO GROUP CONTEXT BAR -->
 
 </%def>
 
 
 <%def name="usermenu(active=False)">
     <%
     not_anonymous = c.rhodecode_user.username != h.DEFAULT_USER
 
     gr_name = c.repo_group.group_name if (hasattr(c, 'repo_group') and c.repo_group) else None
     # create repositories with write permission on group is set to true
 
     can_fork = c.is_super_admin or h.HasPermissionAny('hg.fork.repository')()
     create_on_write = h.HasPermissionAny('hg.create.write_on_repogroup.true')()
     group_write = h.HasRepoGroupPermissionAny('group.write')(gr_name, 'can write into group index page')
     group_admin = h.HasRepoGroupPermissionAny('group.admin')(gr_name, 'group admin index page')
 
     can_create_repos = c.is_super_admin or c.can_create_repo
     can_create_repo_groups = c.is_super_admin or c.can_create_repo_group
 
     can_create_repos_in_group = c.is_super_admin or group_admin or (group_write and create_on_write)
     can_create_repo_groups_in_group = c.is_super_admin or group_admin
     %>
 
     % if not_anonymous:
     <%
     default_target_group = dict()
     if c.rhodecode_user.personal_repo_group:
         default_target_group = dict(parent_group=c.rhodecode_user.personal_repo_group.group_id)
     %>
 
     ## create action
     <li>
        <a href="#create-actions" onclick="return false;" class="menulink childs">
         <i class="tooltip icon-plus-circled" title="${_('Create')}"></i>
        </a>
 
        <div class="action-menu submenu">
 
         <ol>
             ## scope of within a repository
             % if hasattr(c, 'rhodecode_db_repo') and c.rhodecode_db_repo:
                 <li class="submenu-title">${_('This Repository')}</li>
                 <li>
                     <a href="${h.route_path('pullrequest_new',repo_name=c.repo_name)}">${_('Create Pull Request')}</a>
                 </li>
                 % if can_fork:
                 <li>
                     <a href="${h.route_path('repo_fork_new',repo_name=c.repo_name,_query=default_target_group)}">${_('Fork this repository')}</a>
                 </li>
                 % endif
             % endif
 
             ## scope of within repository groups
             % if hasattr(c, 'repo_group') and c.repo_group and (can_create_repos_in_group or can_create_repo_groups_in_group):
                 <li class="submenu-title">${_('This Repository Group')}</li>
 
                 % if can_create_repos_in_group:
                     <li>
                     <a href="${h.route_path('repo_new',_query=dict(parent_group=c.repo_group.group_id))}">${_('New Repository')}</a>
                     </li>
                 % endif
 
                 % if can_create_repo_groups_in_group:
                     <li>
                         <a href="${h.route_path('repo_group_new',_query=dict(parent_group=c.repo_group.group_id))}">${_(u'New Repository Group')}</a>
                     </li>
                 % endif
             % endif
 
             ## personal group
             % if c.rhodecode_user.personal_repo_group:
                 <li class="submenu-title">Personal Group</li>
 
                 <li>
                 <a href="${h.route_path('repo_new',_query=dict(parent_group=c.rhodecode_user.personal_repo_group.group_id))}" >${_('New Repository')} </a>
                 </li>
 
                 <li>
                 <a href="${h.route_path('repo_group_new',_query=dict(parent_group=c.rhodecode_user.personal_repo_group.group_id))}">${_('New Repository Group')} </a>
                 </li>
             % endif
 
             ## Global actions
             <li class="submenu-title">RhodeCode</li>
             % if can_create_repos:
                 <li>
                 <a href="${h.route_path('repo_new')}" >${_('New Repository')}</a>
                 </li>
             % endif
 
             % if can_create_repo_groups:
                 <li>
                 <a href="${h.route_path('repo_group_new')}" >${_(u'New Repository Group')}</a>
                 </li>
             % endif
 
             <li>
                 <a href="${h.route_path('gists_new')}">${_(u'New Gist')}</a>
             </li>
 
         </ol>
 
        </div>
     </li>
 
     ## notifications
     <li>
        <a class="${('empty' if c.unread_notifications == 0 else '')}" href="${h.route_path('notifications_show_all')}">
            ${c.unread_notifications}
        </a>
     </li>
    % endif
 
     ## USER MENU
     <li id="quick_login_li" class="${'active' if active else ''}">
         % if c.rhodecode_user.username == h.DEFAULT_USER:
           <a id="quick_login_link" class="menulink childs" href="${h.route_path('login', _query={'came_from': h.current_route_path(request)})}">
             ${gravatar(c.rhodecode_user.email, 20)}
             <span class="user">
                 <span>${_('Sign in')}</span>
             </span>
           </a>
         % else:
           ## logged in user
           <a id="quick_login_link" class="menulink childs">
             ${gravatar(c.rhodecode_user.email, 20)}
             <span class="user">
                 <span class="menu_link_user">${c.rhodecode_user.username}</span>
                 <div class="show_more"></div>
             </span>
           </a>
           ## subnav with menu for logged in user
           <div class="user-menu submenu">
               <div id="quick_login">
                 %if c.rhodecode_user.username != h.DEFAULT_USER:
                     <div class="">
                         <div class="big_gravatar">${gravatar(c.rhodecode_user.email, 48)}</div>
                         <div class="full_name">${c.rhodecode_user.full_name_or_username}</div>
                         <div class="email">${c.rhodecode_user.email}</div>
                     </div>
                     <div class="">
                     <ol class="links">
                       <li>${h.link_to(_(u'My account'),h.route_path('my_account_profile'))}</li>
                       % if c.rhodecode_user.personal_repo_group:
                       <li>${h.link_to(_(u'My personal group'), h.route_path('repo_group_home', repo_group_name=c.rhodecode_user.personal_repo_group.group_name))}</li>
                       % endif
                       <li>${h.link_to(_(u'Pull Requests'), h.route_path('my_account_pullrequests'))}</li>
 
                       % if c.debug_style:
                       <li>
                           <a class="menulink" title="${_('Style')}" href="${h.route_path('debug_style_home')}">
                             <div class="menulabel">${_('[Style]')}</div>
                           </a>
                       </li>
                       % endif
 
                       ## bookmark-items
                       <li class="bookmark-items">
                           ${_('Bookmarks')}
                           <div class="pull-right">
                               <a href="${h.route_path('my_account_bookmarks')}">
 
                                   <i class="icon-cog"></i>
                               </a>
                           </div>
                       </li>
                       % if not c.bookmark_items:
                           <li>
                               <a href="${h.route_path('my_account_bookmarks')}">${_('No Bookmarks yet.')}</a>
                           </li>
                       % endif
                       % for item in c.bookmark_items:
                       <li>
                           % if item.repository:
                               <div>
                                 <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 % if item.repository.repo_type == 'hg':
                                     <i class="icon-hg" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % elif item.repository.repo_type == 'git':
                                     <i class="icon-git" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % elif item.repository.repo_type == 'svn':
                                     <i class="icon-svn" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % endif
                                 ${(item.title or h.shorter(item.repository.repo_name, 30))}
                               </a>
                               </div>
                           % elif item.repository_group:
                               <div>
                                 <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 <i class="icon-repo-group" title="${_('Repository group')}" style="font-size: 14px"></i>
                                 ${(item.title or h.shorter(item.repository_group.group_name, 30))}
                               </a>
                               </div>
                           % else:
                               <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 ${item.title}
                               </a>
                           % endif
                       </li>
                       % endfor
 
                       <li class="logout">
                       ${h.secure_form(h.route_path('logout'), request=request)}
                           ${h.submit('log_out', _(u'Sign Out'),class_="btn btn-primary")}
                       ${h.end_form()}
                       </li>
                     </ol>
                     </div>
                 %endif
               </div>
           </div>
 
         % endif
     </li>
 </%def>
 
 <%def name="menu_items(active=None)">
     <%
         notice_messages, notice_level = c.rhodecode_user.get_notice_messages()
         notice_display = 'none' if len(notice_messages) == 0 else ''
     %>
 <style>
 
 </style>
 
     <ul id="quick" class="main_nav navigation horizontal-list">
        ## notice box for important system messages
        <li style="display: ${notice_display}">
           <a class="notice-box" href="#openNotice" onclick="$('.notice-messages-container').toggle(); return false">
             <div class="menulabel-notice ${notice_level}" >
                 ${len(notice_messages)}
             </div>
           </a>
        </li>
         <div class="notice-messages-container" style="display: none">
         <div class="notice-messages">
             <table class="rctable">
             % for notice in notice_messages:
                 <tr id="notice-message-${notice['msg_id']}" class="notice-message-${notice['level']}">
                     <td style="vertical-align: text-top; width: 20px">
                         <i class="tooltip icon-info notice-color-${notice['level']}" title="${notice['level']}"></i>
                     </td>
                     <td>
                         <span><i class="icon-plus-squared cursor-pointer" onclick="$('#notice-${notice['msg_id']}').toggle()"></i> </span>
                         ${notice['subject']}
 
                         <div id="notice-${notice['msg_id']}" style="display: none">
                             ${h.render(notice['body'], renderer='markdown')}
                         </div>
                     </td>
                     <td style="vertical-align: text-top; width: 35px;">
                         <a class="tooltip" title="${_('dismiss')}" href="#dismiss" onclick="dismissNotice(${notice['msg_id']});return false">
                             <i class="icon-remove icon-filled-red"></i>
                         </a>
                     </td>
                 </tr>
 
             % endfor
             </table>
         </div>
         </div>
         ## Main filter
        <li>
         <div class="menulabel main_filter_box">
             <div class="main_filter_input_box">
                 <ul class="searchItems">
 
                     <li class="searchTag searchTagIcon">
                         <i class="icon-search"></i>
                     </li>
 
                     % if c.template_context['search_context']['repo_id']:
                         <li class="searchTag searchTagFilter searchTagHidable" >
                         ##<a href="${h.route_path('search_repo',repo_name=c.template_context['search_context']['repo_name'])}">
                             <span class="tag">
                                 This repo
                                 <a href="#removeGoToFilter" onclick="removeGoToFilter(); return false"><i class="icon-cancel-circled"></i></a>
                             </span>
                         ##</a>
                         </li>
                     % elif c.template_context['search_context']['repo_group_id']:
                         <li class="searchTag searchTagFilter searchTagHidable">
                         ##<a href="${h.route_path('search_repo_group',repo_group_name=c.template_context['search_context']['repo_group_name'])}">
                             <span class="tag">
                                 This group
                                 <a href="#removeGoToFilter" onclick="removeGoToFilter(); return false"><i class="icon-cancel-circled"></i></a>
                             </span>
                         ##</a>
                         </li>
                     % endif
 
                     <li class="searchTagInput">
                         <input class="main_filter_input" id="main_filter" size="25" type="text" name="main_filter" placeholder="${_('search / go to...')}" value="" />
                     </li>
                     <li class="searchTag searchTagHelp">
                         <a href="#showFilterHelp" onclick="showMainFilterBox(); return false">?</a>
                     </li>
                 </ul>
             </div>
         </div>
 
         <div id="main_filter_help" style="display: none">
 - Use '/' key to quickly access this field.
 
 - Enter a name of repository, or repository group for quick search.
 
 - Prefix query to allow special search:
 
    user:admin, to search for usernames, always global
 
    user_group:devops, to search for user groups, always global
 
    pr:303, to search for pull request number, title, or description, always global
 
    commit:efced4, to search for commits, scoped to repositories or groups
 
    file:models.py, to search for file paths, scoped to repositories or groups
 
 % if c.template_context['search_context']['repo_id']:
    For advanced full text search visit: <a href="${h.route_path('search_repo',repo_name=c.template_context['search_context']['repo_name'])}">repository search</a>
 % elif c.template_context['search_context']['repo_group_id']:
    For advanced full text search visit: <a href="${h.route_path('search_repo_group',repo_group_name=c.template_context['search_context']['repo_group_name'])}">repository group search</a>
 % else:
    For advanced full text search visit: <a href="${h.route_path('search')}">global search</a>
 % endif
         </div>
        </li>
 
       ## ROOT MENU
         <li class="${h.is_active('home', active)}">
           <a class="menulink" title="${_('Home')}" href="${h.route_path('home')}">
             <div class="menulabel">${_('Home')}</div>
           </a>
         </li>
 
       %if c.rhodecode_user.username != h.DEFAULT_USER:
         <li class="${h.is_active('journal', active)}">
           <a class="menulink" title="${_('Show activity journal')}" href="${h.route_path('journal')}">
             <div class="menulabel">${_('Journal')}</div>
           </a>
         </li>
       %else:
         <li class="${h.is_active('journal', active)}">
           <a class="menulink" title="${_('Show Public activity journal')}" href="${h.route_path('journal_public')}">
             <div class="menulabel">${_('Public journal')}</div>
           </a>
         </li>
       %endif
 
         <li class="${h.is_active('gists', active)}">
           <a class="menulink childs" title="${_('Show Gists')}" href="${h.route_path('gists_show')}">
             <div class="menulabel">${_('Gists')}</div>
           </a>
         </li>
 
         % if c.is_super_admin or c.is_delegated_admin:
         <li class="${h.is_active('admin', active)}">
           <a class="menulink childs" title="${_('Admin settings')}" href="${h.route_path('admin_home')}">
             <div class="menulabel">${_('Admin')} </div>
           </a>
         </li>
         % endif
 
       ## render extra user menu
       ${usermenu(active=(active=='my_account'))}
 
     </ul>
 
     <script type="text/javascript">
         var visualShowPublicIcon = "${c.visual.show_public_icon}" == "True";
 
         var formatRepoResult = function(result, container, query, escapeMarkup) {
             return function(data, escapeMarkup) {
                 if (!data.repo_id){
                   return data.text; // optgroup text Repositories
                 }
 
                 var tmpl = '';
                 var repoType = data['repo_type'];
                 var repoName = data['text'];
 
                 if(data && data.type == 'repo'){
                     if(repoType === 'hg'){
                         tmpl += '<i class="icon-hg"></i> ';
                     }
                     else if(repoType === 'git'){
                         tmpl += '<i class="icon-git"></i> ';
                     }
                     else if(repoType === 'svn'){
                         tmpl += '<i class="icon-svn"></i> ';
                     }
                     if(data['private']){
                         tmpl += '<i class="icon-lock" ></i> ';
                     }
                     else if(visualShowPublicIcon){
                         tmpl += '<i class="icon-unlock-alt"></i> ';
                     }
                 }
                 tmpl += escapeMarkup(repoName);
                 return tmpl;
 
             }(result, escapeMarkup);
         };
 
         var formatRepoGroupResult = function(result, container, query, escapeMarkup) {
             return function(data, escapeMarkup) {
                 if (!data.repo_group_id){
                   return data.text; // optgroup text Repositories
                 }
 
                 var tmpl = '';
                 var repoGroupName = data['text'];
 
                 if(data){
 
                     tmpl += '<i class="icon-repo-group"></i> ';
 
                 }
                 tmpl += escapeMarkup(repoGroupName);
                 return tmpl;
 
             }(result, escapeMarkup);
         };
 
         var escapeRegExChars = function (value) {
             return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
         };
 
         var getRepoIcon = function(repo_type) {
             if (repo_type === 'hg') {
                 return '<i class="icon-hg"></i> ';
             }
             else if (repo_type === 'git') {
                 return '<i class="icon-git"></i> ';
             }
             else if (repo_type === 'svn') {
                 return '<i class="icon-svn"></i> ';
             }
             return ''
         };
 
         var autocompleteMainFilterFormatResult = function (data, value, org_formatter) {
 
             if (value.split(':').length === 2) {
                 value = value.split(':')[1]
             }
 
             var searchType = data['type'];
             var searchSubType = data['subtype'];
             var valueDisplay = data['value_display'];
             var valueIcon = data['value_icon'];
 
             var pattern = '(' + escapeRegExChars(value) + ')';
 
             valueDisplay = Select2.util.escapeMarkup(valueDisplay);
 
             // highlight match
             if (searchType != 'text') {
                 valueDisplay = valueDisplay.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
             }
 
             var icon = '';
 
             if (searchType === 'hint') {
                 icon += '<i class="icon-repo-group"></i> ';
             }
             // full text search/hints
             else if (searchType === 'search') {
                 if (valueIcon === undefined) {
                     icon += '<i class="icon-more"></i> ';
                 } else {
                     icon += valueIcon + ' ';
                 }
 
                 if (searchSubType !== undefined && searchSubType == 'repo') {
                     valueDisplay += '<div class="pull-right tag">repository</div>';
                 }
                 else if (searchSubType !== undefined && searchSubType == 'repo_group') {
                     valueDisplay += '<div class="pull-right tag">repo group</div>';
                 }
             }
             // repository
             else if (searchType === 'repo') {
 
                 var repoIcon = getRepoIcon(data['repo_type']);
                 icon += repoIcon;
 
                 if (data['private']) {
                     icon += '<i class="icon-lock" ></i> ';
                 }
                 else if (visualShowPublicIcon) {
                     icon += '<i class="icon-unlock-alt"></i> ';
                 }
             }
             // repository groups
             else if (searchType === 'repo_group') {
                 icon += '<i class="icon-repo-group"></i> ';
             }
             // user group
             else if (searchType === 'user_group') {
                 icon += '<i class="icon-group"></i> ';
             }
             // user
             else if (searchType === 'user') {
                 icon += '<img class="gravatar" src="{0}"/>'.format(data['icon_link']);
             }
             // pull request
             else if (searchType === 'pull_request') {
                 icon += '<i class="icon-merge"></i> ';
             }
             // commit
             else if (searchType === 'commit') {
                 var repo_data = data['repo_data'];
                 var repoIcon = getRepoIcon(repo_data['repository_type']);
                 if (repoIcon) {
                     icon += repoIcon;
                 } else {
                     icon += '<i class="icon-tag"></i>';
                 }
             }
             // file
             else if (searchType === 'file') {
                 var repo_data = data['repo_data'];
                 var repoIcon = getRepoIcon(repo_data['repository_type']);
                 if (repoIcon) {
                     icon += repoIcon;
                 } else {
                     icon += '<i class="icon-tag"></i>';
                 }
             }
             // generic text
             else if (searchType === 'text') {
                 icon = '';
             }
 
             var tmpl = '<div class="ac-container-wrap">{0}{1}</div>';
             return tmpl.format(icon, valueDisplay);
         };
 
         var handleSelect = function(element, suggestion) {
             if (suggestion.type === "hint") {
                 // we skip action
                 $('#main_filter').focus();
             }
             else if (suggestion.type === "text") {
                 // we skip action
                 $('#main_filter').focus();
 
             } else {
               window.location = suggestion['url'];
             }
         };
 
         var autocompleteMainFilterResult = function (suggestion, originalQuery, queryLowerCase) {
             if (queryLowerCase.split(':').length === 2) {
                 queryLowerCase = queryLowerCase.split(':')[1]
             }
             if (suggestion.type === "text") {
                 // special case we don't want to "skip" display for
                 return true
             }
             return suggestion.value_display.toLowerCase().indexOf(queryLowerCase) !== -1;
         };
 
         var cleanContext = {
             repo_view_type: null,
 
             repo_id: null,
             repo_name: "",
 
             repo_group_id: null,
             repo_group_name: null
         };
         var removeGoToFilter = function () {
             $('.searchTagHidable').hide();
             $('#main_filter').autocomplete(
                 'setOptions', {params:{search_context: cleanContext}});
         };
 
         $('#main_filter').autocomplete({
             serviceUrl: pyroutes.url('goto_switcher_data'),
             params: {
                 "search_context": templateContext.search_context
             },
             minChars:2,
             maxHeight:400,
             deferRequestBy: 300, //miliseconds
             tabDisabled: true,
             autoSelectFirst: false,
             containerClass: 'autocomplete-qfilter-suggestions',
             formatResult: autocompleteMainFilterFormatResult,
             lookupFilter: autocompleteMainFilterResult,
             onSelect: function (element, suggestion) {
                 handleSelect(element, suggestion);
                 return false;
             },
             onSearchError: function (element, query, jqXHR, textStatus, errorThrown) {
                 if (jqXHR !== 'abort') {
-                    alert("Error during search.\nError code: {0}".format(textStatus));
-                    window.location = '';
+                    var message = formatErrorMessage(jqXHR, textStatus, errorThrown);
+                    SwalNoAnimation.fire({
+                        icon: 'error',
+                        title: _gettext('Error during search operation'),
+                        html: '<span style="white-space: pre-line">{0}</span>'.format(message),
+                    }).then(function(result) {
+                        window.location.reload();
+                    })
                 }
             },
             onSearchStart: function (params) {
                 $('.searchTag.searchTagIcon').html('<i class="icon-spin animate-spin"></i>')
             },
             onSearchComplete: function (query, suggestions) {
                 $('.searchTag.searchTagIcon').html('<i class="icon-search"></i>')
             },
         });
 
         showMainFilterBox = function () {
             $('#main_filter_help').toggle();
         };
 
         $('#main_filter').on('keydown.autocomplete', function (e) {
 
             var BACKSPACE = 8;
             var el = $(e.currentTarget);
             if(e.which === BACKSPACE){
                 var inputVal = el.val();
                 if (inputVal === ""){
                     removeGoToFilter()
                 }
             }
         });
 
         var dismissNotice = function(noticeId) {
 
             var url = pyroutes.url('user_notice_dismiss',
                     {"user_id": templateContext.rhodecode_user.user_id});
 
             var postData = {
                 'csrf_token': CSRF_TOKEN,
                 'notice_id': noticeId,
             };
 
             var success = function(response) {
                 $('#notice-message-' + noticeId).remove();
                 return false;
             };
             var failure = function(data, textStatus, xhr) {
                 alert("error processing request: " + textStatus);
                 return false;
             };
             ajaxPOST(url, postData, success, failure);
         }
     </script>
     <script src="${h.asset('js/rhodecode/base/keyboard-bindings.js', ver=c.rhodecode_version_hash)}"></script>
 </%def>
 
 <div class="modal" id="help_kb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">${_('Keyboard shortcuts')}</h4>
         </div>
         <div class="modal-body">
               <div class="block-left">
                 <table class="keyboard-mappings">
                     <tbody>
                   <tr>
                     <th></th>
                     <th>${_('Site-wide shortcuts')}</th>
                   </tr>
                   <%
                      elems = [
                          ('/', 'Use quick search box'),
                          ('g h', 'Goto home page'),
                          ('g g', 'Goto my private gists page'),
                          ('g G', 'Goto my public gists page'),
                          ('g 0-9', 'Goto bookmarked items from 0-9'),
                          ('n r', 'New repository page'),
                          ('n g', 'New gist page'),
                      ]
                   %>
                   %for key, desc in elems:
                   <tr>
                     <td class="keys">
                       <span class="key tag">${key}</span>
                     </td>
                     <td>${desc}</td>
                   </tr>
                 %endfor
                 </tbody>
                   </table>
               </div>
               <div class="block-left">
                 <table class="keyboard-mappings">
                 <tbody>
                   <tr>
                     <th></th>
                     <th>${_('Repositories')}</th>
                   </tr>
                   <%
                      elems = [
                          ('g s', 'Goto summary page'),
                          ('g c', 'Goto changelog page'),
                          ('g f', 'Goto files page'),
                          ('g F', 'Goto files page with file search activated'),
                          ('g p', 'Goto pull requests page'),
                          ('g o', 'Goto repository settings'),
                          ('g O', 'Goto repository access permissions settings'),
                      ]
                   %>
                   %for key, desc in elems:
                   <tr>
                     <td class="keys">
                       <span class="key tag">${key}</span>
                     </td>
                     <td>${desc}</td>
                   </tr>
                 %endfor
                 </tbody>
               </table>
             </div>
         </div>
         <div class="modal-footer">
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->