GridCore: add ai assistant toolbar item

Author: anna-shakhova

packages/devextreme/js/__internal/grids/data_grid/module_not_extended/ai_assistant.ts

@@ -4,6 +4,14 @@ import { AIAssistantViewController } from '@ts/grids/grid_core/ai_assistant/m_ai
 import gridCore from '../m_core';
 
 gridCore.registerModule('aiAssistant', {
+  defaultOptions() {
+    return {
+      aiAssistant: {
+        enabled: false,
+        title: 'AI Assistant', // TODO add localization message
+      },
+    };
+  },
   controllers: {
     aiAssistant: AIAssistantViewController,
   },

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

@@ -0,0 +1,193 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid as commonCreateDataGrid,
+  type DataGridInstance,
+} from '../../__tests__/__mock__/helpers/utils';
+
+// TODO remove when types added to public dts
+interface AIAssistantDataGridProperties extends DataGridProperties {
+  aiAssistant?: {
+    enabled?: boolean;
+    title?: string;
+  };
+}
+
+// TODO remove when types added to public dts
+const createDataGrid = (
+  options: AIAssistantDataGridProperties = {},
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+): ReturnType<typeof commonCreateDataGrid> => commonCreateDataGrid(options as any);
+
+const AI_ASSISTANT_BUTTON_SELECTOR = '.dx-datagrid-ai-assistant-button';
+const HIDDEN_CLASS = 'dx-hidden';
+
+const getAiAssistantButton = (
+  instance: DataGridInstance,
+): Element | null => instance
+  .element()
+  .querySelector(AI_ASSISTANT_BUTTON_SELECTOR);
+
+const isAiAssistantButtonVisible = (instance: DataGridInstance): boolean => {
+  const button = getAiAssistantButton(instance);
+
+  if (!button) {
+    return false;
+  }
+
+  return !button.closest(`.${HIDDEN_CLASS}`);
+};
+
+describe('AIAssistantViewController', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('init', () => {
+    it('should register toolbar button when aiAssistant.enabled is true', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [{ id: 1 }],
+        aiAssistant: { enabled: true, title: 'AI Assistant' },
+      });
+
+      const button = getAiAssistantButton(instance);
+
+      expect(button).not.toBeNull();
+    });
+
+    it('should not register toolbar button when aiAssistant.enabled is false', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [{ id: 1 }],
+        aiAssistant: { enabled: false },
+      });
+
+      const button = getAiAssistantButton(instance);
+
+      expect(button).toBeNull();
+    });
+
+    it('should not register toolbar button when aiAssistant is not set', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [{ id: 1 }],
+      });
+
+      const button = getAiAssistantButton(instance);
+
+      expect(button).toBeNull();
+    });
+  });
+
+  describe('optionChanged', () => {
+    it('should add toolbar button when aiAssistant.enabled changes to true', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [{ id: 1 }],
+        aiAssistant: { enabled: false, title: 'AI Assistant' },
+      });
+
+      instance.option('aiAssistant.enabled', true);
+      jest.runAllTimers();
+      await Promise.resolve();
+      jest.runAllTimers();
+
+      const button = getAiAssistantButton(instance);
+
+      expect(button).not.toBeNull();
+    });
+
+    it('should hide ai assistant button when aiAssistant.enabled changes to false', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [{ id: 1 }],
+        aiAssistant: { enabled: true, title: 'AI Assistant' },
+      });
+
+      expect(isAiAssistantButtonVisible(instance)).toBe(true);
+
+      instance.option('aiAssistant.enabled', false);
+      jest.runAllTimers();
+      await Promise.resolve();
+      jest.runAllTimers();
+
+      expect(isAiAssistantButtonVisible(instance)).toBe(false);
+    });
+  });
+
+  describe('toolbar button', () => {
+    it('should have aria-haspopup dialog attribute', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [{ id: 1 }],
+        aiAssistant: { enabled: true, title: 'AI Assistant' },
+      });
+
+      const button = getAiAssistantButton(instance);
+
+      expect(button?.getAttribute('aria-haspopup')).toBe('dialog');
+    });
+
+    it('should have correct hint text from aiAssistant.title', async () => {
+      const { instance } = await createDataGrid({
+        dataSource: [{ id: 1 }],
+        aiAssistant: { enabled: true, title: 'My Custom Title' },
+      });
+
+      const button = getAiAssistantButton(instance);
+
+      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/m_ai_assistant_view.ts

@@ -21,7 +21,7 @@ export class AIAssistantView extends View {
   }
 
   public isVisible(): boolean {
-    return this.option('aiAssistant.enabled');
+    return !!this.option('aiAssistant.enabled');
   }
 
   public show(): Promise<boolean> {
@@ -31,4 +31,8 @@ export class AIAssistantView extends View {
   public hide(): Promise<boolean> {
     return this.aiChatInstance?.hide() ?? Promise.resolve(false);
   }
+
+  public toggle(): Promise<boolean> {
+    return this.aiChatInstance?.toggle() ?? Promise.resolve(false);
+  }
 }