DataGrid - AI Column: Create header DropDownButton and sparcle chat icon

apps/react-storybook/stories/tree_list/TreeList.stories.tsx

@@ -17,6 +17,7 @@ type EditingMode = typeof editingModes[number];
 
 interface HumanReadableProps {
   showSelectCheckboxes: boolean;
+  aiColumnEnabled: boolean;
   showRowLines: boolean;
   rtlEnabled: boolean;
   editingMode: EditingMode;
@@ -70,13 +71,15 @@ const mergeProps = (
 ): Record<PropertyKey, any> => {
   const result = { ...defaultProps };
   const {
+    aiColumnEnabled,
     showSelectCheckboxes,
     firstColumnContentType,
     showRowLines,
     rtlEnabled,
     firstColumnFixed,
     editingMode,
   } = humanReadableProps;
+  const hasAIColumn = result.columns.some((col) => col?.type === 'ai');
 
   result.selection = { mode: showSelectCheckboxes ? 'multiple' : 'none' };
 
@@ -87,6 +90,19 @@ const mergeProps = (
     fixedPosition: firstColumnFixed === 'left' ? 'left' : 'right',
   }
 
+  if (aiColumnEnabled) {
+    if (!hasAIColumn) {
+      result.columns.unshift({
+        type: 'ai',
+        caption: 'Smart Column',
+        name: 'myAIColumn',
+        width: 200,
+      });
+    }
+  } else if (hasAIColumn) {
+    result.columns = result.columns.filter((col) => col?.type !== 'ai');
+  }
+
   result.showRowLines = showRowLines;
   result.rtlEnabled = rtlEnabled;
 
@@ -143,7 +159,8 @@ type Story = StoryObj<typeof TreeList>;
 
 export const Overview: Story = {
   args: {
-    showSelectCheckboxes: false,
+    aiColumnEnabled: true,
+    showSelectCheckboxes: true,
     showRowLines: false,
     rtlEnabled: false,
     editingMode: 'none',

e2e/testcafe-devextreme/tests/common/treeList/aiColumn/visual.ts

@@ -50,3 +50,48 @@ test('Default render', async (t) => {
     },
   ],
 }));
+
+test('AI Column when multiple selection is enabled', async (t) => {
+  // arrange, act
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const treeList = new TreeList(TREE_LIST_SELECTOR);
+
+  await t.expect(treeList.isReady()).ok();
+
+  await testScreenshot(t, takeScreenshot, 'treelist__ai-column__multiple-selection.png', { element: treeList.element });
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxTreeList', {
+  dataSource: [
+    {
+      id: 1, parentId: 0, name: 'Name 1', value: 10,
+    },
+    {
+      id: 2, parentId: 1, name: 'Name 2', value: 20,
+    },
+    {
+      id: 3, parentId: 0, name: 'Name 3', value: 30,
+    },
+    {
+      id: 4, parentId: 3, name: 'Name 4', value: 40,
+    },
+  ],
+  keyExpr: 'id',
+  parentIdExpr: 'parentId',
+  expandedRowKeys: [3],
+  selection: {
+    mode: 'multiple',
+  },
+  columns: [
+    {
+      type: 'ai',
+      caption: 'AI Column',
+    },
+    { dataField: 'id', caption: 'ID' },
+    { dataField: 'name', caption: 'Name' },
+    { dataField: 'value', caption: 'Value' },
+  ],
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/columnReordering.functional.ts

@@ -18,7 +18,7 @@ test('Column reordering should work when allowColumnReordering is true', async (
   await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
 
   // act
-  await t.drag(headerRow.getHeaderCell(0).element, 100, 0);
+  await t.drag(headerRow.getHeaderCell(0).element, 150, 0);
 
   // assert
   await t.expect(await headerRow.getHeaderTexts()).eql(['ID', 'AI Column', 'Name', 'Value']);
@@ -53,7 +53,7 @@ test('Column reordering should not work when allowColumnReordering is false', as
   await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
 
   // act
-  await t.drag(headerRow.getHeaderCell(0).element, 100, 0);
+  await t.drag(headerRow.getHeaderCell(0).element, 150, 0);
 
   // assert
   await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
@@ -88,7 +88,7 @@ test('Column reordering should not work when it has allowReordering set to false
   await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
 
   // act
-  await t.drag(headerRow.getHeaderCell(0).element, 100, 0);
+  await t.drag(headerRow.getHeaderCell(0).element, 150, 0);
 
   // assert
   await t.expect(await headerRow.getHeaderTexts()).eql(['AI Column', 'ID', 'Name', 'Value']);
@@ -112,42 +112,3 @@ test('Column reordering should not work when it has allowReordering set to false
     { dataField: 'value', caption: 'Value' },
   ],
 }));
-
-test('The draggable AI column should have a caption', async (t) => {
-  // arrange
-  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
-  await t.expect(dataGrid.isReady()).ok();
-
-  // act
-  await dataGrid.moveHeader(0, 100, 5, true);
-
-  // assert
-  await t
-    .expect(dataGrid.getDraggableHeader().visible).ok()
-    .expect(dataGrid.getDraggableHeader().innerText).eql('AI Column');
-
-  // act
-  await dataGrid.dropHeader(0);
-
-  // assert
-  await t.expect(dataGrid.getDraggableHeader().visible).notOk();
-}).before(async () => createWidget('dxDataGrid', {
-  dataSource: [
-    { id: 1, name: 'Name 1', value: 10 },
-    { id: 2, name: 'Name 2', value: 20 },
-    { id: 3, name: 'Name 3', value: 30 },
-  ],
-  allowColumnReordering: true,
-  columnWidth: 125,
-  columns: [
-    {
-      type: 'ai',
-      caption: 'AI Column',
-      name: 'myAiColumn',
-    },
-    { dataField: 'id', caption: 'ID' },
-    { dataField: 'name', caption: 'Name' },
-    { dataField: 'value', caption: 'Value' },
-  ],
-}));

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/columnReordering.visual.ts

@@ -0,0 +1,52 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`Ai Column.ColumnReordering.Visual`
+  .page(url(__dirname, '../../../container.html'));
+
+const DATA_GRID_SELECTOR = '#container';
+
+test('The draggable AI column should display correctly', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.moveHeader(0, 100, 5, true);
+
+  // assert
+  await t.expect(dataGrid.getDraggableHeader().visible).ok();
+
+  await takeScreenshot('datagrid__ai-column__dragging.png', dataGrid.element);
+
+  // act
+  await dataGrid.dropHeader(0);
+
+  // assert
+  await t
+    .expect(dataGrid.getDraggableHeader().visible)
+    .notOk()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 1, name: 'Name 1', value: 10 },
+    { id: 2, name: 'Name 2', value: 20 },
+    { id: 3, name: 'Name 3', value: 30 },
+  ],
+  allowColumnReordering: true,
+  columnWidth: 200,
+  columns: [
+    {
+      type: 'ai',
+      caption: 'AI Column',
+      name: 'myAiColumn',
+    },
+    { dataField: 'id', caption: 'ID' },
+    { dataField: 'name', caption: 'Name' },
+    { dataField: 'value', caption: 'Value' },
+  ],
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/columnResizing.functional.ts

@@ -20,13 +20,13 @@ const DATA_GRID_SELECTOR = '#container';
       .expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).element.textContent)
       .eql('AI Column')
       .expect(dataCell.element.clientWidth)
-      .eql(100);
+      .eql(120);
 
     // act
     await dataGrid.resizeHeader(1, 50);
 
     // assert
-    await t.expect(dataCell.element.clientWidth).eql(150);
+    await t.expect(dataCell.element.clientWidth).eql(170);
   }).before(async () => createWidget('dxDataGrid', {
     dataSource: [
       { id: 1, name: 'Name 1', value: 10 },
@@ -59,13 +59,13 @@ const DATA_GRID_SELECTOR = '#container';
       .expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).element.textContent)
       .eql('AI Column')
       .expect(dataCell.element.clientWidth)
-      .eql(100);
+      .eql(120);
 
     // act
     await dataGrid.resizeHeader(1, 50);
 
     // assert
-    await t.expect(dataCell.element.clientWidth).eql(150);
+    await t.expect(dataCell.element.clientWidth).eql(170);
   }).before(async () => createWidget('dxDataGrid', {
     dataSource: [
       { id: 1, name: 'Name 1', value: 10 },
@@ -104,13 +104,13 @@ const DATA_GRID_SELECTOR = '#container';
       .expect(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).element.textContent)
       .eql('AI Column')
       .expect(dataCell.element.clientWidth)
-      .eql(100);
+      .eql(120);
 
     // act
     await dataGrid.resizeHeader(1, 50);
 
     // assert
-    await t.expect(dataCell.element.clientWidth).eql(100);
+    await t.expect(dataCell.element.clientWidth).eql(120);
   }).before(async () => createWidget('dxDataGrid', {
     dataSource: [
       { id: 1, name: 'Name 1', value: 10 },

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/columnResizing.visual.ts

@@ -0,0 +1,48 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`Ai Column.ColumnResizing.Visual`
+  .page(url(__dirname, '../../../container.html'));
+
+const DATA_GRID_SELECTOR = '#container';
+
+test('Resize AI Column when wordWrapEnabled is true', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('datagrid__ai-column__column-resizing(wordWrapEnabled=true)-1.png', dataGrid.element);
+
+  // act
+  await dataGrid.resizeHeader(1, -150);
+
+  await takeScreenshot('datagrid__ai-column__column-resizing(wordWrapEnabled=true)-2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 1, name: 'Name 1', value: 10 },
+    { id: 2, name: 'Name 2', value: 20 },
+    { id: 3, name: 'Name 3', value: 30 },
+  ],
+  allowColumnResizing: true,
+  wordWrapEnabled: true,
+  columnWidth: 100,
+  columns: [
+    {
+      type: 'ai',
+      caption: 'AI Column AI Column',
+      width: 250,
+    },
+    { dataField: 'id', caption: 'ID' },
+    { dataField: 'name', caption: 'Name' },
+    { dataField: 'value', caption: 'Value' },
+  ],
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/aiColumn/keyboardNavigation.visual.ts

@@ -0,0 +1,61 @@
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+
+fixture.disablePageReloads`Ai Column.KeyboardNavigation.Visual`
+  .page(url(__dirname, '../../../container.html'));
+
+const DATA_GRID_SELECTOR = '#container';
+
+test('Check keyboard navigation for AI column', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const headerRow = dataGrid.getHeaders().getHeaderRow(0);
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await t.click(headerRow.getHeaderCell(0).element);
+  await t.pressKey('tab');
+
+  // assert
+  await t.expect(headerRow.getHeaderCell(1).isFocused).ok();
+
+  // act
+  await t.pressKey('tab');
+
+  // assert
+  await t.expect(headerRow.getHeaderCell(1).getAIDropDownButton().isFocused).ok();
+
+  await takeScreenshot('datagrid__ai-column__focused-dropdown-button.png', dataGrid.element);
+
+  // act
+  await t.pressKey('tab');
+
+  // assert
+  await t
+    .expect(headerRow.getHeaderCell(2).isFocused)
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 1, name: 'Name 1', value: 10 },
+    { id: 2, name: 'Name 2', value: 20 },
+    { id: 3, name: 'Name 3', value: 30 },
+  ],
+  allowColumnReordering: true,
+  columnWidth: 200,
+  columns: [
+    { dataField: 'id', caption: 'ID' },
+    {
+      type: 'ai',
+      caption: 'AI Column',
+      name: 'myAiColumn',
+    },
+    { dataField: 'name', caption: 'Name' },
+    { dataField: 'value', caption: 'Value' },
+  ],
+}));