disable save button on empty characters of string, maximum length errors

elastic · Jul 7, 2023 · a12a48a · a12a48a
1 parent f91c242
commit a12a48a
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();