[data view field editor] Runtime field code editor - move state out of controller

src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx

@@ -59,6 +59,9 @@ const currentDocumentSelector = (state: PreviewState) => state.documents[state.c
 const currentDocumentIsLoadingSelector = (state: PreviewState) => state.isLoadingDocuments;
 
 const ScriptFieldComponent = ({ existingConcreteFields, links, placeholder }: Props) => {
+  const {
+    validation: { setScriptEditorValidation },
+  } = useFieldPreviewContext();
   const monacoEditor = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const editorValidationSubscription = useRef<Subscription>();
   const fieldCurrentValue = useRef<string>('');
@@ -143,15 +146,15 @@ const ScriptFieldComponent = ({ existingConcreteFields, links, placeholder }: Pr
 
       editorValidationSubscription.current = PainlessLang.validation$().subscribe(
         ({ isValid, isValidating, errors }) => {
-          controller.setScriptEditorValidation({
+          setScriptEditorValidation({
             isValid,
             isValidating,
             message: errors[0]?.message ?? null,
           });
         }
       );
     },
-    [controller]
+    [setScriptEditorValidation]
   );
 
   const updateMonacoMarkers = useCallback((markers: monaco.editor.IMarkerData[]) => {

src/plugins/data_view_field_editor/public/components/preview/field_preview_context.tsx

@@ -75,8 +75,6 @@ const documentsSelector = (state: PreviewState) => {
   };
 };
 
-const scriptEditorValidationSelector = (state: PreviewState) => state.scriptEditorValidation;
-
 export const FieldPreviewProvider: FunctionComponent<{ controller: PreviewController }> = ({
   controller,
   children,
@@ -121,6 +119,12 @@ export const FieldPreviewProvider: FunctionComponent<{ controller: PreviewContro
   /** The parameters required for the Painless _execute API */
   const [params, setParams] = useState<Params>(defaultParams);
 
+  const [scriptEditorValidation, setScriptEditorValidation] = useState<{
+    isValidating: boolean;
+    isValid: boolean;
+    message: string | null;
+  }>({ isValidating: false, isValid: true, message: null });
+
   /** Flag to show/hide the preview panel */
   const [isPanelVisible, setIsPanelVisible] = useState(true);
   /** Flag to indicate if we are loading document from cluster */
@@ -133,10 +137,6 @@ export const FieldPreviewProvider: FunctionComponent<{ controller: PreviewContro
 
   const { currentDocument, currentDocIndex, currentDocId, totalDocs, currentIdx } =
     useStateSelector(controller.state$, documentsSelector);
-  const scriptEditorValidation = useStateSelector(
-    controller.state$,
-    scriptEditorValidationSelector
-  );
 
   let isPreviewAvailable = true;
 
@@ -513,6 +513,9 @@ export const FieldPreviewProvider: FunctionComponent<{ controller: PreviewContro
         isVisible: isPanelVisible,
         setIsVisible: setIsPanelVisible,
       },
+      validation: {
+        setScriptEditorValidation,
+      },
       reset,
     }),
     [

src/plugins/data_view_field_editor/public/components/preview/preview_controller.ts

@@ -95,9 +95,11 @@ export class PreviewController {
     }
   };
 
+  /* disabled while investigating issues with painless script editor
   setScriptEditorValidation = (scriptEditorValidation: PreviewState['scriptEditorValidation']) => {
     this.updateState({ scriptEditorValidation });
   };
+  */
 
   setCustomId = (customId?: string) => {
     this.updateState({ customId });

src/plugins/data_view_field_editor/public/components/preview/types.ts

@@ -133,6 +133,11 @@ export interface Context {
     isLastDoc: boolean;
   };
   reset: () => void;
+  validation: {
+    setScriptEditorValidation: React.Dispatch<
+      React.SetStateAction<{ isValid: boolean; isValidating: boolean; message: string | null }>
+    >;
+  };
 }
 
 export type PainlessExecuteContext =