import React , { FC , useState } from 'react' ; import { Typography , Box , ButtonGroup , Button } from '@material-ui/core' ; import GitHubIcon from '@material-ui/icons/GitHub' ; import { Table , TableColumn , MissingAnnotationEmptyState } from '@backstage/core-components' ; import { isGithubSlugSet , GITHUB_PULL_REQUESTS_ANNOTATION } from '../../utils/isGithubSlugSet' ; import { usePullRequests , PullRequest } from '../usePullRequests' ; import { PullRequestState } from '../../types' ; import { Entity } from '@backstage/catalog-model' ; import { getStatusIconType } from '../Icons' ; import { useEntity } from '@backstage/plugin-catalog-react' ; const generatedColumns = [ { title : 'ID' , field : 'number' , highlight : true , width : '150px' , render : ( row ) => ( < Box fontWeight = "fontWeightBold" > < a target = "_blank" rel = "noopener noreferrer" href = { row . url ! } > # { row . number } < /a> < /Box>), } , { title : 'Title' , field : 'title' , highlight : true , render : ( row ) => ( < Typography variant = "body2" noWrap > { getStatusIconType ( row as PullRequest ) } < Box ml = { 1 } component = "span" > { row . title } < /Box> < /Typography>), } , { title : 'Creator' , field : 'creatorNickname' , highlight : true , width : '250px' , render : ( row ) => ( < Box fontWeight = "fontWeightBold" > < a target = "_blank" rel = "noopener noreferrer" href = { row . creatorProfileLink ! } > { row . creatorNickname } < /a> < /Box>), } , { title : 'Created' , field : 'createdTime' , highlight : true , render : ( row ) => ( < Typography variant = "body2" noWrap > { row . createdTime } < /Typography>), } , { title : 'Last updated' , field : 'updatedTime' , highlight : true , render : ( row ) => ( < Typography variant = "body2" noWrap > { row . updatedTime } < /Typography>), } , ] ; type Props = { loading : boolean ; retry : ( ) => void ; projectName : string ; page : number ; prData ? : PullRequest [ ] ; onChangePage : ( page : number ) => void ; total : number ; pageSize : number ; onChangePageSize : ( pageSize : number ) => void ; StateFilterComponent : FC < { } > ; } ; export const PullRequestsTableView = ( { projectName , loading , pageSize , page , prData , onChangePage , onChangePageSize , total , StateFilterComponent , } ) => { return ( < Table isLoading = { loading } options = { { paging : true , pageSize , padding : 'dense' } } totalCount = { total } page = { page } actions = { [ ] } data = { prData ?? [ ] } onPageChange = { onChangePage } onRowsPerPageChange = { onChangePageSize } title = { < > < Box display = "flex" alignItems = "center" > < GitHubIcon /> < Box mr = { 1 } / > < Typography variant = "h6" > { projectName } < /Typography> < /Box> < StateFilterComponent / > < />} columns={generatedColumns}/ > ) ; } ; type TableProps = { deprecated entity ? : Entity ; branch ? : string ; } ; const PullRequests = ( __props ) => { const { entity } = useEntity ( ) ; const projectName = isGithubSlugSet ( entity ) ; const [ owner , repo ] = ( projectName ?? '/' ) . split ( '/' ) ; const [ PRStatusFilter , setPRStatusFilter ] = useState < PullRequestState > ( 'open' ) ; const [ tableProps , { retry , setPage , setPageSize } ] = usePullRequests ( { state : PRStatusFilter , owner , repo , } ) ; const StateFilterComponent = ( ) => ( < Box position = "absolute" right = { 300 } top = { 20 } > < ButtonGroup color = "primary" aria - label = "text primary button group" > < Button color = { PRStatusFilter === 'open' ? 'primary' : 'default' } onClick = { ( ) => setPRStatusFilter ( 'open' ) } > OPEN < /Button> < Button color = { PRStatusFilter === 'closed' ? 'primary' : 'default' } onClick = { ( ) => setPRStatusFilter ( 'closed' ) } > CLOSED < /Button> < Button color = { PRStatusFilter === 'all' ? 'primary' : 'default' } onClick = { ( ) => setPRStatusFilter ( 'all' ) } > ALL < /Button> < /ButtonGroup> < /Box>); return ( < PullRequestsTableView { ... tableProps } StateFilterComponent = { StateFilterComponent } loading = { tableProps . loading } retry = { retry } onChangePageSize = { setPageSize } onChangePage = { setPage } / > ) ; } ; export const PullRequestsTable = ( __props ) => { const { entity } = useEntity ( ) ; const projectName = isGithubSlugSet ( entity ) ; if ( ! projectName || projectName === '' ) { return < MissingAnnotationEmptyState annotation = { GITHUB_PULL_REQUESTS_ANNOTATION } />; } return < PullRequests />; } ;