Show error message on Elements with bad configured widget

lib/Controller/Layout.php

@@ -1473,7 +1473,7 @@ public function grid(Request $request, Response $response)
                         $module = $this->moduleFactory->getByType($widget->type);
                     } catch (NotFoundException $notFoundException) {
                         // This module isn't available, mark it as invalid.
-                        $widget->isValid = 0;
+                        $widget->isValid = false;
                         $widget->setUnmatchedProperty('moduleName', __('Invalid Module'));
                         $widget->setUnmatchedProperty('name', __('Invalid Module'));
                         $widget->setUnmatchedProperty('tags', []);
@@ -1504,7 +1504,7 @@ public function grid(Request $request, Response $response)
                     if (in_array('widget_validity', $embed)) {
                         $status = 0;
                         $layout->assessWidgetStatus($module, $widget, $status);
-                        $widget->isValid = $status;
+                        $widget->isValid = $status === 1;
                     }
 
                     // apply default transitions to a dynamic parameters on widget object.

lib/Widget/IcsProvider.php

@@ -51,7 +51,7 @@ public function fetchData(DataProviderInterface $dataProvider): WidgetProviderIn
         // Do we have a feed configured?
         $uri = $dataProvider->getProperty('uri');
         if (empty($uri)) {
-            throw new InvalidArgumentException('Please enter a the URI to a valid ICS feed.', 'uri');
+            throw new InvalidArgumentException(__('Please enter the URI to a valid ICS feed.'), 'uri');
         }
 
         // Create an ICal helper and pass it the contents of the file.

lib/Widget/RssProvider.php

@@ -51,7 +51,7 @@ public function fetchData(DataProviderInterface $dataProvider): WidgetProviderIn
     {
         $uri = $dataProvider->getProperty('uri');
         if (empty($uri)) {
-            throw new InvalidArgumentException(__('Please enter a the URI to a valid RSS feed.'), 'uri');
+            throw new InvalidArgumentException(__('Please enter the URI to a valid RSS feed.'), 'uri');
         }
 
         $picoFeedLoggingEnabled = Environment::isDevMode();

ui/src/editor-core/properties-panel.js

@@ -528,21 +528,12 @@ PropertiesPanel.prototype.render = function(
       // Check if we can use is repeat data
       dataToRender.repeatDataActive = hasData;
 
-      // Check if we need to show the required elements error message
-      if (target.requiredElements && target.requiredElements.valid == false) {
-        const dataType = lD.common.getModuleByType(target.subType).dataType;
-
-        // Get element names for the missing elements
-        const requiredMissingElements =
-          target.requiredElements.missing.map((el) => {
-            const elTitle = lD.templateManager.templates[dataType][el].title;
-            return (elTitle != undefined) ? elTitle : el;
-          });
+      // Check required elements
+      const errorMessage = target.checkRequiredElements();
 
+      if (errorMessage != '') {
         dataToRender.showErrorMessage = true;
-        dataToRender.errorMessage =
-          propertiesPanelTrans.requiredElementsMessage
-            .replace('%elements%', requiredMissingElements.join(', '));
+        dataToRender.errorMessage = errorMessage;
       }
     }
 

ui/src/editor-core/widget.js

@@ -151,6 +151,8 @@ const Widget = function(id, data, regionId = null, layoutObject = null) {
   this.cachedData = {};
   this.forceRecalculateData = false;
 
+  this.validateData = {};
+
   this.validateRequiredElements = function() {
     const moduleType = this.subType;
     // Check if element is required
@@ -1135,10 +1137,24 @@ Widget.prototype.getData = function() {
               data: sampleData,
               meta: data?.meta || {},
             };
+
+            // Save error to widget
+            self.validateData = {
+              sampleDataMessage: layoutEditorTrans.showingSampleData,
+            };
+
+            // If we have an error, add it to the validate data
+            if (data.success === false) {
+              self.validateData.errorMessage = data.message;
+            }
+
             resolve(self.cachedData);
           }
         }
       } else {
+        // Valid, so reset messages
+        self.validateData = {};
+
         // Run onDataLoad/onParseData
         Object.keys(modulesList).forEach(function(item) {
           if (modulesList[item].type === self.subType
@@ -1194,6 +1210,33 @@ Widget.prototype.getData = function() {
   return self.cachedDataPromise;
 };
 
+/**
+ * Update element map for this widget
+ * @return {string} error message
+ */
+Widget.prototype.checkRequiredElements = function() {
+  let errorMessage = '';
+  const self = this;
+
+  // Check if we need to show the required elements error message
+  if (self.requiredElements && self.requiredElements.valid == false) {
+    const dataType = lD.common.getModuleByType(self.subType).dataType;
+
+    // Get element names for the missing elements
+    const requiredMissingElements =
+      self.requiredElements.missing.map((el) => {
+        const elTitle = lD.templateManager.templates[dataType][el].title;
+        return (elTitle != undefined) ? elTitle : el;
+      });
+
+    errorMessage =
+      propertiesPanelTrans.requiredElementsMessage
+        .replace('%elements%', requiredMissingElements.join(', '));
+  }
+
+  return errorMessage;
+};
+
 /**
  * Update element map for this widget
  * @param {object} [element]

ui/src/layout-editor/viewer.js

@@ -1600,6 +1600,41 @@ Viewer.prototype.renderElementContent = function(
         const elData = elementData?.data;
         const meta = elementData?.meta;
 
+        // If parent widget isn't valid, replace error message
+        if (!$.isEmptyObject(parentWidget.validateData)) {
+          const $messageContainer = $elementContainer.find('.invalid-parent');
+          const errorArray = [$messageContainer.prop('title')];
+
+          // Required elements message
+          const requiredElementsErrorMessage =
+            parentWidget.checkRequiredElements();
+
+          (requiredElementsErrorMessage) &&
+            errorArray.push(
+              '<p>' +
+              requiredElementsErrorMessage +
+              '</p>');
+
+          // Default error message
+          (parentWidget.validateData.errorMessage) &&
+            errorArray.push(
+              '<p>' +
+              parentWidget.validateData.errorMessage +
+              '</p>');
+
+          (parentWidget.validateData.sampleDataMessage) &&
+            errorArray.push(
+              '<p class="sample-data">( ' +
+              parentWidget.validateData.sampleDataMessage +
+              ' )</p>');
+
+          // Set title/tooltip
+          $messageContainer.tooltip('dispose')
+            .prop('title', '<div class="custom-tooltip">' +
+            errorArray.join('') + '</div>');
+          $messageContainer.tooltip();
+        }
+
         // Check all data elements and make replacements
         for (const key in elData) {
           if (elData.hasOwnProperty(key)) {

ui/src/style/layout-editor.scss

@@ -1903,3 +1903,18 @@ body[layout-editor-fs] .moveable-control-box {
     color: $xibo-color-accent !important;
     font-size: 1rem !important;
 }
+
+/* Custom tooltip */
+.custom-tooltip {
+    text-align: left;
+    color: $xibo-color-neutral-0;
+    line-height: 1.2;
+
+    p {
+       margin: 0.3rem 0; 
+    }
+
+    .sample-data {
+        color: $xibo-color-tertiary;
+    }
+}

ui/src/templates/viewer-element-content.hbs

@@ -16,7 +16,7 @@
 {{/neq}}
 
 {{#if invalidParent}}
-<div class="invalid-parent" title="{{trans.invalidWidget}}">
+<div class="invalid-parent" data-html="true" title="{{trans.invalidWidget}}">
     <i class="fa fa-warning"></i>
 </div>
 {{/if}}

views/common.twig

@@ -490,7 +490,7 @@
                 left: "{{ "Left" |trans }}",
                 scale: "{{ "Scale"|trans }}",
                 layer: "{{ "Layer"|trans }}",
-                invalidWidget:  "{{ "This widget needs to be configured before it will be shown"|trans }}",
+                invalidWidget:  "{{ "This widget needs to be configured before it will be shown."|trans }}",
                 requiredElementsMessage: "{{ "This widget needs to have at least one of the following elements: %elements%." |trans }}",
                 dataSlot: "{{ "Data Slot"|trans }}",
                 dataSlotHelpText: "{{ "When there are more than one of the same element for a widget you can set the slot for each element. For example with two of the same element you'd have data slot 1 and data slot 2. If 10 items were returned slot 1 would receive items 1,3,5,7,9 and slot 2 would receive items 2,4,6,8,19."|trans }}",

views/layout-designer-page.twig

@@ -76,7 +76,8 @@
                     unlockMessage: "{% trans "The current layout will be unlocked to other users. You will also be redirected to the Layouts page" %}",
                     viewModeTitle: "{% trans "View" %}",
                     actions: "{% trans "Actions" %}",
-                    welcomeModalMessage: "{% trans "This is published and cannot be edited. You can checkout for editing below, or continue to view it in a read only mode." %}"
+                    welcomeModalMessage: "{% trans "This is published and cannot be edited. You can checkout for editing below, or continue to view it in a read only mode." %}",
+                    showingSampleData:  "{% trans "Showing sample data" %}",
                 };
 
                 var viewerTrans = {