MC-412: Advanced tab in content types required validation

- Added validation for complex type
- Added validation styling to margins and padding

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_row_form.xml

@@ -344,6 +344,11 @@
                     <item name="default" xsi:type="string">{"margin":{"bottom":"10","left":"0","right":"0","top":"0"},"padding":{"bottom":"10","left":"10","right":"10","top":"10"}}</item>
                 </item>
             </argument>
+            <settings>
+                <validation>
+                    <rule name="required-entry" xsi:type="boolean">true</rule>
+                </validation>
+            </settings>
         </field>
     </fieldset>
 </form>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_config.less

@@ -14,4 +14,30 @@
         margin-bottom: 15px;
         margin-top: 15px;
     }
+
+    .admin__field {
+        &._error {
+            .admin__field-control > .admin__field-design-options > .layout-onion {
+                border: 1px solid @field-error-control__border-color;
+                overflow: hidden;
+            }
+        }
+    }
+
+    ._required {
+        > .admin__field-label {
+            > label:after {
+                color: #e22626;
+                content: '*';
+                display: inline-block;
+                font-size: 1.6rem;
+                font-weight: 500;
+                line-height: 1;
+                margin-left: 10px;
+                margin-top: .2rem;
+                position: absolute;
+                z-index: 1;
+            }
+        }
+    }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

@@ -5,8 +5,9 @@
 
 define([
     'jquery',
+    'underscore',
     'Magento_Ui/js/lib/validation/utils'
-], function ($, utils) {
+], function ($, _, utils) {
     'use strict';
 
     /**
@@ -44,23 +45,23 @@ define([
     }
 
     return function (validator) {
-        var requiredInputRuleHandler = validator.getRule('required-entry').handler;
+        var requiredInputRule = validator.getRule('required-entry');
 
         validator.addRule(
             'required-entry-location-name',
-            requiredInputRuleHandler,
+            requiredInputRule.handler,
             $.mage.__('Please enter the location name.')
         );
 
         validator.addRule(
             'required-entry-latitude',
-            requiredInputRuleHandler,
+            requiredInputRule.handler,
             $.mage.__('Enter latitude')
         );
 
         validator.addRule(
             'required-entry-longitude',
-            requiredInputRuleHandler,
+            requiredInputRule.handler,
             $.mage.__('Enter longitude')
         );
 
@@ -94,6 +95,17 @@ define([
             $.mage.__('Please enter a valid video URL.')
         );
 
+        validator.addRule(
+            'required-entry',
+            function (value) {
+                if (typeof value !== 'object') {
+                    return requiredInputRule.handler(value);
+                }
+                return !_.contains(_.flatten(_.map(value, _.values)), "");
+            },
+            $.mage.__(requiredInputRule.message)
+        );
+
         return validator;
     };
 });