add request flyout

elastic · Apr 14, 2020 · 9bc4132 · 9bc4132
1 parent 35058b1
commit 9bc4132
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 33 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
@@ -7,3 +7,5 @@
 export { PipelineForm } from './pipeline_form';
 
 export { SectionError } from './section_error';
+
+export { PipelineRequestFlyout } from './pipeline_request_flyout';
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
@@ -6,7 +6,15 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSwitch, EuiLink } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiSwitch,
+  EuiLink,
+} from '@elastic/eui';
 
 import {
   useForm,
@@ -20,7 +28,7 @@ import {
 } from '../../../shared_imports';
 import { Pipeline } from '../../../../common/types';
 
-import { SectionError } from '../section_error';
+import { SectionError, PipelineRequestFlyout } from '../';
 import { pipelineFormSchema } from './schema';
 
 interface Props {
@@ -53,6 +61,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
   const [isOnFailureEditorVisible, setIsOnFailureEditorVisible] = useState<boolean>(
     Boolean(defaultValue.on_failure)
   );
+  const [isRequestVisible, setIsRequestVisible] = useState<boolean>(false);
 
   const handleSave: FormConfig['onSubmit'] = (formData, isValid) => {
     if (isValid) {
@@ -66,6 +75,18 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
     onSubmit: handleSave,
   });
 
+  const saveButtonLabel = isEditing ? (
+    <FormattedMessage
+      id="xpack.ingestPipelines.form.saveButtonLabel"
+      defaultMessage="Save pipeline"
+    />
+  ) : (
+    <FormattedMessage
+      id="xpack.ingestPipelines.form.createButtonLabel"
+      defaultMessage="Create pipeline"
+    />
+  );
+
   return (
     <>
       {saveError ? (
@@ -269,38 +290,49 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
         {/* Form submission */}
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  fill
-                  color="secondary"
-                  iconType="check"
-                  onClick={form.submit}
-                  data-test-subj="submitButton"
-                  disabled={form.isSubmitted && form.isValid === false}
-                  isLoading={isSaving}
-                >
-                  {isSaving ? (
-                    <FormattedMessage
-                      id="xpack.ingestPipelines.form.savingButtonLabel"
-                      defaultMessage="Saving..."
-                    />
-                  ) : isEditing ? (
-                    <FormattedMessage
-                      id="xpack.ingestPipelines.form.saveButtonLabel"
-                      defaultMessage="Save pipeline"
-                    />
-                  ) : (
-                    <FormattedMessage
-                      id="xpack.ingestPipelines.form.createButtonLabel"
-                      defaultMessage="Create pipeline"
-                    />
-                  )}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+            <EuiButton
+              fill
+              color="secondary"
+              iconType="check"
+              onClick={form.submit}
+              data-test-subj="submitButton"
+              disabled={form.isSubmitted && form.isValid === false}
+              isLoading={isSaving}
+            >
+              {isSaving ? (
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.savingButtonLabel"
+                  defaultMessage="Saving..."
+                />
+              ) : (
+                saveButtonLabel
+              )}
+            </EuiButton>
+          </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>
+        {isRequestVisible ? (
+          <PipelineRequestFlyout
+            pipeline={form.getFormData() as Pipeline}
+            closeFlyout={() => setIsRequestVisible(prevIsRequestVisible => !prevIsRequestVisible)}
+          />
+        ) : null}
       </Form>
 
       <EuiSpacer size="m" />

diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_request_flyout.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_request_flyout.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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 {
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { Pipeline } from '../../../common/types';
+
+interface Props {
+  pipeline: Pipeline;
+  closeFlyout: () => void;
+}
+
+export const PipelineRequestFlyout: React.FunctionComponent<Props> = ({
+  closeFlyout,
+  pipeline,
+}) => {
+  const { name, ...pipelineBody } = pipeline;
+  const endpoint = `PUT _ingest/pipeline/${name || '<pipelineName>'}`;
+  const payload = JSON.stringify(pipelineBody, null, 2);
+  const request = `${endpoint}\n${payload}`;
+
+  return (
+    <EuiFlyout maxWidth={480} onClose={closeFlyout}>
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2>
+            {name ? (
+              <FormattedMessage
+                id="xpack.ingestPipelines.requestFlyout.namedTitle"
+                defaultMessage="Request for '{name}'"
+                values={{ name }}
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.ingestPipelines.requestFlyout.unnamedTitle"
+                defaultMessage="Request"
+              />
+            )}
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+
+      <EuiFlyoutBody>
+        <EuiText>
+          <p>
+            <FormattedMessage
+              id="xpack.ingestPipelines.requestFlyout.descriptionText"
+              defaultMessage="This Elasticsearch request will create or update this pipeline."
+            />
+          </p>
+        </EuiText>
+
+        <EuiSpacer />
+
+        <EuiCodeBlock language="json" isCopyable>
+          {request}
+        </EuiCodeBlock>
+      </EuiFlyoutBody>
+
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+          <FormattedMessage
+            id="xpack.ingestPipelines.requestFlyout.closeButtonLabel"
+            defaultMessage="Close"
+          />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};
diff --git a/...ck/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx b/...ck/plugins/ingest_pipelines/public/application/sections/pipelines_edit/pipelines_edit.tsx
@@ -75,7 +75,7 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
         title={
           <FormattedMessage
             id="xpack.ingestPipelines.edit.fetchPipelineError"
-            defaultMessage="Error loading pipelime"
+            defaultMessage="Error loading pipeline"
           />
         }
         error={error}