From 7ff111e332fc1fdf7a7ce54f9ff20133fac199d7 Mon Sep 17 00:00:00 2001
From: Andrew <andrew.telnov@gmail.com>
Date: Mon, 15 Jan 2024 11:12:57 +0200
Subject: [PATCH] panelAddText/RemoveText properties are not reactive fix #7658
 (#7665)

* panelAddText/RemoveText/PrevText/NextText properties are not reactive fix #7658

* Add functional tests #7658

* Fix markup tests #7658

* FIx functional test #7658

* Fix knockout template #7658
---
 .../paneldynamic-add-btn.component.html       |  2 +-
 .../paneldynamic-remove-btn.component.html    |  2 +-
 .../PaneldynamicAddBtn.vue                    |  6 ++--
 .../PaneldynamicRemoveBtn.vue                 |  6 ++--
 .../paneldynamic-add-btn.html                 |  2 +-
 .../paneldynamic-remove-btn.html              |  2 +-
 .../paneldynamic-add-btn.tsx                  |  3 +-
 .../paneldynamic-remove-btn.tsx               |  3 +-
 .../paneldynamic-add-btn.vue                  |  2 +-
 .../paneldynamic-remove-btn.vue               |  4 +--
 testCafe/questions/paneldynamic.ts            | 33 +++++++++++++++++--
 ...eldynamic-list-legacy-navigation.snap.html |  2 +-
 .../snapshots/paneldynamic-list.snap.html     |  2 +-
 .../paneldynamic-no-footer-1.snap.html        |  2 +-
 .../paneldynamic-no-footer-2.snap.html        |  2 +-
 ...rogress-bottom-legacy-navigation.snap.html |  2 +-
 ...c-progress-top-legacy-navigation.snap.html |  2 +-
 ...neldynamic-remove-btn-action-bar.snap.html |  4 +--
 .../paneldynamic-remove-btn-right.snap.html   |  4 +--
 19 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.component.html b/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.component.html
index c566c6f4ba..0c1d11e496 100644
--- a/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.component.html
+++ b/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.component.html
@@ -1,3 +1,3 @@
 <button type="button" *ngIf="question.canAddPanel" [class]="question.getAddButtonCss()" (click)="addPanelClick()">
-<span [class]="question.cssClasses.buttonAddText">{{question.panelAddText}}</span>
+<span [class]="question.cssClasses.buttonAddText"><sv-ng-string [model]="question.locPanelAddText"></sv-ng-string></span>
 </button>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-remove-btn.component.html b/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-remove-btn.component.html
index abb4fe5539..dec26af815 100644
--- a/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-remove-btn.component.html
+++ b/packages/survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-remove-btn.component.html
@@ -1,4 +1,4 @@
 <button type="button" (click)="question.removePanelUI(panel)" [class]="question.getPanelRemoveButtonCss()"> 
-  <span [class]="question.cssClasses.buttonRemoveText">{{question.panelRemoveText}}</span>
+  <span [class]="question.cssClasses.buttonRemoveText"><sv-ng-string [model]="question.locPanelRemoveText"></sv-ng-string></span>
   <span [class]="question.cssClasses.iconRemove"></span>
 </button>
diff --git a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
index 7a7f7ab8fe..dfd4555b31 100644
--- a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
+++ b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
@@ -5,9 +5,9 @@
     :class="question.getAddButtonCss()"
     @click="addPanelClick"
   >
-    <span :class="question.cssClasses.buttonAddText">
-      {{ question.panelAddText }}
-    </span>
+    <span :class="question.cssClasses.buttonAddText"
+      ><survey-string :locString="question.locPanelAddText"
+    /></span>
   </button>
 </template>
 
diff --git a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
index 030f73f36a..190935838a 100644
--- a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
+++ b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
@@ -4,9 +4,9 @@
     :class="question.getPanelRemoveButtonCss()"
     @click="removePanelClick(panel)"
   >
-    <span :class="question.cssClasses.buttonRemoveText">{{
-      question.panelRemoveText
-    }}</span>
+    <span :class="question.cssClasses.buttonRemoveText"
+      ><survey-string :locString="question.locPanelRemoveText"
+    /></span>
     <span :class="question.cssClasses.iconRemove"></span>
   </button>
 </template>
diff --git a/src/knockout/components/paneldynamic-actions/paneldynamic-add-btn.html b/src/knockout/components/paneldynamic-actions/paneldynamic-add-btn.html
index 63111c9e3d..3e0956efdd 100644
--- a/src/knockout/components/paneldynamic-actions/paneldynamic-add-btn.html
+++ b/src/knockout/components/paneldynamic-actions/paneldynamic-add-btn.html
@@ -1,5 +1,5 @@
 <!-- ko if: question.koCanAddPanel -->
 <button type="button" data-bind="click: question.koAddPanelClick, css: question.koAddButtonCss, visible: question.koCanAddPanel">
-  <span data-bind="css: question.cssClasses.buttonAddText, text: question.panelAddText"></span>
+  <span data-bind="css: question.cssClasses.buttonAddText"><!-- ko template: { name: 'survey-string', data: question.locPanelAddText } --><!-- /ko --></span>
 </button>
 <!-- /ko -->
\ No newline at end of file
diff --git a/src/knockout/components/paneldynamic-actions/paneldynamic-remove-btn.html b/src/knockout/components/paneldynamic-actions/paneldynamic-remove-btn.html
index a2131815ca..4467ab0563 100644
--- a/src/knockout/components/paneldynamic-actions/paneldynamic-remove-btn.html
+++ b/src/knockout/components/paneldynamic-actions/paneldynamic-remove-btn.html
@@ -1,4 +1,4 @@
 <button type="button" data-bind="click: function() { question.koRemovePanelClick(panel); }, css: question.getPanelRemoveButtonCss()">
-  <span data-bind="css: question.cssClasses.buttonRemoveText, text: question.panelRemoveText"></span>
+  <span data-bind="css: question.cssClasses.buttonRemoveText"><!-- ko template: { name: 'survey-string', data: question.locPanelRemoveText } --><!-- /ko --></span>
   <span data-bind="css: question.cssClasses.iconRemove"></span>
 </button>
\ No newline at end of file
diff --git a/src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx b/src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx
index af3c275c93..6188aee68a 100644
--- a/src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx
+++ b/src/react/components/paneldynamic-actions/paneldynamic-add-btn.tsx
@@ -23,9 +23,10 @@ export class SurveyQuestionPanelDynamicAddButton extends SurveyQuestionPanelDyna
   }
   protected renderElement(): JSX.Element | null {
     if (!this.question.canAddPanel) return null;
+    const btnText = this.renderLocString(this.question.locPanelAddText);
     return (
       <button type="button" className={this.question.getAddButtonCss()} onClick={this.handleClick} >
-        <span className={this.question.cssClasses.buttonAddText}>{this.question.panelAddText}</span>
+        <span className={this.question.cssClasses.buttonAddText}>{btnText}</span>
       </button>
     );
   }
diff --git a/src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx b/src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx
index 273c03d9b6..2c05d762a7 100644
--- a/src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx
+++ b/src/react/components/paneldynamic-actions/paneldynamic-remove-btn.tsx
@@ -9,6 +9,7 @@ export class SurveyQuestionPanelDynamicRemoveButton extends SurveyQuestionPanelD
     this.question.removePanelUI(this.data.panel);
   }
   protected renderElement(): JSX.Element {
+    const btnText = this.renderLocString(this.question.locPanelRemoveText);
     return (
       <button
         className={this.question.getPanelRemoveButtonCss()}
@@ -16,7 +17,7 @@ export class SurveyQuestionPanelDynamicRemoveButton extends SurveyQuestionPanelD
         type="button">
         <span
           className={this.question.cssClasses.buttonRemoveText}
-        >{this.question.panelRemoveText}</span>
+        >{btnText}</span>
         <span
           className={this.question.cssClasses.iconRemove}
         ></span>
diff --git a/src/vue/components/paneldynamic-actions/paneldynamic-add-btn.vue b/src/vue/components/paneldynamic-actions/paneldynamic-add-btn.vue
index cebb0ea4cb..42a0a7a094 100644
--- a/src/vue/components/paneldynamic-actions/paneldynamic-add-btn.vue
+++ b/src/vue/components/paneldynamic-actions/paneldynamic-add-btn.vue
@@ -5,7 +5,7 @@
     :class="question.getAddButtonCss()"
     @click="addPanelClick"
     >
-    <span :class="question.cssClasses.buttonAddText">{{question.panelAddText}}</span>
+    <span :class="question.cssClasses.buttonAddText"><survey-string :locString="question.locPanelAddText"></survey-string></span>
   </button>
 </template>
 
diff --git a/src/vue/components/paneldynamic-actions/paneldynamic-remove-btn.vue b/src/vue/components/paneldynamic-actions/paneldynamic-remove-btn.vue
index ccfd4e6c04..cfc3702788 100644
--- a/src/vue/components/paneldynamic-actions/paneldynamic-remove-btn.vue
+++ b/src/vue/components/paneldynamic-actions/paneldynamic-remove-btn.vue
@@ -4,9 +4,7 @@
     :class="question.getPanelRemoveButtonCss()"
     @click="removePanelClick(panel)"
   >
-    <span :class="question.cssClasses.buttonRemoveText">{{
-      question.panelRemoveText
-    }}</span>
+    <span :class="question.cssClasses.buttonRemoveText"><survey-string :locString="question.locPanelRemoveText"></survey-string></span>
     <span :class="question.cssClasses.iconRemove"></span>
   </button>
 </template>
diff --git a/testCafe/questions/paneldynamic.ts b/testCafe/questions/paneldynamic.ts
index 4ddc3c322b..8f15a0ed1e 100644
--- a/testCafe/questions/paneldynamic.ts
+++ b/testCafe/questions/paneldynamic.ts
@@ -1,6 +1,6 @@
 import { applyTheme, frameworks, url, url_test, initSurvey, getSurveyResult, getQuestionJson,
   getDynamicPanelRemoveButton, getListItemByText, completeButton, setData } from "../helper";
-import { Selector } from "testcafe";
+import { Selector, ClientFunction } from "testcafe";
 const title = "paneldynamic";
 
 const json = {
@@ -324,7 +324,7 @@ frameworks.forEach((framework) => {
   );
 
   test("templateVisibleIf", async (t) => {
-    const addNewSelector = Selector("span").withText("Add new");
+    const addNewSelector = Selector("button").withText("Add new");
     await t
       .expect(addNewSelector.count).eql(1)
       .expect(Selector("span").withText("#1-2").visible).notOk()
@@ -436,4 +436,33 @@ frameworks.forEach((framework) => {
       ]
     });
   });
+  test("Reactive panelAddText/panelRemoveText - #7658", async (t) => {
+    const changeButtonsText = ClientFunction(
+      () => {
+        const q = window["survey"].getQuestionByName("panel1");
+        q.panelAddText = "#Add#";
+        q.panelRemoveText = "#Remove#";
+      }
+    );
+    await initSurvey(framework, {
+      elements: [
+        {
+          type: "paneldynamic",
+          name: "panel1",
+          panelCount: 2,
+          renderMode: "tab",
+          newPanelPosition: "next",
+          templateElements: [
+            {
+              type: "text",
+              name: "name"
+            },
+          ],
+        }
+      ]
+    });
+    await changeButtonsText();
+    await t.expect(Selector("button").withText("#Add#").exists).ok();
+    await t.expect(Selector("button").withText("#Remove#").exists).ok();
+  });
 });
\ No newline at end of file
diff --git a/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
index f1dfe88465..03476add12 100644
--- a/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-list-legacy-navigation.snap.html
@@ -5,6 +5,6 @@
 		<div class="sv_p_wrapper">
 		</div>
 		<button class="sv-paneldynamic__add-btn sv-paneldynamic__add-btn--list-mode" type="button">
-			<span>Add new</span>
+			<span><span class="sv-string-viewer">Add new</span></span>
 		</button>
 	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/paneldynamic-list.snap.html b/tests/markup/snapshots/paneldynamic-list.snap.html
index 3f88d2dca0..83b99cb18c 100644
--- a/tests/markup/snapshots/paneldynamic-list.snap.html
+++ b/tests/markup/snapshots/paneldynamic-list.snap.html
@@ -25,7 +25,7 @@
 						<div class="sv-action" id="sv-pd-add-btn">
 							<div class="sv-action__content">
 								<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" type="button">
-									<span>Add new</span>
+									<span><span class="sv-string-viewer">Add new</span></span>
 								</button>
 							</div>
 						</div>
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
index 4e6f44e23d..4e9f2f7366 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-1.snap.html
@@ -18,7 +18,7 @@
 								<div class="sv-action">
 									<div class="sv-action__content">
 										<button class="sd-action sd-action--negative sd-paneldynamic__btn sd-paneldynamic__remove-btn" type="button">
-											<span>Remove</span>
+											<span><span class="sv-string-viewer">Remove</span></span>
 											<span class="sd-hidden">
 											</span>
 										</button>
diff --git a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
index 4e6f44e23d..4e9f2f7366 100644
--- a/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
+++ b/tests/markup/snapshots/paneldynamic-no-footer-2.snap.html
@@ -18,7 +18,7 @@
 								<div class="sv-action">
 									<div class="sv-action__content">
 										<button class="sd-action sd-action--negative sd-paneldynamic__btn sd-paneldynamic__remove-btn" type="button">
-											<span>Remove</span>
+											<span><span class="sv-string-viewer">Remove</span></span>
 											<span class="sd-hidden">
 											</span>
 										</button>
diff --git a/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
index f5e34ff251..c34b091c69 100644
--- a/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-bottom-legacy-navigation.snap.html
@@ -22,7 +22,7 @@
 				</div>
 			</div>
 			<button class="sv-paneldynamic__add-btn" type="button">
-				<span>Add new</span>
+				<span><span class="sv-string-viewer">Add new</span></span>
 			</button>
 			<div class="sv-paneldynamic__progress-text">1 of 2</div>
 		</div>
diff --git a/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html b/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
index ccce60fddb..f9b056730e 100644
--- a/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
+++ b/tests/markup/snapshots/paneldynamic-progress-top-legacy-navigation.snap.html
@@ -20,7 +20,7 @@
 				</div>
 			</div>
 			<button class="sv-paneldynamic__add-btn" type="button">
-				<span>Add new</span>
+				<span><span class="sv-string-viewer">Add new</span></span>
 			</button>
 			<div class="sv-paneldynamic__progress-text">1 of 2</div>
 		</div>
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
index 9acd1a07d6..4650b1a334 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-action-bar.snap.html
@@ -18,7 +18,7 @@
 								<div class="sv-action" id="remove-panel-testid0panel0">
 									<div class="sv-action__content">
 										<button class="sd-action sd-action--negative sd-paneldynamic__btn sd-paneldynamic__remove-btn" type="button">
-											<span>Remove</span>
+											<span><span class="sv-string-viewer">Remove</span></span>
 											<span class="sd-hidden">
 											</span>
 										</button>
@@ -49,7 +49,7 @@
 								<div class="sv-action" id="sv-pd-add-btn">
 									<div class="sv-action__content">
 										<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" type="button">
-											<span>Add new</span>
+											<span><span class="sv-string-viewer">Add new</span></span>
 										</button>
 									</div>
 								</div>
diff --git a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
index 8dd206c365..c85284b500 100644
--- a/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
+++ b/tests/markup/snapshots/paneldynamic-remove-btn-right.snap.html
@@ -17,7 +17,7 @@
 						</div>
 					</div>
 					<button class="sd-action sd-action--negative sd-paneldynamic__btn sd-paneldynamic__remove-btn" type="button">
-						<span>Remove</span>
+						<span><span class="sv-string-viewer">Remove</span></span>
 						<span class="sd-hidden">
 						</span>
 					</button>
@@ -43,7 +43,7 @@
 								<div class="sv-action" id="sv-pd-add-btn">
 									<div class="sv-action__content">
 										<button class="sd-action sd-paneldynamic__add-btn sd-paneldynamic__add-btn--list-mode sd-paneldynamic__btn" type="button">
-											<span>Add new</span>
+											<span><span class="sv-string-viewer">Add new</span></span>
 										</button>
 									</div>
 								</div>