From a12a48acb9d094b7e990cb13ad286dd2fab5509a Mon Sep 17 00:00:00 2001
From: Janki Salvi <117571355+js-jankisalvi@users.noreply.github.com>
Date: Fri, 7 Jul 2023 15:52:31 +0200
Subject: [PATCH] disable save button on empty characters of string, maximum
 length errors

---
 .../components/add_comment/index.test.tsx     | 18 +++++++++++++++++-
 .../public/components/add_comment/index.tsx   |  6 +++++-
 .../components/description/index.test.tsx     | 18 ++++++++++++++++++
 .../editable_markdown_footer.tsx              |  4 +++-
 .../editable_markdown_renderer.test.tsx       | 19 ++++++++++++++++++-
 5 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/add_comment/index.test.tsx b/x-pack/plugins/cases/public/components/add_comment/index.test.tsx
index 562dc407aed2f..ac255f266620e 100644
--- a/x-pack/plugins/cases/public/components/add_comment/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/add_comment/index.test.tsx
@@ -201,11 +201,26 @@ describe('AddComment ', () => {
 
       const markdown = screen.getByTestId('euiMarkdownEditorTextArea');
 
+      userEvent.type(markdown, 'test');
       userEvent.clear(markdown);
-      userEvent.type(markdown, '   ');
 
       await waitFor(() => {
         expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();
+        expect(screen.getByTestId('submit-comment')).toHaveAttribute('disabled');
+      });
+    });
+
+    it('shows an error when comment is of empty characters', async () => {
+      appMockRender.render(<AddComment {...addCommentProps} />);
+
+      const markdown = screen.getByTestId('euiMarkdownEditorTextArea');
+
+      userEvent.clear(markdown);
+      userEvent.type(markdown, '  ');
+
+      await waitFor(() => {
+        expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();
+        expect(screen.getByTestId('submit-comment')).toHaveAttribute('disabled');
       });
     });
 
@@ -224,6 +239,7 @@ describe('AddComment ', () => {
             'The length of the comment is too long. The maximum length is 30000 characters.'
           )
         ).toBeInTheDocument();
+        expect(screen.getByTestId('submit-comment')).toHaveAttribute('disabled');
       });
     });
   });
diff --git a/x-pack/plugins/cases/public/components/add_comment/index.tsx b/x-pack/plugins/cases/public/components/add_comment/index.tsx
index 94f45f129c0f3..59fc1fcde0fac 100644
--- a/x-pack/plugins/cases/public/components/add_comment/index.tsx
+++ b/x-pack/plugins/cases/public/components/add_comment/index.tsx
@@ -36,6 +36,7 @@ import type { AddCommentFormSchema } from './schema';
 import { schema } from './schema';
 import { InsertTimeline } from '../insert_timeline';
 import { useCasesContext } from '../cases_context/use_cases_context';
+import { MAX_COMMENT_LENGTH } from '../../../common/constants';
 
 const MySpinner = styled(EuiLoadingSpinner)`
   position: absolute;
@@ -174,6 +175,9 @@ export const AddComment = React.memo(
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [focusOnContext]);
 
+      const isDisabled =
+        isLoading || !comment?.trim().length || comment.trim().length > MAX_COMMENT_LENGTH;
+
       return (
         <span id="add-comment-permLink">
           {isLoading && showLoading && <MySpinner data-test-subj="loading-spinner" size="xl" />}
@@ -200,7 +204,7 @@ export const AddComment = React.memo(
                           data-test-subj="submit-comment"
                           fill
                           iconType="plusInCircle"
-                          isDisabled={!comment || isLoading}
+                          isDisabled={isDisabled}
                           isLoading={isLoading}
                           onClick={onSubmit}
                         >
diff --git a/x-pack/plugins/cases/public/components/description/index.test.tsx b/x-pack/plugins/cases/public/components/description/index.test.tsx
index 37ea48158bb61..5515753736274 100644
--- a/x-pack/plugins/cases/public/components/description/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/description/index.test.tsx
@@ -122,6 +122,23 @@ describe('Description', () => {
 
     await waitFor(() => {
       expect(screen.getByText('A description is required.')).toBeInTheDocument();
+      expect(screen.getByTestId('editable-save-markdown')).toHaveAttribute('disabled');
+    });
+  });
+
+  it('shows an error when description is a sting of empty characters', async () => {
+    const res = appMockRender.render(
+      <Description {...defaultProps} onUpdateField={onUpdateField} />
+    );
+
+    userEvent.click(res.getByTestId('description-edit-icon'));
+
+    userEvent.clear(screen.getByTestId('euiMarkdownEditorTextArea'));
+    userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), '  ');
+
+    await waitFor(() => {
+      expect(screen.getByText('A description is required.')).toBeInTheDocument();
+      expect(screen.getByTestId('editable-save-markdown')).toHaveAttribute('disabled');
     });
   });
 
@@ -145,6 +162,7 @@ describe('Description', () => {
           'The length of the description is too long. The maximum length is 30000 characters.'
         )
       ).toBeInTheDocument();
+      expect(screen.getByTestId('editable-save-markdown')).toHaveAttribute('disabled');
     });
   });
 
diff --git a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_footer.tsx b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_footer.tsx
index adceb00fe8eb4..18e52af5cde5a 100644
--- a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_footer.tsx
+++ b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_footer.tsx
@@ -24,6 +24,8 @@ const EditableMarkdownFooterComponent: React.FC<EditableMarkdownFooterProps> = (
 }) => {
   const [{ content }] = useFormData<{ content: string }>({ watch: ['content'] });
 
+  const isDisabled = !content?.trim().length || content.trim().length > MAX_COMMENT_LENGTH;
+
   return (
     <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" responsive={false}>
       <EuiFlexItem grow={false}>
@@ -43,7 +45,7 @@ const EditableMarkdownFooterComponent: React.FC<EditableMarkdownFooterProps> = (
           fill
           iconType="save"
           onClick={handleSaveAction}
-          disabled={!content || content.length > MAX_COMMENT_LENGTH}
+          disabled={isDisabled}
           size="s"
         >
           {i18n.SAVE}
diff --git a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx
index f0f95363c4102..7a266652576e0 100644
--- a/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx
+++ b/x-pack/plugins/cases/public/components/markdown_editor/editable_markdown_renderer.test.tsx
@@ -129,7 +129,24 @@ describe('EditableMarkdown', () => {
 
       userEvent.clear(screen.getByTestId('euiMarkdownEditorTextArea'));
 
-      userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), ' ');
+      userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), '');
+
+      await waitFor(() => {
+        expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();
+        expect(screen.getByTestId('editable-save-markdown')).toHaveProperty('disabled');
+      });
+    });
+
+    it('Shows error message and save button disabled if current text is of empty characters', async () => {
+      render(
+        <MockHookWrapperComponent>
+          <EditableMarkdown {...defaultProps} />
+        </MockHookWrapperComponent>
+      );
+
+      userEvent.clear(screen.getByTestId('euiMarkdownEditorTextArea'));
+
+      userEvent.type(screen.getByTestId('euiMarkdownEditorTextArea'), '  ');
 
       await waitFor(() => {
         expect(screen.getByText('Empty comments are not allowed.')).toBeInTheDocument();