From 4e6daf343d8708916945c74608be182f5378d15a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Standa=20Luke=C5=A1?= <exyi@outlook.cz>
Date: Thu, 8 Dec 2022 17:42:59 +0100
Subject: [PATCH] Fix RouteLink.UrlSuffix={value: Property}

We have to unwrap the knockout observable before calling buildUrlSuffix
or concatenating strings
---
 src/Framework/Framework/Controls/RouteLinkHelpers.cs  |  2 +-
 src/Tests/ControlTests/SimpleControlTests.cs          | 11 ++++++++---
 .../testoutputs/SimpleControlTests.RouteLink.html     | 10 ++++++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/Framework/Framework/Controls/RouteLinkHelpers.cs b/src/Framework/Framework/Controls/RouteLinkHelpers.cs
index 800bddff76..4281866015 100644
--- a/src/Framework/Framework/Controls/RouteLinkHelpers.cs
+++ b/src/Framework/Framework/Controls/RouteLinkHelpers.cs
@@ -131,7 +131,7 @@ public static string GenerateKnockoutHrefExpression(string routeName, RouteLink
         {
             var urlSuffixBase =
                 control.GetValueBinding(RouteLink.UrlSuffixProperty)
-                ?.Apply(binding => binding.GetKnockoutBindingExpression(control))
+                ?.Apply(binding => binding.GetKnockoutBindingExpression(control, unwrapped: true))
                 ?? KnockoutHelper.MakeStringLiteral(control.UrlSuffix ?? "");
             var queryParamsArray = control.QueryParameters.RawValues.ToArray();
             Array.Sort(queryParamsArray, (a, b) => a.Key.CompareTo(b.Key)); // deterministic order of query params
diff --git a/src/Tests/ControlTests/SimpleControlTests.cs b/src/Tests/ControlTests/SimpleControlTests.cs
index 710543e0f5..8d799d9228 100644
--- a/src/Tests/ControlTests/SimpleControlTests.cs
+++ b/src/Tests/ControlTests/SimpleControlTests.cs
@@ -33,6 +33,8 @@ public async Task RouteLink()
                 <dot:RouteLink RenderSettings.Mode=Client RouteName=Simple Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix='#mySuffix' />
                 <!-- client rendering, no params, text binding -->
                 <dot:RouteLink RenderSettings.Mode=Client RouteName=Simple Text={value: Label} />
+                <!-- client rendering, dynamic suffix -->
+                <dot:RouteLink RenderSettings.Mode=Client RouteName=Simple Text='Click me' UrlSuffix={value: UrlSuffix} />
 
                 <!-- server rendering, no params -->
                 <dot:RouteLink RenderSettings.Mode=Server RouteName=Simple Text='Click me' />
@@ -40,22 +42,23 @@ public async Task RouteLink()
                 <dot:RouteLink RenderSettings.Mode=Server RouteName=Simple Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix='#mySuffix' />
                 <!-- server rendering, no params, text binding -->
                 <dot:RouteLink RenderSettings.Mode=Server RouteName=Simple Text={value: Label} />
+                <!-- server rendering, dynamic suffix -->
+                <dot:RouteLink RenderSettings.Mode=Server RouteName=Simple Text='Click me' UrlSuffix={value: UrlSuffix} />
 
                 <!-- client rendering, static params -->
                 <dot:RouteLink RenderSettings.Mode=Client RouteName={resource: 'WithParams'} Param-A=A Param-B={resource: 1} Text='Click me' />
                 <!-- client rendering, static params, query and suffix -->
                 <dot:RouteLink RenderSettings.Mode=Client RouteName=WithParams Param-A=A Param-B={resource: 1} Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix='#mySuffix' />
                 <!-- client rendering, dynamic params, query and suffix -->
-                <dot:RouteLink RenderSettings.Mode=Client RouteName=WithParams Param-A={value: Label} Param-B={value: Integer} Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix='#mySuffix' />
+                <dot:RouteLink RenderSettings.Mode=Client RouteName=WithParams Param-A={value: Label} Param-B={value: Integer} Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix={value: UrlSuffix} />
                 <!-- client rendering, static params, text binding -->
                 <dot:RouteLink RenderSettings.Mode=Client RouteName=WithParams Param-A=A Param-B=1 Text={value: Label} />
-
                 <!-- server rendering, static params -->
                 <dot:RouteLink RenderSettings.Mode=Server RouteName={resource: 'WithParams'} Param-A=A Param-B={resource: 1} Text='Click me' />
                 <!-- server rendering, static params, query and suffix -->
                 <dot:RouteLink RenderSettings.Mode=Server RouteName=WithParams Param-a=A Param-B={resource: 1} Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix='#mySuffix' />
                 <!-- server rendering, dynamic params, query and suffix -->
-                <dot:RouteLink RenderSettings.Mode=Server RouteName=WithParams Param-A={value: Label} Param-b={value: Integer} Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix='#mySuffix' />
+                <dot:RouteLink RenderSettings.Mode=Server RouteName=WithParams Param-A={value: Label} Param-b={value: Integer} Text='Click me' Query-Binding={value: Integer} Query-Constant='c/y' UrlSuffix={value: UrlSuffix} />
                 <!-- server rendering, static params, text binding -->
                 <dot:RouteLink RenderSettings.Mode=Server RouteName=WithParams Param-A=A Param-B=1 Text={value: Label} />
                 "
@@ -458,6 +461,8 @@ public class BasicTestViewModel: DotvvmViewModelBase
 
             public int[] IntArray { get; set; }
 
+            public string UrlSuffix { get; set; } = "#something";
+
             public GridViewDataSet<CustomerData> Customers { get; set; } = new GridViewDataSet<CustomerData>() {
                 RowEditOptions = {
                     EditRowId = 1,
diff --git a/src/Tests/ControlTests/testoutputs/SimpleControlTests.RouteLink.html b/src/Tests/ControlTests/testoutputs/SimpleControlTests.RouteLink.html
index 813a61ad12..909266dd3b 100644
--- a/src/Tests/ControlTests/testoutputs/SimpleControlTests.RouteLink.html
+++ b/src/Tests/ControlTests/testoutputs/SimpleControlTests.RouteLink.html
@@ -11,6 +11,9 @@
 		<!-- client rendering, no params, text binding -->
 		<a data-bind="text: Label" href="/Simple" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">My Label</a>
 		
+		<!-- client rendering, dynamic suffix -->
+		<a data-bind="attr: { href: '/' + &quot;Simple&quot; + UrlSuffix() }" href="/Simple#something" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
+		
 		<!-- server rendering, no params -->
 		<a href="/Simple" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
 		
@@ -20,6 +23,9 @@
 		<!-- server rendering, no params, text binding -->
 		<a data-bind="text: Label" href="/Simple" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">My Label</a>
 		
+		<!-- server rendering, dynamic suffix -->
+		<a data-bind="attr: { href: '/' + &quot;Simple&quot; + UrlSuffix() }" href="/Simple#something" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
+		
 		<!-- client rendering, static params -->
 		<a href="/WithParams/A-1" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
 		
@@ -27,7 +33,7 @@
 		<a data-bind="attr: { href: '/' + dotvvm.buildRouteUrl(&quot;WithParams/{a}-{b}/{c}&quot;, {&quot;b&quot;: 1,&quot;a&quot;: &quot;A&quot;}) + dotvvm.buildUrlSuffix(&quot;#mySuffix&quot;, {&quot;Binding&quot;: int,&quot;Constant&quot;: &quot;c/y&quot;}) }" href="/WithParams/A-1?Binding=10000000&amp;Constant=c%2Fy#mySuffix" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
 		
 		<!-- client rendering, dynamic params, query and suffix -->
-		<a data-bind="attr: { href: '/' + dotvvm.buildRouteUrl(&quot;WithParams/{a}-{b}/{c}&quot;, {&quot;b&quot;: int,&quot;a&quot;: Label}) + dotvvm.buildUrlSuffix(&quot;#mySuffix&quot;, {&quot;Binding&quot;: int,&quot;Constant&quot;: &quot;c/y&quot;}) }" href="/WithParams/My%20Label-10000000?Binding=10000000&amp;Constant=c%2Fy#mySuffix" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
+		<a data-bind="attr: { href: '/' + dotvvm.buildRouteUrl(&quot;WithParams/{a}-{b}/{c}&quot;, {&quot;b&quot;: int,&quot;a&quot;: Label}) + dotvvm.buildUrlSuffix(UrlSuffix(), {&quot;Binding&quot;: int,&quot;Constant&quot;: &quot;c/y&quot;}) }" href="/WithParams/My%20Label-10000000?Binding=10000000&amp;Constant=c%2Fy#something" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
 		
 		<!-- client rendering, static params, text binding -->
 		<a data-bind="text: Label" href="/WithParams/A-1" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">My Label</a>
@@ -39,7 +45,7 @@
 		<a data-bind="attr: { href: '/' + dotvvm.buildRouteUrl(&quot;WithParams/{a}-{b}/{c}&quot;, {&quot;b&quot;: 1,&quot;a&quot;: &quot;A&quot;}) + dotvvm.buildUrlSuffix(&quot;#mySuffix&quot;, {&quot;Binding&quot;: int,&quot;Constant&quot;: &quot;c/y&quot;}) }" href="/WithParams/A-1?Binding=10000000&amp;Constant=c%2Fy#mySuffix" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
 		
 		<!-- server rendering, dynamic params, query and suffix -->
-		<a data-bind="attr: { href: '/' + dotvvm.buildRouteUrl(&quot;WithParams/{a}-{b}/{c}&quot;, {&quot;b&quot;: int,&quot;a&quot;: Label}) + dotvvm.buildUrlSuffix(&quot;#mySuffix&quot;, {&quot;Binding&quot;: int,&quot;Constant&quot;: &quot;c/y&quot;}) }" href="/WithParams/My%20Label-10000000?Binding=10000000&amp;Constant=c%2Fy#mySuffix" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
+		<a data-bind="attr: { href: '/' + dotvvm.buildRouteUrl(&quot;WithParams/{a}-{b}/{c}&quot;, {&quot;b&quot;: int,&quot;a&quot;: Label}) + dotvvm.buildUrlSuffix(UrlSuffix(), {&quot;Binding&quot;: int,&quot;Constant&quot;: &quot;c/y&quot;}) }" href="/WithParams/My%20Label-10000000?Binding=10000000&amp;Constant=c%2Fy#something" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">Click me</a>
 		
 		<!-- server rendering, static params, text binding -->
 		<a data-bind="text: Label" href="/WithParams/A-1" onclick="event.stopPropagation();return !this.hasAttribute('disabled');">My Label</a>