refactor(29358): Refactor the Designer visual identity

[vanch3d]

See https://hivemq.kanbanize.com/ctrl_board/57/cards/29358/details/

The PR introduces visual changes to most elements (nodes and edges) in the Data Hub Designer. The aim is to highlight the paradigms that are similar to the Workspace (selectable and draggable nodes, toolbar for commands, status) while ensuring the two tools are immediately differentiated

Design

• The layout of the nodes has been streamlined, to ensure handles (connection ports) are only on the left (target) or on the right (source) hand side of a node. It helps to convey a sense of "pipeline" with the Designer
• The visual attributes of nodes and edges have been changed to convey different aspects:
  • Handles (the port on a node used for connections) are visually consistent
    • round for source handles, square for target handles
    • plain for primary (policy pipeline) handles, hollow for secondary (noise configuration) handles
    • all handles are black, except for primary pipeline handles that convey success (green) or error (red) processing of the policy (e.g onSuccess on a Data Policy or on failed transition in a `Behaviour Policy)
  • The border of nodes is in a plain light grey, changing to blue (when the node is selected or focused), green (when its "dry-run" validation is successful) or red (when it's a failure)
  • Edges are now displayed as (smooth) stepped connectors, to highlight the flow between the handles of nodes
  • Edges are displayed in plain colour (grey), changing to green (success) or red (failure) based on the "dry run" status of the validation of their source
  • A coloured header is used in nodes to show the type of element:
    • policies (data and behaviour) in orange
    • resources (script and schema) in pink
    • operators (any other constituent of a policy, e.g. topic filter, transition, etc.) in blue
  • Some of the internal properties of a node are carefully selected to be displayed inside the node, in a way that adds labelling to the more important handle

The PR also improves the layout of the handles and, by effect, the alignment of nodes on a gid layout. It fixes https://hivemq.kanbanize.com/ctrl_board/57/cards/29435/details/

Out-of-scope

• handles are positioned so that they align with the nodes on both sides of the connection. The utility is not bound to the ChakraUI Theme, it will be done in a subsequent ticket

Before

After

[oli-hivemq]

I would recommend to look into refactoring all the code around position as I saw multiple instances of 44px and similar calculations all over the place.
It wouldn't take much to refactor this and have 1 source of truth (or at least minimise these sources of truth) and make your life easier when a refactoring request or an adjustment is needed.

Approving anyway not to block you 🦣

[sfrehse]

Once I want to save the ID of a data policy, it isn't stored; an error occurs after checking repeatedly.

[sfrehse]

Once I want to save the ID of a data policy, it isn't stored; an error occurs after checking repeatedly.

Pressing enter holds but clicking not

[sfrehse]

Once I want to save the ID of a data policy, it isn't stored; an error occurs after checking repeatedly.

Pressing enter holds but clicking not

Sorry, this is not true. The id of a data-policy is stored once the user left the focus one time from the data-policy node

[vanch3d]

Once I want to save the ID of a data policy, it isn't stored; an error occurs after checking repeatedly.

Pressing enter holds but clicking not

Sorry, this is not true. The id of a data-policy is stored once the user left the focus one time from the data-policy node

I think I noticed that issue but haven't been able to pin it down. Will look again, and opening a new ticket for it