feat: zIndex Management for Task Nodes

[camielvs]

Description

zIndex management for Task Nodes, accessible in UI via Context Panel & Configuration. zIndex is saved in annotations as annotations: { zIndex: number.toString() }

I didn't know where to stick the UI for it so just shoved it at the bottom of the Context Panel. It'd be nice to have a little floating toolbar above the node, but this is a sidequest, so it's something we can iterate on later.

Related Issue and Pull requests

Progresses https://github.com/Shopify/oasis-frontend/issues/483

Type of Change

• New feature

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

• Add a bunch of tasks to the Canvas
• Click on one of them. In the Context Panel you will see Stacking Controls at the bottom of the panel.
• Confirm that each of these buttons works as expected.
• Go to the Configuration Tab on a Task. Confirm that manually editing the zIndex annotation also works as expected.

Additional Comments

[camielvs]

• fix: Edges use zIndex from Connected Nodes #1761
• feat: zIndex Management for IO Nodes #1759
• feat: zIndex Management for Task Nodes #1757 👈 (View in Graphite)
• chore: Add Integer Annotation Type #1758
• feat: Add StackingControls for Managing zIndex #1756 : 1 other dependent PR (#1728 )
• chore: Node Definition Cleanup #1731
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

🎩 To tophat this PR:

You can add the following URL parameter to your browser to tophat this PR:

`?tophat_location=02-04-temp_feat_zindex_management_for_task_nodes/ddd857b`

---

[morgan-wowk]

Feature suggestion:

Maybe it would be easier in the future to have up/down buttons for nodes that can detect other nodes that are behind them, then automatically jump to the z-index of those nodes +1/-1. That way, you can visually move nodes higher or lower than other nodes below them / above them, without worrying about the exact z-index value.

Edit: Oh, I just discovered the physical buttons! 🎉

[morgan-wowk]

I tested the buttons and it might be nice if we improved it so that it had that node-detection and ability to jump to the most relevant z-index based on what is currently above or behind. Otherwise, what I experienced was I clicked the button 20+ times before it visually made a difference. The "Bring to Front" or "Send to Back" options do serve that purpose but I wonder if our "Move Forward" and "Move Backward" options could be more intelligent.

[camielvs]

Merge activity

• Mar 5, 9:29 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 5, 9:32 PM UTC: Graphite rebased this pull request as part of a merge.
• Mar 5, 9:34 PM UTC: @camielvs merged this pull request with Graphite.