DataGrid/TreeList: Implement AiPromptEditor

apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx

@@ -13,6 +13,7 @@ import DataGrid, {
 } from "devextreme-react/data-grid";
 import DiscountCell from "./DiscountCell";
 import ODataStore from "devextreme/data/odata/store";
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
 
 const columnOptions = {
     regularColumns: [
@@ -252,22 +253,85 @@ export const ColumnReordering: Story = {
             allowColumnDragging: true,
         },
     }
-  }
+};
 
-  const generatedData = generateData(10, 100);
+const generatedData = generateData(10, 100);
 
-  export const ColumnReorderingWithVirtualColumns: Story = {
-    argTypes: {
-        columns: {
-            control: 'object',
-            mapping: null,
-        },
+export const ColumnReorderingWithVirtualColumns: Story = {
+argTypes: {
+    columns: {
+        control: 'object',
+        mapping: null,
     },
+},
+args: {
+    allowColumnReordering: true,
+    rtlEnabled: false,
+    columnWidth: 100,
+    dataSource: generatedData,
+    columns: Object.keys(generatedData[0]),
+}
+}
+
+export const AiColumn: Story = {
     args: {
+        dataSource: countries,
+        columns: [
+            {
+                caption: 'AI Column 1',
+                type: 'ai',
+                name: 'test',
+                ai: {
+                    aiIntegration: new AIIntegration({
+                        sendRequest() {
+                            return {
+                                promise: new Promise((resolve) => {
+                                    setTimeout(() => {
+                                        resolve('{"text":"Test response from AI Column 1"}');
+                                    }, 5000);
+                                }),
+                                abort: () => {
+                                },
+                            };
+                        },
+                    }),
+                },
+            },
+            'Country', 'Area', 'Population_Urban', 'Population_Rural',
+            {
+                caption: 'AI Column 2',
+                type: 'ai',
+                name: 'test',
+                ai: {
+                    aiIntegration: new AIIntegration({
+                        sendRequest() {
+                            return {
+                                promise: new Promise((resolve) => {
+                                    setTimeout(() => {
+                                        resolve('{"text":"Test response from AI Column 2"}');
+                                    }, 5000);
+                                }),
+                                abort: () => {
+                                },
+                            };
+                        },
+                    }),
+                },
+            }
+        ],
+        allowColumnResizing: true,
         allowColumnReordering: true,
-        rtlEnabled: false,
-        columnWidth: 100,
-        dataSource: generatedData,
-        columns: Object.keys(generatedData[0]),
+        onContextMenuPreparing: (e) => {
+            if (e.target === 'header' && e.column?.type === 'ai') {
+                e.items = e.items || [];
+                e.items.push({
+                    text: 'Show AI Prompt Editor',
+                    onItemClick: () => {
+                        // @ts-expect-error
+                        e.component.getView('aiColumnView').showPromptEditor(e.event.target, e.column);
+                    },
+                });
+            }
+        }
     }
-  }
+};

packages/devextreme-scss/scss/widgets/base/_gridBase.scss

@@ -1239,4 +1239,12 @@
       cursor: pointer;
     }
   }
+
+  .dx-ai-prompt-editor__progressbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    line-height: 0;
+  }
 }

packages/devextreme-themebuilder/tests/data/dependencies.ts

@@ -57,11 +57,11 @@ export const dependencies: FlatStylesDependencies = {
   treeview: ['validation', 'button', 'loadindicator', 'textbox', 'checkbox'],
   menu: ['validation', 'button', 'loadindicator', 'textbox', 'contextmenu', 'checkbox', 'treeview'],
   filterbuilder: ['validation', 'button', 'loadindicator', 'textbox', 'checkbox', 'treeview', 'popup', 'numberbox', 'loadpanel', 'scrollview', 'list', 'selectbox', 'calendar', 'box', 'datebox'],
-  datagrid: ['loadindicator', 'loadpanel', 'validation', 'button', 'textbox', 'contextmenu', 'scrollview', 'popup', 'toolbar', 'checkbox', 'treeview', 'numberbox', 'list', 'selectbox', 'calendar', 'box', 'datebox', 'multiview', 'tabs', 'tabpanel', 'responsivebox', 'form', 'menu', 'filterbuilder', 'buttongroup', 'dropdownbutton', 'sortable'],
+  datagrid: ['loadindicator', 'loadpanel', 'validation', 'button', 'textbox', 'contextmenu', 'scrollview', 'popup', 'progressbar', 'toolbar', 'checkbox', 'treeview', 'numberbox', 'list', 'selectbox', 'calendar', 'box', 'datebox', 'multiview', 'tabs', 'tabpanel', 'responsivebox', 'form', 'menu', 'filterbuilder', 'buttongroup', 'dropdownbutton', 'sortable', 'textarea'],
   treelist: ['loadindicator', 'loadpanel', 'validation', 'button', 'textbox', 'contextmenu', 'scrollview', 'popup', 'toolbar'],
   pivotgrid: ['validation', 'button', 'loadindicator', 'textbox', 'contextmenu', 'popup', 'loadpanel', 'checkbox', 'treeview', 'scrollview', 'list'],
   scheduler: ['validation', 'button', 'popup', 'loadindicator', 'loadpanel', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'textbox', 'numberbox', 'checkbox', 'calendar', 'scrollview', 'list', 'selectbox', 'datebox', 'form', 'buttongroup', 'radiogroup', 'textarea', 'tagbox', 'switch', 'dropdownbutton', 'popover', 'tooltip', 'toolbar'],
-  filemanager: ['toast', 'validation', 'button', 'loadindicator', 'textbox', 'contextmenu', 'checkbox', 'treeview', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'numberbox', 'list', 'selectbox', 'calendar', 'box', 'datebox', 'multiview', 'tabs', 'tabpanel', 'responsivebox', 'form', 'menu', 'filterbuilder', 'buttongroup', 'dropdownbutton', 'sortable', 'datagrid', 'drawer', 'progressbar', 'fileuploader'],
+  filemanager: ['toast', 'validation', 'button', 'loadindicator', 'textbox', 'contextmenu', 'checkbox', 'treeview', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'numberbox', 'list', 'selectbox', 'calendar', 'box', 'datebox', 'multiview', 'tabs', 'tabpanel', 'responsivebox', 'form', 'menu', 'filterbuilder', 'buttongroup', 'dropdownbutton', 'sortable', 'datagrid', 'drawer', 'progressbar', 'fileuploader', 'textarea'],
   diagram: ['loadindicator', 'validation', 'button', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'textbox', 'contextmenu', 'list', 'checkbox', 'selectbox', 'numberbox', 'colorbox', 'popover', 'accordion', 'tooltip', 'multiview', 'tabs', 'tabpanel', 'progressbar', 'fileuploader'],
-  gantt: ['loadindicator', 'loadpanel', 'validation', 'button', 'popup', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'textbox', 'numberbox', 'checkbox', 'calendar', 'scrollview', 'list', 'selectbox', 'datebox', 'form', 'tagbox', 'radiogroup', 'popover', 'actionsheet', 'toolbar', 'contextmenu', 'treeview', 'menu', 'filterbuilder', 'sortable', 'treelist'],
+  gantt: ['loadindicator', 'loadpanel', 'validation', 'button', 'popup', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'textbox', 'numberbox', 'checkbox', 'calendar', 'scrollview', 'list', 'selectbox', 'datebox', 'form', 'tagbox', 'radiogroup', 'popover', 'actionsheet', 'toolbar', 'contextmenu', 'treeview', 'menu', 'filterbuilder', 'sortable', 'treelist', 'progressbar', 'textarea'],
 };

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/wrapInstance.ts

@@ -0,0 +1,16 @@
+import { jest } from '@jest/globals';
+
+export default function wrapInstance<T extends object>(instance: T): T {
+  const proto = Object.getPrototypeOf(instance);
+
+  (Object.getOwnPropertyNames(proto) as (keyof T)[]).forEach((key): void => {
+    const originalValue = instance[key];
+    if (typeof originalValue === 'function' && key !== 'constructor') {
+      const originalMethod = originalValue as (...a: unknown[]) => unknown;
+
+      instance[key] = jest.fn(originalMethod.bind(instance)) as T[typeof key];
+    }
+  });
+
+  return instance;
+}

packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/model/ai_prompt_editor.ts

@@ -0,0 +1,71 @@
+import Popup from '@js/ui/popup';
+import { ProgressBarModel } from '@ts/ui/__tests__/__mock__/model/progress_bar';
+import { TextAreaModel } from '@ts/ui/__tests__/__mock__/model/text_area';
+import { ButtonModel } from '@ts/ui/button/__tests__/__mock__/model/button';
+
+const CLASSES = {
+  wrapper: 'dx-overlay-wrapper',
+  toolbarItem: 'dx-toolbar-item',
+  stateInvisible: 'dx-state-invisible',
+  stateDisabled: 'dx-state-disabled',
+  aiPromptEditor: 'dx-ai-prompt-editor',
+  aiPromptEditorTextArea: 'dx-ai-prompt-editor__text-area',
+  aiPromptEditorRefreshButton: 'dx-ai-prompt-editor__refresh-button',
+  aiPromptEditorApplyButton: 'dx-ai-prompt-editor__apply-button',
+  aiPromptEditorStopButton: 'dx-ai-prompt-editor__stop-button',
+  aiPromptEditorProgressBar: 'dx-ai-prompt-editor__progressbar',
+};
+
+export class AiPromptEditorModel {
+  constructor(protected readonly root: HTMLElement) {}
+
+  public isVisible(): boolean {
+    return this.getWrapperElement() !== null;
+  }
+
+  public getPopupInstance(): Popup {
+    return Popup.getInstance(this.root) as Popup;
+  }
+
+  public getTextArea(): TextAreaModel {
+    return new TextAreaModel(
+      this.getWrapperElement().querySelector(`.${CLASSES.aiPromptEditorTextArea}`) as HTMLElement,
+    );
+  }
+
+  public getWrapperElement(): HTMLElement {
+    return document.body.querySelector(`.${CLASSES.aiPromptEditor}.${CLASSES.wrapper}`) as HTMLElement;
+  }
+
+  public getRefreshButton(): ButtonModel {
+    return new ButtonModel(this.getWrapperElement().querySelector(`.${CLASSES.aiPromptEditorRefreshButton}`) as HTMLElement);
+  }
+
+  public getApplyButton(): ButtonModel {
+    return new ButtonModel(this.getWrapperElement().querySelector(`.${CLASSES.aiPromptEditorApplyButton}`) as HTMLElement);
+  }
+
+  public getStopButton(): ButtonModel {
+    return new ButtonModel(this.getWrapperElement().querySelector(`.${CLASSES.aiPromptEditorStopButton}`) as HTMLElement);
+  }
+
+  public getProgressBar(): ProgressBarModel {
+    return new ProgressBarModel(
+      this.getWrapperElement().querySelector(`.${CLASSES.aiPromptEditorProgressBar}`) as HTMLElement,
+    );
+  }
+
+  public isApplyToolbarItemVisible(): boolean {
+    const applyButton = this.getApplyButton().getElement();
+    const toolbarItem = applyButton.closest(`.${CLASSES.toolbarItem}`);
+
+    return !!toolbarItem && !toolbarItem.classList.contains(CLASSES.stateInvisible);
+  }
+
+  public isStopToolbarItemVisible(): boolean {
+    const stopButton = this.getStopButton().getElement();
+    const toolbarItem = stopButton.closest(`.${CLASSES.toolbarItem}`);
+
+    return !!toolbarItem && !toolbarItem.classList.contains(CLASSES.stateInvisible);
+  }
+}

packages/devextreme/js/__internal/grids/grid_core/ai_column/ai_column.integration.test.ts

@@ -35,7 +35,8 @@ const createDataGrid = async (
   const instance = new DataGrid($container.get(0) as HTMLDivElement, options);
   const component = new DataGridModel($container.get(0) as HTMLElement);
 
-  jest.runOnlyPendingTimers();
+  jest.runAllTimers();
+
   resolve({
     $container,
     component,
@@ -548,6 +549,7 @@ describe('aiIntegration', () => {
       return aiIntegrationResult();
     },
   });
+
   const columnAiIntegration = new AIIntegration({
     sendRequest(): RequestResult {
       columnSendRequestSpy();
@@ -578,6 +580,7 @@ describe('aiIntegration', () => {
     expect(rootSendRequestSpy).toHaveBeenCalled();
     expect(columnSendRequestSpy).not.toHaveBeenCalled();
   });
+
   it('should be taken from grid level if it set up (dynamic update)', async () => {
     const { instance } = await createDataGrid({
       dataSource: [
@@ -600,6 +603,7 @@ describe('aiIntegration', () => {
     expect(rootSendRequestSpy).toHaveBeenCalled();
     expect(columnSendRequestSpy).not.toHaveBeenCalled();
   });
+
   it('should be taken from column level if it set up (first load)', async () => {
     const { instance } = await createDataGrid({
       dataSource: [
@@ -800,6 +804,7 @@ describe('aiMode', () => {
     const aiMode = instance.columnOption('myColumn', 'ai.mode');
     expect(aiMode).toBe('auto');
   });
+
   it('should call aiIntegration.sendRequest with every visible rows change', async () => {
     const dataSource = Array.from({ length: 100 }, (_, i) => ({
       id: i + 1,