some refactoring

elastic · Apr 24, 2020 · 311ef9c · 311ef9c
1 parent 07bf620
commit 311ef9c
Show file tree

Hide file tree

Showing 14 changed files with 410 additions and 332 deletions.
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/index.ts
@@ -6,6 +6,4 @@
 
 export { PipelineForm } from './pipeline_form';
 
-export { SectionError } from './section_error';
-
 export { PipelineRequestFlyoutProvider as PipelineRequestFlyout } from './pipeline_request_flyout_provider';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/index.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PipelineForm } from './pipeline_form';
+export { PipelineFormProvider as PipelineForm } from './pipeline_form_provider';
diff --git a/...ck/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx b/...ck/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx
@@ -11,13 +11,14 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from
 import { useForm, Form, FormConfig } from '../../../shared_imports';
 import { Pipeline } from '../../../../common/types';
 
-import { SectionError, PipelineRequestFlyout } from '../';
-import { pipelineFormSchema } from './schema';
+import { PipelineRequestFlyout } from '../';
 import { PipelineTestFlyout } from './pipeline_test_flyout';
-import { TestConfigContextProvider, useTestConfig } from './test_config_context';
+import { useTestConfigContext } from './test_config_context';
 import { PipelineFormFields } from './pipeline_form_fields';
+import { PipelineFormError } from './pipeline_form_error';
+import { pipelineFormSchema } from './schema';
 
-interface Props {
+export interface PipelineFormProps {
   onSave: (pipeline: Pipeline) => void;
   onCancel: () => void;
   isSaving: boolean;
@@ -26,7 +27,7 @@ interface Props {
   isEditing?: boolean;
 }
 
-export const PipelineForm: React.FunctionComponent<Props> = ({
+export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
   defaultValue = {
     name: '',
     description: '',
@@ -41,14 +42,27 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
   onCancel,
 }) => {
   const [isRequestVisible, setIsRequestVisible] = useState<boolean>(false);
+
   const [isTestingPipeline, setIsTestingPipeline] = useState<boolean>(false);
+  const [shouldExecuteImmediately, setShouldExecuteImmediately] = useState<boolean>(false);
 
   const handleSave: FormConfig['onSubmit'] = (formData, isValid) => {
     if (isValid) {
       onSave(formData as Pipeline);
     }
   };
 
+  const { testConfig } = useTestConfigContext();
+  const { documents: cachedDocuments } = testConfig;
+
+  const handleTestPipelineClick = () => {
+    setIsTestingPipeline(true);
+
+    if (cachedDocuments) {
+      setShouldExecuteImmediately(true);
+    }
+  };
+
   const { form } = useForm({
     schema: pipelineFormSchema,
     defaultValue,
@@ -72,110 +86,93 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
     />
   );
 
-  const testConfigContextValue = useTestConfig();
-
   return (
     <>
-      <TestConfigContextProvider value={testConfigContextValue}>
-        <Form
-          form={form}
-          data-test-subj="pipelineForm"
-          isInvalid={form.isSubmitted && !form.isValid}
-          error={form.getErrors()}
-        >
-          <EuiSpacer size="l" />
-
-          {/* Request error */}
-          {saveError ? (
-            <>
-              <SectionError
-                title={
+      <Form
+        form={form}
+        data-test-subj="pipelineForm"
+        isInvalid={form.isSubmitted && !form.isValid}
+        error={form.getErrors()}
+      >
+        <EuiSpacer size="l" />
+
+        {/* Request error */}
+        {saveError && <PipelineFormError errorMessage={saveError.message} />}
+
+        {/* All form fields */}
+        <PipelineFormFields
+          hasVersion={Boolean(defaultValue.version)}
+          isTestButtonDisabled={isTestingPipeline || form.isValid === false}
+          onTestPipelineClick={handleTestPipelineClick}
+          hasOnFailure={Boolean(defaultValue.on_failure)}
+          isEditing={isEditing}
+        />
+
+        {/* Form submission */}
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiButton
+                  fill
+                  color="secondary"
+                  iconType="check"
+                  onClick={form.submit}
+                  data-test-subj="submitButton"
+                  disabled={form.isSubmitted && form.isValid === false}
+                  isLoading={isSaving}
+                >
+                  {saveButtonLabel}
+                </EuiButton>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiButtonEmpty color="primary" onClick={onCancel}>
                   <FormattedMessage
-                    id="xpack.ingestPipelines.form.savePipelineError"
-                    defaultMessage="Unable to create pipeline"
+                    id="xpack.ingestPipelines.form.cancelButtonLabel"
+                    defaultMessage="Cancel"
                   />
-                }
-                error={saveError}
-                data-test-subj="savePipelineError"
-              />
-              <EuiSpacer size="m" />
-            </>
-          ) : null}
-
-          {/* All form fields */}
-          <PipelineFormFields
-            hasVersion={Boolean(defaultValue.version)}
-            isTestButtonDisabled={isTestingPipeline || form.isValid === false}
-            onTestClick={() => setIsTestingPipeline(true)}
-            hasOnFailure={Boolean(defaultValue.on_failure)}
-            isEditing={isEditing}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              onClick={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
+            >
+              {isRequestVisible ? (
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.hideRequestButtonLabel"
+                  defaultMessage="Hide request"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.showRequestButtonLabel"
+                  defaultMessage="Show request"
+                />
+              )}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        {/* ES request flyout */}
+        {isRequestVisible ? (
+          <PipelineRequestFlyout
+            closeFlyout={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
           />
+        ) : null}
+
+        {/* Test pipeline flyout */}
+        {isTestingPipeline ? (
+          <PipelineTestFlyout
+            shouldExecuteImmediately={shouldExecuteImmediately}
+            closeFlyout={() => {
+              setIsTestingPipeline(prevIsTestingPipeline => !prevIsTestingPipeline);
+            }}
+          />
+        ) : null}
+      </Form>
 
-          {/* Form submission */}
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <EuiButton
-                    fill
-                    color="secondary"
-                    iconType="check"
-                    onClick={form.submit}
-                    data-test-subj="submitButton"
-                    disabled={form.isSubmitted && form.isValid === false}
-                    isLoading={isSaving}
-                  >
-                    {saveButtonLabel}
-                  </EuiButton>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiButtonEmpty color="primary" onClick={onCancel}>
-                    <FormattedMessage
-                      id="xpack.ingestPipelines.form.cancelButtonLabel"
-                      defaultMessage="Cancel"
-                    />
-                  </EuiButtonEmpty>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                onClick={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
-              >
-                {isRequestVisible ? (
-                  <FormattedMessage
-                    id="xpack.ingestPipelines.form.hideRequestButtonLabel"
-                    defaultMessage="Hide request"
-                  />
-                ) : (
-                  <FormattedMessage
-                    id="xpack.ingestPipelines.form.showRequestButtonLabel"
-                    defaultMessage="Show request"
-                  />
-                )}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-
-          {/* ES request flyout */}
-          {isRequestVisible ? (
-            <PipelineRequestFlyout
-              closeFlyout={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
-            />
-          ) : null}
-
-          {/* Test pipeline flyout */}
-          {isTestingPipeline ? (
-            <PipelineTestFlyout
-              closeFlyout={() => {
-                setIsTestingPipeline(prevIsTestingPipeline => !prevIsTestingPipeline);
-              }}
-            />
-          ) : null}
-        </Form>
-
-        <EuiSpacer size="m" />
-      </TestConfigContextProvider>
+      <EuiSpacer size="m" />
     </>
   );
 };
diff --git a/...gins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_error.tsx b/...gins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_error.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiSpacer, EuiCallOut } from '@elastic/eui';
+
+interface Props {
+  errorMessage: string;
+}
+
+export const PipelineFormError: React.FunctionComponent<Props> = ({ errorMessage }) => {
+  return (
+    <>
+      <EuiCallOut
+        title={
+          <FormattedMessage
+            id="xpack.ingestPipelines.form.savePipelineError"
+            defaultMessage="Unable to create pipeline"
+          />
+        }
+        color="danger"
+        iconType="alert"
+        data-test-subj="savePipelineError"
+      >
+        <p>{errorMessage}</p>
+      </EuiCallOut>
+      <EuiSpacer size="m" />
+    </>
+  );
+};
diff --git a/...ins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx b/...ins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_fields.tsx
@@ -21,7 +21,7 @@ interface Props {
   hasVersion: boolean;
   hasOnFailure: boolean;
   isTestButtonDisabled: boolean;
-  onTestClick: () => void;
+  onTestPipelineClick: () => void;
   isEditing?: boolean;
 }
 
@@ -33,7 +33,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
   hasVersion,
   hasOnFailure,
   isTestButtonDisabled,
-  onTestClick,
+  onTestPipelineClick,
 }) => {
   const { services } = useKibana();
 
@@ -136,7 +136,7 @@ export const PipelineFormFields: React.FunctionComponent<Props> = ({
 
             <EuiSpacer />
 
-            <EuiButton size="s" onClick={onTestClick} disabled={isTestButtonDisabled}>
+            <EuiButton size="s" onClick={onTestPipelineClick} disabled={isTestButtonDisabled}>
               <FormattedMessage
                 id="xpack.ingestPipelines.form.testPipelineButtonLabel"
                 defaultMessage="Test pipeline"

diff --git a/...s/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_provider.tsx b/...s/ingest_pipelines/public/application/components/pipeline_form/pipeline_form_provider.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { PipelineForm, PipelineFormProps } from './pipeline_form';
+import { TestConfigContextProvider, useTestConfig } from './test_config_context';
+
+export const PipelineFormProvider: React.FunctionComponent<PipelineFormProps> = passThroughProps => {
+  const testConfigContextValue = useTestConfig();
+
+  return (
+    <TestConfigContextProvider value={testConfigContextValue}>
+      <PipelineForm {...passThroughProps} />
+    </TestConfigContextProvider>
+  );
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,6 +6,4 @@

		export { PipelineForm } from './pipeline_form';

		export { SectionError } from './section_error';

		export { PipelineRequestFlyoutProvider as PipelineRequestFlyout } from './pipeline_request_flyout_provider';