Fixes #6766 Let Super User view and edit segments created by other users

As a Super User:

 * I can now see all segments that were created for this website by any other user
 * When a segment was created by another user who is not Super User, the segment appears below a new section "Visible to you because you have Super User access:"
 * Such segments are editable by the Super User
 * The only difference when editing someone else's segment, as a Super User, is that "This segment is visible to [ME]" now says "This segment is visible to [SEGMENT_AUTHOR_USERNAME]"
 * One can now search in the  search bar for a username and see all segments created by this user

For all users:

 * New section "Shared with you:" now lists segments created by a Super User, and marked as "Visible to [All Users]"
 * Before segments  shared with me, looked the same as segments I created, which was confusing

1 files changed, 161 insertions, 76 deletions

diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index 2ffd7dac57..d47a83b4a1 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -80,14 +80,14 @@ Segmentation = (function($) {
                 var currentDecoded = piwikHelper.htmlDecode(current);
                 var selector = 'div.segmentList ul li[data-definition="'+currentDecoded+'"]';
                 var foundItems = $(selector, this.target);
-                var title = $('<strong></strong>');
+
                 if( foundItems.length > 0) {
-                    var name = $(foundItems).first().find("span.segname").text();
-                    title.text(name);
+                    var idSegment = $(foundItems).first().attr('data-idsegment');
+                    var title = getSegmentName( getSegmentFromId(idSegment));
                 } else {
-                    title.text(_pk_translate('SegmentEditor_CustomSegment'));
+                    title = _pk_translate('SegmentEditor_CustomSegment');
                 }
-                segmentationTitle.html(title);
+                segmentationTitle.html( "<strong>" + title + "</strong>");
             }
             else {
                 $(this.content).find(".segmentationTitle").text(this.translations['SegmentEditor_DefaultAllVisits']);
@@ -199,14 +199,42 @@ Segmentation = (function($) {
             var html = self.editorTemplate.find("> .listHtml").clone();
             var segment, injClass;
             var listHtml = '<li data-idsegment="" ' +
-                            (self.currentSegmentStr == "" ? " class='segmentSelected' " : "")
-                            + ' data-definition=""><span class="segname">' + self.translations['SegmentEditor_DefaultAllVisits']
-                            + ' ' + self.translations['General_DefaultAppended']
-                            + '</span></li> ';
+                (self.currentSegmentStr == "" ? " class='segmentSelected' " : "")
+                + ' data-definition=""><span class="segname">' + self.translations['SegmentEditor_DefaultAllVisits']
+                + ' ' + self.translations['General_DefaultAppended']
+                + '</span></li> ';
+
+            var isVisibleToSuperUserNoticeAlreadyDisplayedOnce = false;
+            var isVisibleToSuperUserNoticeShouldBeClosed = false;
+
+            var isSharedWithMeBySuperUserNoticeAlreadyDisplayedOnce = false;
+            var isSharedWithMeBySuperUserNoticeShouldBeClosed = false;
+
             if(self.availableSegments.length > 0) {
+
                 for(var i = 0; i < self.availableSegments.length; i++)
                 {
                     segment = self.availableSegments[i];
+
+                    if(isSegmentSharedWithMeBySuperUser(segment) && !isSharedWithMeBySuperUserNoticeAlreadyDisplayedOnce) {
+                        isSharedWithMeBySuperUserNoticeAlreadyDisplayedOnce = true;
+                        isSharedWithMeBySuperUserNoticeShouldBeClosed = true;
+                        listHtml += '<span class="segmentsSharedWithMeBySuperUser"><hr> ' + _pk_translate('SegmentEditor_SharedWithYou') + ':<br/><br/>';
+                    }
+
+                    if(isSegmentVisibleToSuperUserOnly(segment) && !isVisibleToSuperUserNoticeAlreadyDisplayedOnce) {
+                        // close <span class="segmentsSharedWithMeBySuperUser">
+                        if(isSharedWithMeBySuperUserNoticeShouldBeClosed) {
+                            isSharedWithMeBySuperUserNoticeShouldBeClosed = false;
+                            listHtml += '</span>';
+                        }
+
+                        isVisibleToSuperUserNoticeAlreadyDisplayedOnce = true;
+                        isVisibleToSuperUserNoticeShouldBeClosed = true;
+                        listHtml += '<span class="segmentsVisibleToSuperUser"><hr> ' + _pk_translate('SegmentEditor_VisibleToSuperUser') + ':<br/><br/>';
+                    }
+
+
                     injClass = "";
                     var checkSelected = segment.definition;
                     if(!$.browser.mozilla) {
@@ -217,12 +245,21 @@ Segmentation = (function($) {
                         injClass = 'class="segmentSelected"';
                     }
                     listHtml += '<li data-idsegment="'+segment.idsegment+'" data-definition="'+ (segment.definition).replace(/"/g, '&quot;') +'" '
-                                +injClass+' title="'+segment.name+'"><span class="segname">'+segment.name+'</span>';
+                        +injClass+' title="'+ getSegmentTooltipEnrichedWithUsername(segment) +'"><span class="segname">'+getSegmentName(segment)+'</span>';
                     if(self.segmentAccess == "write") {
                         listHtml += '<span class="editSegment" title="'+ self.translations['General_Edit'].toLocaleLowerCase() +'"></span>';
                     }
                     listHtml += '</li>';
                 }
+
+                if(isVisibleToSuperUserNoticeShouldBeClosed) {
+                    listHtml += '</span>';
+                }
+
+                if(isSharedWithMeBySuperUserNoticeShouldBeClosed) {
+                    listHtml += '</span>';
+                }
+
                 $(html).find(".segmentList > ul").append(listHtml);
                 if(self.segmentAccess === "write"){
                     $(html).find(".add_new_segment").html(self.translations['SegmentEditor_AddNewSegment']);
@@ -238,20 +275,58 @@ Segmentation = (function($) {
             return html;
         };
 
+        var isSegmentVisibleToSuperUserOnly = function(segment) {
+            return hasSuperUserAccessAndSegmentCreatedByAnotherUser(segment)
+                && segment.enable_all_users == 0;
+        };
+
+        var isSegmentSharedWithMeBySuperUser = function(segment) {
+            return segment.login != piwik.userLogin
+                && segment.enable_all_users == 1;
+        };
+
+        var hasSuperUserAccessAndSegmentCreatedByAnotherUser = function(segment) {
+            return piwik.hasSuperUserAccess && segment.login != piwik.userLogin;
+        };
+
+        var getSegmentTooltipEnrichedWithUsername = function(segment) {
+            var segmentName = segment.name;
+            if(hasSuperUserAccessAndSegmentCreatedByAnotherUser(segment)) {
+                segmentName += ' (';
+                segmentName += _pk_translate('General_CreatedByUser', [segment.login]);
+
+                if(segment.enable_all_users == 0) {
+                    segmentName += ', ' + _pk_translate('SegmentEditor_VisibleToSuperUser');
+                }
+
+                segmentName += ')';
+            }
+            return sanitiseSegmentName(segmentName);
+        };
+
+        var getSegmentName = function(segment) {
+            return sanitiseSegmentName(segment.name);
+        };
+
+        var sanitiseSegmentName = function(segment) {
+            segment = piwikHelper.escape(segment);
+            return segment;
+        }
+
         var getFormHtml = function() {
             var html = self.editorTemplate.find("> .segment-element").clone();
             // set left margin to center form
             var segmentsDropdown = $(html).find(".available_segments_select");
             var segment, newOption;
             newOption = '<option data-idsegment="" data-definition="" title="'
-                        + self.translations['SegmentEditor_AddNewSegment']
-                        + '">' + self.translations['SegmentEditor_AddNewSegment']
-                        + '</option>';
+                + self.translations['SegmentEditor_AddNewSegment']
+                + '">' + self.translations['SegmentEditor_AddNewSegment']
+                + '</option>';
             segmentsDropdown.append(newOption);
             for(var i = 0; i < self.availableSegments.length; i++)
             {
                 segment = self.availableSegments[i];
-                newOption = '<option data-idsegment="'+segment.idsegment+'" data-definition="'+(segment.definition).replace(/"/g, '&quot;')+'" title="'+segment.name+'">'+segment.name+'</option>';
+                newOption = '<option data-idsegment="'+segment.idsegment+'" data-definition="'+(segment.definition).replace(/"/g, '&quot;')+'" title="'+getSegmentTooltipEnrichedWithUsername(segment)+'">'+getSegmentName(segment)+'</option>';
                 segmentsDropdown.append(newOption);
             }
             $(html).find(".segment-content > h3").after(getInitialStateRowsHtml()).show();
@@ -324,10 +399,15 @@ Segmentation = (function($) {
         var openEditForm = function(segment){
             addForm("edit", segment);
 
-            $(self.form).find(".segment-content > h3 > span").text(segment.name);
+            $(self.form).find(".segment-content > h3 > span")
+                .html( getSegmentName(segment) )
+                .prop('title', getSegmentTooltipEnrichedWithUsername(segment));
+
             $(self.form).find('.available_segments_select > option[data-idsegment="'+segment.idsegment+'"]').prop("selected",true);
 
-            $(self.form).find('.available_segments a.dropList').text(segment.name);
+            $(self.form).find('.available_segments a.dropList')
+                .html( getSegmentName(segment) )
+                .prop( 'title', getSegmentTooltipEnrichedWithUsername(segment));
 
             if(segment.definition != ""){
                 revokeInitialStateRows();
@@ -360,6 +440,13 @@ Segmentation = (function($) {
                 $(self.target).find(".segmentList li:first")
                     .before("<li class=\"filterNoResults grayed\">" + self.translations['General_SearchNoResults'] + "</li>");
             }
+
+            if ($(self.target).find(".segmentList .segmentsVisibleToSuperUser li:visible").length == 0) {
+                $(self.target).find(".segmentList .segmentsVisibleToSuperUser").hide();
+            }
+            if ($(self.target).find(".segmentList .segmentsSharedWithMeBySuperUser li:visible").length == 0) {
+                $(self.target).find(".segmentList .segmentsSharedWithMeBySuperUser").hide();
+            }
         }
 
         var clearFilterSegmentList = function () {
@@ -367,6 +454,8 @@ Segmentation = (function($) {
             $(self.target).find(".segmentList li").each(function () {
                 $(this).show();
             });
+            $(self.target).find(".segmentList .segmentsVisibleToSuperUser").show();
+            $(self.target).find(".segmentList .segmentsSharedWithMeBySuperUser").show();
         }
 
         var bindEvents = function () {
@@ -407,15 +496,13 @@ Segmentation = (function($) {
 
             self.target.on("click", ".segmentList li", function (e) {
                 if ($(e.currentTarget).hasClass("grayed") !== true) {
-                    var segment = {};
-                    segment.idsegment = $(this).attr("data-idsegment");
-                    segment.definition = $(this).data("definition");
-                    segment.name = $(this).attr("title");
+                    var idsegment = $(this).attr("data-idsegment");
+                    segmentDefinition = $(this).data("definition");
 
-                    self.setSegment(segment.definition);
+                    self.setSegment(segmentDefinition);
                     self.markCurrentSegment();
-                    self.segmentSelectMethod( segment.definition );
-                    toggleLoadingMessage(segment.definition.length);
+                    self.segmentSelectMethod( segmentDefinition );
+                    toggleLoadingMessage(segmentDefinition.length);
                 }
             });
 
@@ -748,16 +835,9 @@ Segmentation = (function($) {
         };
 
         function openEditFormGivenSegment(option) {
-            var segment = {};
-            segment.idsegment = option.attr("data-idsegment");
-
-            var segmentExtra = getSegmentFromId(segment.idsegment);
-            for(var item in segmentExtra)
-            {
-                segment[item] = segmentExtra[item];
-            }
+            var idsegment = option.attr("data-idsegment");
 
-            segment.name = option.attr("title");
+            var segment = getSegmentFromId(idsegment);
 
             segment.definition = option.data("definition");
 
@@ -815,7 +895,7 @@ Segmentation = (function($) {
             // 1 - do most obvious selection -> mark whole categories matching search string
             // also expand whole category
             $(self.form).find('.segment-nav div > ul > li').each( function(){
-                curStr = normalizeSearchString($(this).find("a.metric_category").text());
+                    curStr = normalizeSearchString($(this).find("a.metric_category").text());
                     if(curStr.indexOf(search) > -1) {
                         $(this).addClass("searchFound");
                         $(this).find("ul").show();
@@ -823,7 +903,7 @@ Segmentation = (function($) {
                         $(this).show();
                     }
                 }
-           );
+            );
 
             // 2 - among all unselected categories find metrics which match and mark parent as search result
             $(self.form).find(".segment-nav div > ul > li:not(.searchFound)").each(function(){
@@ -872,8 +952,8 @@ Segmentation = (function($) {
             }
 
             search = search.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
-            .replace(/\s+/g, '_') // collapse whitespace and replace by underscore
-            .replace(/-+/g, '-'); // collapse dashes
+                .replace(/\s+/g, '_') // collapse whitespace and replace by underscore
+                .replace(/-+/g, '-'); // collapse dashes
             return search;
         };
 
@@ -900,7 +980,12 @@ Segmentation = (function($) {
             placeSegmentationFormControls();
 
             if(mode == "edit") {
-                $(self.form).find('.enable_all_users_select > option[value="'+segment.enable_all_users+'"]').prop("selected",true);
+                var userSelector = $(self.form).find('.enable_all_users_select > option[value="' + segment.enable_all_users + '"]').prop("selected",true);
+
+                // Replace "Visible to me" by "Visible to $login" when user is super user
+                if(hasSuperUserAccessAndSegmentCreatedByAnotherUser(segment)) {
+                    $(self.form).find('.enable_all_users_select > option[value="' + 0 + '"]').text(segment.login);
+                }
                 $(self.form).find('.visible_to_website_select > option[value="'+segment.enable_only_idsite+'"]').prop("selected",true);
                 $(self.form).find('.auto_archive_select > option[value="'+segment.auto_archive+'"]').prop("selected",true);
 
@@ -991,43 +1076,43 @@ Segmentation = (function($) {
         var makeDropList = function(spanId, selectId){
             var select = $(self.form).find(selectId).hide();
             var dropList = $( '<a class="dropList dropdown">' )
-            .insertAfter( select )
-            .text( select.children(':selected').text() )
-            .autocomplete({
-                delay: 0,
-                minLength: 0,
-                appendTo: "body",
-                source: function( request, response ) {
-                    response( select.children( "option" ).map(function() {
-                        var text = $( this ).text();
-                        return {
-                            label: text,
-                            value: this.value,
-                            option: this
-                        };
-                    }) );
-                },
-                select: function( event, ui ) {
-                    event.preventDefault();
-                    ui.item.option.selected = true;
-                    // Mark original select>option
-                    $(spanId + ' option[value="' + ui.item.value + '"]', self.editorTemplate).prop('selected', true);
-                    dropList.text(ui.item.label);
-                    $(self.form).find(selectId).trigger("change");
-                }
-            })
-            .click(function() {
-                // close all other droplists made by this form
-                $("a.dropList").autocomplete("close");
-                //                 close if already visible
-                if ( $(this).autocomplete( "widget" ).is(":visible") ) {
-                    $(this).autocomplete("close");
-                    return;
-                }
-                // pass empty string as value to search for, displaying all results
-                $(this).autocomplete( "search", "" );
+                .insertAfter( select )
+                .text( select.children(':selected').text() )
+                .autocomplete({
+                    delay: 0,
+                    minLength: 0,
+                    appendTo: "body",
+                    source: function( request, response ) {
+                        response( select.children( "option" ).map(function() {
+                            var text = $( this ).text();
+                            return {
+                                label: text,
+                                value: this.value,
+                                option: this
+                            };
+                        }) );
+                    },
+                    select: function( event, ui ) {
+                        event.preventDefault();
+                        ui.item.option.selected = true;
+                        // Mark original select>option
+                        $(spanId + ' option[value="' + ui.item.value + '"]', self.editorTemplate).prop('selected', true);
+                        dropList.text(ui.item.label);
+                        $(self.form).find(selectId).trigger("change");
+                    }
+                })
+                .click(function() {
+                    // close all other droplists made by this form
+                    $("a.dropList").autocomplete("close");
+                    //                 close if already visible
+                    if ( $(this).autocomplete( "widget" ).is(":visible") ) {
+                        $(this).autocomplete("close");
+                        return;
+                    }
+                    // pass empty string as value to search for, displaying all results
+                    $(this).autocomplete( "search", "" );
 
-            });
+                });
             $('body').on('mouseup',function (e) {
                 if (!$(e.target).parents(spanId).length
                     && !$(e.target).is(spanId)
@@ -1166,7 +1251,7 @@ $(document).ready(function() {
                         }
                     }
 
-                    self.props.availableSegments[idx] = params;
+                    $.extend( self.props.availableSegments[idx], params);
                     self.rebuild();
 
                     self.impl.setSegment(params.definition);
@@ -1222,8 +1307,8 @@ $(document).ready(function() {
         };
 
         var segmentFromRequest = encodeURIComponent(self.props.selectedSegment)
-                              || broadcast.getValueFromHash('segment')
-                              || broadcast.getValueFromUrl('segment');
+            || broadcast.getValueFromHash('segment')
+            || broadcast.getValueFromUrl('segment');
         if($.browser.mozilla) {
             segmentFromRequest = decodeURIComponent(segmentFromRequest);
         }