Add "test" button to segment editor (#14884)

* Take user to the visitors log after adding new segment from segmented visitors log

* Apply segment when displaying visitor log while creating new segment

* Add the test segment button

* Fix JS error

* Remove debugger statements

* Display test visitor log in popover when user clicks Test Segment button

* Update test screenshots

* Hide datatable controls on popover visitor log; prevent Esc key from closing segment editor when popover is open

* Close "test" popover when user presses escape key

* Close the PiwikPopover when user clicks away from it

17 files changed, 63 insertions, 28 deletions

diff --git a/plugins/SegmentEditor/SegmentEditor.php b/plugins/SegmentEditor/SegmentEditor.php
index 7efc8dce91..b60861427b 100644
--- a/plugins/SegmentEditor/SegmentEditor.php
+++ b/plugins/SegmentEditor/SegmentEditor.php
@@ -286,6 +286,7 @@ class SegmentEditor extends \Piwik\Plugin
         $translationKeys[] = 'SegmentEditor_ThisSegmentIsCompared';
         $translationKeys[] = 'SegmentEditor_ThisSegmentIsSelectedAndCannotBeCompared';
         $translationKeys[] = 'SegmentEditor_CompareThisSegment';
+        $translationKeys[] = 'Live_VisitsLog';
     }
 
     public static function getAllSegmentsForSite($idSite)
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index afc9b02906..70e37d779d 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -563,6 +563,10 @@ Segmentation = (function($) {
                     if (self.target.find('[uicontrol="expandable-select"] .expandableList:visible').length) {
                         return;
                     }
+                    if (Piwik_Popover.isOpen()) {
+                        Piwik_Popover.close();
+                        return;
+                    }
                     $(".segmentListContainer", self.target).show();
                     closeForm();
                 }
@@ -655,6 +659,10 @@ Segmentation = (function($) {
                 e.preventDefault();
                 parseFormAndSave();
             });
+            $(self.form).find(".testSegment").bind("click", function (e) {
+                e.preventDefault();
+                testSegment();
+            });
 
             if(typeof mode !== "undefined" && mode == "new")
             {
@@ -742,6 +750,24 @@ Segmentation = (function($) {
             }
         };
 
+        var testSegment = function() {
+            var segmentStr = getSegmentGeneratorController().getSegmentString();
+            var encSegment = jQuery(jQuery('.segmentEditorPanel').get(0)).data('uiControlObject').uriEncodeSegmentDefinition(segmentStr);
+
+            var url = window.location.href;
+            //  URL might have format index.php?aparam=avalue#?anotherparam=anothervalue
+            // Need to strip off stuff before second ? as it mucks with updateParamValue
+            url = url.replace(/\?[\S]*\?/, '?');
+            // Show user the Visits Log so that they can easily refine their new segment if needed
+            url = broadcast.updateParamValue('viewDataTable=VisitorLog', url);
+            url = broadcast.updateParamValue('module=Live', url);
+            url = broadcast.updateParamValue('action=getLastVisitsDetails', url);
+            url = broadcast.updateParamValue('segment=' + encSegment, url);
+            url = broadcast.updateParamValue('inPopover=1', url);
+
+            Piwik_Popover.createPopupAndLoadUrl(url, _pk_translate('Live_VisitsLog'));
+        };
+
         var makeDropList = function(spanId, selectId){
             var select = $(self.form).find(selectId).hide();
             var dropList = $( '<a class="dropList dropdown">' )
@@ -1078,9 +1104,15 @@ $(document).ready(function() {
                 && !$(e.target).is('.segment-element')
                 && $(e.target).hasClass("ui-corner-all") == false
                 && $(e.target).hasClass("ddmetric") == false
+                && $(e.target).hasClass("ui-icon-closethick") == false
+                && $(e.target).hasClass("ui-button-text") == false
                 && $(".segment-element:visible", self.$element).length == 1
             ) {
-                $(".segment-element:visible a.close", self.$element).click();
+                if (Piwik_Popover.isOpen()) {
+                    Piwik_Popover.close();
+                } else {
+                    $(".segment-element:visible a.close", self.$element).click();
+                }
             }
 
             if ($(e.target).closest('.segmentListContainer').length === 0
diff --git a/plugins/SegmentEditor/lang/en.json b/plugins/SegmentEditor/lang/en.json
index 8e3622801e..5713dfbd78 100644
--- a/plugins/SegmentEditor/lang/en.json
+++ b/plugins/SegmentEditor/lang/en.json
@@ -55,6 +55,7 @@
         "AddThisToMatomo": "Add this segment to Matomo",
         "ThisSegmentIsCompared": "This segment is currently compared.",
         "ThisSegmentIsSelectedAndCannotBeCompared": "This segment is currently selected so cannot be selected to compare.",
-        "CompareThisSegment": "Compare this segment with the selected segment and period."
+        "CompareThisSegment": "Compare this segment with the selected segment and period.",
+        "Test": "Test"
     }
 }
\ No newline at end of file
diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig
index 528198ce5b..f4cbfc8370 100644
--- a/plugins/SegmentEditor/templates/_segmentSelector.twig
+++ b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -70,6 +70,7 @@
             <div piwik-rate-feature title="Segment Editor" style="display:inline-block;float: left;margin-top: 2px;margin-right: 10px;"></div>
             <a class="btn-flat delete" href="#">{{ 'General_Delete'|translate }}</a>
             <a class="btn-flat close" href="#">{{ 'General_Close'|translate }}</a>
+            <a class="btn-flat testSegment">{{ 'SegmentEditor_Test'|translate }}</a>
             <button class="btn saveAndApply">{{ 'SegmentEditor_SaveAndApply'|translate }}</button>
         </div>
     </div>
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 3498fc2b6b..5a5738728a 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:a82913ced9c334aa01b5ac0ac0f7e9e994580ae2d4190bf27b7af44d4cd2fdb1
-size 37781
+oid sha256:f66eadc18cabe2ab949202870e5634adb1626d4795e097e7bae494a51482fa46
+size 38290
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 2e816f812d..ace95491c0 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:ea20c2b36c50cd8104948a8dadb612ec3767f99d7638be2ad4ad139ab7fea719
-size 38424
+oid sha256:a00d2064456331b08a34f9882fe7036c5a18de7d71c59459d476e26dea21ecfe
+size 38932
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
index 54b7d68484..4e1cbcbad6 100644
--- 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
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8f590a000803729e3a6a562c8e205e6881a23c89906a2f9217dc4723c1ca2d30
-size 32728
+oid sha256:6fb36ff60f6216bb1ff5348a165745177d13a8acd30aa01888c0ea4936c3a9a2
+size 33241
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
index d2f94d8483..f8e5c26bb7 100644
--- 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
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8f1706139247003932a43488f6e478460f6af48a959df89e107bfb37556b2738
-size 44649
+oid sha256:6ece6a7b3193bed1054ea71c748d0943e7a863b56d645b013be20179ca9fbfe4
+size 45165
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 54b7d68484..4e1cbcbad6 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:8f590a000803729e3a6a562c8e205e6881a23c89906a2f9217dc4723c1ca2d30
-size 32728
+oid sha256:6fb36ff60f6216bb1ff5348a165745177d13a8acd30aa01888c0ea4936c3a9a2
+size 33241
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 7ca9b9d6af..bdb3715c81 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:de75e4939409a7cc6aa22f9620461cffb8a86788dbfae80b40490ce612e3aa6c
-size 46819
+oid sha256:5d7245d1fbf8167c859cdc7c093621eda0fd2b14c0650bd9c6f0d0e8fe8af5fe
+size 47337
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 26e2ab0740..2c78bc8173 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:e34b5731a7ebac0d7e5cdd7728c276ff5209fffd71f67b69241659798dca749e
-size 37167
+oid sha256:4522dde4fad233d07c391982250ad38532f2ca10b5460eb7d0039e893ca2778d
+size 37673
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 b138ce56cb..0e3ef4149d 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:a2cbecb34fabf6fcf91a075522daa6274bd2397cf2037b43ad7428bab07100d4
-size 32074
+oid sha256:44d4fe35ba01f0ef0cfe4c6bcc9332094456a95b30843f355d56168826deb296
+size 32597
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 3f50e89f43..67e0c4e07e 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:72b4e6ee132e65a5beccafa2786ab5907a5086e70f894b32b7389debd2d39cef
-size 46249
+oid sha256:175d4efd0ce4663f562b212577c7bef7701dbff8fea2e1dbccc15bb2e4839d08
+size 46769
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 c4aadc8175..93d10f1383 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:51428dfeea241b7814081ef35f8159b0816e9ba1d96a01ea7b9751d742af3ce1
-size 36590
+oid sha256:d99d6dc62c0ecd54e072c716db11ad75d42318656f75415451e50600d3a53971
+size 37090
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 45e2f0afb2..d9cdd147ac 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:f935af3868836726eda6679f471fa492cfec522c2d236af0902f3306e1bfe4e7
-size 48138
+oid sha256:31df3f76896229ef0ccab7cc3de2373dd2eca1ea2cee9cdd768d89248e09cd10
+size 48659
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 1be80f716e..83d4d7d1f8 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:a83a8e0583c9af8a540402f825df4d1e278e2b477f830030bb0d7b4b4d3b68fc
-size 54816
+oid sha256:9348281a91e9fb2a920e07d3559a174185ef4263e277ceed81353e3a3c4eecbd
+size 55424
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 ff3c0dbc0c..45c3c6df66 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:4ac2e22be3c1aa8163819e53d06f00913da21b3d94bbfd0781f67186f9ab6688
-size 50327
+oid sha256:d59e2a7c43a67a034edfd86ef9a9028bbc880230f465bb27110ca5b35310c6cf
+size 50854