Features/3957 link value question clickable (#3983)

* Creator in read-only mode - Allow users to view the Correct question Answer fixed #3957

* Remove test.only #3957

* Fix unit test, move some checks into functional test #3957

packages/survey-creator-angular/src/questions/question-link-value.component.html

@@ -1,9 +1,10 @@
 <ng-template #template>
-  <svc-action-button [text]="model.linkValueText" [click]="model.doLinkClick.bind(model)" [selected]="model.isSelected"  [disabled]="model.isReadOnly" [classes]="model.linkSetButtonCssClasses" [title]="model.tooltip">
+  <svc-action-button [text]="model.linkValueText" [click]="model.doLinkClick.bind(model)" [selected]="model.isSelected"
+    [disabled]="!model.isClickable" [classes]="model.linkSetButtonCssClasses" [title]="model.tooltip">
   </svc-action-button>
   <ng-container *ngIf="!model.isReadOnly && model.showClear">
-    <svc-action-button
-      [text]="clearCaption" [click]="model.doClearClick.bind(model)" [selected]="model.isSelected" [disabled]="false" [classes]="model.linkClearButtonCssClasses">
+    <svc-action-button [text]="clearCaption" [click]="model.doClearClick.bind(model)" [selected]="model.isSelected"
+      [disabled]="false" [classes]="model.linkClearButtonCssClasses">
     </svc-action-button>
   </ng-container>
 </ng-template>

packages/survey-creator-core/src/components/link-value.ts

@@ -6,6 +6,7 @@ require("./link-value.scss");
 export class QuestionLinkValueModel extends Question {
   public linkClickCallback: () => void;
   public resetClickCallback: () => void;
+  public isClickableCallback: () => boolean;
   @property({ defaultValue: "svc-link-value-button svc-question-link__set-button" }) public linkSetButtonCssClasses: string;
   @property({ defaultValue: "svc-question-link__clear-button" }) public linkClearButtonCssClasses: string;
 
@@ -15,6 +16,7 @@ export class QuestionLinkValueModel extends Question {
   @property({ defaultValue: true }) allowClear: boolean;
   @property({ defaultValue: true }) showValueInLink: boolean;
   @property({ defaultValue: false }) showTooltip: boolean;
+  @property({ defaultValue: true }) isClickable: boolean;
   constructor(name: string, json: any = null) {
     super(name);
     const linkValueText = json && !json.showValueInLink && (editorLocalization.getString("pe.set")) + " " + json.title || null;
@@ -27,9 +29,16 @@ export class QuestionLinkValueModel extends Question {
       if (this.allowClear) {
         this.showClear = !Helpers.isValueEmpty(newValue);
       }
+      this.updateIsClickable();
     }
   }
-
+  protected onReadOnlyChanged(): void {
+    this.updateIsClickable();
+    super.onReadOnlyChanged();
+  }
+  private updateIsClickable(): void {
+    this.setPropertyValue("isClickable", !this.isReadOnly || (!!this.isClickableCallback && this.isClickableCallback()));
+  }
   public get ariaRole(): string {
     return "button";
   }

packages/survey-creator-core/src/property-grid/index.ts

@@ -1146,6 +1146,9 @@ export abstract class PropertyGridEditor implements IPropertyGridEditor {
     if (property.type !== "condition") {
       surveyPropertyEditor.editSurvey.css = defaultV2Css;
     }
+    if(question.isReadOnly) {
+      surveyPropertyEditor.editSurvey.mode = "display";
+    }
     if (!settings.showModal) return surveyPropertyEditor;
     const prevCurrentLocale = surveyLocalization.currentLocale;
     const locale = editorLocalization.currentLocale;
@@ -1168,6 +1171,12 @@ export abstract class PropertyGridEditor implements IPropertyGridEditor {
       "sv-property-editor",
       question.title, options.isMobileView ? "overlay" : "popup"
     );
+    if(question.isReadOnly) {
+      const applyBtn = popupModel.footerToolbar.getActionById("apply");
+      if(!!applyBtn) {
+        applyBtn.visible = false;
+      }
+    }
     popupModel.locale = locale;
     surveyLocalization.currentLocale = prevCurrentLocale;
     this.onModalPropertyEditorShown(editor, property, question, options);

packages/survey-creator-core/src/property-grid/values.ts

@@ -9,6 +9,7 @@ import {
 } from "./values-survey";
 import { ISurveyCreatorOptions } from "../creator-settings";
 import { SurveyHelper } from "../survey-helper";
+import { QuestionLinkValueModel } from "../components/link-value";
 
 export abstract class PropertyGridValueEditorBase extends PropertyGridEditor {
   public getJSON(
@@ -23,11 +24,15 @@ export abstract class PropertyGridValueEditorBase extends PropertyGridEditor {
     };
   }
   public onCreated = (obj: Base, question: Question, prop: JsonObjectProperty, options: ISurveyCreatorOptions) => {
-    (<any>question).linkClickCallback = () => {
-      this.showModalPropertyEditor(this, prop, question, options, () => (<any>question).isSelected = false);
-      (<any>question).isSelected = true;
+    const linkQuestion = <QuestionLinkValueModel>question;
+    linkQuestion.isClickableCallback = () => {
+      return !linkQuestion.isReadOnly || !this.isValueEmpty(linkQuestion.value);
     };
-    (<any>question).clearClickCallback = () => {
+    linkQuestion.linkClickCallback = () => {
+      this.showModalPropertyEditor(this, prop, question, options, () => linkQuestion.isSelected = false);
+      linkQuestion.isSelected = true;
+    };
+    linkQuestion.clearClickCallback = () => {
       this.clearPropertyValue(
         (<any>question).obj,
         prop,

packages/survey-creator-core/tests/property-grid/property-grid.tests.ts

@@ -1850,7 +1850,36 @@ test("DefaultValue editor for invisible values", () => {
   expect(valueQuestion.visibleChoices).toHaveLength(3);
   expect(valueQuestion.visibleChoices[1].isEnabled).toBeTruthy();
 });
-
+test("DefaultValue editor & readOnly", () => {
+  PropertyGridEditorCollection.register(new PropertyGridValueEditor());
+  const question = new QuestionDropdownModel("q1");
+  question.choices = [1, 2, 3, 4, 5];
+  question.defaultValue = 2;
+  const defaultValueProp = Serializer.findProperty("question", "defaultValue");
+  defaultValueProp.readOnly = true;
+  var propertyGrid = new PropertyGridModelTester(question);
+  const editQuestion = <QuestionLinkValueModel>propertyGrid.survey.getQuestionByName("defaultValue");
+  const property = <JsonObjectProperty>(<any>editQuestion).property;
+  expect(editQuestion.isReadOnly).toBeTruthy();
+  expect(editQuestion.isClickable).toBeTruthy();
+  question.defaultValue = undefined;
+  expect(editQuestion.isReadOnly).toBeTruthy();
+  expect(editQuestion.isClickable).toBeFalsy();
+  question.defaultValue = 2;
+  const editor = <PropertyGridValueEditor>(
+    PropertyGridEditorCollection.getEditor(property)
+  );
+  const valueEditor = editor.createPropertyEditorSetup(
+    question,
+    property,
+    editQuestion,
+    new EmptySurveyCreatorOptions()
+  );
+  var valueQuestion = valueEditor.editSurvey.getQuestionByName("question");
+  expect(valueQuestion).toBeTruthy();
+  expect(valueQuestion.value).toEqual(2);
+  defaultValueProp.readOnly = false;
+});
 test("DefaultRowValue editor", () => {
   var question = new QuestionMatrixDynamicModel("q1");
   question.addColumn("col1");

packages/survey-creator-knockout/src/question-link-value.html

@@ -1,5 +1,5 @@
 <svc-action-button
-  params="text: linkValueText, click: koClickLink, selected: isSelected, disabled: isReadOnly, classes: linkSetButtonCssClasses, title: tooltip">
+  params="text: linkValueText, click: koClickLink, selected: isSelected, disabled: !isClickable, classes: linkSetButtonCssClasses, title: tooltip">
 </svc-action-button>
 <!-- ko if: !isReadOnly && showClear -->
 <svc-action-button

packages/survey-creator-react/src/QuestionLinkValue.tsx

@@ -33,7 +33,7 @@ export class SurveyQuestionLinkValue extends SurveyQuestionElementBase {
           classes={this.question.linkSetButtonCssClasses}
           click={() => this.question.doLinkClick()}
           selected={this.question.isSelected}
-          disabled={this.question.isReadOnly}
+          disabled={!this.question.isClickable}
           text={this.question.linkValueText}
           title={this.question.tooltip}
         ></ActionButton>

testCafe/property-grid/data.ts

@@ -6,6 +6,10 @@ fixture`${title}`.page`${url}`.beforeEach(async (t) => {
   await t.maximizeWindow();
 });
 
+const makeCreatorReadOnly = ClientFunction(() => {
+  window["creator"].readOnly = true;
+});
+
 test("Default value", async (t) => {
   const json = {
     "pages": [
@@ -47,4 +51,35 @@ test("Default value", async (t) => {
   const resultJson2 = await getJSON();
   await t
     .expect(resultJson2.pages[0].elements[0].defaultValue).eql(undefined);
+});
+test("Default value & readonly", async (t) => {
+  const json = {
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "rating",
+            "name": "question1",
+            "defaultValue": 3
+          }
+        ]
+      }
+    ]
+  };
+  await setJSON(json);
+  await makeCreatorReadOnly();
+
+  const question1 = Selector("[data-name=\"question1\"]");
+  const dataTab = Selector("h4").withExactText("Data");
+
+  await t
+    .click(question1)
+    .click(dataTab)
+    .expect(Selector("span").withExactText("Clear").exists).notOk()
+    .click(Selector("span").withExactText("Change Default Answer"))
+    .click(Selector(".sv-popup__body-header").withExactText("Default Answer"))
+    .expect(Selector(".sv-popup--modal button").withExactText("Apply").filterVisible().exists).notOk()
+    .click(Selector(".sv-popup--modal button").withExactText("Cancel"))
+    .expect(Selector("span").withExactText("Change Default Answer").visible).ok();
 });