Skip to content

Enhancements to etl and analysis ui - #3028

Open
SantanM wants to merge 4 commits into
developfrom
SantanM/internal-2951_enhancements-to-etl
Open

Enhancements to etl and analysis ui#3028
SantanM wants to merge 4 commits into
developfrom
SantanM/internal-2951_enhancements-to-etl

Conversation

@SantanM

@SantanM SantanM commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator
  1. Add delete to the nodes in analysis-ui and ETL
  2. Align the spacing in the "select a node" popup
  3. Add close icon to the popup above
Screenshot 2026-07-31 at 3 17 11 PM Screenshot 2026-07-31 at 3 16 55 PM

Merge Checklist

Please cross check this list if additions / modifications needs to be done on top of your core changes and tick them off. Reviewer can as well glance through and help the developer if something is missed out.

  • Automated Tests (Jasmine integration tests, Unit tests, and/or Performance tests)
  • Updated Manual tests / Demo Config
  • Documentation (Application guide, Admin guide, Markdown, Readme and/or Wiki)
  • Verified that local development environment is working with latest changes (integrated with latest develop branch)
  • following best practices in code review doc

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Flow and Analysis UI node editor experience by enabling node deletion (via UI and keyboard) and improving the “Select node type” dialog layout/controls to better match the intended UX.

Changes:

  • Added per-node delete affordance (trash icon) and enabled keyboard delete (Backspace/Delete) in both flow and analysis-ui ReactFlow panels.
  • Adjusted “Select node type” dialog layout (grid spacing + footer positioning) in both apps.
  • Added closable to the flow app’s “Select node type” dialog.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
plugins/ui/apps/flow/src/features/flow/containers/Node/NodeTypes/SelectNodeTypes/SelectNodeTypesDialog.tsx Enables close icon on the “Select node type” dialog via closable.
plugins/ui/apps/flow/src/features/flow/containers/Node/NodeTypes/SelectNodeTypes/SelectNodeTypesDialog.scss Fixes dialog internal layout so grid and footer align/pin correctly.
plugins/ui/apps/flow/src/features/flow/containers/Node/NodeLayout/NodeLayout.tsx Adds trash icon delete action to nodes (programmatic delete + draft status).
plugins/ui/apps/flow/src/features/flow/containers/Node/NodeLayout/NodeLayout.scss Adds styling intent for delete hover state (but currently has a selector issue).
plugins/ui/apps/flow/src/features/flow/containers/Flow/FlowPanel/FlowPanel.tsx Enables keyboard deletion via deleteKeyCode and hooks node deletion to draft status.
plugins/ui/apps/analysis-ui/src/features/flow/containers/Node/NodeTypes/SelectNodeTypes/SelectNodeTypesDialog.scss Mirrors dialog layout improvements for analysis-ui.
plugins/ui/apps/analysis-ui/src/features/flow/containers/Node/NodeLayout/NodeLayout.tsx Adds trash icon delete action to analysis-ui nodes (programmatic delete + draft status).
plugins/ui/apps/analysis-ui/src/features/flow/containers/Node/NodeLayout/NodeLayout.scss Mirrors delete hover styling intent (but currently has the same selector issue).
plugins/ui/apps/analysis-ui/src/features/flow/containers/Flow/FlowPanel/FlowPanel.tsx Enables keyboard deletion and marks flows as draft when nodes are deleted.

Comment on lines +97 to +103
&__delete {
&:hover {
path[fill="navy"] {
fill: var(--color-feedback-alarm);
}
}
}
Comment on lines +97 to +103
&__delete {
&:hover {
path[fill="navy"] {
fill: var(--color-feedback-alarm);
}
}
}
Comment on lines +78 to +81
<TrashIcon
onClick={handleDeleteClick}
className="node__setting node__delete nodrag"
/>
Comment on lines +115 to +118
<TrashIcon
onClick={handleDeleteClick}
className="node__setting node__delete nodrag"
/>
Comment on lines +2 to +6
// Body owns the vertical layout so the footer pins to the bottom of the
// full-height dialog while the card grid fills the space above it.
.alp-dialog__body {
display: flex;
flex-direction: column;
Address code-review comments on the dataflow node delete icon (flow and
analysis-ui apps):

- SCSS: un-nest `&__delete` from `&__setting` so it compiles to
  `.node__delete` (matching the TrashIcon className) instead of the dead
  `.node__setting__delete`; the alarm-red delete hover now applies. Placed
  after `&__setting` so it wins the equal-specificity tie.
- A11y: make the clickable TrashIcon keyboard-operable (role=button,
  tabIndex, aria-label, Enter/Space handling via an extracted deleteNode)
  and add a :focus-visible style that reveals the icon and shows a focus ring.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants