[Cases] Disable the lens plugin in the new case form (including flyout) (#122937) (#123124)

(cherry picked from commit c526ff9dd7)

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

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

@@ -9,6 +9,7 @@ import React, { memo, useEffect, useRef } from 'react';
 import { MarkdownEditorForm } from '../markdown_editor';
 import { UseField, useFormContext, useFormData } from '../../common/shared_imports';
 import { useLensDraftComment } from '../markdown_editor/plugins/lens/use_lens_draft_comment';
+import { ID as LensPluginId } from '../markdown_editor/plugins/lens/constants';
 
 interface Props {
   isLoading: boolean;
@@ -22,6 +23,7 @@ const DescriptionComponent: React.FC<Props> = ({ isLoading }) => {
   const { setFieldValue } = useFormContext();
   const [{ title, tags }] = useFormData({ watch: ['title', 'tags'] });
   const editorRef = useRef<Record<string, any>>();
+  const disabledUiPlugins = [LensPluginId];
 
   useEffect(() => {
     if (draftComment?.commentId === fieldName && editorRef.current) {
@@ -55,6 +57,7 @@ const DescriptionComponent: React.FC<Props> = ({ isLoading }) => {
         isDisabled: isLoading,
         caseTitle: title,
         caseTags: tags,
+        disabledUiPlugins,
       }}
     />
   );

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

@@ -15,12 +15,7 @@ import React, {
   ElementRef,
 } from 'react';
 import { PluggableList } from 'unified';
-import {
-  EuiMarkdownEditor,
-  EuiMarkdownEditorProps,
-  EuiMarkdownAstNode,
-  EuiMarkdownEditorUiPlugin,
-} from '@elastic/eui';
+import { EuiMarkdownEditor, EuiMarkdownEditorProps, EuiMarkdownAstNode } from '@elastic/eui';
 import { ContextShape } from '@elastic/eui/src/components/markdown_editor/markdown_context';
 import { usePlugins } from './use_plugins';
 import { useLensButtonToggle } from './plugins/lens/use_lens_button_toggle';
@@ -33,7 +28,7 @@ interface MarkdownEditorProps {
   onChange: (content: string) => void;
   parsingPlugins?: PluggableList;
   processingPlugins?: PluggableList;
-  uiPlugins?: EuiMarkdownEditorUiPlugin[] | undefined;
+  disabledUiPlugins?: string[] | undefined;
   value: string;
 }
 
@@ -46,14 +41,15 @@ export interface MarkdownEditorRef {
 }
 
 const MarkdownEditorComponent = forwardRef<MarkdownEditorRef, MarkdownEditorProps>(
-  ({ ariaLabel, dataTestSubj, editorId, height, onChange, value }, ref) => {
+  ({ ariaLabel, dataTestSubj, editorId, height, onChange, value, disabledUiPlugins }, ref) => {
     const astRef = useRef<EuiMarkdownAstNode | undefined>(undefined);
     const [markdownErrorMessages, setMarkdownErrorMessages] = useState([]);
     const onParse: EuiMarkdownEditorProps['onParse'] = useCallback((err, { messages, ast }) => {
       setMarkdownErrorMessages(err ? [err] : messages);
       astRef.current = ast;
     }, []);
-    const { parsingPlugins, processingPlugins, uiPlugins } = usePlugins();
+
+    const { parsingPlugins, processingPlugins, uiPlugins } = usePlugins(disabledUiPlugins);
     const editorRef = useRef<EuiMarkdownEditorRef>(null);
 
     useLensButtonToggle({

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

@@ -21,6 +21,7 @@ type MarkdownEditorFormProps = EuiMarkdownEditorProps & {
   bottomRightContent?: React.ReactNode;
   caseTitle?: string;
   caseTags?: string[];
+  disabledUiPlugins?: string[];
 };
 
 const BottomContentWrapper = styled(EuiFlexGroup)`
@@ -31,7 +32,19 @@ const BottomContentWrapper = styled(EuiFlexGroup)`
 
 export const MarkdownEditorForm = React.memo(
   forwardRef<MarkdownEditorRef, MarkdownEditorFormProps>(
-    ({ id, field, dataTestSubj, idAria, bottomRightContent, caseTitle, caseTags }, ref) => {
+    (
+      {
+        id,
+        field,
+        dataTestSubj,
+        idAria,
+        bottomRightContent,
+        caseTitle,
+        caseTags,
+        disabledUiPlugins,
+      },
+      ref
+    ) => {
       const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
 
       const commentEditorContextValue = useMemo(
@@ -62,6 +75,7 @@ export const MarkdownEditorForm = React.memo(
               editorId={id}
               onChange={field.setValue}
               value={field.value}
+              disabledUiPlugins={disabledUiPlugins}
               data-test-subj={`${dataTestSubj}-markdown-editor`}
             />
           </EuiFormRow>

x-pack/plugins/cases/public/components/markdown_editor/use_plugins.ts

@@ -15,8 +15,9 @@ import { useTimelineContext } from '../timeline_context/use_timeline_context';
 import { TemporaryProcessingPluginsType } from './types';
 import { KibanaServices } from '../../common/lib/kibana';
 import * as lensMarkdownPlugin from './plugins/lens';
+import { ID as LensPluginId } from './plugins/lens/constants';
 
-export const usePlugins = () => {
+export const usePlugins = (disabledPlugins?: string[]) => {
   const kibanaConfig = KibanaServices.getConfig();
   const timelinePlugins = useTimelineContext()?.editor_plugins;
 
@@ -35,7 +36,7 @@ export const usePlugins = () => {
       processingPlugins[1][1].components.timeline = timelinePlugins.processingPluginRenderer;
     }
 
-    if (kibanaConfig?.markdownPlugins?.lens) {
+    if (kibanaConfig?.markdownPlugins?.lens && !disabledPlugins?.includes(LensPluginId)) {
       uiPlugins.push(lensMarkdownPlugin.plugin);
     }
 
@@ -48,5 +49,5 @@ export const usePlugins = () => {
       parsingPlugins,
       processingPlugins,
     };
-  }, [kibanaConfig?.markdownPlugins?.lens, timelinePlugins]);
+  }, [disabledPlugins, kibanaConfig?.markdownPlugins?.lens, timelinePlugins]);
 };