[Security Solution][Notes] - prevent user from adding note if the mar…

…kdown is invalid (elastic#187346)
darnautov · Jul 3, 2024 · faada57 · faada57
1 parent 2804669
commit faada57
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/...lugins/security_solution/public/flyout/document_details/left/components/add_note.test.tsx b/...lugins/security_solution/public/flyout/document_details/left/components/add_note.test.tsx
@@ -18,6 +18,7 @@ import {
 import { ReqStatus } from '../../../../notes/store/notes.slice';
 import { useIsTimelineFlyoutOpen } from '../../shared/hooks/use_is_timeline_flyout_open';
 import { TimelineId } from '../../../../../common/types';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('../../shared/hooks/use_is_timeline_flyout_open');
 
@@ -56,11 +57,24 @@ describe('AddNote', () => {
   it('should create note', () => {
     const { getByTestId } = renderAddNote();
 
+    userEvent.type(getByTestId('euiMarkdownEditorTextArea'), 'new note');
     getByTestId(ADD_NOTE_BUTTON_TEST_ID).click();
 
     expect(mockDispatch).toHaveBeenCalled();
   });
 
+  it('should disable add button markdown editor if invalid', () => {
+    const { getByTestId } = renderAddNote();
+
+    const addButton = getByTestId(ADD_NOTE_BUTTON_TEST_ID);
+
+    expect(addButton).toHaveAttribute('disabled');
+
+    userEvent.type(getByTestId('euiMarkdownEditorTextArea'), 'new note');
+
+    expect(addButton).not.toHaveAttribute('disabled');
+  });
+
   it('should render the add note button in loading state while creating a new note', () => {
     const store = createMockStore({
       ...mockGlobalState,

diff --git a/x-pack/plugins/security_solution/public/flyout/document_details/left/components/add_note.tsx b/x-pack/plugins/security_solution/public/flyout/document_details/left/components/add_note.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   EuiButton,
   EuiCheckbox,
@@ -83,6 +83,7 @@ export const AddNote = memo(({ eventId }: AddNewNoteProps) => {
   const dispatch = useDispatch();
   const { addError: addErrorToast } = useAppToasts();
   const [editorValue, setEditorValue] = useState('');
+  const [isMarkdownInvalid, setIsMarkdownInvalid] = useState(false);
 
   const activeTimeline = useSelector((state: State) =>
     timelineSelectors.selectTimelineById(state, TimelineId.active)
@@ -121,8 +122,15 @@ export const AddNote = memo(({ eventId }: AddNewNoteProps) => {
     }
   }, [addErrorToast, createError, createStatus]);
 
-  const checkBoxDisabled =
-    !isTimelineFlyout || (isTimelineFlyout && activeTimeline.savedObjectId == null);
+  const buttonDisabled = useMemo(
+    () => editorValue.trim().length === 0 || isMarkdownInvalid,
+    [editorValue, isMarkdownInvalid]
+  );
+
+  const checkBoxDisabled = useMemo(
+    () => !isTimelineFlyout || (isTimelineFlyout && activeTimeline?.savedObjectId == null),
+    [activeTimeline?.savedObjectId, isTimelineFlyout]
+  );
 
   return (
     <>
@@ -133,7 +141,7 @@ export const AddNote = memo(({ eventId }: AddNewNoteProps) => {
             value={editorValue}
             onChange={setEditorValue}
             ariaLabel={MARKDOWN_ARIA_LABEL}
-            setIsMarkdownInvalid={() => {}}
+            setIsMarkdownInvalid={setIsMarkdownInvalid}
           />
         </EuiComment>
       </EuiCommentList>
@@ -167,6 +175,7 @@ export const AddNote = memo(({ eventId }: AddNewNoteProps) => {
           <EuiButton
             onClick={addNote}
             isLoading={createStatus === ReqStatus.Loading}
+            disabled={buttonDisabled}
             data-test-subj={ADD_NOTE_BUTTON_TEST_ID}
           >
             {ADD_NOTE_BUTTON}