import React from 'react' ; import { Link , List , ListItem , Chip } from '@material-ui/core' ; import LocalOfferOutlinedIcon from '@material-ui/icons/LocalOfferOutlined' ; import Alert from '@material-ui/lab/Alert' ; import { InfoCard , Progress , MissingAnnotationEmptyState } from '@backstage/core-components' ; import { Entity } from '@backstage/catalog-model' ; import { useRequest } from '../../../hooks/useRequest' ; import { useEntityGithubScmIntegration } from '../../../hooks/useEntityGithubScmIntegration' ; import { useProjectEntity } from '../../../hooks/useProjectEntity' ; import { isGithubInsightsAvailable , GITHUB_INSIGHTS_ANNOTATION } from '../../utils/isGithubInsightsAvailable' ; import { useEntity } from '@backstage/plugin-catalog-react' ; import { styles as useStyles } from '../../utils/styles' ; type Release = { id : number ; html_url : string ; tag_name : string ; prerelease : boolean ; name : string ; } ; type Props = { deprecated entity ? : Entity ; } ; const ReleasesCard = ( _props ) => { const classes = useStyles ( ) ; const { entity } = useEntity ( ) ; const { owner , repo } = useProjectEntity ( entity ) ; const { value , loading , error } = useRequest ( entity , 'releases' , 0 , 5 ) ; const { hostname } = useEntityGithubScmIntegration ( entity ) ; const projectAlert = isGithubInsightsAvailable ( entity ) ; if ( ! projectAlert ) { return < MissingAnnotationEmptyState annotation = { GITHUB_INSIGHTS_ANNOTATION } />; } if ( loading ) { return < Progress />; } else if ( error ) { return ( < Alert severity = "error" className = { classes . infoCard } > { error . message } < /Alert>); } return value ?. length && owner && repo ? ( < InfoCard title = "Releases" deepLink = { { link : `//${ hostname }/${ owner }/${ repo }/releases` , title : 'Releases' , onClick : e => { e . preventDefault ( ) ; window . open ( `//${ hostname }/${ owner }/${ repo }/releases` ) ; } , } } className = { classes . infoCard } > < List > { value . map ( ( release ) => ( < ListItem className = { classes . listItem } key = { release . id } > < Link href = { release . html_url } color = "inherit" target = "_blank" rel = "noopener noreferrer" > < p className = { classes . releaseTitle } > { release . name } < /p> < LocalOfferOutlinedIcon fontSize = "inherit" className = { classes . releaseTagIcon } / > { ' ' } { release . tag_name } { } < /Link> { release . prerelease && ( < Chip color = "primary" size = "small" label = "Pre-release" / > ) } < /ListItem>))} < /List> < /InfoCard>) : (<></ > ) ; } ; export default ReleasesCard ;