[feature/new-dag-editor] part 5: Add components for the DAG Nodes and Edges

[GnsP]

Add components for the DAG Nodes and Edges

Description

Part 5 of the set of changes implementing the new DAG editor for CDAP UI.

Links to the previous changesets:

1. [feature/new-dag-editor] part 1: Add changes to the dag-plus directive #1309
2. [feature/new-dag-editor] part 2: Add back the older my-dag-ctrl to keep supporting the older ui #1312
3. [feature/new-dag-editor] part 3: update build configs and add reactflow as dependency #1313
4. [feature/new-dag-editor] part 4: Add the main component for the reactflow based DAG editor #1316

In this PR, we add the react components for the DAG Nodes and DAG Edges to be used in the main reactflow component. These are similar to the nodes and edges in the older version of the editor with minor UI/UX differences. In most cases, these components are direct translations of the corresponding angularjs code to react. For ease of review, we are adding references to the corresponding angularjs directive and templates here.

References:

• Plugin node template
• Splitter popover directive
• Node metrics directive

PR Type

• Bug Fix
• Feature
• Build Fix
• Testing
• General Improvement
• Cherry Pick

Links

Jira: CDAP-21142

Test Plan

NA. Not testable. Tests will be run when the complete feature branch is merged to develop

Screenshots

NA