[Ingest Pipelines] Add new two columns detail layout to pipeline deta…

…ils page (#181003)

x-pack/plugins/ingest_pipelines/__jest__/client_integration/helpers/pipeline_form.helpers.ts

@@ -29,30 +29,27 @@ export const getFormActions = (testBed: TestBed) => {
     component.update();
   };
 
-  const toggleVersionSwitch = () => {
-    act(() => {
-      form.toggleEuiSwitch('versionToggle');
+  const toggleSwitch = async (testSubject: string) => {
+    await act(async () => {
+      form.toggleEuiSwitch(testSubject);
     });
 
     component.update();
   };
 
-  const toggleMetaSwitch = () => {
-    act(() => {
-      form.toggleEuiSwitch('metaToggle');
-    });
-  };
+  const getToggleValue = (testSubject: string): boolean =>
+    find(testSubject).props()['aria-checked'];
 
   const setMetaField = (value: object) => {
     find('metaEditor').getDOMNode().setAttribute('data-currentvalue', JSON.stringify(value));
     find('metaEditor').simulate('change');
   };
 
   return {
+    getToggleValue,
     clickSubmitButton,
     clickShowRequestLink,
-    toggleVersionSwitch,
-    toggleMetaSwitch,
+    toggleSwitch,
     setMetaField,
   };
 };

x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx

@@ -62,25 +62,21 @@ describe('<PipelinesCreate />', () => {
     test('should toggle the version field', async () => {
       const { actions, exists } = testBed;
 
-      // Version field should be hidden by default
-      expect(exists('versionField')).toBe(false);
+      // Version field toggle should be disabled by default
+      expect(actions.getToggleValue('versionToggle')).toBe(false);
 
-      actions.toggleVersionSwitch();
+      await actions.toggleSwitch('versionToggle');
 
       expect(exists('versionField')).toBe(true);
     });
 
     test('should toggle the _meta field', async () => {
-      const { exists, component, actions } = testBed;
+      const { exists, actions } = testBed;
 
-      // Meta editor should be hidden by default
-      expect(exists('metaEditor')).toBe(false);
+      // Meta field toggle should be disabled by default
+      expect(actions.getToggleValue('metaToggle')).toBe(false);
 
-      await act(async () => {
-        actions.toggleMetaSwitch();
-      });
-
-      component.update();
+      await actions.toggleSwitch('metaToggle');
 
       expect(exists('metaEditor')).toBe(true);
     });
@@ -149,12 +145,10 @@ describe('<PipelinesCreate />', () => {
       });
 
       test('should send the correct payload', async () => {
-        const { component, actions } = testBed;
+        const { actions } = testBed;
+
+        await actions.toggleSwitch('metaToggle');
 
-        await act(async () => {
-          actions.toggleMetaSwitch();
-        });
-        component.update();
         const metaData = {
           field1: 'hello',
           field2: 10,

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/bulk_request_panel.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiSpacer,
+  EuiPanel,
+  EuiCodeBlock,
+  EuiText,
+  EuiSwitch,
+  EuiSwitchEvent,
+} from '@elastic/eui';
+
+const bulkRequestExample = `PUT books/_bulk?pipeline=my-pipeline
+{ "create":{ } }
+{ "name": "Snow Crash", "author": "Neal Stephenson" }
+{ "create":{ } }
+{ "name": "Revelation Space", "author": "Alastair Reynolds" }
+`;
+
+const singleRequestExample = `POST books/_doc?pipeline=my-pipeline-name
+{
+  "name": "Snow Crash",
+  "author": "Neal Stephenson"
+}
+`;
+
+export const BulkRequestPanel = () => {
+  const [showBulkToggle, setShowBulkToggle] = useState(true);
+
+  return (
+    <EuiPanel hasShadow={false} hasBorder grow={false}>
+      <EuiText size="s">
+        <strong>
+          <FormattedMessage
+            id="xpack.ingestPipelines.form.bulkCardTitle"
+            defaultMessage="How to use this pipeline during data ingestion"
+          />
+        </strong>
+      </EuiText>
+
+      <EuiSpacer size="m" />
+
+      <EuiSwitch
+        compressed
+        label={
+          <FormattedMessage
+            id="xpack.ingestPipelines.form.bulkRequestToggle"
+            defaultMessage="Bulk request"
+          />
+        }
+        checked={showBulkToggle}
+        onChange={(e: EuiSwitchEvent) => setShowBulkToggle(e.target.checked)}
+      />
+
+      <EuiSpacer size="m" />
+
+      <EuiCodeBlock language="json" overflowHeight={250} isCopyable>
+        {showBulkToggle ? bulkRequestExample : singleRequestExample}
+      </EuiCodeBlock>
+    </EuiPanel>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/collapsible_panel.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useEffect, ReactNode } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import {
+  EuiSpacer,
+  EuiSwitch,
+  EuiPanel,
+  EuiAccordion,
+  EuiAccordionProps,
+  useGeneratedHtmlId,
+  EuiSwitchEvent,
+  EuiSwitchProps,
+} from '@elastic/eui';
+import { useFormContext, useFormData } from '../../../shared_imports';
+
+export interface CollapsiblePanelRenderProps {
+  isEnabled: boolean;
+}
+
+interface Props {
+  title: ReactNode | string;
+  fieldName: string;
+  initialToggleState: boolean;
+  toggleProps?: Partial<EuiSwitchProps>;
+  accordionProps?: Partial<EuiAccordionProps>;
+  children: (options: CollapsiblePanelRenderProps) => ReactNode;
+}
+
+type AccordionStatus = 'open' | 'closed';
+
+export const CollapsiblePanel: React.FunctionComponent<Props> = ({
+  title,
+  children,
+  fieldName,
+  toggleProps,
+  accordionProps,
+  initialToggleState,
+}) => {
+  const form = useFormContext();
+  const [formData] = useFormData({ form });
+
+  const accordionId = useGeneratedHtmlId({ prefix: 'collapsiblerPanel' });
+  const [isEnabled, setIsEnabled] = useState<boolean>(initialToggleState);
+  const [trigger, setTrigger] = useState<AccordionStatus>(isEnabled ? 'open' : 'closed');
+
+  // We need to keep track of the initial field value for when the user
+  // disable the enabled toggle (set field value to null) and then re-enable it.
+  // In this scenario we want to show the initial value of the form.
+  const [initialValue, setInitialValue] = useState();
+  useEffect(() => {
+    if (initialValue === undefined && formData[fieldName]) {
+      setInitialValue(formData[fieldName]);
+    }
+  }, [formData, initialValue, fieldName]);
+
+  const onToggleChange = (e: EuiSwitchEvent) => {
+    const isChecked = !!e.target.checked;
+
+    setIsEnabled(isChecked);
+    setTrigger(isChecked ? 'open' : 'closed');
+
+    if (isChecked) {
+      form.setFieldValue(fieldName, initialValue || '');
+    } else {
+      form.setFieldValue(fieldName, '');
+    }
+  };
+
+  const onAccordionToggle = (isOpen: boolean) => {
+    const newState = isOpen ? 'open' : 'closed';
+    setTrigger(newState);
+  };
+
+  return (
+    <EuiPanel hasShadow={false} hasBorder grow={false}>
+      <EuiAccordion
+        {...accordionProps}
+        id={accordionId}
+        onToggle={onAccordionToggle}
+        forceState={trigger}
+        buttonContent={title}
+        extraAction={
+          <EuiSwitch
+            {...toggleProps}
+            label={
+              <FormattedMessage
+                id="xpack.ingestPipelines.collapsiblePanelToggle"
+                defaultMessage="Enabled"
+              />
+            }
+            checked={isEnabled}
+            onChange={onToggleChange}
+          />
+        }
+      >
+        <EuiSpacer size="l" />
+        {children({ isEnabled })}
+      </EuiAccordion>
+    </EuiPanel>
+  );
+};

x-pack/plugins/ingest_pipelines/public/application/components/pipeline_form/pipeline_form.tsx

@@ -137,6 +137,8 @@ export const PipelineForm: React.FunctionComponent<PipelineFormProps> = ({
           canEditName={canEditName}
         />
 
+        <EuiSpacer size="xl" />
+
         {/* Form submission */}
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem>