Rename tabs in code

Fixes #4531

packages/creator-presets-core/tests/presets-editor.tests.ts

@@ -29,13 +29,13 @@ test("Preset edit model, page component", () => {
   const activeTabQuestion = survey.getQuestionByName("tabs_activeTab");
   expect(allItemsQuestion.choices).toHaveLength(6);
   expect(allItemsQuestion.choices[0].value).toEqual("designer");
-  expect(allItemsQuestion.choices[4].value).toEqual("editor");
+  expect(allItemsQuestion.choices[4].value).toEqual("json");
   expect(allItemsQuestion.choices[5].value).toEqual("translation");
   expect(allItemsQuestion.choices[0].title).toEqual("Designer");
   expect(allItemsQuestion.choices[4].title).toEqual("JSON Editor");
-  expect([].concat(allItemsQuestion.value)).toEqual(["designer", "preview", "editor"]);
+  expect([].concat(allItemsQuestion.value)).toEqual(["designer", "preview", "json"]);
   expect(itemsQuestion.visibleChoices).toHaveLength(3);
-  expect([].concat(itemsQuestion.value)).toEqual(["designer", "preview", "editor"]);
+  expect([].concat(itemsQuestion.value)).toEqual(["designer", "preview", "json"]);
   expect(activeTabQuestion.visibleChoices).toHaveLength(3);
   expect(activeTabQuestion.value).toEqual("designer");
 
@@ -51,7 +51,7 @@ test("Preset edit model, page component", () => {
     tabs: { items: ["designer", "translation"], activeTab: "translation" }
   });
 
-  allItemsQuestion.value = ["designer", "preview", "editor"];
+  allItemsQuestion.value = ["designer", "preview", "json"];
   activeTabQuestion.value = "designer";
   const resJson2 = editor.getJsonFromSurveyModel();
   expect(resJson2).toEqual({});
@@ -61,7 +61,7 @@ test("Preset edit model, tabs page with creator, default items", () => {
   const survey = editor.model;
   const itemsQuestion = survey.getQuestionByName("tabs_items");
   const defultTabs = JSON.parse(JSON.stringify(itemsQuestion.value));
-  expect(defultTabs).toEqual(["designer", "preview", "editor"]);
+  expect(defultTabs).toEqual(["designer", "preview", "json"]);
   itemsQuestion.value = ["preview", "logic"];
   const activeTabQuestion = survey.getQuestionByName("tabs_activeTab");
   activeTabQuestion.value = "logic";
@@ -78,7 +78,7 @@ test("Preset edit model, tabs page one selected element", () => {
   const allItemsQuestion = survey.getQuestionByName("tabs_allItems");
   const itemsQuestion = survey.getQuestionByName("tabs_items");
   const activeTabQuestion = survey.getQuestionByName("tabs_activeTab");
-  expect([].concat(itemsQuestion.value)).toEqual(["designer", "preview", "editor"]);
+  expect([].concat(itemsQuestion.value)).toEqual(["designer", "preview", "json"]);
   allItemsQuestion.value = ["designer"];
   expect([].concat(itemsQuestion.value)).toEqual(["designer"]);
   expect(itemsQuestion.isVisible).toBeFalsy();
@@ -895,7 +895,7 @@ test("Preset edit model, save creator JSON on applying new preset", () => {
   editor.creator.JSON = { elements: [{ type: "text", name: "q1" }, { type: "text", name: "q2" }] };
   const itemsQuestion = survey.getQuestionByName("tabs_items");
   const defultTabs = JSON.parse(JSON.stringify(itemsQuestion.value));
-  expect(defultTabs).toEqual(["designer", "preview", "editor"]);
+  expect(defultTabs).toEqual(["designer", "preview", "json"]);
   itemsQuestion.value = ["preview", "logic"];
   const activeTabQuestion = survey.getQuestionByName("tabs_activeTab");
   activeTabQuestion.value = "logic";

packages/survey-creator-core/src/components/tabs/designer-plugin.ts

@@ -397,7 +397,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       iconName: "icon-preview",
       iconSize: "auto",
       action: () => {
-        this.creator.makeNewViewActive(this.creator.showThemeTab ? "theme" : "test");
+        this.creator.makeNewViewActive(this.creator.showThemeTab ? "theme" : "preview");
       },
       visible: this.createVisibleUpdater(),
       locTitleName: "tabs.preview",

packages/survey-creator-core/src/components/tabs/json-editor-ace.ts

@@ -113,7 +113,7 @@ export class TabJsonEditorAcePlugin
   implements ICreatorPlugin {
   constructor(creator: SurveyCreatorModel) {
     super(creator);
-    creator.addPluginTab("editor", this, undefined, "svc-tab-json-editor-ace");
+    creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-ace");
   }
   protected createModel(
     creator: SurveyCreatorModel

packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts

@@ -165,7 +165,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
       iconSize: "auto",
       locTitleName: "ed.surveyJsonImportButton",
       locTooltipName: "ed.surveyJsonImportButton",
-      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
+      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "json"; }),
       mode: "small",
       component: "sv-action-bar-item",
       needSeparator: true,
@@ -192,7 +192,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
       iconSize: "auto",
       locTitleName: "ed.surveyJsonExportButton",
       locTooltipName: "ed.surveyJsonExportButton",
-      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
+      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "json"; }),
       mode: "small",
       component: "sv-action-bar-item",
       action: () => {
@@ -207,7 +207,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
       iconSize: "auto",
       locTitleName: "ed.surveyJsonCopyButton",
       locTooltipName: "ed.surveyJsonCopyButton",
-      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "editor"; }),
+      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "json"; }),
       mode: "small",
       component: "sv-action-bar-item",
       action: () => {

packages/survey-creator-core/src/components/tabs/json-editor-textarea.ts

@@ -89,7 +89,7 @@ export class TabJsonEditorTextareaPlugin
   implements ICreatorPlugin {
   constructor(creator: SurveyCreatorModel) {
     super(creator);
-    creator.addPluginTab("editor", this, undefined, "svc-tab-json-editor-textarea");
+    creator.addPluginTab("json", this, undefined, "svc-tab-json-editor-textarea");
   }
   protected createModel(
     creator: SurveyCreatorModel

packages/survey-creator-core/src/components/tabs/test-plugin.ts

@@ -85,11 +85,11 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.simulatorTheme = surveyCss[themeName] || surveyCss[defaultV2ThemeName];
   }
   private createVisibleUpdater() {
-    return <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "test"; });
+    return <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "preview"; });
   }
 
   constructor(private creator: SurveyCreatorModel) {
-    creator.addPluginTab("test", this);
+    creator.addPluginTab("preview", this);
     this.setPreviewTheme(this.creator.previewTheme);
     this.createActions().forEach(action => creator.toolbar.actions.push(action));
   }
@@ -156,7 +156,7 @@ export class TabTestPlugin implements ICreatorPlugin {
         iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
-          return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
+          return notShortCircuitAnd(this.creator.activeTab === "preview", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
         }),
       }, {
         items: deviceSelectorItems,
@@ -176,7 +176,7 @@ export class TabTestPlugin implements ICreatorPlugin {
         iconSize: "auto",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
-          return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
+          return notShortCircuitAnd(this.creator.activeTab === "preview", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
         }),
         action: () => {
           this.model.simulator.landscape = !this.model.simulator.landscape;

packages/survey-creator-core/src/components/tabs/test.ts

@@ -8,7 +8,7 @@ export class TestSurveyTabViewModel extends PreviewViewModel {
   }
 
   protected getTabName(): string {
-    return "test";
+    return "preview";
   }
   protected getShowResults() {
     return this.surveyProvider.previewShowResults && !this.isRunning && !this.isMobileView;

packages/survey-creator-core/src/creator-base.ts

@@ -370,7 +370,13 @@ export class SurveyCreatorModel extends Base
     onSaveCallback: (no: number, isSuccess: boolean) => void
   ) => void;
 
-  @property() viewType: string;
+  get viewType(): string {
+    return this.getPropertyValue("viewType");
+  }
+  set viewType(val: string) {
+    val = this.fixPluginName(val);
+    this.setPropertyValue("viewType", val);
+  }
 
   public get showingViewName(): string {
     return this.activeTab;
@@ -386,13 +392,13 @@ export class SurveyCreatorModel extends Base
     return this.isPreviewShowing;
   }
   public get isPreviewShowing(): boolean {
-    return this.activeTab === "test";
+    return this.activeTab === "preview";
   }
   public showTestSurvey() {
     this.showPreview();
   }
   public showPreview() {
-    this.activeTab = "test";
+    this.activeTab = "preview";
   }
 
   protected plugins: { [name: string]: ICreatorPlugin } = {};
@@ -438,7 +444,17 @@ export class SurveyCreatorModel extends Base
     return -1;
   }
   public getPlugin<P extends ICreatorPlugin = ICreatorPlugin>(name: string): P {
-    return this.plugins[name] as P;
+    const pluginName = this.fixPluginName(name);
+    return this.plugins[pluginName] as P;
+  }
+
+  private fixPluginName(pluginName: string) {
+    if (pluginName === "test") {
+      return "preview";
+    } else if (pluginName === "editor") {
+      return "json";
+    }
+    return pluginName;
   }
 
   /**
@@ -1280,9 +1296,9 @@ export class SurveyCreatorModel extends Base
    * Accepted values:
    * 
    * - [`"designer"`](#showDesignerTab)
-   * - [`"test"`](#showPreviewTab)
+   * - [`"preview"`](#showPreviewTab)
    * - [`"theme"`](#showThemeTab)
-   * - [`"editor"`](#showJSONEditorTab)
+   * - [`"json"`](#showJSONEditorTab)
    * - [`"logic"`](#showLogicTab)
    * - [`"translation"`](#showLogicTab)
    * @see makeNewViewActive
@@ -1295,7 +1311,7 @@ export class SurveyCreatorModel extends Base
   }
   /**
    * Switches the [active tab](#activeTab). Returns `false` if the tab cannot be switched.
-   * @param tabName A tab that you want to make active: `"designer"`, `"test"`, `"theme"`, `"editor"`, `"logic"`, or `"translation"`.
+   * @param tabName A tab that you want to make active: `"designer"`, `"preview"`, `"theme"`, `"json"`, `"logic"`, or `"translation"`.
    * @returns `false` if the active tab cannot be switched, `true` otherwise.
    */
   public makeNewViewActive(tabName: string): boolean {
@@ -1310,6 +1326,7 @@ export class SurveyCreatorModel extends Base
     return this.switchViewType(tabName);
   }
   private switchViewType(viewName: string): boolean {
+    viewName = this.fixPluginName(viewName);
     let allow = true;
     if (!!this.currentPlugin?.defaultAllowingDeactivate) {
       allow = this.currentPlugin.defaultAllowingDeactivate();
@@ -1590,7 +1607,7 @@ export class SurveyCreatorModel extends Base
       preview: () => new TabTestPlugin(this),
       theme: () => new ThemeTabPlugin(this), //TODO change name
       logic: () => new TabLogicPlugin(this),
-      editor: () => TabJsonEditorAcePlugin.hasAceEditor() ? new TabJsonEditorAcePlugin(this) : new TabJsonEditorTextareaPlugin(this),
+      json: () => TabJsonEditorAcePlugin.hasAceEditor() ? new TabJsonEditorAcePlugin(this) : new TabJsonEditorTextareaPlugin(this),
       translation: () => new TabTranslationPlugin(this)
     };
   }
@@ -1606,7 +1623,7 @@ export class SurveyCreatorModel extends Base
     const tabNames = this.getAvailableTabNames();
     const res = [];
     this.tabs.forEach(tab => {
-      const name = tab.id === "test" ? "preview" : tab.id;
+      const name = this.fixPluginName(tab.id);
       if (tabNames.indexOf(name) > -1) {
         res.push(name);
       }
@@ -1623,14 +1640,13 @@ export class SurveyCreatorModel extends Base
     if (tabNames.length === 0) return;
     for (let i = this.tabs.length - 1; i >= 0; i--) {
       const tabId = this.tabs[i].id;
-      const id = tabId === "test" ? "preview" : tabId;
+      const id = this.fixPluginName(tabId);
       if (tabNames.indexOf(id) < 0) {
         this.removePlugin(tabId);
       }
     }
     tabNames.forEach(id => {
-      const tabId = id === "preview" ? "test" : id;
-      if (tabInfo[id] && this.getTabIndex(tabId) < 0) {
+      if (tabInfo[id] && this.getTabIndex(id) < 0) {
         tabInfo[id]();
       }
     });
@@ -1662,7 +1678,7 @@ export class SurveyCreatorModel extends Base
       tabs.push("logic");
     }
     if (this.showJSONEditorTab) {
-      tabs.push("editor");
+      tabs.push("json");
     }
     if (this.showTranslationTab) {
       tabs.push("translation");
@@ -1672,7 +1688,7 @@ export class SurveyCreatorModel extends Base
   private initFooterToolbar(): void {
     if (!this.footerToolbar) {
       this.footerToolbar = new ActionContainer();
-      ["designer", "undoredo", "test", "theme"].forEach((pluginKey: string) => {
+      ["designer", "undoredo", "preview", "theme"].forEach((pluginKey: string) => {
         const plugin = this.getPlugin(pluginKey);
         if (!!plugin && !!plugin["addFooterActions"]) {
           plugin["addFooterActions"]();
@@ -2293,7 +2309,7 @@ export class SurveyCreatorModel extends Base
       if (!!jsonValue) {
         this.initSurveyWithJSON(jsonValue, clearState);
       } else {
-        this.viewType = "editor";
+        this.viewType = "json";
       }
     }
   }
@@ -2316,7 +2332,7 @@ export class SurveyCreatorModel extends Base
   }
 
   public getSurveyJSON(): any {
-    if (this.viewType != "editor") {
+    if (this.viewType != "json") {
       return new JsonObject().toJsonObject(this.survey);
     }
     var surveyJsonText = this.text;
@@ -2343,7 +2359,7 @@ export class SurveyCreatorModel extends Base
   private animationEnabled = false;
   public createSurvey(json: any, reason: string, model?: any, callback?: (survey: SurveyModel) => void, area?: string): SurveyModel {
     const survey = this.createSurveyCore(json, reason);
-    if (reason !== "designer" && reason !== "test" && reason !== "theme") {
+    if (reason !== "designer" && reason !== "preview" && reason !== "theme") {
       survey.fitToContainer = false;
       survey.applyTheme(designTabSurveyThemeJSON);
       survey.gridLayoutEnabled = false;
@@ -2353,7 +2369,7 @@ export class SurveyCreatorModel extends Base
       initializeDesignTimeSurveyModel(survey, this);
     }
     survey["needRenderIcons"] = false;
-    if (reason != "designer" && reason != "test" && reason !== "theme") {
+    if (reason != "designer" && reason != "preview" && reason !== "theme") {
       survey.locale = editorLocalization.currentLocale;
       if (!json["clearInvisibleValues"]) {
         survey.clearInvisibleValues = "onComplete";
@@ -2373,7 +2389,7 @@ export class SurveyCreatorModel extends Base
     if (reason === "designer") {
       this.onDesignerSurveyCreated.fire(this, { survey: survey });
     }
-    if (reason === "test" || reason === "theme") {
+    if (reason === "preview" || reason === "theme") {
       this.onPreviewSurveyCreated.fire(this, { survey: survey });
     }
 
@@ -2386,6 +2402,7 @@ export class SurveyCreatorModel extends Base
     const hash: any = {};
     hash["designer"] = "designer-tab";
     hash["test"] = "preview-tab";
+    hash["preview"] = "preview-tab";
     hash["default-value"] = "default-value-popup-editor";
     hash["condition-builder"] = "logic-rule:condition-editor";
     hash["logic-item-editor"] = "logic-rule:action-editor";
@@ -2525,7 +2542,7 @@ export class SurveyCreatorModel extends Base
     return this.singlePageJSON(json);
   }
   public set JSON(val: any) {
-    if (this.viewType == "editor") {
+    if (this.viewType == "json") {
       this.setTextValue(JSON.stringify(val));
     } else {
       this.initSurveyWithJSON(val, true);

packages/survey-creator-core/src/creator-events-api.ts

@@ -896,7 +896,7 @@ export interface CreateCustomMessagePanelEvent {
 
 export interface ActiveTabChangingEvent {
   /**
-   * A tab that is going to become active: `"designer"`, `"test"`, `"theme"`, `"editor"`, `"logic"`, or `"translation"`. 
+   * A tab that is going to become active: `"designer"`, `"preview"`, `"theme"`, `"json"`, `"logic"`, or `"translation"`. 
    */
   tabName: string;
   /**
@@ -907,7 +907,7 @@ export interface ActiveTabChangingEvent {
 
 export interface ActiveTabChangedEvent {
   /**
-   * A tab that has become active: `"designer"`, `"test"`, `"theme"`, `"editor"`, `"logic"`, or `"translation"`.
+   * A tab that has become active: `"designer"`, `"preview"`, `"theme"`, `"json"`, `"logic"`, or `"translation"`.
    */
   tabName: string;
   plugin: ICreatorPlugin;

packages/survey-creator-core/src/presets/presets-tabs.ts

@@ -6,19 +6,19 @@ export class CreatorPresetTabs extends CreatorPresetBase {
   protected applyCore(creator: SurveyCreatorModel): void {
     super.applyCore(creator);
     const items = this.json["items"] || [];
-    let tab = this.json.activeTab || (items.length > 0 ? items[0]: "");
-    if(items.length > 0 && items.indexOf(tab) < 0) {
+    let tab = this.json.activeTab || (items.length > 0 ? items[0] : "");
+    if (items.length > 0 && items.indexOf(tab) < 0) {
       tab = items[0];
     }
-    if(!!tab && creator.activeTab !== tab) {
+    if (!!tab && creator.activeTab !== tab) {
       const activePlugin = creator.getPlugin(creator.activeTab);
-      if(!!activePlugin?.deactivate) {
+      if (!!activePlugin?.deactivate) {
         activePlugin.deactivate();
       }
     }
     this.applyTabs(creator, items);
     if (tab) {
-      creator.activeTab = tab === "preview" ? "test" : tab;
+      creator.activeTab = tab;
     }
   }
   private applyTabs(creator: SurveyCreatorModel, items: Array<string>): void {