Make it possible to show a header message for datatables (#12146)

* Make it possible to show a header message for datatables

* update changelog

* add comment that messages will be printed raw

CHANGELOG.md

@@ -13,6 +13,7 @@ The Product Changelog at **[piwik.org/changelog](https://piwik.org/changelog)**
 
 ### New APIs
 * Reports and visualizations can now hide the export icons with a new property `$view->config->show_export`.
+* Reports and visualizations can now show a message above the report with a new property `$view->config->show_header_message`.
 * The following events have been added:
   * `Metric.addMetrics` Triggered to add new metrics that cannot be picked up automatically by the platform.
   * `Metric.addComputedMetrics` Triggered to add computed metrics that are not generated automatically

core/Plugin/Visualization.php

@@ -38,6 +38,7 @@ use Piwik\API\Request as ApiRequest;
  * itself:
  *
  * - report documentation,
+ * - a header message (if {@link Piwik\ViewDataTable\Config::$show_header_message} is set),
  * - a footer message (if {@link Piwik\ViewDataTable\Config::$show_footer_message} is set),
  * - a list of links to related reports (if {@link Piwik\ViewDataTable\Config::$related_reports} is set),
  * - a button that allows users to switch visualizations,

core/ViewDataTable/Config.php

@@ -371,8 +371,17 @@ class   Config
      */
     public $show_ecommerce = false;
 
+    /**
+     * Stores an HTML message (if any) to display above the datatable view.
+     *
+     * Attention: Message will be printed raw. Don't forget to escape where needed!
+     */
+    public $show_header_message = false;
+
     /**
      * Stores an HTML message (if any) to display under the datatable view.
+     *
+     * Attention: Message will be printed raw. Don't forget to escape where needed!
      */
     public $show_footer_message = false;
 

plugins/CoreHome/stylesheets/dataTable/_dataTable.less

@@ -183,7 +183,7 @@ table.dataTable img {
   position: absolute;
 }
 
-.datatableFooterMessage {
+.datatableHeaderMessage, .datatableFooterMessage {
   color: #888;
   text-align: left;
   margin: 10px;

plugins/CoreHome/templates/_dataTable.twig

@@ -49,6 +49,10 @@
         {% if error is defined %}
             {{ error.message }}
         {% else %}
+            {% if properties.show_header_message is defined and properties.show_header_message is not empty %}
+                <div class='datatableHeaderMessage'>{{ properties.show_header_message | raw }}</div>
+            {% endif %}
+
             {% if isDataTableEmpty %}
                 <div class="pk-emptyDataTable">
                 {% if showReportDataWasPurgedMessage is defined and showReportDataWasPurgedMessage %}

plugins/Dashboard/stylesheets/widget.less

@@ -140,8 +140,10 @@
   background-color: @theme-color-widget-background;
 }
 
-.widget .datatableFooterMessage {
-  padding-left: 12px;
+.widget {
+  .datatableHeaderMessage, .datatableFooterMessage {
+    padding-left: 12px;
+  }
 }
 
 .bar-graph-colors[data-name=grid-background] {

plugins/Morpheus/stylesheets/main.less

@@ -510,7 +510,7 @@ div.sparkline {
     color: @theme-color-text;
 }
 
-.datatableFooterMessage {
+.datatableHeaderMessage, .datatableFooterMessage {
     .font-default(13px, 18px);
     color: @color-silver;
     font-weight: normal;