[Painless] Minor state update model refactor

x-pack/plugins/painless_lab/public/application/common/constants.tsx

@@ -30,7 +30,7 @@ export const painlessContextOptions = [
         <strong>{defaultLabel}</strong>
         <EuiText size="s" color="subdued">
           <p className="euiTextColor--subdued">
-            {i18n.translate('xpack.painlessLab.context.scoreLabel', {
+            {i18n.translate('xpack.painlessLab.context.defaultLabel', {
               defaultMessage: 'The script result will be converted to a string',
             })}
           </p>
@@ -46,7 +46,7 @@ export const painlessContextOptions = [
         <strong>{filterLabel}</strong>
         <EuiText size="s" color="subdued">
           <p className="euiTextColor--subdued">
-            {i18n.translate('xpack.painlessLab.context.scoreLabel', {
+            {i18n.translate('xpack.painlessLab.context.filterLabel', {
               defaultMessage: "Use the context of a filter's script query",
             })}
           </p>

x-pack/plugins/painless_lab/public/application/common/types.ts

@@ -7,15 +7,6 @@
 // This should be an enumerated list
 export type Context = string;
 
-export interface RequestPayloadConfig {
-  code?: string;
-  context?: string;
-  parameters?: string;
-  index?: string;
-  document?: string;
-  query?: string;
-}
-
 export enum PayloadFormat {
   UGLY = 'ugly',
   PRETTY = 'pretty',

x-pack/plugins/painless_lab/public/application/components/main.tsx

@@ -5,69 +5,34 @@
  */
 
 import { HttpSetup } from 'kibana/public';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, FunctionComponent } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { formatRequestPayload, formatJson } from '../lib/format';
-import { painlessContextOptions, exampleScript } from '../common/constants';
+import { exampleScript } from '../common/constants';
 import { PayloadFormat } from '../common/types';
 import { useSubmitCode } from '../hooks';
 import { OutputPane } from './output_pane';
 import { MainControls } from './main_controls';
 import { Editor } from './editor';
 import { RequestFlyout } from './request_flyout';
+import { useAppContext } from '../context';
 
 interface Props {
   http: HttpSetup;
 }
 
-const PAINLESS_LAB_KEY = 'painlessLabState';
-
-export function Main({ http }: Props) {
-  const [state, setState] = useState(() => ({
-    code: exampleScript,
-    context: painlessContextOptions[0].value,
-    parameters: '',
-    index: '',
-    document: '',
-    query: '',
-    ...JSON.parse(localStorage.getItem(PAINLESS_LAB_KEY) || '{}'),
-  }));
+export const Main: FunctionComponent<Props> = ({ http }) => {
+  const { state, updateState } = useAppContext();
 
   const [isRequestFlyoutOpen, setRequestFlyoutOpen] = useState(false);
   const { inProgress, response, submit } = useSubmitCode(http);
 
   // Live-update the output and persist state as the user changes it.
-  const { code, context, parameters, index, document, query } = state;
   useEffect(() => {
     submit(state);
-    localStorage.setItem(PAINLESS_LAB_KEY, JSON.stringify(state));
   }, [state, submit]);
 
-  const onCodeChange = (newCode: string) => {
-    setState({ ...state, code: newCode });
-  };
-
-  const onContextChange = (newContext: string) => {
-    setState({ ...state, context: newContext });
-  };
-
-  const onParametersChange = (newParameters: string) => {
-    setState({ ...state, parameters: newParameters });
-  };
-
-  const onIndexChange = (newIndex: string) => {
-    setState({ ...state, index: newIndex });
-  };
-
-  const onDocumentChange = (newDocument: string) => {
-    setState({ ...state, document: newDocument });
-  };
-
-  const onQueryChange = (newQuery: string) => {
-    setState({ ...state, query: newQuery });
-  };
-
   const toggleRequestFlyout = () => {
     setRequestFlyoutOpen(!isRequestFlyoutOpen);
   };
@@ -84,32 +49,22 @@ export function Main({ http }: Props) {
             </h1>
           </EuiTitle>
 
-          <Editor code={code} onChange={onCodeChange} />
+          <Editor
+            code={state.code}
+            onChange={nextCode => updateState(() => ({ code: nextCode }))}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <OutputPane
-            isLoading={inProgress}
-            response={response}
-            context={context}
-            parameters={parameters}
-            index={index}
-            document={document}
-            query={query}
-            onContextChange={onContextChange}
-            onParametersChange={onParametersChange}
-            onIndexChange={onIndexChange}
-            onDocumentChange={onDocumentChange}
-            onQueryChange={onQueryChange}
-          />
+          <OutputPane isLoading={inProgress} response={response} />
         </EuiFlexItem>
       </EuiFlexGroup>
 
       <MainControls
         isLoading={inProgress}
         toggleRequestFlyout={toggleRequestFlyout}
         isRequestFlyoutOpen={isRequestFlyoutOpen}
-        reset={() => onCodeChange(exampleScript)}
+        reset={() => updateState(() => ({ code: exampleScript }))}
       />
 
       {isRequestFlyoutOpen && (
@@ -121,4 +76,4 @@ export function Main({ http }: Props) {
       )}
     </div>
   );
-}
+};