fix(studio-assistant): always disable send button when textarea is empty (#18907)

Author: ErlingHauan

src/Designer/frontend/libs/studio-assistant/src/components/ChatColumn/UserInput/UserInput.test.tsx

@@ -14,16 +14,12 @@ describe('UserInput', () => {
 
   it('should render textarea with placeholder', () => {
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
-
-    expect(textarea).toBeInTheDocument();
+    expect(getTextarea()).toBeInTheDocument();
   });
 
   it('should render send button', () => {
     renderUserInput();
-    const sendButton = screen.getByRole('button', { name: mockTexts.send });
-
-    expect(sendButton).toBeInTheDocument();
+    expect(getSendButton()).toBeInTheDocument();
   });
 
   it('should render attachment button when enableCompactInterface is false', () => {
@@ -56,30 +52,44 @@ describe('UserInput', () => {
 
   it('should disable send button when textarea is empty', () => {
     renderUserInput();
-    const sendButton = screen.getByRole('button', { name: mockTexts.send });
+    expect(getSendButton()).toBeDisabled();
+  });
+
+  it('should disable send button when textarea is empty, even when there is an attachment', async () => {
+    const user = userEvent.setup();
+    renderUserInput();
+    const fileInput = screen.getByLabelText(mockTexts.addAttachment, { selector: 'input' });
+    const attachment = new File(['file content'], 'attachment.txt', { type: 'text/plain' });
 
-    expect(sendButton).toBeDisabled();
+    await user.upload(fileInput, attachment);
+
+    expect(getSendButton()).toBeDisabled();
+  });
+
+  it('should disable send button when entering empty or white-space only message', async () => {
+    const user = userEvent.setup();
+    renderUserInput();
+
+    await user.type(getTextarea(), '   ');
+
+    expect(getSendButton()).toBeDisabled();
   });
 
   it('should enable send button when textarea has content', async () => {
     const user = userEvent.setup();
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
-    const sendButton = screen.getByRole('button', { name: mockTexts.send });
 
-    await user.type(textarea, 'Test message');
+    await user.type(getTextarea(), 'Test message');
 
-    expect(sendButton).toBeEnabled();
+    expect(getSendButton()).toBeEnabled();
   });
 
   it('should call onSubmitMessage when send button is clicked', async () => {
     const user = userEvent.setup();
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
-    const sendButton = screen.getByRole('button', { name: mockTexts.send });
 
-    await user.type(textarea, 'Test message');
-    await user.click(sendButton);
+    await user.type(getTextarea(), 'Test message');
+    await user.click(getSendButton());
 
     expect(onSubmitMessage).toHaveBeenCalledTimes(1);
     expect(onSubmitMessage).toHaveBeenCalledWith(
@@ -92,22 +102,20 @@ describe('UserInput', () => {
   it('should submit allowAppChanges value according to switch state', async () => {
     const user = userEvent.setup();
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
-    const sendButton = screen.getByRole('button', { name: mockTexts.send });
     const allowAppChangesSwitch = screen.getByRole('switch', {
       name: mockTexts.allowAppChangesSwitch,
     });
 
-    await user.type(textarea, 'Test message');
-    await user.click(sendButton);
+    await user.type(getTextarea(), 'Test message');
+    await user.click(getSendButton());
 
     expect(onSubmitMessage).toHaveBeenLastCalledWith(
       expect.objectContaining({ allowAppChanges: false }),
     );
 
     await user.click(allowAppChangesSwitch);
-    await user.type(textarea, 'Another message');
-    await user.click(sendButton);
+    await user.type(getTextarea(), 'Another message');
+    await user.click(getSendButton());
 
     expect(onSubmitMessage).toHaveBeenLastCalledWith(
       expect.objectContaining({ allowAppChanges: true }),
@@ -118,44 +126,40 @@ describe('UserInput', () => {
   it('should clear textarea after submitting message', async () => {
     const user = userEvent.setup();
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
-    const sendButton = screen.getByRole('button', { name: mockTexts.send });
+    const textarea = getTextarea();
 
     await user.type(textarea, 'Test message');
-    await user.click(sendButton);
+    await user.click(getSendButton());
 
     expect(textarea).toHaveValue('');
   });
 
   it('should submit message on Enter key press', async () => {
     const user = userEvent.setup();
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
 
-    await user.type(textarea, 'Test message{Enter}');
+    await user.type(getTextarea(), 'Test message{Enter}');
 
     expect(onSubmitMessage).toHaveBeenCalledTimes(1);
   });
 
-  it('should not submit message on Shift+Enter key press', async () => {
+  it('should not submit message on Enter key press when textarea is empty', async () => {
     const user = userEvent.setup();
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
 
-    await user.type(textarea, 'Test message{Shift>}{Enter}');
+    await user.click(getTextarea());
+    await user.keyboard('{Enter}');
 
     expect(onSubmitMessage).not.toHaveBeenCalled();
   });
 
-  it('should disable the send button when entering empty or white-space only message', async () => {
+  it('should not submit message on Shift+Enter key press', async () => {
     const user = userEvent.setup();
     renderUserInput();
-    const textarea = screen.getByPlaceholderText(mockTexts.textarea.placeholder);
 
-    await user.type(textarea, '   ');
+    await user.type(getTextarea(), 'Test message{Shift>}{Enter}');
 
-    const sendButton = screen.getByRole('button', { name: mockTexts.send });
-    expect(sendButton).toBeDisabled();
+    expect(onSubmitMessage).not.toHaveBeenCalled();
   });
 });
 
@@ -168,3 +172,7 @@ const defaultProps: UserInputProps = {
 const renderUserInput = (props?: Partial<UserInputProps>): void => {
   render(<UserInput {...defaultProps} {...props} />);
 };
+
+const getSendButton = (): HTMLElement => screen.getByRole('button', { name: mockTexts.send });
+
+const getTextarea = (): HTMLElement => screen.getByPlaceholderText(mockTexts.textarea.placeholder);

src/Designer/frontend/libs/studio-assistant/src/components/ChatColumn/UserInput/UserInput.tsx

@@ -39,7 +39,6 @@ export function UserInput({
   }, [cancelledMessageContent, onCancelledMessageConsumed]);
 
   const hasTextContent = messageContent.trim().length > 0;
-  const canSubmit = hasTextContent || attachments.length > 0;
 
   const resetInputs = useCallback((): void => {
     setMessageContent('');
@@ -89,7 +88,7 @@ export function UserInput({
   }, []);
 
   const handleSubmit = (): void => {
-    if (!canSubmit) return;
+    if (!hasTextContent) return;
     const message: UserMessage = createUserMessage(messageContent, allowAppChanges, attachments);
     onSubmitMessage(message);
     resetInputs();
@@ -121,7 +120,6 @@ export function UserInput({
                 ref={fileInputRef}
                 type='file'
                 className={classes.hiddenFileInput}
-                data-testid='user-input-file'
                 aria-label={texts.addAttachment}
               />
               <StudioButton
@@ -148,7 +146,7 @@ export function UserInput({
             {texts.cancel} <XMarkIcon />
           </StudioButton>
         ) : (
-          <StudioButton onClick={handleSubmit} disabled={!canSubmit}>
+          <StudioButton onClick={handleSubmit} disabled={!hasTextContent}>
             {texts.send} <PaperplaneFillIcon />
           </StudioButton>
         )}