Property Grid: Category icons are not displayed at startup fix #6665 (#6671)

Author: andrewtelnov

packages/survey-creator-core/src/components/side-bar/tab-control-model.ts

@@ -3,9 +3,9 @@ import { SidebarModel } from "./side-bar-model";
 import { MenuButton } from "../../utils/actions";
 
 export class TabControlModel extends Base {
-  public topToolbar: ActionContainer<MenuButton> = new ActionContainer<MenuButton>();
   public bottomToolbar: ActionContainer<MenuButton> = new ActionContainer<MenuButton>();
   public expandCollapseAction: MenuButton;
+  public onTopToolbarItemCreated: (bar: ActionContainer<MenuButton>) => void;
 
   private updateExpandCollapseAction() {
     this.expandCollapseAction.iconName = this.sidePanel.visible ? "icon-collapse-panel" : "icon-expand-panel";
@@ -37,6 +37,19 @@ export class TabControlModel extends Base {
       this.updateExpandCollapseAction();
     });
   }
+  private topToolbarValue: ActionContainer<MenuButton>;
+  public get isTopToolbarCreated(): boolean {
+    return !!this.topToolbarValue;
+  }
+  public get topToolbar(): ActionContainer<MenuButton> {
+    if(!this.topToolbarValue) {
+      this.topToolbarValue = new ActionContainer<MenuButton>();
+      if(!!this.onTopToolbarItemCreated) {
+        this.onTopToolbarItemCreated(this.topToolbarValue);
+      }
+    }
+    return this.topToolbarValue;
+  }
 
   public get sideBarClassName(): string {
     return new CssClassBuilder().append("svc-sidebar-tabs").append("svc-sidebar-tabs--collapsed", !this.sidePanel.renderedIsVisible).toString();

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

@@ -1,4 +1,4 @@
-import { Base, SurveyModel, Action, ComputedUpdater, CurrentPageChangedEvent, PageVisibleChangedEvent, QuestionDropdownModel } from "survey-core";
+import { Base, SurveyModel, Action, ComputedUpdater, CurrentPageChangedEvent, PageVisibleChangedEvent, QuestionDropdownModel, ActionContainer } from "survey-core";
 import { notShortCircuitAnd } from "../../utils/utils";
 import { SurveyCreatorModel } from "../../creator-base";
 import { ICreatorPlugin } from "../../creator-settings";
@@ -206,6 +206,9 @@ export class TabDesignerPlugin implements ICreatorPlugin {
   constructor(private creator: SurveyCreatorModel) {
     creator.addTab({ name: "designer", plugin: this, iconName: "icon-config" });
     this.tabControlModel = new TabControlModel(this.creator.sidebar);
+    this.tabControlModel.onTopToolbarItemCreated = (bar) => {
+      this.setupPropertyGridTabActions(bar);
+    };
     this.propertyGrid = new PropertyGridModel(undefined, creator, creator.getPropertyGridDefinition());
     this.showOneCategoryInPropertyGrid = creator.showOneCategoryInPropertyGrid;
     this.propertyGrid.showOneCategoryInPropertyGrid = this.showOneCategoryInPropertyGrid;
@@ -280,7 +283,9 @@ export class TabDesignerPlugin implements ICreatorPlugin {
 
   private updateTabControlActions() {
     if (this.showOneCategoryInPropertyGrid) {
-      this.setupPropertyGridTabActions();
+      if(this.tabControlModel.isTopToolbarCreated) {
+        this.setupPropertyGridTabActions(this.tabControlModel.topToolbar);
+      }
       this.propertyGrid.survey.onCurrentPageChanged.add((sender: SurveyModel, options: CurrentPageChangedEvent) => {
         const pgTabs = this.tabControlModel.topToolbar.actions;
         pgTabs.forEach(action => {
@@ -298,9 +303,9 @@ export class TabDesignerPlugin implements ICreatorPlugin {
       this.propertyGridViewModel.objectSelectionAction.title = this.propertyGrid.survey.currentPage?.title;
     }
   }
-  private setupPropertyGridTabActions() {
+  private setupPropertyGridTabActions(topToolbar: ActionContainer<MenuButton>) {
     const pgTabs = this.getPropertyGridTabActions();
-    this.tabControlModel.topToolbar.setItems(pgTabs);
+    topToolbar.setItems(pgTabs);
     this.propertyGridTab.activateCallback = () => {
       if (!this.propertyGrid.survey.currentPage) return;
 

packages/survey-creator-core/tests/tabs/designer.test.ts

@@ -8,6 +8,7 @@ import { SurveyLogicUI } from "../../src/components/tabs/logic-ui";
 import { PageAdorner } from "../../src/components/page";
 import { QuestionAdornerViewModel } from "../../src/components/question";
 import { TabDesignerViewModel } from "../../src/components/tabs/designer";
+import { TabControlModel } from "../../src/components/side-bar/tab-control-model";
 export * from "../../src/property-grid/matrices";
 
 test("Survey/page title/description placeholders text", () => {
@@ -796,3 +797,12 @@ test("expand/collapse methods", () => {
   creator.expandElement(question);
   expect(questionAdorner.collapsed).toBeFalsy();
 });
+test("Create topToolbar on request and setup it, Bug#6665", () => {
+  const creator = new CreatorTester();
+  const tabBar = <TabControlModel>creator.sidebar.sideAreaComponentData;
+  expect(tabBar).toBeTruthy();
+  expect(tabBar.isTopToolbarCreated).toBeFalsy();
+  const topToolbar = tabBar.topToolbar;
+  expect(tabBar.isTopToolbarCreated).toBeTruthy();
+  expect(topToolbar.actions.length > 3).toBeTruthy();
+});