import { useState } from 'react'; import { Collapse } from '@snowballtools/material-tailwind-react-fork'; import { Stopwatch, setStopWatchOffset } from '../../StopWatch'; import FormatMillisecond from '../../FormatMilliSecond'; import processLogs from '../../../assets/process-logs.json'; import { cn } from 'utils/classnames'; import { CheckRoundFilledIcon, ClockOutlineIcon, CopyIcon, LoaderIcon, MinusCircleIcon, PlusIcon, } from 'components/shared/CustomIcon'; import { Button } from 'components/shared/Button'; import { useToast } from 'components/shared/Toast'; import { useIntersectionObserver } from 'usehooks-ts'; enum DeployStatus { PROCESSING = 'progress', COMPLETE = 'complete', NOT_STARTED = 'notStarted', } interface DeployStepsProps { status: DeployStatus; title: string; step?: string; startTime?: string; processTime?: string; } const DeployStep = ({ step, status, title, startTime, processTime, }: DeployStepsProps) => { const [isOpen, setIsOpen] = useState(false); const { toast, dismiss } = useToast(); const { isIntersecting: hideGradientOverlay, ref } = useIntersectionObserver({ threshold: 1, }); const disableCollapse = status !== DeployStatus.COMPLETE; return (
{/* Collapisble trigger */} {/* Collapsible */}
{/* Logs */} {processLogs.map((log, key) => { return (

{log}

); })} {/* End of logs ref used for hiding gradient overlay */}
{/* Overflow gradient overlay */} {!hideGradientOverlay && (
)} {/* Copy log button */}
); }; export { DeployStep, DeployStatus };