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>

15 files changed, 29 insertions, 45 deletions

diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
index ad988111e2..5e9032d7d0 100644
--- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
+++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
@@ -1,6 +1,6 @@
 /*!
  * Matomo - free/libre analytics platform
- * 
+ *
  * SegmentEditor screenshot tests.
  *
  * @link https://matomo.org
@@ -9,7 +9,7 @@
 
 describe("SegmentSelectorEditorTest", function () {
     var selectorsToCapture = ".segmentEditorPanel,.segmentEditorPanel .dropdown-body,.segment-element";
-    
+
     this.timeout(0);
 
     var generalParams = 'idSite=1&period=year&date=2012-08-09';
@@ -57,19 +57,6 @@ describe("SegmentSelectorEditorTest", function () {
         expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('3_segment_editor_edit_name');
     });
 
-    it("should show the segment editor's available segments dropdown", async function() {
-        var elem = await page.$('.available_segments a.dropList');
-        await elem.hover();
-        await page.click('.available_segments a.dropList');
-        expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('6_segment_editor_droplist');
-    });
-
-    it("should change segment when another available segment clicked in segment editor's available segments dropdown", async function() {
-        await (await page.jQuery('.ui-menu-item div:contains(Add new segment)')).click();
-        await page.waitForNetworkIdle();
-        expect(await page.screenshotSelector(selectorsToCapture)).to.matchImage('6_segment_editor_different');
-    });
-
     it("should close the segment editor when the close link is clicked", async function() {
         await page.evaluate(function () {
             $('.segmentEditorPanel .segment-footer .close').click();
@@ -99,6 +86,7 @@ describe("SegmentSelectorEditorTest", function () {
     });
 
     it("should add an OR condition when clicking on add OR", async function() {
+        await page.$eval('.segmentEditorPanel .segmentRow0 .ui-autocomplete-input', e => e.blur());
         await page.click('.segmentEditorPanel .segment-add-or');
         await page.waitForFunction(() => !! $('.segmentRow0 .segment-rows>div:eq(1)').length);
         await page.waitForNetworkIdle();
@@ -158,6 +146,8 @@ describe("SegmentSelectorEditorTest", function () {
 
     it("should correctly should show a confirmation when changing segment definition", async function() {
         await page.click('.segmentEditorPanel .editSegmentName');
+
+        await page.$eval('.segmentEditorPanel .segmentRow0 .ui-autocomplete-input', e => e.blur());
         await page.evaluate(function () {
             $('input.edit_segment_name').val('').change();
         });
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png
index dc0affb84e..4630e469b7 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_2_segment_editor_update.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2d86d3812dccc6082d3927a4050da8177367477589fd554c9b3dd964132ae8ab
-size 37687
+oid sha256:e72fae40a0c44ec32cf6b05e5c4ce5b93f1543c18b80c71571c64d5f85744ca7
+size 35175
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png
index 01b61abcbb..47f543fd9f 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_3_segment_editor_edit_name.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca0435eaa39c7f1bfd35c95a3a8b96009f48d73c4a7da84908fd81cee6969dc8
-size 38242
+oid sha256:a3812471fc9b5e4f07280e8e4f79879bd994c5551e5fec9faaf6b37640082ffd
+size 35717
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_different.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_different.png
deleted file mode 100644
index 7743cc40ea..0000000000
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_different.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:1c9d5c9c276b84c748bc10981750fb56765b80d87826bb450454082fe2c2747f
-size 32661
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_droplist.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_droplist.png
deleted file mode 100644
index 0350cb4d5d..0000000000
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_6_segment_editor_droplist.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:5a03084a18379d2da0956a298db9db1e86576cd9e1dc0249e5791e3b885eb69a
-size 43522
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png
index 7743cc40ea..f0e121c5a8 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_8_segment_editor_create.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c9d5c9c276b84c748bc10981750fb56765b80d87826bb450454082fe2c2747f
-size 32661
+oid sha256:947ace71f336490f42b5a02b0c75b3e2640dd04ce6d32e3804bc9624c09c626d
+size 31637
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png
index 8e08dc97eb..31d898093c 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_and_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c664031b2aad2bd73b42ed00fc9d3be17af3bc4e45e09293e74e0d50aa778fcd
-size 46590
+oid sha256:711be5b80eec70d3a4feab174c7d3d7cdb0e229bd73c2fa4e6154fe76cee91ec
+size 46109
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png
index 1beb529da9..f6c1394717 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_add_new_or_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b0358f3c95322545675d41de22ddab9aaa17444a74159e7a4901f2a4ebc42edf
-size 36928
+oid sha256:d2820216977a737bc67d1d44faf103f9d63b640d991a62e562988ec2d9fd58e2
+size 36194
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png
index b342abc4bd..eac36cdc07 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_dimension_drag_drop.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:41f219682f3144bb5699363a8d2c552e6af5e5babdba1fc74d3d0c13923a5f62
-size 32106
+oid sha256:76752106a18b1be7ea6d5a96ee1c5506af9f255b94441c5b24bb094349e683de
+size 31049
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png
index dc81b09ad7..330f3e7437 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_and_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c7ab6bf39d96dce3f86ae4594a258567a26bc96a3bee8b42a031949b7f180acc
-size 46402
+oid sha256:c9f1a841123a3281357ae4f481df580bcbc368cc9f8281ffe6c7aed7746a3743
+size 45783
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png
index 3e59b45457..0ad8146a11 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_drag_or_condition.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:04a33532477986127bc74f79efc8137e19117c51bcc184a69c8b7e0305e5f732
-size 36663
+oid sha256:70d9647ebbdb0157c645c15d655b53fa5a0b447de76adf8144c6002d7cd33d66
+size 35828
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png
index 6a35cf8d5e..a0a23c54a1 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_enabled_create_realtime_segments.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2433b1efd095d1e0d84e21474f3cfdbce3e8842b3255cb7e69f44ba4f5619ce4
-size 29354
+oid sha256:3b294dab4b6bc3518291c385c834b61151cdc62affd1eb5a356db2d18a60ed90
+size 28894
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png
index a640ecb5ca..e8a3180048 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_saved_details.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db02585d0d19dd562c894d502b1234509d8b631ddadbe9e78e3f44a41add3cf4
-size 48319
+oid sha256:eff8a925c8f9c1b072c294125eede776df828a7c33ee10307c68282249f3f330
+size 48182
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png
index c0c5564850..eaa19a1b7a 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_suggested_values.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f4f2b8e0ab34ae892c2c84772d103eafed5c55f50f44e47631d9599c69f4eee8
-size 59411
+oid sha256:e45b89ce929777b85711946e420be9abf9fd0d56ba20c64fbfc81e9f75d75582
+size 57402
diff --git a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png
index c25f0cbfa0..313b2d6383 100644
--- a/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png
+++ b/plugins/SegmentEditor/tests/UI/expected-screenshots/SegmentSelectorEditorTest_updated_details.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:557b99f235608aae163ec16d0ec35aaa43d973626039d056139f503bd44e9192
-size 49518
+oid sha256:37addc9332cacff2437a75dbee040de53ddaf4cd1d304f1055672f25e96904aa
+size 48952