From 59a46495284d4f056fb6dbbc56af2bf46004dc30 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <kja@umbraco.dk>
Date: Wed, 29 Jan 2025 10:29:58 +0100
Subject: [PATCH] Do not allow editing read-only properties by clicking their
 labels (#18152)

* Do not allow editing read-only properties by clicking their labels

* Simplify the fix :)

* Fix linting issue
---
 .../components/content/umbtabbedcontent.directive.js   |  4 ++++
 .../components/property/umbproperty.directive.js       |  7 ++++---
 .../views/components/content/umb-tabbed-content.html   | 10 ++++++----
 .../src/views/components/property/umb-property.html    |  2 +-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
index e76da32a54..fe16d1cf9d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/umbtabbedcontent.directive.js
@@ -218,6 +218,10 @@
 
                 return !canEditCulture || !canEditSegment;
             }
+
+            $scope.isPreview = function(property) {
+              return ((property.readonly || !$scope.allowUpdate) && !property.supportsReadOnly) || ($scope.propertyEditorDisabled(property) && $scope.allowUpdate);
+            }
         }
 
         var directive = {
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
index 11efb4b811..073df54a7e 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbproperty.directive.js
@@ -25,11 +25,12 @@
                 propertyAlias: "@",
                 showInherit: "<",
                 inheritsFrom: "<",
-                hideLabel: "<?"
+                hideLabel: "<?",
+                preview: "<?"
             }
         });
 
-    
+
 
     function UmbPropertyController($scope, userService, serverValidationManager, udiService, angularHelper) {
 
@@ -55,7 +56,7 @@
         // returns the validation path for the property to be used as the validation key for server side validation logic
         vm.getValidationPath = function () {
 
-            var parentValidationPath = vm.parentUmbProperty ? vm.parentUmbProperty.getValidationPath() : null;            
+            var parentValidationPath = vm.parentUmbProperty ? vm.parentUmbProperty.getValidationPath() : null;
             var propAlias = vm.propertyAlias ? vm.propertyAlias : vm.property.alias;
             // the elementKey will be empty when this is not a nested property
             var valPath = vm.elementKey ? vm.elementKey + "/" + propAlias : propAlias;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
index 2dd0b83130..ccb2a5e0af 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html
@@ -15,12 +15,13 @@
                     property="property"
                     node="contentNodeModel"
                     show-inherit="contentNodeModel.variants.length > 1 && property.variation !== 'CultureAndSegment'"
-                    inherits-from="defaultVariant.displayName">
+                    inherits-from="defaultVariant.displayName"
+                    preview="isPreview(property)">
 
                     <umb-property-editor
                         model="property"
                         node="contentNodeModel"
-                        preview="((property.readonly || !allowUpdate) && !property.supportsReadOnly) || (propertyEditorDisabled(property) && allowUpdate)"
+                        preview="isPreview(property)"
                         allow-unlock="!property.readonly && allowUpdate && allowEditInvariantFromNonDefault"
                         on-unlock="unlockInvariantValue(property)"
                         ng-attr-readonly="{{property.readonly || !allowUpdate || undefined}}">
@@ -49,12 +50,13 @@
                     property="property"
                     node="contentNodeModel"
                     show-inherit="contentNodeModel.variants.length > 1 && property.variation !== 'CultureAndSegment'"
-                    inherits-from="defaultVariant.displayName">
+                    inherits-from="defaultVariant.displayName"
+                    preview="isPreview(property)">
 
                     <umb-property-editor
                         model="property"
                         node="contentNodeModel"
-                        preview="((property.readonly || !allowUpdate) && !property.supportsReadOnly) || (propertyEditorDisabled(property) && allowUpdate)"
+                        preview="isPreview(property)"
                         allow-unlock="!property.readonly && allowUpdate && allowEditInvariantFromNonDefault"
                         on-unlock="unlockInvariantValue(property)"
                         ng-attr-readonly="{{property.readonly || !allowUpdate || undefined}}">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
index e3a65a215b..e4166e8e98 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/property/umb-property.html
@@ -9,7 +9,7 @@
 
                 <div class="control-header" ng-hide="(vm.hideLabel || vm.property.hideLabel) === true">
 
-                    <label data-element="property-label-{{vm.property.alias}}" class="control-label" for="{{vm.property.alias}}" ng-attr-title="{{vm.controlLabelTitle}}" aria-label="Property alias: {{vm.controlAriaLabel}}">{{vm.property.label}}<span ng-if="vm.property.validation.mandatory || vm.property.ncMandatory"><strong class="umb-control-required">*</strong></span></label>
+                    <label data-element="property-label-{{vm.property.alias}}" class="control-label" for="{{vm.preview ? undefined : vm.property.alias}}" ng-attr-title="{{vm.controlLabelTitle}}" aria-label="Property alias: {{vm.controlAriaLabel}}">{{vm.property.label}}<span ng-if="vm.property.validation.mandatory || vm.property.ncMandatory"><strong class="umb-control-required">*</strong></span></label>
 
                     <umb-property-actions actions="vm.propertyActions"></umb-property-actions>