[Ingest pipelines] Implement tabs in processor flyout (#74469)

elastic · Aug 11, 2020 · 733de00 · 733de00
1 parent 59dd3a5
commit 733de00
Show file tree

Hide file tree

Showing 20 changed files with 159 additions and 98 deletions.
diff --git a/...cation/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx b/...cation/components/pipeline_processors_editor/__jest__/pipeline_processors_editor.test.tsx
@@ -186,7 +186,7 @@ describe('Pipeline Editor', () => {
 
     it('prevents moving a processor while in edit mode', () => {
       const { find, exists } = testBed;
-      find('processors>0.editItemButton').simulate('click');
+      find('processors>0.manageItemButton').simulate('click');
       expect(exists('processorSettingsForm')).toBe(true);
       expect(find('processors>0.moveItemButton').props().disabled).toBe(true);
       expect(find('processors>1.moveItemButton').props().disabled).toBe(true);

diff --git a/...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts b/...st_pipelines/public/application/components/pipeline_processors_editor/components/index.ts
@@ -5,10 +5,10 @@
  */
 
 export {
-  ProcessorSettingsForm,
-  ProcessorSettingsFromOnSubmitArg,
+  ManageProcessorForm,
+  ManageProcessorFormOnSubmitArg,
   OnSubmitHandler,
-} from './processor_settings_form';
+} from './manage_processor_form';
 
 export { ProcessorsTree, ProcessorInfo, OnActionHandler } from './processors_tree';
 

diff --git a/...or_settings_form/documentation_button.tsx → ...e_processor_form/documentation_button.tsx b/...or_settings_form/documentation_button.tsx → ...e_processor_form/documentation_button.tsx
diff --git a/...r_settings_form/field_components/index.ts → ..._processor_form/field_components/index.ts b/...r_settings_form/field_components/index.ts → ..._processor_form/field_components/index.ts
diff --git a/...gs_form/field_components/xjson_editor.tsx → ...or_form/field_components/xjson_editor.tsx b/...gs_form/field_components/xjson_editor.tsx → ...or_form/field_components/xjson_editor.tsx
diff --git a/...mponents/processor_settings_form/index.ts → ...components/manage_processor_form/index.ts b/...mponents/processor_settings_form/index.ts → ...components/manage_processor_form/index.ts
@@ -5,7 +5,7 @@
  */
 
 export {
-  ProcessorSettingsForm,
-  ProcessorSettingsFromOnSubmitArg,
+  ManageProcessorForm,
+  ManageProcessorFormOnSubmitArg,
   OnSubmitHandler,
-} from './processor_settings_form.container';
+} from './manage_processor_form.container';
diff --git a/...orm/processor_settings_form.container.tsx → ..._form/manage_processor_form.container.tsx b/...orm/processor_settings_form.container.tsx → ..._form/manage_processor_form.container.tsx
@@ -9,12 +9,12 @@ import React, { FunctionComponent, useCallback, useEffect } from 'react';
 import { useForm, OnFormUpdateArg, FormData } from '../../../../../shared_imports';
 import { ProcessorInternal } from '../../types';
 
-import { ProcessorSettingsForm as ViewComponent } from './processor_settings_form';
+import { ManageProcessorForm as ViewComponent } from './manage_processor_form';
 import { usePipelineProcessorsContext } from '../../context';
 
-export type ProcessorSettingsFromOnSubmitArg = Omit<ProcessorInternal, 'id'>;
+export type ManageProcessorFormOnSubmitArg = Omit<ProcessorInternal, 'id'>;
 
-export type OnSubmitHandler = (processor: ProcessorSettingsFromOnSubmitArg) => void;
+export type OnSubmitHandler = (processor: ManageProcessorFormOnSubmitArg) => void;
 
 export type OnFormUpdateHandler = (form: OnFormUpdateArg<any>) => void;
 
@@ -27,7 +27,7 @@ interface Props {
   processor?: ProcessorInternal;
 }
 
-export const ProcessorSettingsForm: FunctionComponent<Props> = ({
+export const ManageProcessorForm: FunctionComponent<Props> = ({
   processor,
   onFormUpdate,
   onSubmit,

diff --git a/...settings_form/processor_settings_form.tsx → ..._processor_form/manage_processor_form.tsx b/...settings_form/processor_settings_form.tsx → ..._processor_form/manage_processor_form.tsx
@@ -6,28 +6,28 @@
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { FunctionComponent, memo, useEffect } from 'react';
+import React, { FunctionComponent, memo, useEffect, useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiHorizontalRule,
   EuiFlyout,
   EuiFlyoutHeader,
   EuiFlyoutBody,
   EuiFlyoutFooter,
+  EuiSpacer,
+  EuiTabs,
+  EuiTab,
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
 
 import { Form, FormDataProvider, FormHook } from '../../../../../shared_imports';
 import { ProcessorInternal } from '../../types';
-
 import { getProcessorDescriptor } from '../shared';
 
+import { ProcessorSettingsFields } from './processor_settings_fields';
 import { DocumentationButton } from './documentation_button';
-import { CommonProcessorFields, ProcessorTypeField } from './processors/common_fields';
-import { Custom } from './processors/custom';
 
 export interface Props {
   isOnFailure: boolean;
@@ -42,6 +42,7 @@ const updateButtonLabel = i18n.translate(
   'xpack.ingestPipelines.settingsFormOnFailureFlyout.updateButtonLabel',
   { defaultMessage: 'Update' }
 );
+
 const addButtonLabel = i18n.translate(
   'xpack.ingestPipelines.settingsFormOnFailureFlyout.addButtonLabel',
   { defaultMessage: 'Add' }
@@ -52,27 +53,66 @@ const cancelButtonLabel = i18n.translate(
   { defaultMessage: 'Cancel' }
 );
 
-export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
-  ({ processor, form, isOnFailure, onClose, onOpen, esDocsBasePath }) => {
-    const flyoutTitleContent = isOnFailure ? (
+export type TabType = 'configuration';
+
+interface Tab {
+  id: TabType;
+  name: string;
+}
+
+const tabs: Tab[] = [
+  {
+    id: 'configuration',
+    name: i18n.translate(
+      'xpack.ingestPipelines.settingsFormOnFailureFlyout.configurationTabTitle',
+      {
+        defaultMessage: 'Configuration',
+      }
+    ),
+  },
+];
+
+const getFlyoutTitle = (isOnFailure: boolean, isExistingProcessor: boolean) => {
+  if (isExistingProcessor) {
+    return isOnFailure ? (
       <FormattedMessage
-        id="xpack.ingestPipelines.settingsFormOnFailureFlyout.title"
-        defaultMessage="Configure on-failure processor"
+        id="xpack.ingestPipelines.settingsFormOnFailureFlyout.manageOnFailureTitle"
+        defaultMessage="Manage on-failure processor"
       />
     ) : (
       <FormattedMessage
-        id="xpack.ingestPipelines.settingsFormFlyout.title"
-        defaultMessage="Configure processor"
+        id="xpack.ingestPipelines.settingsFormOnFailureFlyout.manageTitle"
+        defaultMessage="Manage processor"
       />
     );
+  }
 
+  return isOnFailure ? (
+    <FormattedMessage
+      id="xpack.ingestPipelines.settingsFormOnFailureFlyout.configureOnFailureTitle"
+      defaultMessage="Configure on-failure processor"
+    />
+  ) : (
+    <FormattedMessage
+      id="xpack.ingestPipelines.settingsFormOnFailureFlyout.configureTitle"
+      defaultMessage="Configure processor"
+    />
+  );
+};
+
+export const ManageProcessorForm: FunctionComponent<Props> = memo(
+  ({ processor, form, isOnFailure, onClose, onOpen, esDocsBasePath }) => {
     useEffect(
       () => {
         onOpen();
       },
       [] /* eslint-disable-line react-hooks/exhaustive-deps */
     );
 
+    const [activeTab, setActiveTab] = useState<TabType>('configuration');
+
+    const flyoutContent = <ProcessorSettingsFields processor={processor} />;
+
     return (
       <Form data-test-subj="processorSettingsForm" form={form}>
         <EuiFlyout size="m" maxWidth={720} onClose={onClose}>
@@ -81,11 +121,10 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
               <EuiFlexItem>
                 <div>
                   <EuiTitle size="m">
-                    <h2>{flyoutTitleContent}</h2>
+                    <h2>{getFlyoutTitle(isOnFailure, Boolean(processor))}</h2>
                   </EuiTitle>
                 </div>
               </EuiFlexItem>
-
               <EuiFlexItem grow={false}>
                 <FormDataProvider pathsToWatch="type">
                   {({ type }) => {
@@ -106,46 +145,35 @@ export const ProcessorSettingsForm: FunctionComponent<Props> = memo(
             </EuiFlexGroup>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
-            <ProcessorTypeField initialType={processor?.type} />
-
-            <EuiHorizontalRule />
-
-            <FormDataProvider pathsToWatch="type">
-              {(arg: any) => {
-                const { type } = arg;
-
-                if (type?.length) {
-                  const formDescriptor = getProcessorDescriptor(type as any);
-
-                  if (formDescriptor?.FieldsComponent) {
-                    return (
-                      <>
-                        <formDescriptor.FieldsComponent />
-                        <CommonProcessorFields />
-                      </>
-                    );
-                  }
-                  return <Custom defaultOptions={processor?.options} />;
-                }
-
-                // If the user has not yet defined a type, we do not show any settings fields
-                return null;
-              }}
-            </FormDataProvider>
+            {processor ? (
+              <>
+                <EuiTabs>
+                  {tabs.map((tab) => (
+                    <EuiTab
+                      onClick={() => {
+                        setActiveTab(tab.id);
+                      }}
+                      isSelected={tab.id === activeTab}
+                      key={tab.id}
+                      data-test-subj={`${tab.id}Tab`}
+                    >
+                      {tab.name}
+                    </EuiTab>
+                  ))}
+                </EuiTabs>
+                <EuiSpacer />
+              </>
+            ) : undefined}
+
+            {flyoutContent}
           </EuiFlyoutBody>
           <EuiFlyoutFooter>
             <EuiFlexGroup justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
                 <EuiButtonEmpty onClick={onClose}>{cancelButtonLabel}</EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton
-                  fill
-                  data-test-subj="submitButton"
-                  onClick={() => {
-                    form.submit();
-                  }}
-                >
+                <EuiButton fill data-test-subj="submitButton" onClick={form.submit}>
                   {processor ? updateButtonLabel : addButtonLabel}
                 </EuiButton>
               </EuiFlexItem>

diff --git a/...pipeline_processors_editor/components/manage_processor_form/processor_settings_fields.tsx b/...pipeline_processors_editor/components/manage_processor_form/processor_settings_fields.tsx
@@ -0,0 +1,52 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { EuiHorizontalRule } from '@elastic/eui';
+
+import { FormDataProvider } from '../../../../../shared_imports';
+import { ProcessorInternal } from '../../types';
+
+import { getProcessorDescriptor } from '../shared';
+import { CommonProcessorFields, ProcessorTypeField } from './processors/common_fields';
+import { Custom } from './processors/custom';
+
+export interface Props {
+  processor?: ProcessorInternal;
+}
+
+export const ProcessorSettingsFields: FunctionComponent<Props> = ({ processor }) => {
+  return (
+    <>
+      <ProcessorTypeField initialType={processor?.type} />
+
+      <EuiHorizontalRule />
+
+      <FormDataProvider pathsToWatch="type">
+        {(arg: any) => {
+          const { type } = arg;
+
+          if (type?.length) {
+            const formDescriptor = getProcessorDescriptor(type as any);
+
+            if (formDescriptor?.FieldsComponent) {
+              return (
+                <>
+                  <formDescriptor.FieldsComponent />
+                  <CommonProcessorFields />
+                </>
+              );
+            }
+            return <Custom defaultOptions={processor?.options} />;
+          }
+
+          // If the user has not yet defined a type, we do not show any settings fields
+          return null;
+        }}
+      </FormDataProvider>
+    </>
+  );
+};
diff --git a/...common_fields/common_processor_fields.tsx → ...common_fields/common_processor_fields.tsx b/...common_fields/common_processor_fields.tsx → ...common_fields/common_processor_fields.tsx
diff --git a/...gs_form/processors/common_fields/index.ts → ...or_form/processors/common_fields/index.ts b/...gs_form/processors/common_fields/index.ts → ...or_form/processors/common_fields/index.ts
diff --git a/...rs/common_fields/processor_type_field.tsx → ...rs/common_fields/processor_type_field.tsx b/...rs/common_fields/processor_type_field.tsx → ...rs/common_fields/processor_type_field.tsx
diff --git a/...essor_settings_form/processors/custom.tsx → ...nage_processor_form/processors/custom.tsx b/...essor_settings_form/processors/custom.tsx → ...nage_processor_form/processors/custom.tsx
diff --git a/...ocessor_settings_form/processors/gsub.tsx → ...manage_processor_form/processors/gsub.tsx b/...ocessor_settings_form/processors/gsub.tsx → ...manage_processor_form/processors/gsub.tsx
diff --git a/...rocessor_settings_form/processors/set.tsx → .../manage_processor_form/processors/set.tsx b/...rocessor_settings_form/processors/set.tsx → .../manage_processor_form/processors/set.tsx
diff --git a/...ors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx b/...ors_editor/components/pipeline_processors_editor_item/pipeline_processors_editor_item.tsx
@@ -7,10 +7,10 @@
 import classNames from 'classnames';
 import React, { FunctionComponent, memo } from 'react';
 import {
-  EuiButtonIcon,
   EuiButtonToggle,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiLink,
   EuiPanel,
   EuiText,
   EuiToolTip,
@@ -57,9 +57,9 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
     const isInMoveMode = Boolean(movingProcessor);
     const isMovingThisProcessor = processor.id === movingProcessor?.id;
     const isEditingThisProcessor =
-      editor.mode.id === 'editingProcessor' && processor.id === editor.mode.arg.processor.id;
+      editor.mode.id === 'managingProcessor' && processor.id === editor.mode.arg.processor.id;
     const isEditingOtherProcessor =
-      editor.mode.id === 'editingProcessor' && !isEditingThisProcessor;
+      editor.mode.id === 'managingProcessor' && !isEditingThisProcessor;
     const isMovingOtherProcessor = editor.mode.id === 'movingProcessor' && !isMovingThisProcessor;
     const isDimmed = isEditingOtherProcessor || isMovingOtherProcessor;
 
@@ -70,11 +70,6 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
       'pipelineProcessorsEditor__item--dimmed': isDimmed,
     });
 
-    const actionElementClasses = classNames({
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'pipelineProcessorsEditor__item--displayNone': isInMoveMode,
-    });
-
     const inlineTextInputContainerClasses = classNames({
       // eslint-disable-next-line @typescript-eslint/naming-convention
       'pipelineProcessorsEditor__item--displayNone': isInMoveMode && !processor.options.description,
@@ -141,7 +136,18 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
                   className="pipelineProcessorsEditor__item__processorTypeLabel"
                   color={isDimmed ? 'subdued' : undefined}
                 >
-                  <b>{getProcessorDescriptor(processor.type)?.label ?? processor.type}</b>
+                  <EuiLink
+                    disabled={isEditorNotInIdleMode}
+                    onClick={() => {
+                      editor.setMode({
+                        id: 'managingProcessor',
+                        arg: { processor, selector },
+                      });
+                    }}
+                    data-test-subj="manageItemButton"
+                  >
+                    <b>{getProcessorDescriptor(processor.type)?.label ?? processor.type}</b>
+                  </EuiLink>
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem className={inlineTextInputContainerClasses} grow={false}>
@@ -174,25 +180,6 @@ export const PipelineProcessorsEditorItem: FunctionComponent<Props> = memo(
                   placeholder={i18nTexts.descriptionPlaceholder}
                 />
               </EuiFlexItem>
-              <EuiFlexItem className={actionElementClasses} grow={false}>
-                {!isInMoveMode && (
-                  <EuiToolTip content={i18nTexts.editButtonLabel}>
-                    <EuiButtonIcon
-                      data-test-subj="editItemButton"
-                      disabled={isEditorNotInIdleMode}
-                      aria-label={i18nTexts.editButtonLabel}
-                      iconType="pencil"
-                      size="s"
-                      onClick={() => {
-                        editor.setMode({
-                          id: 'editingProcessor',
-                          arg: { processor, selector },
-                        });
-                      }}
-                    />
-                  </EuiToolTip>
-                )}
-              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>