[SIEM] [Case] Insert timeline into case textarea (elastic#59586)

x-pack/legacy/plugins/siem/public/components/markdown_editor/form.tsx

@@ -8,23 +8,27 @@ import { EuiFormRow } from '@elastic/eui';
 import React, { useCallback } from 'react';
 
 import { FieldHook, getFieldValidityAndErrorMessage } from '../../shared_imports';
-import { MarkdownEditor } from '.';
+import { CursorPosition, MarkdownEditor } from '.';
 
 interface IMarkdownEditorForm {
+  bottomRightContent?: React.ReactNode;
   dataTestSubj: string;
   field: FieldHook;
   idAria: string;
   isDisabled: boolean;
+  onCursorPositionUpdate?: (cursorPosition: CursorPosition) => void;
   placeholder?: string;
-  footerContentRight?: React.ReactNode;
+  topRightContent?: React.ReactNode;
 }
 export const MarkdownEditorForm = ({
+  bottomRightContent,
   dataTestSubj,
   field,
   idAria,
   isDisabled = false,
+  onCursorPositionUpdate,
   placeholder,
-  footerContentRight,
+  topRightContent,
 }: IMarkdownEditorForm) => {
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
@@ -37,21 +41,23 @@ export const MarkdownEditorForm = ({
 
   return (
     <EuiFormRow
-      label={field.label}
-      labelAppend={field.labelAppend}
-      helpText={field.helpText}
-      error={errorMessage}
-      isInvalid={isInvalid}
-      fullWidth
       data-test-subj={dataTestSubj}
       describedByIds={idAria ? [idAria] : undefined}
+      error={errorMessage}
+      fullWidth
+      helpText={field.helpText}
+      isInvalid={isInvalid}
+      label={field.label}
+      labelAppend={field.labelAppend}
     >
       <MarkdownEditor
-        initialContent={field.value as string}
+        bottomRightContent={bottomRightContent}
+        content={field.value as string}
         isDisabled={isDisabled}
-        footerContentRight={footerContentRight}
         onChange={handleContentChange}
+        onCursorPositionUpdate={onCursorPositionUpdate}
         placeholder={placeholder}
+        topRightContent={topRightContent}
       />
     </EuiFormRow>
   );

x-pack/legacy/plugins/siem/public/components/markdown_editor/index.tsx

@@ -12,7 +12,7 @@ import {
   EuiTabbedContent,
   EuiTextArea,
 } from '@elastic/eui';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useCallback, ChangeEvent } from 'react';
 import styled, { css } from 'styled-components';
 
 import { Markdown } from '../markdown';
@@ -28,9 +28,25 @@ const Container = styled(EuiPanel)`
     padding: 0;
     background: ${theme.eui.euiColorLightestShade};
     position: relative;
+    .markdown-tabs-header {
+      position: absolute;
+      top: ${theme.eui.euiSizeS};
+      right: ${theme.eui.euiSizeS};
+      z-index: ${theme.eui.euiZContentMenu};
+    }
     .euiTab {
       padding: 10px;
     }
+    .markdown-tabs {
+      width: 100%;
+    }
+    .markdown-tabs-footer {
+      height: 41px;
+      padding: 0 ${theme.eui.euiSizeM};
+      .euiLink {
+        font-size: ${theme.eui.euiSizeM};
+      }
+    }
     .euiFormRow__labelWrapper {
       position: absolute;
       top: -${theme.eui.euiSizeL};
@@ -41,81 +57,108 @@ const Container = styled(EuiPanel)`
   `}
 `;
 
-const Tabs = styled(EuiTabbedContent)`
-  width: 100%;
-`;
-
-const Footer = styled(EuiFlexGroup)`
-  ${({ theme }) => css`
-    height: 41px;
-    padding: 0 ${theme.eui.euiSizeM};
-    .euiLink {
-      font-size: ${theme.eui.euiSizeM};
-    }
-  `}
-`;
-
 const MarkdownContainer = styled(EuiPanel)`
   min-height: 150px;
   overflow: auto;
 `;
 
+export interface CursorPosition {
+  start: number;
+  end: number;
+}
+
 /** An input for entering a new case description  */
 export const MarkdownEditor = React.memo<{
-  placeholder?: string;
-  footerContentRight?: React.ReactNode;
-  initialContent: string;
+  bottomRightContent?: React.ReactNode;
+  topRightContent?: React.ReactNode;
+  content: string;
   isDisabled?: boolean;
   onChange: (description: string) => void;
-}>(({ placeholder, footerContentRight, initialContent, isDisabled = false, onChange }) => {
-  const [content, setContent] = useState(initialContent);
-  useEffect(() => {
-    onChange(content);
-  }, [content]);
-  const tabs = useMemo(
-    () => [
-      {
-        id: 'comment',
-        name: i18n.MARKDOWN,
-        content: (
-          <TextArea
-            onChange={e => {
-              setContent(e.target.value);
-            }}
-            aria-label={`markdown-editor-comment`}
-            fullWidth={true}
-            disabled={isDisabled}
-            placeholder={placeholder ?? ''}
-            spellCheck={false}
-            value={content}
-          />
-        ),
-      },
-      {
-        id: 'preview',
-        name: i18n.PREVIEW,
-        content: (
-          <MarkdownContainer data-test-subj="markdown-container" paddingSize="s">
-            <Markdown raw={content} />
-          </MarkdownContainer>
-        ),
+  onCursorPositionUpdate?: (cursorPosition: CursorPosition) => void;
+  placeholder?: string;
+}>(
+  ({
+    bottomRightContent,
+    topRightContent,
+    content,
+    isDisabled = false,
+    onChange,
+    placeholder,
+    onCursorPositionUpdate,
+  }) => {
+    const handleOnChange = useCallback(
+      (evt: ChangeEvent<HTMLTextAreaElement>) => {
+        onChange(evt.target.value);
       },
-    ],
-    [content, isDisabled, placeholder]
-  );
-  return (
-    <Container>
-      <Tabs data-test-subj={`markdown-tabs`} size="s" tabs={tabs} initialSelectedTab={tabs[0]} />
-      <Footer alignItems="center" gutterSize="none" justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiLink href={MARKDOWN_HELP_LINK} external target="_blank">
-            {i18n.MARKDOWN_SYNTAX_HELP}
-          </EuiLink>
-        </EuiFlexItem>
-        {footerContentRight && <EuiFlexItem grow={false}>{footerContentRight}</EuiFlexItem>}
-      </Footer>
-    </Container>
-  );
-});
+      [onChange]
+    );
+
+    const setCursorPosition = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (onCursorPositionUpdate) {
+        onCursorPositionUpdate({
+          start: e!.target!.selectionStart ?? 0,
+          end: e!.target!.selectionEnd ?? 0,
+        });
+      }
+      return false;
+    };
+
+    const tabs = useMemo(
+      () => [
+        {
+          id: 'comment',
+          name: i18n.MARKDOWN,
+          content: (
+            <TextArea
+              onChange={handleOnChange}
+              onBlur={setCursorPosition}
+              aria-label={`markdown-editor-comment`}
+              fullWidth={true}
+              disabled={isDisabled}
+              placeholder={placeholder ?? ''}
+              spellCheck={false}
+              value={content}
+            />
+          ),
+        },
+        {
+          id: 'preview',
+          name: i18n.PREVIEW,
+          content: (
+            <MarkdownContainer data-test-subj="markdown-container" paddingSize="s">
+              <Markdown raw={content} />
+            </MarkdownContainer>
+          ),
+        },
+      ],
+      [content, isDisabled, placeholder]
+    );
+    return (
+      <Container>
+        {topRightContent && <div className={`markdown-tabs-header`}>{topRightContent}</div>}
+        <EuiTabbedContent
+          className={`markdown-tabs`}
+          data-test-subj={`markdown-tabs`}
+          size="s"
+          tabs={tabs}
+          initialSelectedTab={tabs[0]}
+        />
+        <EuiFlexGroup
+          className={`markdown-tabs-footer`}
+          alignItems="center"
+          gutterSize="none"
+          justifyContent="spaceBetween"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLink href={MARKDOWN_HELP_LINK} external target="_blank">
+              {i18n.MARKDOWN_SYNTAX_HELP}
+            </EuiLink>
+          </EuiFlexItem>
+          {bottomRightContent && <EuiFlexItem grow={false}>{bottomRightContent}</EuiFlexItem>}
+        </EuiFlexGroup>
+      </Container>
+    );
+  }
+);
 
 MarkdownEditor.displayName = 'MarkdownEditor';

x-pack/legacy/plugins/siem/public/components/timeline/insert_timeline_popover/index.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiButtonIcon, EuiPopover, EuiSelectableOption } from '@elastic/eui';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+
+import { OpenTimelineResult } from '../../open_timeline/types';
+import { SelectableTimeline } from '../selectable_timeline';
+import * as i18n from '../translations';
+
+interface InsertTimelinePopoverProps {
+  isDisabled: boolean;
+  hideUntitled?: boolean;
+  onTimelineChange: (timelineTitle: string, timelineId: string | null) => void;
+}
+
+const InsertTimelinePopoverComponent: React.FC<InsertTimelinePopoverProps> = ({
+  isDisabled,
+  hideUntitled = false,
+  onTimelineChange,
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const handleClosePopover = useCallback(() => {
+    setIsPopoverOpen(false);
+  }, []);
+
+  const handleOpenPopover = useCallback(() => {
+    setIsPopoverOpen(true);
+  }, []);
+
+  const insertTimelineButton = useMemo(
+    () => (
+      <EuiButtonIcon
+        aria-label={i18n.INSERT_TIMELINE}
+        data-test-subj="insert-timeline-button"
+        iconType="timeline"
+        isDisabled={isDisabled}
+        onClick={handleOpenPopover}
+      />
+    ),
+    [handleOpenPopover, isDisabled]
+  );
+
+  const handleGetSelectableOptions = useCallback(
+    ({ timelines }) => [
+      ...timelines
+        .filter((t: OpenTimelineResult) => !hideUntitled || t.title !== '')
+        .map(
+          (t: OpenTimelineResult, index: number) =>
+            ({
+              description: t.description,
+              favorite: t.favorite,
+              label: t.title,
+              id: t.savedObjectId,
+              key: `${t.title}-${index}`,
+              title: t.title,
+              checked: undefined,
+            } as EuiSelectableOption)
+        ),
+    ],
+    [hideUntitled]
+  );
+
+  return (
+    <EuiPopover
+      id="searchTimelinePopover"
+      button={insertTimelineButton}
+      isOpen={isPopoverOpen}
+      closePopover={handleClosePopover}
+    >
+      <SelectableTimeline
+        hideUntitled={hideUntitled}
+        getSelectableOptions={handleGetSelectableOptions}
+        onClosePopover={handleClosePopover}
+        onTimelineChange={onTimelineChange}
+      />
+    </EuiPopover>
+  );
+};
+
+export const InsertTimelinePopover = memo(InsertTimelinePopoverComponent);