[Ingest Pipelines] Add structure tree to details flyout (elastic#228792)

Addresses elastic#227405



https://github.com/user-attachments/assets/1473ade0-19cb-4892-a64a-2ed4374e3879



## Summary

This PR adds the Ingest pipeline structure tree to the ingest pipelines
details flyout.

**How to test:**

1. Run the following requests in Console (you can run them all at once)
to create a sample ingest pipeline tree:

<details>
<summary>Console requests:</summary>

```
PUT _ingest/pipeline/level-8-1
{
  "processors": []
}

PUT _ingest/pipeline/level-8-2
{
  "processors": []
}

PUT _ingest/pipeline/level-7-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-8-1"
      }
    },
    {
      "pipeline": {
        "name": "level-8-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-7-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-8-1"
      }
    },
    {
      "pipeline": {
        "name": "level-8-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-6-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-7-1"
      }
    },
    {
      "pipeline": {
        "name": "level-7-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-6-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-7-1"
      }
    },
    {
      "pipeline": {
        "name": "level-7-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-5-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-6-1"
      }
    },
    {
      "pipeline": {
        "name": "level-6-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-5-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-6-1"
      }
    },
    {
      "pipeline": {
        "name": "level-6-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-4-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-5-1"
      }
    },
    {
      "pipeline": {
        "name": "level-5-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-4-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-5-1"
      }
    },
    {
      "pipeline": {
        "name": "level-5-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-3-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-4-1"
      }
    },
    {
      "pipeline": {
        "name": "level-4-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-3-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-4-1"
      }
    },
    {
      "pipeline": {
        "name": "level-4-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-2-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-3-1"
      }
    },
    {
      "pipeline": {
        "name": "level-3-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-2-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-3-1"
      }
    },
    {
      "pipeline": {
        "name": "level-3-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-2-1"
      }
    },
    {
      "pipeline": {
        "name": "level-2-2"
      }
    },
    {
      "pipeline": {
        "name": "non-existing"
      }
    }
  ]
}
```

</details>

2. Go to Ingest pipelines and click on any of the created pipelines.
Verify that the tree is working as expected. Verify that the footer
action buttons also work as expected (edit/clone/delete)
3. Verify that tree view is only displayed if the root has children.
4. Verify that navigating to a non-existing pipeline through the URL
opens the flyout with an error banner and without the tree.
5. Verify that when you open a non-exisisting pipeline by clicking on a
tree node, a warning banner is displayed.
6. Verify that in smaller screens only one panel is displayed at a time.
7. To test in Streams, enable streams with `POST
kbn:/api/streams/_enable` and create sample date with `node
scripts/synthtrace.js sample_logs --live
--kibana=http://elastic:changeme@localhost:5601
--target=http://elastic:changeme@localhost:9200 --liveBucketSize=1000`

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: ElenaStoeva

x-pack/platform/packages/shared/ingest-pipelines/src/components/pipeline_structure_tree/create_tree_nodes/create_tree_nodes.test.tsx

@@ -18,68 +18,78 @@ const renderTreeNode = (node: ReturnType<typeof createTreeNodesFromPipelines>) =
 
 describe('createTreeNodesFromPipelines', () => {
   it('renders a basic pipeline node label', () => {
-    const setSelectedPipeline = jest.fn();
+    const clickTreeNode = jest.fn();
+    const clickMorePipelines = jest.fn();
     const pipeline: PipelineTreeNode = {
       pipelineName: 'root-pipeline',
       isManaged: false,
       isDeprecated: false,
       children: [],
     };
 
-    const node = createTreeNodesFromPipelines(pipeline, '', setSelectedPipeline);
+    const node = createTreeNodesFromPipelines(pipeline, '', clickTreeNode, clickMorePipelines);
     const { getByTestId } = renderTreeNode(node);
 
     expect(getByTestId('pipelineTreeNode-root-pipeline')).toBeInTheDocument();
   });
 
   it('renders managed and deprecated icons', () => {
-    const setSelectedPipeline = jest.fn();
+    const clickTreeNode = jest.fn();
+    const clickMorePipelines = jest.fn();
     const pipeline: PipelineTreeNode = {
       pipelineName: 'managed-deprecated',
       isManaged: true,
       isDeprecated: true,
       children: [],
     };
 
-    const node = createTreeNodesFromPipelines(pipeline, '', setSelectedPipeline);
+    const node = createTreeNodesFromPipelines(pipeline, '', clickTreeNode, clickMorePipelines);
     const { getByTestId } = renderTreeNode(node);
 
     expect(getByTestId('pipelineTreeNode-managed-deprecated-managedIcon')).toBeInTheDocument();
     expect(getByTestId('pipelineTreeNode-managed-deprecated-deprecatedIcon')).toBeInTheDocument();
   });
 
-  it('calls setSelectedPipeline when node label is clicked', () => {
-    const setSelectedPipeline = jest.fn();
+  it('calls clickTreeNode when node label is clicked', () => {
+    const clickTreeNode = jest.fn();
+    const clickMorePipelines = jest.fn();
     const pipeline: PipelineTreeNode = {
       pipelineName: 'test-pipeline',
       isManaged: false,
       isDeprecated: false,
       children: [],
     };
 
-    const node = createTreeNodesFromPipelines(pipeline, '', setSelectedPipeline);
+    const node = createTreeNodesFromPipelines(pipeline, '', clickTreeNode, clickMorePipelines);
     const { getByTestId } = renderTreeNode(node);
 
-    fireEvent.click(getByTestId('pipelineTreeNodeLink-test-pipeline'));
-    expect(setSelectedPipeline).toHaveBeenCalledWith('test-pipeline');
+    fireEvent.click(getByTestId('pipelineTreeNode-test-pipeline'));
+    expect(clickTreeNode).toHaveBeenCalledWith('test-pipeline');
   });
 
   it('adds active class when selectedPipeline matches', () => {
-    const setSelectedPipeline = jest.fn();
+    const clickTreeNode = jest.fn();
+    const clickMorePipelines = jest.fn();
     const pipeline: PipelineTreeNode = {
       pipelineName: 'selected-one',
       isManaged: false,
       isDeprecated: false,
       children: [],
     };
 
-    const node = createTreeNodesFromPipelines(pipeline, 'selected-one', setSelectedPipeline);
+    const node = createTreeNodesFromPipelines(
+      pipeline,
+      'selected-one',
+      clickTreeNode,
+      clickMorePipelines
+    );
 
     expect(node.className).toContain('--active');
   });
 
   it('adds a "+ more pipelines" label when max depth is reached', () => {
-    const setSelectedPipeline = jest.fn();
+    const clickTreeNode = jest.fn();
+    const clickMorePipelines = jest.fn();
 
     // Create a deeply nested tree exceeding MAX_TREE_LEVEL
     const deepTree = (level: number): PipelineTreeNode => {
@@ -100,7 +110,7 @@ describe('createTreeNodesFromPipelines', () => {
     };
 
     const root = deepTree(MAX_TREE_LEVEL + 1);
-    const node = createTreeNodesFromPipelines(root, '', setSelectedPipeline);
+    const node = createTreeNodesFromPipelines(root, '', clickTreeNode, clickMorePipelines);
 
     // Traverse to the level that contains the "more pipelines" node
     let current = node;
@@ -112,4 +122,29 @@ describe('createTreeNodesFromPipelines', () => {
     expect(finalLevelChildren).toHaveLength(1);
     expect(finalLevelChildren[0].id).toMatch(/-moreChildrenPipelines$/);
   });
+
+  it('calls clickMorePipelines when "+ more pipelines" is clicked', () => {
+    const clickTreeNode = jest.fn();
+    const clickMorePipelines = jest.fn();
+    const pipeline: PipelineTreeNode = {
+      pipelineName: 'test-pipeline',
+      isManaged: false,
+      isDeprecated: false,
+      children: [
+        {
+          pipelineName: 'child',
+          isManaged: true,
+          isDeprecated: true,
+          children: [],
+        },
+      ],
+    };
+
+    const node = createTreeNodesFromPipelines(pipeline, '', clickTreeNode, clickMorePipelines, 5);
+    const { getByTestId } = renderTreeNode(node);
+
+    // Expand root to display the "More pipelines" node
+    fireEvent.click(getByTestId('pipelineTreeNode-test-pipeline'));
+    fireEvent.click(getByTestId('morePipelinesNodeLabel'));
+  });
 });

x-pack/platform/packages/shared/ingest-pipelines/src/components/pipeline_structure_tree/create_tree_nodes/create_tree_nodes.tsx

@@ -17,8 +17,9 @@ import { PipelineTreeNodeLabel, MorePipelinesLabel } from '../tree_node_labels';
  */
 export const createTreeNodesFromPipelines = (
   treeNode: PipelineTreeNode,
-  selectedPipeline: string,
-  setSelectedPipeline: (pipelineName: string) => void,
+  selectedPipeline: string | undefined,
+  clickTreeNode: (pipelineName: string) => void,
+  clickMorePipelines: (name: string) => void,
   level: number = 1
 ): Node => {
   const currentNode = {
@@ -28,34 +29,39 @@ export const createTreeNodesFromPipelines = (
         pipelineName={treeNode.pipelineName}
         isManaged={treeNode.isManaged}
         isDeprecated={treeNode.isDeprecated}
-        setSelected={() => setSelectedPipeline(treeNode.pipelineName)}
       />
     ),
+    'data-test-subj': `pipelineTreeNode-${treeNode.pipelineName}-moreChildrenPipelines`,
     className:
       (level === 1 ? 'cssTreeNode-root' : 'cssTreeNode-children') +
       (treeNode.pipelineName === selectedPipeline ? '--active' : ''),
-    children: treeNode.children.length ? ([] as Node[]) : undefined,
+    children: treeNode.children.length ? [] : undefined,
     isExpanded: level === 1,
-    // Disable EUI's logic for activating tree node when expanding/collapsing them
-    // We should only activate a tree node when we click on the pipeline name
-    isActive: false,
-  };
+    callback: () => clickTreeNode(treeNode.pipelineName),
+  } as unknown as Node;
 
   if (level === MAX_TREE_LEVEL) {
-    if (treeNode.children) {
+    if (treeNode.children.length > 0) {
       const morePipelinesNode = {
         id: `${treeNode.pipelineName}-moreChildrenPipelines`,
         label: <MorePipelinesLabel count={treeNode.children.length} />,
         'data-test-subj': `pipelineTreeNode-${treeNode.pipelineName}-moreChildrenPipelines`,
         className: 'cssTreeNode-morePipelines',
-      };
+        callback: () => clickMorePipelines(treeNode.pipelineName),
+      } as unknown as Node;
       currentNode.children!.push(morePipelinesNode);
     }
     return currentNode;
   }
   treeNode.children.forEach((node) => {
     currentNode.children!.push(
-      createTreeNodesFromPipelines(node, selectedPipeline, setSelectedPipeline, level + 1)
+      createTreeNodesFromPipelines(
+        node,
+        selectedPipeline,
+        clickTreeNode,
+        clickMorePipelines,
+        level + 1
+      )
     );
   });
   return currentNode;

x-pack/platform/packages/shared/ingest-pipelines/src/components/pipeline_structure_tree/pipeline_structure_tree.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiTreeView, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { PipelineTreeNode } from './types';
@@ -14,11 +14,15 @@ import { getStyles } from './styles';
 
 export interface PipelineStructureTreeProps {
   pipelineTree: PipelineTreeNode;
+  selectedPipeline: string | undefined;
   /**
    * Specifies whether the tree is an extension of the main tree; i.e. displayed
    * when the user clicks on the last "+X more pipelines" tree node.
    */
   isExtension: boolean;
+  clickTreeNode: (name: string) => void;
+  clickMorePipelines: (name: string) => void;
+  goBack: () => void;
 }
 
 /**
@@ -27,36 +31,41 @@ export interface PipelineStructureTreeProps {
  * corresponding pipelines from the children node.
  * See more at https://www.elastic.co/docs/reference/enrich-processor/pipeline-processor
  */
-export const PipelineStructureTree = ({
-  pipelineTree,
-  isExtension,
-}: PipelineStructureTreeProps) => {
-  const { euiTheme } = useEuiTheme();
-  const styles = getStyles(euiTheme, isExtension);
-
-  const [selectedPipeline, setSelectedPipeline] = useState(pipelineTree.pipelineName);
-
-  const treeNode = createTreeNodesFromPipelines(
+export const PipelineStructureTree = React.memo(
+  ({
     pipelineTree,
     selectedPipeline,
-    setSelectedPipeline
-  );
+    isExtension,
+    clickTreeNode,
+    clickMorePipelines,
+    goBack,
+  }: PipelineStructureTreeProps) => {
+    const { euiTheme } = useEuiTheme();
+    const styles = getStyles(euiTheme, isExtension);
+
+    const treeNode = createTreeNodesFromPipelines(
+      pipelineTree,
+      selectedPipeline,
+      clickTreeNode,
+      clickMorePipelines
+    );
 
-  return (
-    <EuiFlexGroup direction="column" gutterSize="none" alignItems="flexStart">
-      {isExtension && (
-        <EuiFlexItem>
-          <EuiButtonEmpty iconType="arrowLeft" onClick={() => {}}>
-            <FormattedMessage
-              id="ingestPipelines.pipelineStructureTree.backToMainTreeNodeLabel"
-              defaultMessage="Back to previous pipelines"
-            />
-          </EuiButtonEmpty>
+    return (
+      <EuiFlexGroup direction="column" gutterSize="none" alignItems="flexStart">
+        {isExtension && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty iconType="arrowLeft" onClick={goBack}>
+              <FormattedMessage
+                id="ingestPipelines.pipelineStructureTree.backToMainTreeNodeLabel"
+                defaultMessage="Back to previous pipelines"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem css={{ marginLeft: isExtension ? euiTheme.size.l : '0' }}>
+          <EuiTreeView items={[treeNode]} showExpansionArrows={true} css={styles} />
         </EuiFlexItem>
-      )}
-      <EuiFlexItem css={{ marginLeft: isExtension ? euiTheme.size.l : '0' }}>
-        <EuiTreeView items={[treeNode]} showExpansionArrows={true} css={styles} />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
+      </EuiFlexGroup>
+    );
+  }
+);

x-pack/platform/packages/shared/ingest-pipelines/src/components/pipeline_structure_tree/styles.ts

@@ -40,6 +40,7 @@ export const getStyles = (euiTheme: EuiThemeComputed, isExtension: boolean) => c
   .cssTreeNode-morePipelines {
     margin-left: ${euiTheme.size.base};
     background-color: ${euiTheme.colors.backgroundLightPrimary};
+    color: ${euiTheme.colors.textPrimary} !important;
     border: none;
   }
 `;

x-pack/platform/packages/shared/ingest-pipelines/src/components/pipeline_structure_tree/tree_node_labels/more_pipelines_label.tsx

@@ -6,21 +6,20 @@
  */
 
 import React from 'react';
-import { EuiLink } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { EuiText } from '@elastic/eui';
 
 interface MorePipelinesLabelProps {
   count: number;
 }
 
 export const MorePipelinesLabel = ({ count }: MorePipelinesLabelProps) => {
   return (
-    <EuiLink color="primary" onClick={() => {}} data-test-subj="morePipelinesNodeLabel">
-      <FormattedMessage
-        id="ingestPipelines.pipelineStructureTree.morePipelinesTreeNodeLabel"
-        defaultMessage="+{count} more {count, plural,one {pipeline} other {pipelines}}"
-        values={{ count }}
-      />
-    </EuiLink>
+    <EuiText data-test-subj="morePipelinesNodeLabel">
+      {i18n.translate('ingestPipelines.pipelineStructureTree.morePipelinesTreeNodeLabel', {
+        defaultMessage: '+{count} more {count, plural,one {pipeline} other {pipelines}}',
+        values: { count },
+      })}
+    </EuiText>
   );
 };