import React, { useEffect, useRef, useState } from 'react'; import { Body, Code, H3, Link, Modal, spacing, css, } from '@mongodb-js/compass-components'; import ConnectingAnimation from './connecting-animation'; import ConnectingIllustration from './connecting-illustration'; import ConnectingBackground from './connecting-background'; // We delay showing the modal for this amount of time to avoid flashing. const showModalDelayMS = 250; const modalContentStyles = css({ textAlign: 'center', padding: spacing[3], paddingBottom: spacing[5] + spacing[2], }); const connectingStatusStyles = css({ marginTop: spacing[3], fontWeight: 'bold', maxHeight: 100, overflow: 'hidden', textOverflow: 'ellipsis', }); const cancelButtonStyles = css({ border: 'none', background: 'none', padding: 0, margin: 0, marginTop: spacing[4], }); const textContentStyles = css({ marginTop: spacing[3], }); const oidcContainerStyles = css({ padding: `0px ${spacing[4]}px`, }); /** * Modal shown when attempting to connect. */ function Connecting({ connectingStatusText, onCancelConnectionClicked, oidcDeviceAuthVerificationUrl, oidcDeviceAuthUserCode, }: { connectingStatusText: string; onCancelConnectionClicked: () => void; oidcDeviceAuthVerificationUrl: string | null; oidcDeviceAuthUserCode: string | null; }): React.ReactElement { const [showModal, setShowModal] = useState(false); const showModalDebounceTimeout = useRef | null>( null ); useEffect(() => { if (showModalDebounceTimeout.current === null && !showModal) { showModalDebounceTimeout.current = setTimeout(() => { setShowModal(true); showModalDebounceTimeout.current = null; }, showModalDelayMS); } return () => { if (showModalDebounceTimeout.current) { clearTimeout(showModalDebounceTimeout.current); showModalDebounceTimeout.current = null; } }; }, [showModal]); return ( onCancelConnectionClicked()}>
{oidcDeviceAuthVerificationUrl && oidcDeviceAuthUserCode ? (
Visit the following URL to complete authentication: {oidcDeviceAuthVerificationUrl} Enter the following code on that page: {oidcDeviceAuthUserCode}
) : ( <>

{connectingStatusText}

)} Cancel
); } export default Connecting;