set ai assistant button to active state when popup visible, refactor

Author: anna-shakhova

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view.test.ts

@@ -13,6 +13,7 @@ import $ from '@js/core/renderer';
 import wrapInstanceWithMocks from '@ts/grids/grid_core/__tests__/__mock__/helpers/wrapInstance';
 
 import { AIChat } from '../../ai_chat/ai_chat';
+import type { AIChatOptions } from '../../ai_chat/types';
 import { AIAssistantView } from '../ai_assistant_view';
 
 jest.mock('../../ai_chat/ai_chat', (): any => {
@@ -152,45 +153,61 @@ describe('AIAssistantView', () => {
     });
   });
 
-  describe('show', () => {
-    it('should delegate to AIChat show method', async () => {
+  describe('toggle', () => {
+    it('should delegate to AIChat toggle method', async () => {
       const { aiAssistantView } = createAIAssistantView();
 
-      await aiAssistantView.show();
+      await aiAssistantView.toggle();
 
       const aiChatInstance = (AIChat as jest.Mock)
-        .mock.results[0].value as { show: jest.Mock; hide: jest.Mock };
+        .mock.results[0].value as { toggle: jest.Mock };
 
-      expect(aiChatInstance.show).toHaveBeenCalledTimes(1);
+      expect(aiChatInstance.toggle).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return resolved false promise when aiChatInstance is not created', () => {
+      const { aiAssistantView } = createAIAssistantView({ render: false });
+
+      return expect(aiAssistantView.toggle()).resolves.toBe(false);
     });
   });
 
-  describe('hide', () => {
-    it('should delegate to AIChat hide method', async () => {
+  describe('isShown', () => {
+    it('should delegate to AIChat isShown method', () => {
       const { aiAssistantView } = createAIAssistantView();
 
-      await aiAssistantView.hide();
-
       const aiChatInstance = (AIChat as jest.Mock)
-        .mock.results[0].value as { show: jest.Mock; hide: jest.Mock };
+        .mock.results[0].value as { isShown: jest.Mock };
 
-      expect(aiChatInstance.hide).toHaveBeenCalledTimes(1);
+      aiChatInstance.isShown.mockReturnValue(true);
+      expect(aiAssistantView.isShown()).toBe(true);
+
+      aiChatInstance.isShown.mockReturnValue(false);
+      expect(aiAssistantView.isShown()).toBe(false);
     });
-  });
 
-  describe('show when not initialized', () => {
-    it('should return resolved false promise when aiChatInstance is not created', () => {
+    it('should return false when aiChatInstance is not created', () => {
       const { aiAssistantView } = createAIAssistantView({ render: false });
 
-      return expect(aiAssistantView.show()).resolves.toBe(false);
+      expect(aiAssistantView.isShown()).toBe(false);
     });
   });
 
-  describe('hide when not initialized', () => {
-    it('should return resolved false promise when aiChatInstance is not created', () => {
-      const { aiAssistantView } = createAIAssistantView({ render: false });
+  describe('onVisibilityChanged', () => {
+    it('should fire onVisibilityChanged callback when popup visibility changes', () => {
+      const { aiAssistantView } = createAIAssistantView();
+      const callback = jest.fn();
+
+      aiAssistantView.onVisibilityChanged = callback;
+
+      const aiChatConfig = (AIChat as jest.Mock).mock.calls[0][0] as AIChatOptions;
+      aiChatConfig.onVisibilityChanged?.(true);
+
+      expect(callback).toHaveBeenCalledWith(true);
+
+      aiChatConfig.onVisibilityChanged?.(false);
 
-      return expect(aiAssistantView.hide()).resolves.toBe(false);
+      expect(callback).toHaveBeenCalledWith(false);
     });
   });
 });

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view_controller.integration.test.ts

@@ -143,51 +143,4 @@ describe('AIAssistantViewController', () => {
       expect(button?.getAttribute('title')).toBe('My Custom Title');
     });
   });
-
-  describe('show / hide / toggle', () => {
-    it('should delegate show to aiAssistantView', async () => {
-      const { instance } = await createDataGrid({
-        dataSource: [{ id: 1 }],
-        aiAssistant: { enabled: true, title: 'AI Assistant' },
-      });
-
-      const controller = instance.getController('aiAssistant');
-      const view = (controller as any).aiAssistantView;
-      const showSpy = jest.spyOn(view, 'show');
-
-      await controller.show();
-
-      expect(showSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should delegate hide to aiAssistantView', async () => {
-      const { instance } = await createDataGrid({
-        dataSource: [{ id: 1 }],
-        aiAssistant: { enabled: true, title: 'AI Assistant' },
-      });
-
-      const controller = instance.getController('aiAssistant');
-      const view = (controller as any).aiAssistantView;
-      const hideSpy = jest.spyOn(view, 'hide');
-
-      await controller.hide();
-
-      expect(hideSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should delegate toggle to aiAssistantView', async () => {
-      const { instance } = await createDataGrid({
-        dataSource: [{ id: 1 }],
-        aiAssistant: { enabled: true, title: 'AI Assistant' },
-      });
-
-      const controller = instance.getController('aiAssistant');
-      const view = (controller as any).aiAssistantView;
-      const toggleSpy = jest.spyOn(view, 'toggle');
-
-      await controller.toggle();
-
-      expect(toggleSpy).toHaveBeenCalledTimes(1);
-    });
-  });
 });

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/__tests__/ai_assistant_view_controller.test.ts

@@ -0,0 +1,120 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+
+import { AIAssistantViewController } from '../ai_assistant_view_controller';
+
+interface MockAIAssistantView {
+  toggle: jest.Mock<() => Promise<boolean>>;
+  isShown: jest.Mock<() => boolean>;
+  onVisibilityChanged?: (visible: boolean) => void;
+}
+
+interface MockHeaderPanel {
+  registerToolbarItem: jest.Mock;
+  applyToolbarItem: jest.Mock;
+  removeToolbarItem: jest.Mock;
+}
+
+const createMockAIAssistantView = (): MockAIAssistantView => ({
+  toggle: jest.fn<() => Promise<boolean>>().mockResolvedValue(true),
+  isShown: jest.fn<() => boolean>().mockReturnValue(false),
+});
+
+const createMockHeaderPanel = (): MockHeaderPanel => ({
+  registerToolbarItem: jest.fn(),
+  applyToolbarItem: jest.fn(),
+  removeToolbarItem: jest.fn(),
+});
+
+const createAIAssistantViewController = (
+  options: Record<string, unknown> = {},
+): {
+  controller: AIAssistantViewController;
+  mockView: MockAIAssistantView;
+  mockHeaderPanel: MockHeaderPanel;
+} => {
+  const mockView = createMockAIAssistantView();
+  const mockHeaderPanel = createMockHeaderPanel();
+
+  const mockComponent = {
+    NAME: 'dxDataGrid',
+    _views: {
+      aiAssistantView: mockView,
+      headerPanel: mockHeaderPanel,
+    },
+    _controllers: {},
+    option(name?: string) {
+      if (name !== undefined) {
+        return options[name];
+      }
+      return options;
+    },
+  };
+
+  const controller = new AIAssistantViewController(mockComponent);
+  controller.init();
+
+  return { controller, mockView, mockHeaderPanel };
+};
+
+describe('AIAssistantViewController', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('init', () => {
+    it('should get aiAssistantView reference', () => {
+      const { controller } = createAIAssistantViewController();
+
+      expect(controller).toBeDefined();
+    });
+  });
+
+  describe('toggle', () => {
+    it('should delegate to aiAssistantView toggle', async () => {
+      const { controller, mockView } = createAIAssistantViewController({
+        'aiAssistant.enabled': true,
+      });
+
+      await controller.toggle();
+
+      expect(mockView.toggle).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onVisibilityChanged subscription', () => {
+    it('should subscribe to aiAssistantView.onVisibilityChanged on init', () => {
+      const { mockView } = createAIAssistantViewController();
+
+      expect(mockView.onVisibilityChanged).toBeDefined();
+      expect(typeof mockView.onVisibilityChanged).toBe('function');
+    });
+  });
+
+  describe('optionChanged', () => {
+    it('should set handled to true for aiAssistant options', () => {
+      const { controller } = createAIAssistantViewController();
+
+      const args = {
+        name: 'aiAssistant' as const,
+        fullName: 'aiAssistant.enabled' as const,
+        value: true,
+        previousValue: false,
+        handled: false,
+      };
+
+      controller.optionChanged(args);
+
+      expect(args.handled).toBe(true);
+    });
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view.ts

@@ -5,10 +5,15 @@ import { View } from '../m_modules';
 export class AIAssistantView extends View {
   private aiChatInstance!: AIChat;
 
+  public onVisibilityChanged?: (visible: boolean) => void;
+
   private getAIChatConfig(): AIChatOptions {
     return {
       container: this.element(),
       createComponent: this._createComponent.bind(this),
+      onVisibilityChanged: (visible: boolean): void => {
+        this.onVisibilityChanged?.(visible);
+      },
     };
   }
 
@@ -24,12 +29,8 @@ export class AIAssistantView extends View {
     return !!this.option('aiAssistant.enabled');
   }
 
-  public show(): Promise<boolean> {
-    return this.aiChatInstance?.show() ?? Promise.resolve(false);
-  }
-
-  public hide(): Promise<boolean> {
-    return this.aiChatInstance?.hide() ?? Promise.resolve(false);
+  public isShown(): boolean {
+    return this.aiChatInstance?.isShown() ?? false;
   }
 
   public toggle(): Promise<boolean> {

packages/devextreme/js/__internal/grids/grid_core/ai_assistant/ai_assistant_view_controller.ts

@@ -1,5 +1,7 @@
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import type { InitializedEvent as ButtonInitializedEvent } from '@js/ui/button';
+import { ACTIVE_STATE_CLASS } from '@ts/core/widget/widget';
 import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 import type { OptionChanged } from '@ts/grids/grid_core/m_types';
 import type { ToolbarItem } from '@ts/grids/new/grid_core/toolbar/types';
@@ -16,39 +18,34 @@ export class AIAssistantViewController extends ViewController {
 
   private headerPanel?: HeaderPanel;
 
+  private $aiAssistantButton?: dxElementWrapper;
+
   public init(): void {
     this.aiAssistantView = this.getView('aiAssistantView');
     this.headerPanel = this.getView('headerPanel');
 
+    this.aiAssistantView.onVisibilityChanged = (visible: boolean): void => {
+      this.$aiAssistantButton?.toggleClass(ACTIVE_STATE_CLASS, visible);
+    };
+
     const isAiAssistantEnabled = this.option('aiAssistant.enabled'); // TODO clarify option name
 
     if (isAiAssistantEnabled) {
-      const aiAssistantToolbarItem = this.getAiAssistantToolbarItem();
+      const aiAssistantToolbarItem = this.createAiAssistantToolbarItem();
 
       this.headerPanel?.registerToolbarItem(AI_ASSISTANT_BUTTON_NAME, aiAssistantToolbarItem);
     }
   }
 
   public optionChanged(args: OptionChanged): void {
     if (args.name === 'aiAssistant') {
-      if (args.fullName === 'aiAssistant.enabled') { // TODO clarify option name
-        this.syncAiAssistantItem();
-      }
-
+      this.syncAiAssistantItem();
       args.handled = true;
     } else {
       super.optionChanged(args);
     }
   }
 
-  public show(): Promise<boolean> {
-    return this.aiAssistantView.show();
-  }
-
-  public hide(): Promise<boolean> {
-    return this.aiAssistantView.hide();
-  }
-
   public toggle(): Promise<boolean> {
     return this.aiAssistantView.toggle();
   }
@@ -57,28 +54,32 @@ export class AIAssistantViewController extends ViewController {
     const isAiAssistantEnabled = this.option('aiAssistant.enabled'); // TODO clarify option name
 
     if (isAiAssistantEnabled) {
-      const aiAssistantToolbarItem = this.getAiAssistantToolbarItem();
+      const aiAssistantToolbarItem = this.createAiAssistantToolbarItem();
 
       this.headerPanel?.applyToolbarItem(AI_ASSISTANT_BUTTON_NAME, aiAssistantToolbarItem);
     } else {
       this.headerPanel?.removeToolbarItem(AI_ASSISTANT_BUTTON_NAME);
     }
   }
 
-  private getAiAssistantToolbarItem(): ToolbarItem {
+  private createAiAssistantToolbarItem(): ToolbarItem {
     const onClickHandler = (): Promise<boolean> => this.toggle();
 
     const onInitialized = (e: ButtonInitializedEvent): void => {
+      this.$aiAssistantButton = $(e.element);
+
       if (this.headerPanel) {
-        const asAssistantClass = this.addWidgetPrefix(AI_ASSISTANT_BUTTON_CLASS);
-        $(e.element).addClass(this.headerPanel._getToolbarButtonClass(asAssistantClass));
+        const aiAssistantClass = this.addWidgetPrefix(AI_ASSISTANT_BUTTON_CLASS);
+        this.$aiAssistantButton.addClass(this.headerPanel._getToolbarButtonClass(aiAssistantClass));
       }
     };
     const hintText = this.option('aiAssistant.title'); // TODO clarify option name
+
     return {
       widget: 'dxButton',
       options: {
         icon: AI_ASSISTANT_ICON_NAME,
+        activeStateEnabled: false,
         onClick: onClickHandler,
         hint: hintText,
         text: hintText,