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 (
{log}
); })} {/* End of logs ref used for hiding gradient overlay */} {/* Overflow gradient overlay */} {!hideGradientOverlay && ( )} {/* Copy log button */}