Canvas: Update layout
Combine separate Overview and Canvas tabs into one Build tab
Add Overview <-> Canvas switcher to Actions
Change-Id: I40f7742be587b475ae6e88af2bcf9cae34f93168
diff --git a/apps/canvas/front/src/components/actions.tsx b/apps/canvas/front/src/components/actions.tsx
index f283ec8..3047fdf 100644
--- a/apps/canvas/front/src/components/actions.tsx
+++ b/apps/canvas/front/src/components/actions.tsx
@@ -26,11 +26,7 @@
}
}
-interface ActionsProps {
- isOverview?: boolean;
-}
-
-export function Actions({ isOverview = false }: ActionsProps) {
+export function Actions() {
const { toast } = useToast();
const store = useStateStore();
const projectId = useProjectId();
@@ -275,6 +271,12 @@
if (store.mode === "deploy") {
return (
<div className="flex flex-row gap-1 items-center">
+ <Button
+ onClick={() => store.setBuildMode(store.buildMode === "overview" ? "canvas" : "overview")}
+ {...reloadProps}
+ >
+ {store.buildMode === "overview" ? "Canvas" : "Overview"}
+ </Button>
<Button onClick={edit} {...reloadProps}>
Edit
</Button>
@@ -323,12 +325,13 @@
return (
<>
<div className="flex flex-row gap-1 items-center">
- {isOverview && (
- <Button onClick={() => setShowResourcesModal(true)}>
- <Plus className="w-4 h-4 mr-1" />
- Add
- </Button>
- )}
+ <Button onClick={() => store.setBuildMode(store.buildMode === "overview" ? "canvas" : "overview")}>
+ {store.buildMode === "overview" ? "Canvas" : "Overview"}
+ </Button>
+ <Button onClick={() => setShowResourcesModal(true)}>
+ <Plus className="w-4 h-4 mr-1" />
+ Add
+ </Button>
<Button onClick={deploy} {...deployProps}>
{deployProps.loading ? (
<>