import { useCallback } from 'react'; import { Deployment, DeploymentStatus, Domain, Environment, Project, } from 'gql-client'; import { Avatar } from 'components/shared/Avatar'; import { BranchStrokeIcon, CheckRoundFilledIcon, ClockOutlineIcon, CommitIcon, LoadingIcon, WarningIcon, } from 'components/shared/CustomIcon'; import { Heading } from 'components/shared/Heading'; import { OverflownText } from 'components/shared/OverflownText'; import { Tag, TagTheme } from 'components/shared/Tag'; import { getInitials } from 'utils/geInitials'; import { relativeTimeMs } from 'utils/time'; import { SHORT_COMMIT_HASH_LENGTH } from '../../../../constants'; import { formatAddress } from '../../../../utils/format'; import { DeploymentMenu } from './DeploymentMenu'; interface DeployDetailsCardProps { deployment: Deployment; currentDeployment: Deployment; onUpdate: () => Promise; project: Project; prodBranchDomains: Domain[]; } const STATUS_COLORS: { [key in DeploymentStatus]: TagTheme['type']; } = { [DeploymentStatus.Building]: 'emphasized', [DeploymentStatus.Ready]: 'positive', [DeploymentStatus.Error]: 'negative', [DeploymentStatus.Deleting]: 'neutral', }; const DeploymentDetailsCard = ({ deployment, currentDeployment, onUpdate, project, prodBranchDomains, }: DeployDetailsCardProps) => { const getIconByDeploymentStatus = (status: DeploymentStatus) => { if ( status === DeploymentStatus.Building || status === DeploymentStatus.Deleting ) { return ; } if (status === DeploymentStatus.Ready) { return ; } if (status === DeploymentStatus.Error) { return ; } }; const renderDeploymentStatus = useCallback( (className?: string) => { return (
{deployment.status}
); }, [deployment.status, deployment.commitHash], ); return (
{/* DEPLOYMENT URL */} {deployment.url && ( {deployment.url} )} {deployment.deployerLrn && ( Deployer LRN: {deployment.deployerLrn} )} {deployment.environment === Environment.Production ? `Production ${deployment.isCurrent ? '(Current)' : ''}` : 'Preview'}
{/* DEPLOYMENT STATUS */} {renderDeploymentStatus('w-[10%] max-w-[110px] hidden md:flex h-fit')} {/* DEPLOYMENT COMMIT DETAILS */}
{deployment.branch} {deployment.commitHash.substring(0, SHORT_COMMIT_HASH_LENGTH)}{' '} {deployment.commitMessage}
{renderDeploymentStatus('flex md:hidden h-fit')}
{/* DEPLOYMENT INFOs */}
{relativeTimeMs(deployment.createdAt)}
{formatAddress(deployment.createdBy.name ?? '')}
); }; export default DeploymentDetailsCard;