Make it easier to search help resources from within Matomo (#14870)

* Add link to matomo.org resources in awesome search

* Add "How can we help" card to help page

* PR fixes

* CSS improvements

* Update UI test screenshots

* PR improvements

* CSS improvements

* Remove duplicate links and reword community help links

* Update reference screenshot

* make it work for mobile, remove duplicate dot, minor style tweak

* fix screenshot test

7 files changed, 107 insertions, 22 deletions

diff --git a/plugins/Feedback/Controller.php b/plugins/Feedback/Controller.php
index a727542642..97c5469d9d 100644
--- a/plugins/Feedback/Controller.php
+++ b/plugins/Feedback/Controller.php
@@ -9,6 +9,7 @@
 namespace Piwik\Plugins\Feedback;
 
 use Piwik\Common;
+use Piwik\Container\StaticContainer;
 use Piwik\Date;
 use Piwik\Option;
 use Piwik\Piwik;
@@ -24,6 +25,8 @@ class Controller extends \Piwik\Plugin\Controller
     {
         $view = new View('@Feedback/index');
         $this->setGeneralVariablesView($view);
+        $popularHelpTopics = StaticContainer::get('popularHelpTopics');
+        $view->popularHelpTopics = $popularHelpTopics;
         $view->piwikVersion = Version::VERSION;
         return $view->render();
     }
diff --git a/plugins/Feedback/Feedback.php b/plugins/Feedback/Feedback.php
index f7cace66e6..834cff1c02 100644
--- a/plugins/Feedback/Feedback.php
+++ b/plugins/Feedback/Feedback.php
@@ -64,6 +64,7 @@ class Feedback extends \Piwik\Plugin
         $translationKeys[] = 'Feedback_PleaseLeaveExternalReviewForMatomo';
         $translationKeys[] = 'Feedback_RemindMeLater';
         $translationKeys[] = 'Feedback_NeverAskMeAgain';
+        $translationKeys[] = 'Feedback_SearchOnMatomo';
         $translationKeys[] = 'General_Ok';
         $translationKeys[] = 'General_Cancel';
     }
diff --git a/plugins/Feedback/config/config.php b/plugins/Feedback/config/config.php
index 4932533ad3..2261fb951d 100644
--- a/plugins/Feedback/config/config.php
+++ b/plugins/Feedback/config/config.php
@@ -1,3 +1,9 @@
 <?php
-return array();
-?>
\ No newline at end of file
+return array(
+    'popularHelpTopics' => array(
+        array('title' => 'Feedback_NotTrackingVisits', 'url' => 'https://matomo.org/faq/troubleshooting/faq_58/'),
+        array('title' => 'Feedback_TrackMultipleSites', 'url' => 'https://matomo.org/faq/troubleshooting/faq_104/'),
+        array('title' => 'Feedback_RemoveOtherLabel', 'url' => 'https://matomo.org/faq/troubleshooting/faq_54/'),
+        array('title' => 'Feedback_PurgeOldData', 'url' => 'https://matomo.org/faq/troubleshooting/faq_42/'),
+    )
+);
diff --git a/plugins/Feedback/lang/en.json b/plugins/Feedback/lang/en.json
index dcaf03e604..95139b8b7f 100644
--- a/plugins/Feedback/lang/en.json
+++ b/plugins/Feedback/lang/en.json
@@ -16,7 +16,9 @@
         "ThankYou": "Thank you for helping us to make Matomo better!",
         "TopLinkTooltip": "Tell us what you think, or request Professional Support.",
         "ViewAnswersToFAQ": "View answers to %1$sFrequently Asked Questions%2$s",
+        "FAQs": "FAQs",
         "ViewUserGuides": "Learn how to configure Matomo and how to effectively analyze your data with our %1$suser guides%2$s",
+        "UserGuides": "User guides",
         "CommunityHelp": "Community Help",
         "ProfessionalHelp": "Professional Help",
         "ProfessionalServicesIntro": "With a Matomo On-Premise Support Subscription, let our experienced team assist you online in utilising Matomo Analytics to grow your business.",
@@ -28,9 +30,18 @@
         "ProfessionalServicesEmailAlerts": "Email alerts for security releases for Matomo",
         "ContactUs": "Contact us",
         "VisitTheForums": "Visit the %1$s Forums%2$s and get help from the community of Matomo users",
+        "Forums": "Forums",
         "ReviewMatomoTitle": "Believe in Matomo?",
         "PleaseLeaveExternalReviewForMatomo": "Share your thoughts on one of these sites and inspire others to join our data revolution.",
         "RemindMeLater": "Remind me later",
-        "NeverAskMeAgain": "Never ask me again"
+        "NeverAskMeAgain": "Never ask me again",
+        "HowCanWeHelp": "How can we help?",
+        "NotTrackingVisits": "Matomo isn't tracking any visits",
+        "TrackMultipleSites": "I need to track multiple sites or subdomains",
+        "RemoveOtherLabel": "I want to see my 'Others' data",
+        "PurgeOldData": "I want to remove some old data",
+        "SearchHelpResources": "Search matomo.org help resources",
+        "PopularHelpTopics": "Popular help topics",
+        "SearchOnMatomo": "Search '%1$s' on Matomo.org"
     }
 }
\ No newline at end of file
diff --git a/plugins/Feedback/stylesheets/feedback.less b/plugins/Feedback/stylesheets/feedback.less
index 9f33886fca..5f89291d03 100644
--- a/plugins/Feedback/stylesheets/feedback.less
+++ b/plugins/Feedback/stylesheets/feedback.less
@@ -9,9 +9,17 @@
     line-height: 18px;
   }
 
-  p {
-    line-height: 1.7em;
+  p, h4 {
     font-size: 13px;
+    padding-bottom: 4px;
+  }
+
+  .browse-matomo-help {
+    padding-top: 10px;
+  }
+
+  h4 {
+    font-weight: bold;
   }
 
   .piwik-donate-call {
@@ -35,6 +43,45 @@
     font-style: normal;
   }
 
+  .feedback-help-resources {
+    h4 {
+      padding-top: 20px;
+      padding-bottom: 8px;
+    }
+
+    .search-matomo-form {
+      margin-right: 20px;
+      padding-bottom: 10px;
+      width: 100%;
+      display: table-row;
+
+      div.search-field {
+        display: table-cell;
+        width: 100%;
+        padding-left: 10px;
+      }
+
+      div.search-button {
+        height: 100%;
+        vertical-align: middle;
+        display: table-cell;
+        padding-right: 10px;
+      }
+
+      input[type="text"] {
+        width: 87%;
+        padding-left: 10px;
+        border: none;
+        margin-bottom: 0;
+
+        &:focus {
+          border: none;
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
   .footer {
     text-align: center;
     margin-top: 48px;
diff --git a/plugins/Feedback/templates/index.twig b/plugins/Feedback/templates/index.twig
index 6ac8e80feb..82c14f12b6 100644
--- a/plugins/Feedback/templates/index.twig
+++ b/plugins/Feedback/templates/index.twig
@@ -12,26 +12,43 @@
              content-title="{{ headline|e('html_attr') }}"
              feature="{{ 'General_Help'|translate|e('html_attr') }}">
             <p>{{ 'General_MatomoIsACollaborativeProjectYouCanContributeAndDonateNextRelease'|translate(
-                "<a target='_blank' rel='noreferrer noopener' href='https://matomo.org'>",
-                "</a>",
-                "<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/get-involved/'>",
-                "</a>",
-                "<a href='#donate'>",
-                "</a>",
-                "<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/team/'>",
-                "</a>"
+                    "<a target='_blank' rel='noreferrer noopener' href='https://matomo.org'>",
+                    "</a>",
+                    "<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/get-involved/'>",
+                    "</a>",
+                    "<a href='#donate'>",
+                    "</a>",
+                    "<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/team/'>",
+                    "</a>"
                 )|raw }}
             </p>
         </div>
 
-        <div piwik-content-block content-title="{{ 'Feedback_CommunityHelp'|translate|e('html_attr') }}">
-            <p> &bull; {{ 'Feedback_ViewUserGuides'|translate("<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/docs/'>","</a>")|raw }}.</p>
-            <p> &bull; {{ 'Feedback_ViewAnswersToFAQ'|translate("<a target='_blank' rel='noreferrer noopener' href='https://matomo.org/faq/'>","</a>")|raw }}.</p>
-            <p> &bull; {{ 'Feedback_VisitTheForums'|translate("<a target='_blank' rel='noreferrer noopener' href='https://forum.matomo.org/'>","</a>")|raw }}.</p>
-            <p> &bull; {{ 'API_LearnAboutCommonlyUsedTerms2'|translate }} <a href="{{ linkTo({'module':"API",'action':"glossary"}) }}">({{ 'API_Glossary'|translate }})</a></p>
-        </div>
+        <div piwik-content-block content-title="{{ "Feedback_HowCanWeHelp"|translate|e('html_attr') }}" class="feedback-help-resources">
+            <form target="_blank" method="GET" action="https://matomo.org/">
+                <div class="search-matomo-form z-depth-1">
+                    <div class="search-field">
+                        <span class="icon-search"></span>
+                        <input type="text" placeholder="{{'Feedback_SearchHelpResources'|translate|e('html_attr')}}" name="s"/>
+                    </div>
+                    <div class="search-button">
+                        <input type="submit" value="Search" class="btn hide-on-small-only"/>
+                    </div>
+                </div>
+            </form>
+
+            <h4>{{'Feedback_PopularHelpTopics'|translate}}</h4>
+            {% for helpTopic in popularHelpTopics %}
+                <p> &bull;  <a rel="noreferrer noopener" target="_blank" href="{{helpTopic.url|e('html_attr')}}">{{helpTopic.title|translate}}</a></p>
+            {% endfor %}
+
+            <h4>{{ 'Feedback_CommunityHelp'|translate }}</h4>
+            <p> &bull; <a target="_blank" rel="noreferrer noopener" href="https://matomo.org/docs/">{{ 'Feedback_UserGuides'|translate }}</a> - {{ 'Feedback_ViewUserGuides'|translate("","") }}.</p>
+            <p> &bull; <a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/">{{ 'Feedback_FAQs'|translate }}</a> - {{ 'Feedback_ViewAnswersToFAQ'|translate("","") }}.</p>
+            <p> &bull; <a target="_blank" rel="noreferrer noopener" href="https://forum.matomo.org/">{{ 'Feedback_Forums'|translate }}</a> - {{ 'Feedback_VisitTheForums'|translate("","") }}.</p>
+            <p> &bull; <a target="_blank" rel="noreferrer noopener" href="{{ linkTo({'module':"API",'action':"glossary"}) }}">{{ 'API_Glossary'|translate }}</a> - {{ 'API_LearnAboutCommonlyUsedTerms2'|translate }}</p>
 
-        <div piwik-content-block content-title="{{ 'Feedback_ProfessionalHelp'|translate|e('html_attr') }}">
+            <h4>{{ 'Feedback_ProfessionalHelp'|translate }}</h4>
             <p>{{ 'Feedback_ProfessionalServicesIntro'|translate }}</p>
 
             <p>{{ 'Feedback_ProfessionalServicesOfferIntro'|translate }}</p>
diff --git a/plugins/Feedback/tests/UI/expected-screenshots/FeedbackForm_show.png b/plugins/Feedback/tests/UI/expected-screenshots/FeedbackForm_show.png
index 421a4c7696..b417ff66cd 100644
--- a/plugins/Feedback/tests/UI/expected-screenshots/FeedbackForm_show.png
+++ b/plugins/Feedback/tests/UI/expected-screenshots/FeedbackForm_show.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b78f0608414e18dd686c24c5d1012d6136b07d1f8843bad8a9d0966030f42745
-size 251812
+oid sha256:a94ae8f16b511110888757868904fa004165daf2f75fde440fc46dfbc7d60f67
+size 271292