[RAC] Fix missing case title and tags after adding visualization (#111236)

Co-authored-by: Patryk Kopyciński <patryk.kopycinski@elastic.co>
Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co>

x-pack/plugins/cases/public/components/create/description.tsx

@@ -7,7 +7,7 @@
 
 import React, { memo, useEffect, useRef } from 'react';
 import { MarkdownEditorForm } from '../markdown_editor';
-import { UseField, useFormContext } from '../../common/shared_imports';
+import { UseField, useFormContext, useFormData } from '../../common/shared_imports';
 import { useLensDraftComment } from '../markdown_editor/plugins/lens/use_lens_draft_comment';
 
 interface Props {
@@ -24,12 +24,21 @@ const DescriptionComponent: React.FC<Props> = ({ isLoading }) => {
     clearDraftComment,
   } = useLensDraftComment();
   const { setFieldValue } = useFormContext();
+  const [{ title, tags }] = useFormData({ watch: ['title', 'tags'] });
   const editorRef = useRef<Record<string, any>>();
 
   useEffect(() => {
     if (draftComment?.commentId === fieldName && editorRef.current) {
       setFieldValue(fieldName, draftComment.comment);
 
+      if (draftComment.caseTitle) {
+        setFieldValue('title', draftComment.caseTitle);
+      }
+
+      if (draftComment.caseTags && draftComment.caseTags.length > 0) {
+        setFieldValue('tags', draftComment.caseTags);
+      }
+
       if (hasIncomingLensState) {
         openLensModal({ editorRef: editorRef.current });
       } else {
@@ -48,6 +57,8 @@ const DescriptionComponent: React.FC<Props> = ({ isLoading }) => {
         dataTestSubj: 'caseDescription',
         idAria: 'caseDescription',
         isDisabled: isLoading,
+        caseTitle: title,
+        caseTags: tags,
       }}
     />
   );

x-pack/plugins/cases/public/components/markdown_editor/context.tsx

@@ -10,4 +10,6 @@ import React from 'react';
 export const CommentEditorContext = React.createContext<{
   editorId: string;
   value: string;
+  caseTitle?: string;
+  caseTags?: string[];
 } | null>(null);

x-pack/plugins/cases/public/components/markdown_editor/editor.tsx

@@ -9,7 +9,6 @@ import React, {
   memo,
   forwardRef,
   useCallback,
-  useMemo,
   useRef,
   useState,
   useImperativeHandle,
@@ -24,7 +23,6 @@ import {
 } from '@elastic/eui';
 import { ContextShape } from '@elastic/eui/src/components/markdown_editor/markdown_context';
 import { usePlugins } from './use_plugins';
-import { CommentEditorContext } from './context';
 import { useLensButtonToggle } from './plugins/lens/use_lens_button_toggle';
 
 interface MarkdownEditorProps {
@@ -65,14 +63,6 @@ const MarkdownEditorComponent = forwardRef<MarkdownEditorRef, MarkdownEditorProp
       value,
     });
 
-    const commentEditorContextValue = useMemo(
-      () => ({
-        editorId,
-        value,
-      }),
-      [editorId, value]
-    );
-
     // @ts-expect-error
     useImperativeHandle(ref, () => {
       if (!editorRef.current) {
@@ -88,22 +78,20 @@ const MarkdownEditorComponent = forwardRef<MarkdownEditorRef, MarkdownEditorProp
     });
 
     return (
-      <CommentEditorContext.Provider value={commentEditorContextValue}>
-        <EuiMarkdownEditor
-          ref={editorRef}
-          aria-label={ariaLabel}
-          editorId={editorId}
-          onChange={onChange}
-          value={value}
-          uiPlugins={uiPlugins}
-          parsingPluginList={parsingPlugins}
-          processingPluginList={processingPlugins}
-          onParse={onParse}
-          errors={markdownErrorMessages}
-          data-test-subj={dataTestSubj}
-          height={height}
-        />
-      </CommentEditorContext.Provider>
+      <EuiMarkdownEditor
+        ref={editorRef}
+        aria-label={ariaLabel}
+        editorId={editorId}
+        onChange={onChange}
+        value={value}
+        uiPlugins={uiPlugins}
+        parsingPluginList={parsingPlugins}
+        processingPluginList={processingPlugins}
+        onParse={onParse}
+        errors={markdownErrorMessages}
+        data-test-subj={dataTestSubj}
+        height={height}
+      />
     );
   }
 );

x-pack/plugins/cases/public/components/markdown_editor/eui_form.tsx

@@ -5,19 +5,22 @@
  * 2.0.
  */
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { EuiMarkdownEditorProps, EuiFormRow, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { FieldHook, getFieldValidityAndErrorMessage } from '../../common/shared_imports';
 import { MarkdownEditor, MarkdownEditorRef } from './editor';
+import { CommentEditorContext } from './context';
 
 type MarkdownEditorFormProps = EuiMarkdownEditorProps & {
   id: string;
-  field: FieldHook;
+  field: FieldHook<string>;
   dataTestSubj: string;
   idAria: string;
   isDisabled?: boolean;
   bottomRightContent?: React.ReactNode;
+  caseTitle?: string;
+  caseTags?: string[];
 };
 
 const BottomContentWrapper = styled(EuiFlexGroup)`
@@ -28,11 +31,21 @@ const BottomContentWrapper = styled(EuiFlexGroup)`
 
 export const MarkdownEditorForm = React.memo(
   forwardRef<MarkdownEditorRef, MarkdownEditorFormProps>(
-    ({ id, field, dataTestSubj, idAria, bottomRightContent }, ref) => {
+    ({ id, field, dataTestSubj, idAria, bottomRightContent, caseTitle, caseTags }, ref) => {
       const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
+      const commentEditorContextValue = useMemo(
+        () => ({
+          editorId: id,
+          value: field.value,
+          caseTitle,
+          caseTags,
+        }),
+        [id, field.value, caseTitle, caseTags]
+      );
+
       return (
-        <>
+        <CommentEditorContext.Provider value={commentEditorContextValue}>
           <EuiFormRow
             data-test-subj={dataTestSubj}
             describedByIds={idAria ? [idAria] : undefined}
@@ -48,7 +61,7 @@ export const MarkdownEditorForm = React.memo(
               ariaLabel={idAria}
               editorId={id}
               onChange={field.setValue}
-              value={field.value as string}
+              value={field.value}
               data-test-subj={`${dataTestSubj}-markdown-editor`}
             />
           </EuiFormRow>
@@ -57,7 +70,7 @@ export const MarkdownEditorForm = React.memo(
               <EuiFlexItem grow={false}>{bottomRightContent}</EuiFlexItem>
             </BottomContentWrapper>
           )}
-        </>
+        </CommentEditorContext.Provider>
       );
     }
   )

x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/plugin.tsx

@@ -135,6 +135,8 @@ const LensEditorComponent: LensEuiMarkdownEditorUiPlugin['editor'] = ({
       commentId: commentEditorContext?.editorId,
       comment: commentEditorContext?.value,
       position: node?.position,
+      caseTitle: commentEditorContext?.caseTitle,
+      caseTags: commentEditorContext?.caseTags,
     });
 
     lens?.navigateToPrefilledEditor(undefined, {
@@ -145,10 +147,12 @@ const LensEditorComponent: LensEuiMarkdownEditorUiPlugin['editor'] = ({
     storage,
     commentEditorContext?.editorId,
     commentEditorContext?.value,
+    commentEditorContext?.caseTitle,
+    commentEditorContext?.caseTags,
     node?.position,
+    lens,
     currentAppId,
     originatingPath,
-    lens,
   ]);
 
   const handleEditInLensClick = useCallback(
@@ -157,6 +161,8 @@ const LensEditorComponent: LensEuiMarkdownEditorUiPlugin['editor'] = ({
         commentId: commentEditorContext?.editorId,
         comment: commentEditorContext?.value,
         position: node?.position,
+        caseTitle: commentEditorContext?.caseTitle,
+        caseTags: commentEditorContext?.caseTags,
       });
 
       lens?.navigateToPrefilledEditor(
@@ -177,11 +183,13 @@ const LensEditorComponent: LensEuiMarkdownEditorUiPlugin['editor'] = ({
       storage,
       commentEditorContext?.editorId,
       commentEditorContext?.value,
+      commentEditorContext?.caseTitle,
+      commentEditorContext?.caseTags,
       node?.position,
+      node?.attributes,
+      lens,
       currentAppId,
       originatingPath,
-      lens,
-      node?.attributes,
     ]
   );
 

x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/use_lens_draft_comment.ts

@@ -16,6 +16,8 @@ interface DraftComment {
   commentId: string;
   comment: string;
   position: EuiMarkdownAstNodePosition;
+  caseTitle?: string;
+  caseTags?: string[];
 }
 
 export const useLensDraftComment = () => {