address feedback

elastic · Apr 15, 2020 · 8df3d83 · 8df3d83
1 parent fa8cb9a
commit 8df3d83
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 28 deletions.
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
@@ -33,6 +33,7 @@ import { pipelineFormSchema } from './schema';
 
 interface Props {
   onSave: (pipeline: Pipeline) => void;
+  onCancel: () => void;
   isSaving: boolean;
   saveError: any;
   defaultValue?: Pipeline;
@@ -54,6 +55,7 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
   isSaving,
   saveError,
   isEditing,
+  onCancel,
 }) => {
   const { services } = useKibana();
 
@@ -94,22 +96,6 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
 
   return (
     <>
-      {saveError ? (
-        <>
-          <SectionError
-            title={
-              <FormattedMessage
-                id="xpack.ingestPipelines.form.savePipelineError"
-                defaultMessage="Unable to create pipeline"
-              />
-            }
-            error={saveError}
-            data-test-subj="savePipelineError"
-          />
-          <EuiSpacer size="m" />
-        </>
-      ) : null}
-
       <Form
         form={form}
         data-test-subj="pipelineForm"
@@ -292,20 +278,49 @@ export const PipelineForm: React.FunctionComponent<Props> = ({
 
         <EuiSpacer size="l" />
 
+        {/* Request error */}
+        {saveError ? (
+          <>
+            <SectionError
+              title={
+                <FormattedMessage
+                  id="xpack.ingestPipelines.form.savePipelineError"
+                  defaultMessage="Unable to create pipeline"
+                />
+              }
+              error={saveError}
+              data-test-subj="savePipelineError"
+            />
+            <EuiSpacer size="m" />
+          </>
+        ) : null}
+
         {/* Form submission */}
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              color="secondary"
-              iconType="check"
-              onClick={form.submit}
-              data-test-subj="submitButton"
-              disabled={form.isSubmitted && form.isValid === false}
-              isLoading={isSaving}
-            >
-              {saveButtonLabel}
-            </EuiButton>
+            <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

diff --git a/...lugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx b/...lugins/ingest_pipelines/public/application/sections/pipelines_create/pipelines_create.tsx
@@ -43,6 +43,10 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps> = ({
     history.push(BASE_PATH);
   };
 
+  const onCancel = () => {
+    history.push(BASE_PATH);
+  };
+
   useEffect(() => {
     services.breadcrumbs.setBreadcrumbs('create');
   }, [services]);
@@ -82,7 +86,12 @@ export const PipelinesCreate: React.FunctionComponent<RouteComponentProps> = ({
 
         <EuiSpacer size="l" />
 
-        <PipelineForm onSave={onSave} isSaving={isSaving} saveError={saveError} />
+        <PipelineForm
+          onSave={onSave}
+          onCancel={onCancel}
+          isSaving={isSaving}
+          saveError={saveError}
+        />
       </EuiPageContent>
     </EuiPageBody>
   );

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
@@ -56,6 +56,10 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
     history.push(BASE_PATH);
   };
 
+  const onCancel = () => {
+    history.push(BASE_PATH);
+  };
+
   useEffect(() => {
     services.breadcrumbs.setBreadcrumbs('edit');
   }, [services.breadcrumbs]);
@@ -88,6 +92,7 @@ export const PipelinesEdit: React.FunctionComponent<RouteComponentProps<MatchPar
     content = (
       <PipelineForm
         onSave={onSave}
+        onCancel={onCancel}
         isSaving={isSaving}
         saveError={saveError}
         defaultValue={pipeline}