diff --git a/compose.prod.yaml b/compose.prod.yaml index 133d150..865e2e0 100644 --- a/compose.prod.yaml +++ b/compose.prod.yaml @@ -14,7 +14,7 @@ services: - postgres_data:/var/lib/postgresql/data backend: - image: breyr/top-backend:1.0.2 + image: breyr/top-backend:1.0.3 container_name: backend environment: DATABASE_URL: postgres://demo:demo@postgres:5432/demo @@ -25,7 +25,7 @@ services: - postgres frontend: - image: breyr/top-frontend:1.0.2 + image: breyr/top-frontend:1.0.3 container_name: frontend ports: - "80:80" @@ -33,7 +33,7 @@ services: - backend interconnect-api: - image: breyr/top-interconnectapi:1.0.2 + image: breyr/top-interconnectapi:1.0.3 container_name: interconnect-api environment: SECRET_KEY: your_secret diff --git a/frontend/src/components/reactflow/overlayui/TopologyName.tsx b/frontend/src/components/reactflow/overlayui/TopologyName.tsx index a12d140..3d433dc 100644 --- a/frontend/src/components/reactflow/overlayui/TopologyName.tsx +++ b/frontend/src/components/reactflow/overlayui/TopologyName.tsx @@ -9,15 +9,27 @@ export default function TopologyName() { const [isEditing, setIsEditing] = useState(false); const [inputWidth, setInputWidth] = useState(0); const spanRef = useRef(null); - const initialNameRef = useRef(topologyData?.name || ""); + const inputRef = useRef(null); const { authenticatedApiClient } = useAuth(); + const prevRenderTopologyName = topologyData?.name || "Topology Name"; + useEffect(() => { if (spanRef.current) { setInputWidth(spanRef.current.offsetWidth); } }, [topologyName, isEditing]); + useEffect(() => { + if (!topologyData?.name) return; + + document.title = topologyData.name; + + return () => { + document.title = 'TOPHAT' + } + }, [topologyData?.name]); + const updateTopologyName = useCallback(async () => { setIsSaving(true); try { @@ -30,7 +42,6 @@ export default function TopologyName() { setTopologyData(res.data); } } - initialNameRef.current = topologyName; // Update the initial name reference } catch (error) { console.error("Failed to update topology name:", error); } finally { @@ -44,7 +55,7 @@ export default function TopologyName() { const handleBlur = async () => { setIsEditing(false); - if (topologyName !== initialNameRef.current) { + if (topologyName !== prevRenderTopologyName) { await updateTopologyName(); } }; @@ -53,14 +64,27 @@ export default function TopologyName() { setIsEditing(true); }; + const handleKeyDown = async (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + if (inputRef.current) { + inputRef.current.blur(); + } + await updateTopologyName(); + } + }; + + return (
{/* Topology Name Input */} {isEditing ? ( { })(); }, [user, authenticatedApiClient, id, setTopologyData, setLastUpdated, navigateTo, bookDevices]); - useEffect(() => { - if (!topologyData?.name) return; - - document.title = topologyData.name; - - return () => { - document.title = 'TOPHAT' - } - }, [topologyData?.name]); - useEffect(() => { if (!loading && topologyData?.reactFlowState?.edges && !hasReinitializedLinks.current) { hasReinitializedLinks.current = true;