Remove "add new segment" selector in segment editor (#17998)

* simple approach, hide segment by css. complete solution needs to alter the entire js.

* UI tests: Fixed UI test failure caused by remove segment selcetor in segment widgets

* update html inline style to less, remove UI test for segemtn selector

* update mobile view and remove the js test related

* remove segment selector related test

* trigger js build

* fix IE 11  css

fix IE 11

* add migration 4.5.0-b2 mysql row format dynamic

 mysql row format dynamic updates

* revert wrong branch change

revert wrong branch change

* update grid to inline-block

update grid to inline-block

* update some css

update some css

* update new screenshot

update new screenshot

* update one more image

update one more image

* uploaded the wrong ui

uploaded the wrong ui

* remove image fix css

remove image fix css

* update screen shot because of the layout change

update screen shot because of the layout change

* add no wrap to the display

add no wrap to the display

* fix the UI on different device

fix the UI on different device

* update images

update images

* update segment selector test

update segment selector test

* update image

update image

* update segment test

update segment test

* update js test

update js test

* update segment screen and test

update segment screen and test

* update test

update test

* updates expected screenshots

* cleanup css

Co-authored-by: Peter Zhang <matomo@Peters-MacBook-Pro.local>
Co-authored-by: sgiehl <stefan@matomo.org>

1 files changed, 3 insertions, 22 deletions

diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index a3d4c042cb..620965d6c1 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -288,20 +288,6 @@ Segmentation = (function($) {
 
         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>';
-            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="'+getSegmentTooltipEnrichedWithUsername(segment)+'">'+getSegmentName(segment)+'</option>';
-                segmentsDropdown.append(newOption);
-            }
             $(html).find(".segment-content > h3").after('<div piwik-segment-generator add-initial-condition="true"></div>').show();
             return html;
         };
@@ -320,7 +306,7 @@ Segmentation = (function($) {
                 .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_select').val(segment.idsegment);
 
             $(self.form).find('.available_segments a.dropList')
                 .html( getSegmentName(segment) )
@@ -525,14 +511,10 @@ Segmentation = (function($) {
                 e.preventDefault();
             });
 
-            self.target.on('change', '.available_segments_select', function (e) {
-                var option = $(e.currentTarget).find('option:selected');
-                openEditFormGivenSegment(option);
-            });
 
             self.target.on('click', ".delete", function() {
                 var segmentName = $(self.form).find(".segment-content > h3 > span").text();
-                var segmentId = $(self.form).find(".available_segments_select option:selected").attr("data-idsegment");
+                var segmentId = $(self.form).find(".available_segments_select").val();
                 var params = {
                     "idsegment" : segmentId
                 };
@@ -647,7 +629,6 @@ Segmentation = (function($) {
             makeDropList(".enable_all_users" , ".enable_all_users_select");
             makeDropList(".visible_to_website" , ".visible_to_website_select");
             makeDropList(".auto_archive" , ".auto_archive_select");
-            makeDropList(".available_segments" , ".available_segments_select");
             $(self.form).find(".saveAndApply").bind("click", function (e) {
                 e.preventDefault();
                 parseFormAndSave();
@@ -681,7 +662,7 @@ Segmentation = (function($) {
         var parseFormAndSave = function(){
             var segmentName = $(self.form).find(".segment-content > h3 >span").text();
             var segmentStr = getSegmentGeneratorController().getSegmentString();
-            var segmentId = $(self.form).find('.available_segments_select > option:selected').attr("data-idsegment");
+            var segmentId = $(self.form).find(".available_segments_select").val() || "";
             var user = $(self.form).find(".enable_all_users_select option:selected").val();
             var autoArchive = $(self.form).find(".auto_archive_select option:selected").val() || 0;
             var params = {