Canvas: Add modal resources dialog to Overview tab
- Add Add button to Actions component visible only in Overview tab and edit mode
- Create modal dialog with Resources component for adding new resources
- Modal automatically closes when resource is added
- Resources component accepts optional onResourceAdded callback
- Maintain backward compatibility with existing Resources usage
Change-Id: Ib01fe1417ba2bbb7c91f6e1d0551fe9c52ade8c3
diff --git a/apps/canvas/front/src/components/actions.tsx b/apps/canvas/front/src/components/actions.tsx
index 1442b9a..5ea2920 100644
--- a/apps/canvas/front/src/components/actions.tsx
+++ b/apps/canvas/front/src/components/actions.tsx
@@ -11,8 +11,10 @@
DropdownMenuContent,
DropdownMenuTrigger,
} from "./ui/dropdown-menu";
-import { Ellipsis, LoaderCircle } from "lucide-react";
+import { Ellipsis, LoaderCircle, Plus } from "lucide-react";
import { ImportModal } from "./import-modal";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+import { Resources } from "./resources";
function toNodeType(t: string): string {
if (t === "ingress") {
@@ -24,7 +26,11 @@
}
}
-export function Actions() {
+interface ActionsProps {
+ isOverview?: boolean;
+}
+
+export function Actions({ isOverview = false }: ActionsProps) {
const { toast } = useToast();
const store = useStateStore();
const projectId = useProjectId();
@@ -36,6 +42,7 @@
const [loading, setLoading] = useState(false);
const [reloading, setReloading] = useState(false);
const [showImportModal, setShowImportModal] = useState(false);
+ const [showResourcesModal, setShowResourcesModal] = useState(false);
const info = useCallback(
(title: string, description?: string, duration?: number) => {
return toast({
@@ -313,6 +320,12 @@
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={deploy} {...deployProps}>
{deployProps.loading ? (
<>
@@ -355,6 +368,16 @@
</DropdownMenu>
</div>
<ImportModal open={showImportModal} onOpenChange={setShowImportModal} />
+ <Dialog open={showResourcesModal} onOpenChange={setShowResourcesModal}>
+ <DialogContent className="sm:max-w-md">
+ <DialogHeader>
+ <DialogTitle>Add Resources</DialogTitle>
+ </DialogHeader>
+ <div className="py-4">
+ <Resources onResourceAdded={() => setShowResourcesModal(false)} />
+ </div>
+ </DialogContent>
+ </Dialog>
</>
);
}