Canvas: Import modal
Change-Id: I22928007c5b81d93be2eed2d133fed4d73e1703f
diff --git a/apps/canvas/front/src/components/actions.tsx b/apps/canvas/front/src/components/actions.tsx
index d87f458..d4bd5ea 100644
--- a/apps/canvas/front/src/components/actions.tsx
+++ b/apps/canvas/front/src/components/actions.tsx
@@ -12,6 +12,7 @@
DropdownMenuTrigger,
} from "./ui/dropdown-menu";
import { Ellipsis, LoaderCircle } from "lucide-react";
+import { ImportModal } from "./import-modal";
function toNodeType(t: string): string {
if (t === "ingress") {
@@ -34,6 +35,7 @@
const [ok, setOk] = useState(false);
const [loading, setLoading] = useState(false);
const [reloading, setReloading] = useState(false);
+ const [showImportModal, setShowImportModal] = useState(false);
const info = useCallback(
(title: string, description?: string, duration?: number) => {
return toast({
@@ -309,47 +311,51 @@
);
} else {
return (
- <div className="flex flex-row gap-1 items-center">
- <Button onClick={deploy} {...deployProps}>
- {deployProps.loading ? (
- <>
- <LoaderCircle className="animate-spin" />
- Deploying...
- </>
- ) : (
- "Deploy"
- )}
- </Button>
- <Button onClick={save}>Save</Button>
- <DropdownMenu>
- <DropdownMenuTrigger>
- <Button size="icon">
- <Ellipsis />
- </Button>
- </DropdownMenuTrigger>
- <DropdownMenuContent className="w-56">
- <DropdownMenuGroup>
- <DropdownMenuItem
- onClick={restoreSaved}
- disabled={projectId === undefined}
- className="cursor-pointer hover:bg-gray-200"
- >
- Restore
- </DropdownMenuItem>
- <DropdownMenuItem onClick={clear} className="cursor-pointer hover:bg-gray-200">
- Clear
- </DropdownMenuItem>
- <DropdownMenuItem
- onClick={deleteProject}
- disabled={projectId === undefined}
- className="cursor-pointer hover:bg-gray-200"
- >
- Delete project
- </DropdownMenuItem>
- </DropdownMenuGroup>
- </DropdownMenuContent>
- </DropdownMenu>
- </div>
+ <>
+ <div className="flex flex-row gap-1 items-center">
+ <Button onClick={deploy} {...deployProps}>
+ {deployProps.loading ? (
+ <>
+ <LoaderCircle className="animate-spin" />
+ Deploying...
+ </>
+ ) : (
+ "Deploy"
+ )}
+ </Button>
+ <Button onClick={save}>Save</Button>
+ <Button onClick={() => setShowImportModal(true)}>Import</Button>
+ <DropdownMenu>
+ <DropdownMenuTrigger>
+ <Button size="icon">
+ <Ellipsis />
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent className="w-56">
+ <DropdownMenuGroup>
+ <DropdownMenuItem
+ onClick={restoreSaved}
+ disabled={projectId === undefined}
+ className="cursor-pointer hover:bg-gray-200"
+ >
+ Restore
+ </DropdownMenuItem>
+ <DropdownMenuItem onClick={clear} className="cursor-pointer hover:bg-gray-200">
+ Clear
+ </DropdownMenuItem>
+ <DropdownMenuItem
+ onClick={deleteProject}
+ disabled={projectId === undefined}
+ className="cursor-pointer hover:bg-gray-200"
+ >
+ Delete project
+ </DropdownMenuItem>
+ </DropdownMenuGroup>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ </div>
+ <ImportModal open={showImportModal} onOpenChange={setShowImportModal} />
+ </>
);
}
}