Spaces:
Running
Running
File size: 3,156 Bytes
c2ea5ed eb7193f c2ea5ed eb7193f c2ea5ed eb7193f c2ea5ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import React from "react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { ModalState } from "@/types";
import { TraceDetailsModal } from "@/components/shared/modals/TraceDetailsModal";
import { StageResultsModal } from "@/components/shared/modals/StageResultsModal";
import { KnowledgeGraphModal } from "@/components/shared/modals/KnowledgeGraphModal";
import { TraceSegmentModal } from "@/components/shared/modals/TraceSegmentModal";
import ExampleTraceModal from "./modals/ExampleTraceModal";
import { ObservabilityConnectionDialog } from "@/components/features/observability/ObservabilityConnectionDialog";
import { UploadDialog } from "@/components/features/upload/UploadDialog";
import { AuthModal } from "@/components/auth/AuthModal";
interface ModalSystemProps {
modalState: ModalState;
onClose: () => void;
}
export function ModalSystem({ modalState, onClose }: ModalSystemProps) {
const { isOpen, type, title, data, config } = modalState;
const getModalSize = () => {
switch (config?.size) {
case "sm":
return "max-w-md";
case "md":
return "max-w-lg";
case "lg":
return "max-w-2xl";
case "xl":
return "max-w-4xl";
case "full":
return "max-w-[95vw] max-h-[95vh]";
default:
return "max-w-3xl";
}
};
const renderModalContent = () => {
switch (type) {
case "trace-details":
return <TraceDetailsModal data={data} onClose={onClose} />;
case "stage-results":
return <StageResultsModal data={data} onClose={onClose} />;
case "knowledge-graph":
return <KnowledgeGraphModal data={data} onClose={onClose} />;
case "trace-segment":
return <TraceSegmentModal data={data} onClose={onClose} />;
case "example-traces":
return <ExampleTraceModal data={data} onClose={onClose} />;
case "upload-trace":
return <UploadDialog open={isOpen} onOpenChange={onClose} />;
case "observability-connection":
return (
<ObservabilityConnectionDialog
open={isOpen}
onOpenChange={onClose}
editConnection={data?.editConnection}
/>
);
case "auth-login":
return <AuthModal open={isOpen} onOpenChange={onClose} />;
default:
return (
<div className="p-4 text-center text-muted-foreground">
Unknown modal type: {type}
</div>
);
}
};
// Some modals have their own Dialog wrapper
const hasOwnDialog =
type === "upload-trace" ||
type === "observability-connection" ||
type === "auth-login";
if (hasOwnDialog) {
return <>{renderModalContent()}</>;
}
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className={`${getModalSize()} p-0`}>
<DialogHeader className="px-6 py-4 border-b">
<DialogTitle className="text-lg font-semibold">{title}</DialogTitle>
</DialogHeader>
<div className="overflow-auto max-h-[80vh]">{renderModalContent()}</div>
</DialogContent>
</Dialog>
);
}
|