feat: Add Basic FlexNode

[camielvs]

Description

Adds a basic static FlexNode component to the canvas when the flex-nodes annotation has appropriate data (saved as a JSON string). The flex node cannot be interacted with beyond moving it around.

Flex Nodes (aka "Sticky Notes") have the following attributes:

• Id
• Properties
  • Title
  • Content
  • Color
  • Border Colour (later)
• Metadata
  • Created At
  • Created By
• Size (width, height)
• Position (x, y)
• Z-Index
• Read Only

Flex Nodes can be found & defined directly in the component spec at spec.metadata.annotations["flex-nodes"] = JSON.stringify(FlexNode[])

Note this PR does not include a method of adding Flex Nodes to the canvas via UI. Nor does it add editing & basic canvas operations (e.g. delete). These features are added further upstack.

Related Issue and Pull requests

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

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

Create a component spec and define one ore more Sticky Notes via spec.metadata.annotations["flex-nodes"], using the type structure provided. The created sticky notes should render on the canvas when the pipeline is imported.

Note! Flex Nodes are saved in the spec as a JSON string. Remember to stringify the entire Flex Node array when defining them in the spec.

Alternatively, go upstack to test via a UI-based solution.

Additional Comments

[camielvs]

• feat: Add Sticky Notes to Canvas #1729 : 2 dependent PRs (#1745 , #1746 )
• feat: Add Basic FlexNode #1728 👈 (View in Graphite)
• feat: Add StackingControls for Managing zIndex #1756 : 1 other dependent PR (#1758 )
• chore: Node Definition Cleanup #1731
• master

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

[camielvs]

Merge activity

• Feb 19, 8:18 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Feb 19, 8:18 PM UTC: @camielvs merged this pull request with Graphite.