Dynamic Matrix: Property Grid doesn't update available categories whe…

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

@@ -1,4 +1,4 @@
-import { Base, SurveyModel, Action, ComputedUpdater, CurrentPageChangedEvent } from "survey-core";
+import { Base, SurveyModel, Action, ComputedUpdater, CurrentPageChangedEvent, PageVisibleChangedEvent } from "survey-core";
 import { notShortCircuitAnd } from "../../utils/utils";
 import { SurveyCreatorModel } from "../../creator-base";
 import { ICreatorPlugin } from "../../creator-settings";
@@ -180,6 +180,9 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     creator.addPluginTab("designer", this);
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
     this.propertyGrid = new PropertyGridModel(creator.survey as any as Base, creator, creator.getPropertyGridDefinition());
+    this.propertyGrid.onSetNewObjectCallback = () => {
+      this.updateTabControlActions();
+    };
     this.propertyGridViewModel = new PropertyGridViewModel(this.propertyGrid, creator);
     this.propertyGridTab = this.creator.sidebar.addPage("propertyGrid", "svc-property-grid", this.propertyGridViewModel, () => {
       const result = [];
@@ -247,43 +250,57 @@ export class TabDesignerPlugin implements ICreatorPlugin {
 
   private updateTabControlActions() {
     if (this.showOneCategoryInPropertyGrid) {
-      const pgTabs = [];
-      this.propertyGrid.survey.pages.forEach(p => {
-        if (p.elements.length === 0) return;
-
-        const action = new MenuButton({
-          id: p.name,
-          tooltip: p.title,
-          iconName: pgTabIcons[p.name] || pgTabIcons["undefined"],
-          iconSize: "auto",
-          active: this.activePageIsPropertyGrid && p.name === this.propertyGrid.survey.currentPage.name,
-          pressed: false,
-          action: () => {
-            this.creator.sidebar.expandSidebar();
-            this.setPropertyGridIsActivePage();
-            this.propertyGrid.survey.currentPage = p;
-            this.propertyGridViewModel.objectSelectionAction.tooltip = p.title;
-            pgTabs.forEach(i => i.active = false);
-            action.active = true;
-          }
-        });
-        pgTabs.push(action);
-      });
-      this.tabControlModel.topToolbar.setItems(pgTabs);
-      this.propertyGridTab.deactivateCallback = () => {
-        pgTabs.forEach(tab => tab.active = false);
-      };
-
+      this.setupPropertyGridTabActions();
       this.propertyGrid.survey.onCurrentPageChanged.add((sender: SurveyModel, options: CurrentPageChangedEvent) => {
+        const pgTabs = this.tabControlModel.topToolbar.actions;
         pgTabs.forEach(action => {
           action.active = action.id === options.newCurrentPage.name;
         });
         this.propertyGridViewModel.objectSelectionAction.tooltip = options.newCurrentPage.title;
       });
+      this.propertyGrid.survey.onPageVisibleChanged.add((sender: SurveyModel, options: PageVisibleChangedEvent) => {
+        const action = this.tabControlModel.topToolbar.getActionById(options.page.name);
+        if(!!action) {
+          action.visible = options.page.isVisible;
+        }
+      });
 
       this.propertyGridViewModel.objectSelectionAction.tooltip = this.propertyGrid.survey.currentPage?.title;
     }
   }
+  private setupPropertyGridTabActions() {
+    const pgTabs = this.getPropertyGridTabActions();
+    this.tabControlModel.topToolbar.setItems(pgTabs);
+    this.propertyGridTab.deactivateCallback = () => {
+      pgTabs.forEach(tab => tab.active = false);
+    };
+  }
+  private getPropertyGridTabActions() {
+    const pgTabs = [];
+    this.propertyGrid.survey.pages.forEach(p => {
+      if (p.elements.length === 0) return;
+
+      const action = new MenuButton({
+        id: p.name,
+        tooltip: p.title,
+        iconName: pgTabIcons[p.name] || pgTabIcons["undefined"],
+        iconSize: "auto",
+        active: this.activePageIsPropertyGrid && p.name === this.propertyGrid.survey.currentPage.name,
+        pressed: false,
+        visible: p.isVisible,
+        action: () => {
+          this.creator.sidebar.expandSidebar();
+          this.setPropertyGridIsActivePage();
+          this.propertyGrid.survey.currentPage = p;
+          this.propertyGridViewModel.objectSelectionAction.tooltip = p.title;
+          pgTabs.forEach(i => i.active = false);
+          action.active = true;
+        }
+      });
+      pgTabs.push(action);
+    });
+    return pgTabs;
+  }
 
   public activate(): void {
     this.model = new TabDesignerViewModel(this.creator);

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

@@ -817,6 +817,7 @@ export class PropertyGridModel {
   currentlySelectedProperty: string;
   currentlySelectedPanel: PanelModel;
   currentlySelectedPage: PageModel;
+  public onSetNewObjectCallback: () => void;
 
   public objValueChangedCallback: () => void;
   public changedFromActionCallback: (obj: Base, propertyName: string) => void;
@@ -1203,6 +1204,9 @@ export class PropertyGridModel {
       this.classNameValue !== options.value
     ) {
       this.setObj(this.obj);
+      if(this.onSetNewObjectCallback) {
+        this.onSetNewObjectCallback();
+      }
       if (!!this.survey) {
         const question = this.survey.getQuestionByName(options.name);
         if (!!question) {

packages/survey-creator-core/tests/side-bar.test.ts

@@ -2,6 +2,7 @@ import { settings as creatorSetting } from "../src/creator-settings";
 import { SidebarModel } from "../src/components/side-bar/side-bar-model";
 import { TabDesignerPlugin } from "../src/components/tabs/designer-plugin";
 import { CreatorTester } from "./creator-tester";
+import { Serializer } from "survey-core";
 
 test("Sidebar tabs initial", () => {
   const creator = new CreatorTester();
@@ -78,6 +79,42 @@ test("showOneCategoryInPropertyGrid: showPlaceholder into property grid if surve
 
   creatorSetting.defaultNewSurveyJSON = savedNewJSON;
 });
+test("showOneCategoryInPropertyGrid: property grid actions - on removing/adding/on changing obj from propgrid", () => {
+  const creator = new CreatorTester(undefined, undefined, false);
+  creator.JSON = { elements: [{ type: "matrixdynamic", name: "question1", columns: [{ name: "col1" }] }] };
+  const designerPlugin = creator.getPlugin("designer") as TabDesignerPlugin;
+  designerPlugin.showOneCategoryInPropertyGrid = true;
+  const col = creator.survey.getQuestionByName("question1").columns[0];
+  creator.selectElement(col);
+
+  let tabs = designerPlugin["tabControlModel"].topToolbar.actions;
+  expect(tabs.length).toBe(4);
+  expect(tabs.map(t => t.id).join(",")).toBe("general,logic,totals,validation");
+  col.cellType = "dropdown";
+  tabs = designerPlugin["tabControlModel"].topToolbar.actions;
+  expect(tabs.length).toBe(6);
+  expect(tabs.map(t => t.id).join(",")).toBe("general,choices,choicesByUrl,logic,totals,validation");
+});
+test("showOneCategoryInPropertyGrid: property grid actions - on removing/adding/visible-changed", () => {
+  Serializer.addProperty("text", { name: "test", category: "test", visibleIf: (obj) => obj.name !== "q1", dependsOn: "name" });
+  const creator = new CreatorTester(undefined, undefined, false);
+  creator.JSON = { elements: [{ type: "text", name: "question1" }] };
+  const designerPlugin = creator.getPlugin("designer") as TabDesignerPlugin;
+  designerPlugin.showOneCategoryInPropertyGrid = true;
+  const q = creator.survey.getQuestionByName("question1");
+  creator.selectElement(q);
+
+  let tabs = designerPlugin["tabControlModel"].topToolbar.actions;
+  expect(tabs.length).toBe(7);
+  expect(tabs.map(t => t.id).join(",")).toBe("general,test,layout,logic,mask,data,validation");
+  expect(tabs[1].visible).toBeTruthy();
+  q.name = "q1";
+  expect(tabs[1].visible).toBeFalsy();
+  q.name = "q2";
+  expect(tabs[1].visible).toBeTruthy();
+
+  Serializer.removeProperty("text", "test");
+});
 
 test("showOneCategoryInPropertyGrid: tab control", () => {
   const creator = new CreatorTester();

packages/survey-creator-react/index.js

@@ -202,6 +202,7 @@ creator.onMachineTranslate.add((_, options) => {
 // creator.locale = "de";
 window.creator = creator;
 creator.showOneCategoryInPropertyGrid = true;
+creator.propertyGridNavigationMode = "buttons";
 // creator.getPlugin("designer").showOneCategoryInPropertyGrid = true;
 // creator.getPlugin("theme").showOneCategoryInPropertyGrid = true;
 
@@ -287,7 +288,6 @@ creator.saveSurveyFunc = (no, callback) => {
     callback(no, true);
   }, 1000);
 };
-creator.propertyGridNavigationMode = "accordion"
 
 ReactDOM.render(
   <React.StrictMode>