import {Component, Fragment} from 'react'; import styled from '@emotion/styled'; import {cancelDeleteRepository, deleteRepository} from 'app/actionCreators/integrations'; import {openModal} from 'app/actionCreators/modal'; import {Client} from 'app/api'; import Access from 'app/components/acl/access'; import Button from 'app/components/button'; import Confirm from 'app/components/confirm'; import ExternalLink from 'app/components/links/externalLink'; import {PanelItem} from 'app/components/panels'; import RepositoryEditForm from 'app/components/repositoryEditForm'; import Tooltip from 'app/components/tooltip'; import {IconDelete, IconEdit} from 'app/icons'; import {t} from 'app/locale'; import space from 'app/styles/space'; import {Organization, Repository, RepositoryStatus} from 'app/types'; import withOrganization from 'app/utils/withOrganization'; type DefaultProps = { showProvider?: boolean; }; type Props = DefaultProps & { organization: Organization; repository: Repository; api: Client; orgId: string; onRepositoryChange?: (data: {id: string; status: RepositoryStatus}) => void; }; class RepositoryRow extends Component { static defaultProps: DefaultProps = { showProvider: false, }; getStatusLabel(repo: Repository) { switch (repo.status) { case RepositoryStatus.PENDING_DELETION: return 'Deletion Queued'; case RepositoryStatus.DELETION_IN_PROGRESS: return 'Deletion in Progress'; case RepositoryStatus.DISABLED: return 'Disabled'; case RepositoryStatus.HIDDEN: return 'Disabled'; default: return null; } } cancelDelete = () => { const {api, orgId, repository, onRepositoryChange} = this.props; cancelDeleteRepository(api, orgId, repository.id).then( data => { if (onRepositoryChange) { onRepositoryChange(data); } }, () => {} ); }; deleteRepo = () => { const {api, orgId, repository, onRepositoryChange} = this.props; deleteRepository(api, orgId, repository.id).then( data => { if (onRepositoryChange) { onRepositoryChange(data); } }, () => {} ); }; handleEditRepo = (data: Repository) => { const {onRepositoryChange} = this.props; if (onRepositoryChange) { onRepositoryChange(data); } }; get isActive() { return this.props.repository.status === RepositoryStatus.ACTIVE; } renderDeleteButton(hasAccess) { const {repository} = this.props; const isActive = this.isActive; return ( } label={t('delete')} disabled={!hasAccess} /> ); } openModal = () => { const {repository, orgId} = this.props; openModal(({Body, Header, closeModal}) => (

{t('Edit Repository')}

)); }; render() { const {repository, showProvider, organization} = this.props; const isActive = this.isActive; const isCustomRepo = organization.features.includes('integrations-custom-scm') && repository.provider.id === 'integrations:custom_scm'; return ( {({hasAccess}) => ( {repository.name} {!isActive && — {this.getStatusLabel(repository)}} {repository.status === RepositoryStatus.PENDING_DELETION && ( {t('Cancel')} )}

{showProvider && {repository.provider.name}} {showProvider && repository.url && — } {repository.url && ( {repository.url.replace('https://', '')} )}

{isCustomRepo ? ( } label={t('edit')} disabled={ !hasAccess || (!isActive && repository.status !== RepositoryStatus.DISABLED) } onClick={() => this.openModal()} /> {this.renderDeleteButton(hasAccess)} ) : ( this.renderDeleteButton(hasAccess) )} )} ); } } const StyledPanelItem = styled(PanelItem)<{status: RepositoryStatus}>` /* shorter top padding because of title lineheight */ padding: ${space(1)} ${space(2)} ${space(2)}; justify-content: space-between; align-items: center; flex: 1; ${p => p.status === RepositoryStatus.DISABLED && ` filter: grayscale(1); opacity: 0.4; `}; &:last-child { border-bottom: none; } `; const StyledButton = styled(Button)` margin-left: ${space(1)}; `; const RepositoryTitleAndUrl = styled('div')` display: flex; flex-direction: column; `; const EditAndDelete = styled('div')` display: flex; margin-left: ${space(1)}; `; const RepositoryTitle = styled('div')` margin-bottom: ${space(1)}; /* accommodate cancel button height */ line-height: 26px; `; export default withOrganization(RepositoryRow);