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
surveyjs · Jan 15, 2024 · 7ff111e · 7ff111e
1 parent f80747a
commit 7ff111e
Show file tree

Hide file tree

Showing 19 changed files with 57 additions and 28 deletions.
diff --git a/...survey-angular-ui/src/components/paneldynamic-actions/paneldynamic-add-btn.component.html b/...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>
diff --git a/...vey-angular-ui/src/components/paneldynamic-actions/paneldynamic-remove-btn.component.html b/...vey-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
@@ -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
@@ -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
@@ -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 -->
diff --git 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>
diff --git 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
@@ -9,14 +9,15 @@ 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()}
         onClick={this.handleClick}
         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
@@ -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
@@ -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
@@ -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();
+  });
 });
diff --git 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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>