Toggle Catalog and Code Editor

[kahboom]

Description

When the YAMLEditor (code editor) is selected, the Catalog should be collapsed, and vice versa. This would prevent them from being overlapped, which makes the YAMLEditor unusable when the Catalog is opened.

We can't move the Catalog to the right side of the screen, because that's where the StepDetail panel is.

This could also be a good opportunity to move the YAMLEditor into the PatternFly Drawer, instead of being part of the Grid system it's in now. This is what the Catalog does--it opens up as an overlay above the Visualization. This allows you to open the Catalog without it moving the Visualization canvas.

The YAMLEditor, using the Grid system now:

By contrast, when using a Drawer like the Catalog does, it's an overlay and doesn't alter the position of the Visualization canvas when it's opened.

Steps

• Add conditional to DrawerContent to show either the catalog or code editor
• Move the code editor into the conditional
• Adjust the Grid for the Visualization, or remove it altogether if it's not necessary.

References

• YAMLEditor using the Grid system
• Catalog using Drawer & DrawerContent
• PatternFly Drawer

[kahboom]

Closing as we'll likely be doing a redesign.