DYN-4513 Improvement: Allow pin note to node via drag, hover and release

[dnenov]

Purpose

An improvement allowing the user to drag-&-drop a Note over a Node, pinning it down. Below is the description of the task as set in the brief:

• a. When dragging and hovering a note over a node, border on node appears and release of note will cause note to be pinned to node.
• b. Refer to Added shift + click to nodes and notes to remove from current group #12571 as precedent.

pin note to node

border update on hover state

Declarations

Check these if you believe they are true

• The codebase is in a better state after this PR
• Is documented according to the standards
• The level of testing this PR includes is appropriate
• User facing strings, if any, are extracted into *.resx files
• All tests pass using the self-service CI.
• Snapshot of UI changes, if any.
• Changes to the API follow Semantic Versioning and are documented in the API Changes document.
• This PR modifies some build requirements and the readme is updated
• This PR contains no files larger than 50 MB

Release Notes

The steps taken to create the new functionality are as follows:

• created new graphic affordances to show a hover state over a Node
• created the logic inside the StateMachine that handles the case of Note being hovered over a Node
• successfully pins the note when the mouse is released and the note is over the node
• will skip highlighting Nodes that already have a Note pinned (consistent with current behavior to not allow more than 1 pinned Note)

Reviewers

@reddyashish
@Amoursol

FYIs

[reddyashish]

The failing test is a flaky one. We will need a UI automation test for this feature. Will add a task for that and merging this.

[Amoursol]

@reddyashish did this make it into 2.18, or is it targeted for 2.19?

[reddyashish]

This is in 2.19