HtmlEditor: generate button should be disabled when askAi TextArea is empty

Author: Zedwag

packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts

@@ -55,6 +55,8 @@ const POPUP_MIN_WIDTH = 288;
 const POPUP_MAX_WIDTH = 460;
 const LOADINDICATOR_SIZE = 48;
 
+const INPUT_EVENT = 'input';
+
 export const TEXT_AREA_MIN_HEIGHT = 64;
 export const TEXT_AREA_MAX_HEIGHT = 128;
 export const REPLACE_DROPDOWN_WIDTH = 150;
@@ -236,8 +238,17 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
       placeholder: localizationMessage.format('dxHtmlEditor-aiAskPlaceholder'),
       _shouldAttachKeyboardEvents: true,
       onInitialized: this._addEscapeHandler.bind(this),
+      valueChangeEvent: INPUT_EVENT,
       onValueChanged: (e): void => {
         this._askAIPrompt = e.value;
+
+        if (this._isAskAICommandSelected) {
+          const shouldRefreshToolbarItems = !e.value || !e.previousValue;
+
+          if (shouldRefreshToolbarItems) {
+            this._refreshToolbarItems();
+          }
+        }
       },
     };
 
@@ -412,6 +423,9 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
 
   protected _getGenerateButtonItem(): NamedToolbarItem {
     const width = getActionButtonWidth();
+    const promptTextArea = this._promptTextArea;
+    const disabled = !promptTextArea.option('value');
+
     return {
       name: 'generate',
       toolbar: 'bottom',
@@ -421,6 +435,7 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
         type: 'default',
         text: localizationMessage.format('dxHtmlEditor-aiGenerate'),
         stylingMode: 'contained',
+        disabled,
         width,
         onClick: () => this._executeAICommand(),
         onInitialized: this._addEscapeHandler.bind(this),

packages/devextreme/testing/helpers/aiDialog.js

@@ -141,6 +141,7 @@ export const findButtonByName = (popup, name) => {
     const $bottomToolbar = popup.bottomToolbar();
     return $($bottomToolbar.find(`.${BUTTON_CLASS}`).eq(buttonIndex));
 };
+export const getButtonInstance = ($button) => $button.dxButton('instance');
 
 export const getCommandSelectBoxInstance = ($container) => getDialogSelectBoxes($container).eq(0).dxSelectBox('instance');
 export const getOptionSelectBoxInstance = ($container) => getDialogSelectBoxes($container).eq(1).dxSelectBox('instance');

packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/aiDialog.tests.js

@@ -33,6 +33,7 @@ import {
     clickActionButton,
     getBottomToolbarItems,
     findButtonByName,
+    getButtonInstance,
     getCommandSelectBoxInstance,
     getItemByName,
     getLoadIndicator,
@@ -210,6 +211,11 @@ QUnit.module('AIDialog', () => {
                 this.promise.then(() => {
                     this.setDialogState(element.state);
 
+                    if(element.name === 'generate button') {
+                        const promptTextAreaInstance = getPromptTextAreaInstance(this.$element);
+                        promptTextAreaInstance.option('value', 'some question');
+                    }
+
                     const $element = $(`.${element.domClass}`).eq(element.index);
                     const instance = $element[element.class]('instance');
 
@@ -410,6 +416,9 @@ QUnit.module('AIDialog', () => {
                 },
             });
 
+            const promptTextAreaInstance = getPromptTextAreaInstance(this.$element);
+            promptTextAreaInstance.option('value', 'some question');
+
             const $generateButton = findButtonByName(this.aiDialogPopup, 'generate');
             $generateButton.trigger('dxclick');
 
@@ -501,6 +510,28 @@ QUnit.module('AIDialog', () => {
             assert.strictEqual(bottomToolbarItems.length, 1, '1 button is rendered');
             assert.strictEqual(bottomToolbarItems[0].name, 'generate', 'generate button is shown');
         });
+
+        QUnit.test('generate button should be disabled when textArea is empty', function(assert) {
+            showAIDialog(this, {
+                config: { currentCommand: 'askAI' }
+            });
+
+            let generateButton = getButtonInstance(findButtonByName(this.aiDialogPopup, 'generate'));
+
+            assert.strictEqual(generateButton.option('disabled'), true, 'generate button is disabled on init');
+
+            const promptTextAreaInstance = getPromptTextAreaInstance(this.$element);
+
+            promptTextAreaInstance.option('value', 'f');
+            generateButton = getButtonInstance(findButtonByName(this.aiDialogPopup, 'generate'));
+
+            assert.strictEqual(generateButton.option('disabled'), false, 'generate button is enabled after input some text');
+
+            promptTextAreaInstance.option('value', '');
+            generateButton = getButtonInstance(findButtonByName(this.aiDialogPopup, 'generate'));
+
+            assert.strictEqual(generateButton.option('disabled'), true, 'generate button is disabled after input is cleared');
+        });
     });
 
     QUnit.module('integration execution and parameter checks', integrationModuleConfig, () => {
@@ -804,6 +835,9 @@ QUnit.module('AIDialog', () => {
 
             this.showDialog({ currentCommand: 'askAI' });
 
+            const promptTextAreaInstance = getPromptTextAreaInstance(this.$element);
+            promptTextAreaInstance.option('value', 'some question');
+
             const $generateButton = findButtonByName(this.aiDialogPopup, 'generate');
             $generateButton.trigger('dxclick');
 
@@ -900,8 +934,9 @@ QUnit.module('AIDialog', () => {
             this.showDialog({ currentCommand: 'askAI' });
 
             const promptTextAreaInstance = getPromptTextAreaInstance(this.$element);
-            const generateButton = findButtonByName(this.aiDialogPopup, 'generate');
+            promptTextAreaInstance.option('value', 'some question');
 
+            const generateButton = findButtonByName(this.aiDialogPopup, 'generate');
             generateButton.trigger('dxclick');
 
             assert.strictEqual(promptTextAreaInstance.option('disabled'), true, 'disabled during generating');