add helper text for direct properties

src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js

@@ -78,11 +78,13 @@
                 localizationService.localizeMany([
                     "validation_validation",
                     "contentTypeEditor_tabHasNoSortOrder",
-                    "general_generic"
+                    "general_generic",
+                    "contentTypeEditor_tabDirectPropertiesDropZone"
                 ]).then(data => {
                     validationTranslated = data[0];
                     tabNoSortOrderTranslated = data[1];
                     scope.genericTab.name = data[2];
+                    scope.tabDirectPropertiesDropZoneLabel = data[3];
                 });
             }
 

src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less

@@ -323,6 +323,7 @@
 
 .umb-group-builder__ungrouped-properties {
     margin-top: 20px;
+    position: relative;
 }
 
 /* ---------- GROUPS ----------  */

src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html

@@ -120,6 +120,12 @@
                 ng-click="addNewProperty(tab)">
                 <localize key="contentTypeEditor_addProperty"></localize>
             </button>
+
+            <umb-empty-state
+                ng-if="sortingMode && tab.properties.length === 0"
+                position="center">
+                {{ tabDirectPropertiesDropZoneLabel }}
+            </umb-empty-state>
         </umb-box-content>
     </umb-box>
 

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -1743,6 +1743,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont
     <key alias="confirmDeleteGroupNotice">This will also delete all items below this group.</key>
     <key alias="addTab">Add tab</key>
     <key alias="convertToTab">Convert to tab</key>
+    <key alias="tabDirectPropertiesDropZone">Drag properties here to place directly on the tab</key>
   </area>
   <area alias="languages">
     <key alias="addLanguage">Add language</key>