✨AI Column: Create handling errors mechanism using Toasts instead of ErrorRow

e2e/testcafe-devextreme/tests/dataGrid/common/toast.ts

@@ -0,0 +1,24 @@
+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`Toasts in DataGrid`.page(
+  url(__dirname, '../../container.html'),
+);
+
+test('Toast should be visible after calling and should be not visible after default display time', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  await dataGrid.isReady();
+  await dataGrid.apiShowErrorToast();
+  await t.expect(dataGrid.getToast().exists).ok();
+  await t
+    .expect(await takeScreenshot('ai-column__toast__at-the-right-position.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+  await t.expect(dataGrid.getToast().exists).notOk();
+}).before(async () => {
+  createWidget('dxDataGrid', {});
+});

e2e/testcafe-devextreme/tests/treeList/toast.ts

@@ -0,0 +1,23 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import TreeList from 'devextreme-testcafe-models/treeList';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+
+fixture`Toasts in TreeList`
+  .page(url(__dirname, '../container.html'));
+
+test('Toast should be visible after calling and should be not visible after default display time', async (t) => {
+  const treeList = new TreeList('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  await treeList.isReady();
+  await treeList.apiShowErrorToast();
+  await t.expect(treeList.getToast().exists).ok();
+  await t
+    .expect(await takeScreenshot('ai-column__toast__at-the-right-position.png', treeList.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+  await t.expect(treeList.getToast().exists).notOk();
+}).before(async () => {
+  createWidget('dxTreeList', {});
+});

packages/devextreme/js/__internal/grids/data_grid/m_widget.ts

@@ -33,5 +33,6 @@ import './module_not_extended/virtual_columns';
 import './export/m_export';
 import './focus/m_focus';
 import './module_not_extended/row_dragging';
+import './module_not_extended/toast';
 
 export default DataGrid;

packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts

@@ -57,7 +57,9 @@ gridCore.registerModulesOrder([
   'summary',
   'columnFixing',
   'export',
-  'gridView']);
+  'toast',
+  'gridView',
+]);
 
 class DataGrid extends GridCoreWidget<Properties> {
   private _defaultOptionsRules() {

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

@@ -0,0 +1,16 @@
+import { ToastViewController } from '@ts/grids/grid_core/toast/m_toast_controller';
+import { ToastView } from '@ts/grids/grid_core/toast/m_toast_view';
+
+import gridCore from '../m_core';
+
+gridCore.registerModule('toast', {
+  defaultOptions() {
+    return {};
+  },
+  controllers: {
+    toastViewController: ToastViewController,
+  },
+  views: {
+    toastView: ToastView,
+  },
+});

packages/devextreme/js/__internal/grids/grid_core/error_handling/m_error_handling.ts

@@ -11,6 +11,7 @@ import type { ColumnHeadersView } from '../column_headers/m_column_headers';
 import type { DataController } from '../data_controller/m_data_controller';
 import modules from '../m_modules';
 import type { ModuleType } from '../m_types';
+import type { ToastViewController } from '../toast/m_toast_controller';
 import type { RowsView } from '../views/m_rows_view';
 
 const ERROR_ROW_CLASS = 'dx-error-row';
@@ -27,10 +28,13 @@ export class ErrorHandlingController extends modules.ViewController {
 
   private _rowsView!: RowsView;
 
+  private _toastViewController!: ToastViewController;
+
   public init() {
     this._resizingController = this.getController('resizing');
     this._columnsController = this.getController('columns');
     this._columnHeadersView = this.getView('columnHeadersView');
+    this._toastViewController = this.getController('toastViewController');
     this._rowsView = this.getView('rowsView');
   }
 
@@ -152,6 +156,10 @@ export class ErrorHandlingController extends modules.ViewController {
         super.optionChanged(args);
     }
   }
+
+  public showToastError(message: string) {
+    this._toastViewController.showToast(message, { type: 'error' });
+  }
 }
 
 const data = (Base: ModuleType<DataController>) => class ErrorHandlingDataControllerExtends extends Base {

packages/devextreme/js/__internal/grids/grid_core/m_types.ts

@@ -198,6 +198,7 @@ export interface Controllers {
   stateStoring: import('./state_storing/m_state_storing_core').StateStoringController;
   synchronizeScrolling: import('./views/m_grid_view').SynchronizeScrollingController;
   tablePosition: import('./columns_resizing_reordering/m_columns_resizing_reordering').TablePositionViewController;
+  toastViewController: import('./toast/m_toast_controller').ToastViewController;
   aiColumn: import('./ai_column/m_ai_column_controller').AiColumnController;
 }
 
@@ -221,6 +222,7 @@ export interface Views {
   gridView: import('./views/m_grid_view').GridView;
   filterBuilderView: import('./filter/m_filter_builder').FilterBuilderView;
   filterPanelView: import('./filter/m_filter_panel').FilterPanelView;
+  toastView: import('./toast/m_toast_view').ToastView;
   aiColumnView: import('./ai_column/m_ai_column_view').AiColumnView;
 }
 

packages/devextreme/js/__internal/grids/grid_core/toast/m_toast_controller.ts

@@ -0,0 +1,24 @@
+import type { Properties as ToastProperties } from '@js/ui/toast';
+
+import { ViewController } from '../m_modules';
+import type { ToastView } from './m_toast_view';
+
+export class ToastViewController extends ViewController {
+  private _toastView: ToastView | null = null;
+
+  public init(): void {
+    this._toastView = this.getView('toastView');
+  }
+
+  public showToast(message: string, options: ToastProperties = {}): void {
+    this._toastView?.showToast(message, options);
+  }
+
+  public async hideToast(): Promise<void> {
+    await this._toastView?.hideToast();
+  }
+
+  public dispose(): void {
+    this._toastView?.dispose();
+  }
+}

packages/devextreme/js/__internal/grids/grid_core/toast/m_toast_view.ts

@@ -0,0 +1,62 @@
+import $ from '@js/core/renderer';
+import type { Properties as ToastProperties } from '@js/ui/toast';
+import type dxToast from '@js/ui/toast';
+
+import { View } from '../m_modules';
+
+const DEFAULT_POSITION = { my: 'center bottom', at: 'center bottom' };
+
+export class ToastView extends View {
+  private _toastInstance: dxToast | null = null;
+
+  private _$toastContainer: any | null = null;
+
+  private _ensureToastContainer(): void {
+    if (!this._$toastContainer) {
+      this._$toastContainer = $('<div>').appendTo(this.component.$element());
+    }
+  }
+
+  private _createToastInstance(options: ToastProperties): dxToast | null {
+    this._ensureToastContainer();
+
+    if (this._toastInstance) {
+      return this._toastInstance;
+    }
+
+    this._toastInstance = this._$toastContainer.dxToast({
+      position: {
+        ...DEFAULT_POSITION,
+        of: this.component.$element(),
+      },
+      ...options,
+      visible: false,
+    }).dxToast('instance');
+
+    return this._toastInstance;
+  }
+
+  public showToast(message: string, options: ToastProperties = {}): void {
+    const toast = this._createToastInstance(options);
+    toast?.option({
+      ...options,
+      message,
+      visible: true,
+    });
+  }
+
+  public async hideToast(): Promise<void> {
+    await this._toastInstance?.hide();
+  }
+
+  public dispose(): void {
+    if (this._toastInstance) {
+      this._toastInstance.dispose();
+      this._toastInstance = null;
+    }
+    if (this._$toastContainer) {
+      this._$toastContainer.remove();
+      this._$toastContainer = null;
+    }
+  }
+}

packages/devextreme/js/__internal/grids/grid_core/views/m_grid_view.ts

@@ -34,7 +34,25 @@ const GROUP_ROW_SELECTOR = 'tr.dx-group-row';
 
 const HIDDEN_COLUMNS_WIDTH = 'adaptiveHidden';
 
-const VIEW_NAMES = ['columnsSeparatorView', 'blockSeparatorView', 'trackerView', 'headerPanel', 'columnHeadersView', 'rowsView', 'footerView', 'columnChooserView', 'filterPanelView', 'pagerView', 'draggingHeaderView', 'contextMenuView', 'errorView', 'headerFilterView', 'filterBuilderView', 'aiColumnView'];
+const VIEW_NAMES = [
+  'columnsSeparatorView',
+  'blockSeparatorView',
+  'trackerView',
+  'headerPanel',
+  'columnHeadersView',
+  'rowsView',
+  'footerView',
+  'columnChooserView',
+  'filterPanelView',
+  'pagerView',
+  'draggingHeaderView',
+  'contextMenuView',
+  'errorView',
+  'headerFilterView',
+  'filterBuilderView',
+  'toastView',
+  'aiColumnView',
+];
 
 const E2E_ATTRIBUTES = {
   a11yStatusContainer: 'e2e-a11y-general-status-container',

packages/devextreme/js/__internal/grids/tree_list/m_widget.ts

@@ -29,5 +29,6 @@ import './module_not_extended/headers_keyboard_navigation';
 import './module_not_extended/virtual_columns';
 import './m_focus';
 import './module_not_extended/row_dragging';
+import './module_not_extended/toast';
 
 export default TreeList;

packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts

@@ -51,7 +51,9 @@ treeListCore.registerModulesOrder([
   'summary',
   'columnFixing',
   'export',
-  'gridView']);
+  'toast',
+  'gridView',
+]);
 
 class TreeList extends GridCoreWidget<dxTreeListOptions> {
   private _initMarkup() {

packages/devextreme/js/__internal/grids/tree_list/module_not_extended/toast.ts

@@ -0,0 +1,13 @@
+import { ToastViewController } from '@ts/grids/grid_core/toast/m_toast_controller';
+import { ToastView } from '@ts/grids/grid_core/toast/m_toast_view';
+
+import gridCore from '../m_core';
+
+gridCore.registerModule('toast', {
+  controllers: {
+    toastViewController: ToastViewController,
+  },
+  views: {
+    toastView: ToastView,
+  },
+});

packages/testcafe-models/dataGrid/index.ts

@@ -68,6 +68,7 @@ export const CLASS = {
   summaryTotal: 'dx-datagrid-summary-item',
   scrollableContainer: 'dx-scrollable-container',
   columnsSeparator: 'dx-datagrid-columns-separator',
+  toast: 'dx-toast-wrapper',
   dragHeader: 'drag-header',
 };
 
@@ -285,6 +286,10 @@ export default class DataGrid extends GridCore {
     return new ContextMenu(this.body.find(`.${CLASS.contextMenu}.${this.addWidgetPrefix()}`));
   }
 
+  getToast(): Selector {
+    return this.body.find(`.${CLASS.toast}`);
+  }
+
   async scrollTo(
     t: TestController,
     options: { x?: number; y?: number; top?: number },
@@ -902,6 +907,16 @@ export default class DataGrid extends GridCore {
     )();
   }
 
+  apiShowErrorToast(): Promise<void> {
+    const { getInstance } = this;
+    return ClientFunction(() => {
+        const gridInstance = getInstance() as any;
+        gridInstance.getController('errorHandling').showToastError('Error');
+      },
+      { dependencies: { getInstance } },
+    )();
+  }
+
   getDraggableHeader() {
     return this.body.find(`.${this.addWidgetPrefix(CLASS.dragHeader)}`);
   }