[8.8] [Cases] Fix lens visualization in comment and description markd…

…own (#155897) (#156189) # Backport This will backport the following commits from `main` to `8.8`: - [[Cases] Fix lens visualization in comment and description markdown (#155897)](#155897)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Janki Salvi <117571355+js-jankisalvi@users.noreply.github.com> Co-authored-by: Lisa Cawley <lcawley@elastic.co>
elastic · May 2, 2023 · 52c7918 · 52c7918
1 parent edd78ba
commit 52c7918
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 55 deletions.
diff --git a/x-pack/plugins/cases/public/components/create/description.test.tsx b/x-pack/plugins/cases/public/components/create/description.test.tsx
@@ -17,8 +17,6 @@ import { schema } from './schema';
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';
 
-jest.mock('../markdown_editor/plugins/lens/use_lens_draft_comment');
-
 describe('Description', () => {
   let globalForm: FormHook;
   let appMockRender: AppMockRenderer;

diff --git a/x-pack/plugins/cases/public/components/create/description.tsx b/x-pack/plugins/cases/public/components/create/description.tsx
@@ -5,14 +5,9 @@
  * 2.0.
  */
 
-import React, { memo, useEffect, useRef } from 'react';
-import {
-  UseField,
-  useFormContext,
-  useFormData,
-} from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
+import React, { memo, useRef } from 'react';
+import { UseField, useFormData } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
 import { MarkdownEditorForm } from '../markdown_editor';
-import { useLensDraftComment } from '../markdown_editor/plugins/lens/use_lens_draft_comment';
 import { ID as LensPluginId } from '../markdown_editor/plugins/lens/constants';
 
 interface Props {
@@ -23,33 +18,10 @@ interface Props {
 export const fieldName = 'description';
 
 const DescriptionComponent: React.FC<Props> = ({ isLoading, draftStorageKey }) => {
-  const { draftComment, hasIncomingLensState, openLensModal, clearDraftComment } =
-    useLensDraftComment();
-  const { setFieldValue } = useFormContext();
   const [{ title, tags }] = useFormData({ watch: ['title', 'tags'] });
   const editorRef = useRef<Record<string, unknown>>();
   const disabledUiPlugins = [LensPluginId];
 
-  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 {
-        clearDraftComment();
-      }
-    }
-  }, [clearDraftComment, draftComment, hasIncomingLensState, openLensModal, setFieldValue]);
-
   return (
     <UseField
       path={fieldName}

diff --git a/x-pack/plugins/cases/public/components/description/index.tsx b/x-pack/plugins/cases/public/components/description/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { css } from '@emotion/react';
 import {
@@ -21,12 +21,17 @@ import { getMarkdownEditorStorageKey } from '../markdown_editor/utils';
 import * as i18n from '../user_actions/translations';
 import { useCasesContext } from '../cases_context/use_cases_context';
 import { useLensDraftComment } from '../markdown_editor/plugins/lens/use_lens_draft_comment';
+import type { EditableMarkdownRefObject, EuiMarkdownEditorRef } from '../markdown_editor';
 import { EditableMarkdown, ScrollableMarkdown } from '../markdown_editor';
 import type { Case } from '../../containers/types';
 import type { OnUpdateFields } from '../case_view/types';
 import { schema } from './schema';
 
 const DESCRIPTION_ID = 'description';
+
+export interface DescriptionMarkdownRefObject extends EditableMarkdownRefObject {
+  editor: EuiMarkdownEditorRef | null;
+}
 export interface DescriptionProps {
   caseData: Case;
   isLoadingDescription: boolean;
@@ -73,6 +78,13 @@ const getDraftDescription = (
   return sessionStorage.getItem(draftStorageKey);
 };
 
+const isCommentRef = (
+  ref: EditableMarkdownRefObject | null | undefined
+): ref is EditableMarkdownRefObject => {
+  const commentRef = ref as EditableMarkdownRefObject;
+  return commentRef?.setComment != null;
+};
+
 export const Description = ({
   caseData,
   onUpdateField,
@@ -82,13 +94,16 @@ export const Description = ({
   const [isEditable, setIsEditable] = useState<boolean>(false);
 
   const descriptionRef = useRef(null);
+  const descriptionMarkdownRef = useRef<DescriptionMarkdownRefObject | null>(null);
+
   const { euiTheme } = useEuiTheme();
   const { appId, permissions } = useCasesContext();
 
   const {
     clearDraftComment: clearLensDraftComment,
     draftComment: lensDraftComment,
     hasIncomingLensState,
+    openLensModal,
   } = useLensDraftComment();
 
   const handleOnChangeEditable = useCallback(() => {
@@ -117,6 +132,22 @@ export const Description = ({
     setIsEditable(true);
   }
 
+  useEffect(() => {
+    if (
+      isCommentRef(descriptionMarkdownRef.current) &&
+      descriptionMarkdownRef.current.editor?.textarea &&
+      lensDraftComment &&
+      lensDraftComment.commentId === DESCRIPTION_ID
+    ) {
+      descriptionMarkdownRef.current.setComment(lensDraftComment.comment);
+      if (hasIncomingLensState) {
+        openLensModal({ editorRef: descriptionMarkdownRef.current.editor });
+      } else {
+        clearLensDraftComment();
+      }
+    }
+  }, [clearLensDraftComment, lensDraftComment, hasIncomingLensState, openLensModal]);
+
   const hasUnsavedChanges =
     draftDescription && draftDescription !== caseData.description && !isLoadingDescription;
 
@@ -131,6 +162,7 @@ export const Description = ({
       editorRef={descriptionRef}
       fieldName="content"
       formSchema={schema}
+      ref={descriptionMarkdownRef}
     />
   ) : (
     <Panel hasShadow={false} hasBorder={true} data-test-subj="description">

diff --git a/x-pack/plugins/cases/public/components/user_actions/comment/user.tsx b/x-pack/plugins/cases/public/components/user_actions/comment/user.tsx
@@ -46,10 +46,17 @@ const MyEuiCommentFooter = styled(EuiText)`
   `}
 `;
 
-const hasDraftComment = (appId = '', caseId: string, commentId: string): boolean => {
-  const draftStorageKey = getMarkdownEditorStorageKey(appId, caseId, commentId);
+const hasDraftComment = (
+  applicationId = '',
+  caseId: string,
+  commentId: string,
+  comment: string
+): boolean => {
+  const draftStorageKey = getMarkdownEditorStorageKey(applicationId, caseId, commentId);
 
-  return Boolean(sessionStorage.getItem(draftStorageKey));
+  const sessionValue = sessionStorage.getItem(draftStorageKey);
+
+  return Boolean(sessionValue && sessionValue !== comment);
 };
 
 export const createUserAttachmentUserActionBuilder = ({
@@ -78,7 +85,8 @@ export const createUserAttachmentUserActionBuilder = ({
       className: classNames('userAction__comment', {
         outlined,
         isEdit,
-        draftFooter: !isEdit && !isLoading && hasDraftComment(appId, caseId, comment.id),
+        draftFooter:
+          !isEdit && !isLoading && hasDraftComment(appId, caseId, comment.id, comment.comment),
       }),
       children: (
         <>
@@ -95,7 +103,7 @@ export const createUserAttachmentUserActionBuilder = ({
               version: comment.version,
             })}
           />
-          {!isEdit && !isLoading && hasDraftComment(appId, caseId, comment.id) ? (
+          {!isEdit && !isLoading && hasDraftComment(appId, caseId, comment.id, comment.comment) ? (
             <MyEuiCommentFooter>
               <EuiText color="subdued" size="xs" data-test-subj="user-action-comment-unsaved-draft">
                 {i18n.UNSAVED_DRAFT_COMMENT}

diff --git a/x-pack/plugins/cases/public/components/user_actions/use_user_actions_handler.tsx b/x-pack/plugins/cases/public/components/user_actions/use_user_actions_handler.tsx
@@ -37,6 +37,13 @@ const isAddCommentRef = (
   return commentRef?.addQuote != null;
 };
 
+const isSetCommentRef = (
+  ref: AddCommentRefObject | UserActionMarkdownRefObject | null | undefined
+): ref is AddCommentRefObject => {
+  const commentRef = ref as UserActionMarkdownRefObject;
+  return commentRef?.setComment != null;
+};
+
 export const useUserActionsHandler = (): UseUserActionsHandler => {
   const { detailName: caseId } = useCaseViewParams();
   const { clearDraftComment, draftComment, hasIncomingLensState, openLensModal } =
@@ -122,7 +129,7 @@ export const useUserActionsHandler = (): UseUserActionsHandler => {
   );
 
   useEffect(() => {
-    if (draftComment?.commentId) {
+    if (draftComment?.commentId && draftComment?.commentId !== 'description') {
       setManageMarkdownEditIds((prevManageMarkdownEditIds) => {
         if (
           NEW_COMMENT_ID !== draftComment?.commentId &&
@@ -135,7 +142,7 @@ export const useUserActionsHandler = (): UseUserActionsHandler => {
 
       const ref = commentRefs?.current?.[draftComment.commentId];
 
-      if (isAddCommentRef(ref) && ref.editor?.textarea) {
+      if (isSetCommentRef(ref) && ref.editor?.textarea) {
         ref.setComment(draftComment.comment);
         if (hasIncomingLensState) {
           openLensModal({ editorRef: ref.editor });

diff --git a/x-pack/test/functional/services/cases/single_case_view.ts b/x-pack/test/functional/services/cases/single_case_view.ts
@@ -41,7 +41,7 @@ export function CasesSingleViewServiceProvider({ getService, getPageObject }: Ft
     },
 
     async getCommentCount(): Promise<number> {
-      const commentsContainer = await testSubjects.find('user-actions');
+      const commentsContainer = await testSubjects.find('user-actions-list');
       const comments = await commentsContainer.findAllByClassName('euiComment');
       return comments.length - 1; // don't count the element for adding a new comment
     },
@@ -58,13 +58,22 @@ export function CasesSingleViewServiceProvider({ getService, getPageObject }: Ft
       });
     },
 
-    async addVisualization(visName: string) {
+    async addVisualizationToNewComment(visName: string) {
       // open saved object finder
       const addCommentElement = await testSubjects.find('add-comment');
       const addVisualizationButton = await addCommentElement.findByCssSelector(
         '[data-test-subj="euiMarkdownEditorToolbarButton"][aria-label="Visualization"]'
       );
       await addVisualizationButton.click();
+
+      await this.findAndSaveVisualization(visName);
+
+      await testSubjects.existOrFail('cases-app', { timeout: 10 * 1000 });
+
+      await this.submitComment();
+    },
+
+    async findAndSaveVisualization(visName: string) {
       await testSubjects.existOrFail('savedObjectsFinderTable', { timeout: 10 * 1000 });
 
       // select visualization
@@ -78,8 +87,6 @@ export function CasesSingleViewServiceProvider({ getService, getPageObject }: Ft
 
       // save and return to cases app, add comment
       await lensPage.saveAndReturn();
-      await testSubjects.existOrFail('cases-app', { timeout: 10 * 1000 });
-      await this.submitComment();
     },
 
     async openVisualizationButtonTooltip() {

diff --git a/x-pack/test/functional_with_es_ssl/apps/cases/group1/view_case.ts b/x-pack/test/functional_with_es_ssl/apps/cases/group1/view_case.ts
@@ -272,16 +272,6 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
         });
 
         it('shows unsaved comment message when page is refreshed', async () => {
-          const commentArea = await find.byCssSelector(
-            '[data-test-subj="add-comment"] textarea.euiMarkdownEditorTextArea'
-          );
-          await commentArea.focus();
-          await commentArea.type('Test comment from automation');
-
-          await testSubjects.click('submit-comment');
-
-          await header.waitUntilLoadingHasFinished();
-
           await testSubjects.click('property-actions-user-action-ellipses');
 
           await header.waitUntilLoadingHasFinished();
@@ -299,6 +289,8 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
           await editCommentTextArea.focus();
           await editCommentTextArea.type('Edited comment');
 
+          await header.waitUntilLoadingHasFinished();
+
           await browser.refresh();
 
           await header.waitUntilLoadingHasFinished();
@@ -341,6 +333,104 @@ export default ({ getPageObject, getService }: FtrProviderContext) => {
       });
     });
 
+    describe('Lens visualization', () => {
+      before(async () => {
+        await cases.testResources.installKibanaSampleData('logs');
+      });
+
+      after(async () => {
+        await cases.testResources.removeKibanaSampleData('logs');
+      });
+
+      createOneCaseBeforeDeleteAllAfter(getPageObject, getService);
+
+      it('adds lens visualization in description', async () => {
+        await testSubjects.click('description-edit-icon');
+
+        await header.waitUntilLoadingHasFinished();
+
+        const editCommentTextArea = await find.byCssSelector(
+          '[data-test-subj*="editable-markdown-form"] textarea.euiMarkdownEditorTextArea'
+        );
+
+        await header.waitUntilLoadingHasFinished();
+
+        await editCommentTextArea.focus();
+
+        const editableDescription = await testSubjects.find('editable-markdown-form');
+
+        const addVisualizationButton = await editableDescription.findByCssSelector(
+          '[data-test-subj="euiMarkdownEditorToolbarButton"][aria-label="Visualization"]'
+        );
+        await addVisualizationButton.click();
+
+        await cases.singleCase.findAndSaveVisualization('[Logs] Bytes distribution');
+
+        await header.waitUntilLoadingHasFinished();
+
+        await testSubjects.click('editable-save-markdown');
+
+        await header.waitUntilLoadingHasFinished();
+
+        const description = await find.byCssSelector('[data-test-subj="description"]');
+
+        await description.findByCssSelector('[data-test-subj="xyVisChart"]');
+      });
+
+      it('adds lens visualization in existing comment', async () => {
+        const commentArea = await find.byCssSelector(
+          '[data-test-subj="add-comment"] textarea.euiMarkdownEditorTextArea'
+        );
+        await commentArea.focus();
+        await commentArea.type('Test comment from automation');
+
+        await header.waitUntilLoadingHasFinished();
+
+        await testSubjects.click('submit-comment');
+
+        await header.waitUntilLoadingHasFinished();
+
+        await testSubjects.click('property-actions-user-action-ellipses');
+
+        await header.waitUntilLoadingHasFinished();
+
+        await testSubjects.click('property-actions-user-action-pencil');
+
+        await header.waitUntilLoadingHasFinished();
+
+        const editComment = await find.byCssSelector('[data-test-subj*="editable-markdown-form"]');
+
+        const addVisualizationButton = await editComment.findByCssSelector(
+          '[data-test-subj="euiMarkdownEditorToolbarButton"][aria-label="Visualization"]'
+        );
+        await addVisualizationButton.click();
+
+        await cases.singleCase.findAndSaveVisualization('[Logs] Bytes distribution');
+
+        await header.waitUntilLoadingHasFinished();
+
+        await testSubjects.click('editable-save-markdown');
+
+        await header.waitUntilLoadingHasFinished();
+
+        const createdComment = await find.byCssSelector(
+          '[data-test-subj*="comment-create-action"] [data-test-subj="scrollable-markdown"]'
+        );
+
+        await createdComment.findByCssSelector('[data-test-subj="xyVisChart"]');
+      });
+
+      it('adds lens visualization in new comment', async () => {
+        await cases.singleCase.addVisualizationToNewComment('[Logs] Bytes distribution');
+
+        await header.waitUntilLoadingHasFinished();
+
+        const newComment = await find.byCssSelector('[data-test-subj*="comment-create-action"]');
+
+        await newComment.findByCssSelector('[data-test-subj="xyVisChart"]');
+      });
+    });
+
     describe('Severity field', () => {
       createOneCaseBeforeDeleteAllAfter(getPageObject, getService);