import {Fragment} from 'react';
import styled from '@emotion/styled';
import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
import {openModal} from 'sentry/actionCreators/modal';
import {DropdownMenu} from 'sentry/components/dropdownMenu';
import ExternalLink from 'sentry/components/links/externalLink';
import PanelTable from 'sentry/components/panels/panelTable';
import TimeSince from 'sentry/components/timeSince';
import {IconEllipsis, IconOpen} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {CodeOwner, CodeownersFile, Project} from 'sentry/types';
import {getCodeOwnerIcon} from 'sentry/utils/integrationUtil';
import useApi from 'sentry/utils/useApi';
import useOrganization from 'sentry/utils/useOrganization';
import ViewCodeOwnerModal, {modalCss} from './viewCodeOwnerModal';
interface CodeOwnerFileTableProps {
codeowners: CodeOwner[];
disabled: boolean;
onDelete: (data: CodeOwner) => void;
onUpdate: (data: CodeOwner) => void;
project: Project;
}
/**
* A list of codeowner files being used for this project
* If you're looking for ownership rules table see `OwnershipRulesTable`
*/
export function CodeOwnerFileTable({
codeowners,
project,
onUpdate,
onDelete,
disabled,
}: CodeOwnerFileTableProps) {
const api = useApi();
const organization = useOrganization();
// Do we need an empty state instead?
if (codeowners.length === 0) {
return null;
}
const handleView = (codeowner: CodeOwner) => () => {
// Open modal with codeowner file
openModal(deps => , {modalCss});
};
const handleSync = (codeowner: CodeOwner) => async () => {
try {
const codeownerFile: CodeownersFile = await api.requestPromise(
`/organizations/${organization.slug}/code-mappings/${codeowner.codeMappingId}/codeowners/`,
{
method: 'GET',
}
);
const data = await api.requestPromise(
`/projects/${organization.slug}/${project.slug}/codeowners/${codeowner.id}/`,
{
method: 'PUT',
data: {raw: codeownerFile.raw},
}
);
onUpdate({...codeowner, ...data});
addSuccessMessage(t('CODEOWNERS file sync successful.'));
} catch (_err) {
addErrorMessage(t('An error occurred trying to sync CODEOWNERS file.'));
}
};
const handleDelete = (codeowner: CodeOwner) => async () => {
try {
await api.requestPromise(
`/projects/${organization.slug}/${project.slug}/codeowners/${codeowner.id}/`,
{
method: 'DELETE',
}
);
onDelete(codeowner);
addSuccessMessage(t('Deletion successful'));
} catch {
// no 4xx errors should happen on delete
addErrorMessage(t('An error occurred'));
}
};
return (
{codeowners.map(codeowner => (
{getCodeOwnerIcon(codeowner.provider)}
{codeowner.codeMapping?.repoName}
{codeowner.codeMapping?.stackRoot}
{codeowner.codeMapping?.sourceRoot}
{codeowner.codeOwnersUrl === 'unknown' ? null : (
{t(
'View in %s',
codeowner.codeMapping?.provider?.name ?? codeowner.provider
)}
)}
,
showChevron: false,
disabled,
}}
disabledKeys={disabled ? ['sync', 'delete'] : []}
/>
))}
);
}
const StyledPanelTable = styled(PanelTable)`
grid-template-columns: 1fr 1fr 1fr auto min-content min-content;
position: static;
overflow: auto;
white-space: nowrap;
`;
const FlexCenter = styled('div')`
display: flex;
align-items: center;
gap: ${space(1)};
`;
const StyledExternalLink = styled(ExternalLink)`
display: flex;
align-items: center;
gap: ${space(1)};
`;