From 237e9478df57f9f9389ab104301ae92caee0d0ac Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 27 Sep 2023 14:27:16 -0700
Subject: [PATCH] UX: Use disable/enable state for custom prompt button (#233)

---
 .../after-d-editor/ai-helper-context-menu.hbs     | 15 +++++++--------
 spec/system/ai_helper/ai_composer_helper_spec.rb  |  6 +++---
 .../components/ai_helper_context_menu.rb          |  8 ++++++++
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs
index efd6a818..d545858f 100644
--- a/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs
+++ b/assets/javascripts/discourse/connectors/after-d-editor/ai-helper-context-menu.hbs
@@ -28,14 +28,13 @@
                   @enter={{action (fn this.updateSelected option)}}
                 />
 
-                {{#if this.customPromptValue.length}}
-                  <DButton
-                    @class="ai-custom-prompt__submit btn-primary"
-                    @icon="discourse-sparkles"
-                    @action={{this.updateSelected}}
-                    @actionParam={{option}}
-                  />
-                {{/if}}
+                <DButton
+                  @class="ai-custom-prompt__submit btn-primary"
+                  @icon="discourse-sparkles"
+                  @action={{this.updateSelected}}
+                  @actionParam={{option}}
+                  @disabled={{not this.customPromptValue.length}}
+                />
               </div>
             {{else}}
               <li data-name={{option.translated_name}} data-value={{option.id}}>
diff --git a/spec/system/ai_helper/ai_composer_helper_spec.rb b/spec/system/ai_helper/ai_composer_helper_spec.rb
index 9bd39f81..b6265451 100644
--- a/spec/system/ai_helper/ai_composer_helper_spec.rb
+++ b/spec/system/ai_helper/ai_composer_helper_spec.rb
@@ -74,14 +74,14 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
         expect(ai_helper_context_menu).to have_custom_prompt
       end
 
-      it "shows the custom prompt button when input is filled" do
+      it "enables the custom prompt button when input is filled" do
         trigger_context_menu(OpenAiCompletionsInferenceStubs.translated_response)
         ai_helper_context_menu.click_ai_button
-        expect(ai_helper_context_menu).to have_no_custom_prompt_button
+        expect(ai_helper_context_menu).to have_custom_prompt_button_disabled
         ai_helper_context_menu.fill_custom_prompt(
           OpenAiCompletionsInferenceStubs.custom_prompt_input,
         )
-        expect(ai_helper_context_menu).to have_custom_prompt_button
+        expect(ai_helper_context_menu).to have_custom_prompt_button_enabled
       end
 
       it "replaces the composed message with AI generated content" do
diff --git a/spec/system/page_objects/components/ai_helper_context_menu.rb b/spec/system/page_objects/components/ai_helper_context_menu.rb
index 47f6355a..d2887031 100644
--- a/spec/system/page_objects/components/ai_helper_context_menu.rb
+++ b/spec/system/page_objects/components/ai_helper_context_menu.rb
@@ -98,6 +98,14 @@ module PageObjects
       def has_no_custom_prompt_button?
         page.has_no_css?(CUSTOM_PROMPT_BUTTON_SELECTOR)
       end
+
+      def has_custom_prompt_button_enabled?
+        page.has_css?("#{CUSTOM_PROMPT_BUTTON_SELECTOR}:not(:disabled)")
+      end
+
+      def has_custom_prompt_button_disabled?
+        page.has_css?("#{CUSTOM_PROMPT_BUTTON_SELECTOR}:disabled")
+      end
     end
   end
 end