[8.7] [Cases] Fix lens visualization in comment and description markdown(#155897) (#156330)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Cases] Fix lens visualization in comment and description markdown
(#155897)](https://github.com/elastic/kibana/pull/155897)

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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;

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}

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}

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 });

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('savedObjectFinderItemList', { 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() {

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();

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_cases/details_view.ts

@@ -31,7 +31,7 @@ export default function ({ getService }: FtrProviderContext) {
     it('cases visualization screenshot', async () => {
       await cases.navigation.navigateToApp();
       await cases.navigation.navigateToSingleCase('cases', CASE_ID);
-      await cases.singleCase.addVisualization('Transactions per day');
+      await cases.singleCase.addVisualizationToNewComment('Transactions per day');
       await cases.singleCase.openVisualizationButtonTooltip();
       await commonScreenshots.takeScreenshot(
         'cases-visualization',