import React, { useState, useCallback } from 'react' import { mdiChevronDown, mdiChevronUp } from '@mdi/js' import classNames from 'classnames' import { Button, Icon, ErrorAlert } from '@sourcegraph/wildcard' import { DiffStatStack } from '../../../components/diff/DiffStat' import type { ExternalChangesetFields } from '../../../graphql-operations' import type { queryExternalChangesetWithFileDiffs as _queryExternalChangesetWithFileDiffs } from '../detail/backend' import { ChangesetCheckStatusCell } from '../detail/changesets/ChangesetCheckStatusCell' import { ChangesetFileDiff } from '../detail/changesets/ChangesetFileDiff' import { ChangesetReviewStatusCell } from '../detail/changesets/ChangesetReviewStatusCell' import { ExternalChangesetInfoCell } from '../detail/changesets/ExternalChangesetInfoCell' import { ChangesetCloseActionClose, ChangesetCloseActionKept } from './ChangesetCloseAction' import styles from './ExternalChangesetCloseNode.module.scss' export interface ExternalChangesetCloseNodeProps { node: ExternalChangesetFields willClose: boolean viewerCanAdminister: boolean /** For testing only. */ queryExternalChangesetWithFileDiffs?: typeof _queryExternalChangesetWithFileDiffs } export const ExternalChangesetCloseNode: React.FunctionComponent< React.PropsWithChildren > = ({ node, willClose, viewerCanAdminister, queryExternalChangesetWithFileDiffs }) => { const [isExpanded, setIsExpanded] = useState(false) const toggleIsExpanded = useCallback>( event => { event.preventDefault() setIsExpanded(!isExpanded) }, [isExpanded] ) return ( <> {willClose ? ( ) : ( )}

{node.checkState && } {node.reviewState && } {node.diffStat && }

{node.checkState && } {node.reviewState && }

{node.diffStat && }

{/* The button for expanding the information used on xs devices. */} {isExpanded && (

{node.error && }

)} ) }