[Security Solution][Notes] - fix attach to active timeline behavior (e…

…lastic#188186)
yctercero · Jul 18, 2024 · 6dade93 · 6dade93
1 parent 1684d37
commit 6dade93
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
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
@@ -93,7 +93,8 @@ export const AddNote = memo(({ eventId }: AddNewNoteProps) => {
 
   // if the flyout is open from a timeline and that timeline is saved, we automatically check the checkbox to associate the note to it
   const isTimelineFlyout = useIsTimelineFlyoutOpen();
-  const [checked, setChecked] = useState(isTimelineFlyout && activeTimeline.savedObjectId != null);
+
+  const [checked, setChecked] = useState<boolean>(true);
   const onCheckboxChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => setChecked(e.target.checked),
     []
@@ -132,6 +133,11 @@ export const AddNote = memo(({ eventId }: AddNewNoteProps) => {
     [editorValue, isMarkdownInvalid]
   );
 
+  const initialCheckboxChecked = useMemo(
+    () => isTimelineFlyout && activeTimeline.savedObjectId != null,
+    [activeTimeline?.savedObjectId, isTimelineFlyout]
+  );
+
   const checkBoxDisabled = useMemo(
     () => !isTimelineFlyout || (isTimelineFlyout && activeTimeline?.savedObjectId == null),
     [activeTimeline?.savedObjectId, isTimelineFlyout]
@@ -171,7 +177,7 @@ export const AddNote = memo(({ eventId }: AddNewNoteProps) => {
                 </>
               }
               disabled={checkBoxDisabled}
-              checked={checked}
+              checked={initialCheckboxChecked && checked}
               onChange={(e) => onCheckboxChange(e)}
             />
           </>

diff --git a/..._solution/public/flyout/document_details/shared/hooks/use_is_timeline_flyout_open.test.ts b/..._solution/public/flyout/document_details/shared/hooks/use_is_timeline_flyout_open.test.ts
@@ -30,6 +30,13 @@ describe('useInvestigationGuide', () => {
     expect(hookResult.result.current).toEqual(false);
   });
 
+  it('should return false when timeline flyout is in url but params are empty preview', () => {
+    window.location.search =
+      'http://app/security/alerts&flyout=(right:(id:document-details-right))&timelineFlyout=(preview:!())';
+    const hookResult = renderHook(() => useIsTimelineFlyoutOpen());
+    expect(hookResult.result.current).toEqual(false);
+  });
+
   it('should return true when timeline flyout is open', () => {
     window.location.search =
       'http://app/security/alerts&flyout=(right:(id:document-details-right))&timelineFlyout=(right:(id:document-details-right,params:(id:id,indexName:index,scopeId:scope)))';

diff --git a/...urity_solution/public/flyout/document_details/shared/hooks/use_is_timeline_flyout_open.ts b/...urity_solution/public/flyout/document_details/shared/hooks/use_is_timeline_flyout_open.ts
@@ -14,7 +14,10 @@ import { URL_PARAM_KEY } from '../../../../common/hooks/use_url_state';
  */
 export const useIsTimelineFlyoutOpen = (): boolean => {
   const query = new URLSearchParams(window.location.search);
-  return (
-    query.has(URL_PARAM_KEY.timelineFlyout) && query.get(URL_PARAM_KEY.timelineFlyout) !== '()'
-  );
+  const queryHasTimelineFlyout = query.has(URL_PARAM_KEY.timelineFlyout);
+  const timelineFlyoutHasValue =
+    query.get(URL_PARAM_KEY.timelineFlyout) !== '()' &&
+    query.get(URL_PARAM_KEY.timelineFlyout) !== '(preview:!())';
+
+  return queryHasTimelineFlyout && timelineFlyoutHasValue;
 };