DataGrid - AI Column: Endless prompt editor loading when edit prompt and rollback changes (#31848)

Author: dmlvr

packages/devextreme/js/__internal/grids/grid_core/ai_column/views/m_ai_prompt_editor_view.test.ts

@@ -336,6 +336,57 @@ describe('AIPromptEditorView', () => {
           true,
         );
       });
+
+      it('should not trigger loading state when prompt has not changed', async () => {
+        const {
+          cellElement,
+          aiPromptEditorView,
+          aiPromptEditorPOM,
+        } = createAIPromptEditorView();
+        const columnWithPrompt = {
+          ...mockColumn,
+          index: 2,
+          ai: { prompt: 'existing prompt' },
+        };
+
+        await aiPromptEditorView.show(cellElement, columnWithPrompt);
+
+        aiPromptEditorPOM.getTextArea().setValue('existing prompt');
+        aiPromptEditorPOM.getApplyButton().getElement().click();
+
+        expect(aiPromptEditorView.getPromptEditorInstance().updateStateOnAction)
+          .not.toHaveBeenCalled();
+
+        expect(mockColumnsController.columnOption).not.toHaveBeenCalled();
+      });
+
+      it('should trigger loading state only when prompt has changed', async () => {
+        const {
+          cellElement,
+          aiPromptEditorView,
+          aiPromptEditorPOM,
+        } = createAIPromptEditorView();
+        const columnWithPrompt = {
+          ...mockColumn,
+          index: 2,
+          ai: { prompt: 'old prompt' },
+        };
+
+        await aiPromptEditorView.show(cellElement, columnWithPrompt);
+
+        aiPromptEditorPOM.getTextArea().setValue('new prompt');
+        aiPromptEditorPOM.getApplyButton().getElement().click();
+
+        expect(aiPromptEditorView.getPromptEditorInstance().updateStateOnAction)
+          .toHaveBeenCalledWith('apply');
+
+        expect(mockColumnsController.columnOption).toHaveBeenCalledWith(
+          2,
+          'ai.prompt',
+          'new prompt',
+          true,
+        );
+      });
     });
 
     describe('onStop', () => {

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

@@ -261,6 +261,25 @@ describe('Regenerate Data button', () => {
       expect(POM.getRefreshButton().isDisabled()).toBe(false);
     });
   });
+
+  describe('when text area value is changed back to initial value', () => {
+    it('should be enabled', () => {
+      const { POM } = createAIPromptEditor({
+        prompt: 'initial text',
+        popupOptions: { visible: true },
+      });
+
+      expect(POM.getRefreshButton().isDisabled()).toBe(false);
+
+      // Change value
+      POM.getTextArea().setValue('changed text');
+      expect(POM.getRefreshButton().isDisabled()).toBe(true);
+
+      // Change back to initial
+      POM.getTextArea().setValue('initial text');
+      expect(POM.getRefreshButton().isDisabled()).toBe(false);
+    });
+  });
 });
 
 describe('Apply button', () => {
@@ -318,7 +337,7 @@ describe('Apply button', () => {
   });
 
   describe('when text area value is changed back to initial value', () => {
-    it('should be enabled', () => {
+    it('should be disabled', () => {
       const { POM } = createAIPromptEditor({
         prompt: 'initial text',
         popupOptions: { visible: true },
@@ -332,7 +351,7 @@ describe('Apply button', () => {
 
       // Change back to initial
       POM.getTextArea().setValue('initial text');
-      expect(POM.getApplyButton().isDisabled()).toBe(false);
+      expect(POM.getApplyButton().isDisabled()).toBe(true);
     });
   });
 

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

@@ -50,8 +50,8 @@ export class AIPromptEditor {
       height: 110,
       stylingMode: 'outlined',
       onValueChanged: (e): void => {
-        this.updateButtonOption(APPLY_BUTTON_INDEX, 'disabled', !e.value); // Update the disable state of the Apply button
-        this.updateButtonOption(REGENERATE_DATA_BUTTON_INDEX, 'disabled', true); // Update the disable state of the Regenerate Data button
+        this.updateButtonOption(APPLY_BUTTON_INDEX, 'disabled', !e.value || e.value === this.prompt); // Update the disable state of the Apply button
+        this.updateButtonOption(REGENERATE_DATA_BUTTON_INDEX, 'disabled', !e.value || e.value !== this.prompt); // Update the disable state of the Regenerate Data button
       },
       placeholder: messageLocalization.format('dxDataGrid-aiPromptEditorPlaceholder'),
       valueChangeEvent: 'input change keyup',