organizationRepositories.tsx 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import AlertLink from 'sentry/components/alertLink';
  2. import {Button} from 'sentry/components/button';
  3. import EmptyMessage from 'sentry/components/emptyMessage';
  4. import ExternalLink from 'sentry/components/links/externalLink';
  5. import Panel from 'sentry/components/panels/panel';
  6. import PanelBody from 'sentry/components/panels/panelBody';
  7. import PanelHeader from 'sentry/components/panels/panelHeader';
  8. import RepositoryRow from 'sentry/components/repositoryRow';
  9. import {IconCommit} from 'sentry/icons';
  10. import {t, tct} from 'sentry/locale';
  11. import type {Repository, RepositoryStatus} from 'sentry/types/integrations';
  12. import type {Organization} from 'sentry/types/organization';
  13. import useApi from 'sentry/utils/useApi';
  14. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  15. import TextBlock from 'sentry/views/settings/components/text/textBlock';
  16. type Props = {
  17. itemList: Repository[];
  18. onRepositoryChange: (data: {id: string; status: RepositoryStatus}) => void;
  19. organization: Organization;
  20. };
  21. function OrganizationRepositories({itemList, onRepositoryChange, organization}: Props) {
  22. const api = useApi();
  23. const hasItemList = itemList && itemList.length > 0;
  24. return (
  25. <div>
  26. <SettingsPageHeader title={t('Repositories')} />
  27. <AlertLink to={`/settings/${organization.slug}/integrations/`}>
  28. {t(
  29. 'Want to add a repository to start tracking commits? Install or configure your version control integration here.'
  30. )}
  31. </AlertLink>
  32. {!hasItemList && (
  33. <div className="m-b-2">
  34. <TextBlock>
  35. {t(
  36. "Connecting a repository allows Sentry to capture commit data via webhooks. This enables features like suggested assignees and resolving issues via commit message. Once you've connected a repository, you can associate commits with releases via the API."
  37. )}
  38. &nbsp;
  39. {tct('See our [link:documentation] for more details.', {
  40. link: <ExternalLink href="https://docs.sentry.io/learn/releases/" />,
  41. })}
  42. </TextBlock>
  43. </div>
  44. )}
  45. {hasItemList ? (
  46. <Panel>
  47. <PanelHeader>{t('Added Repositories')}</PanelHeader>
  48. <PanelBody>
  49. <div>
  50. {itemList.map(repo => (
  51. <RepositoryRow
  52. api={api}
  53. key={repo.id}
  54. repository={repo}
  55. showProvider
  56. orgSlug={organization.slug}
  57. onRepositoryChange={onRepositoryChange}
  58. />
  59. ))}
  60. </div>
  61. </PanelBody>
  62. </Panel>
  63. ) : (
  64. <Panel>
  65. <EmptyMessage
  66. icon={<IconCommit size="xl" />}
  67. title={t('Sentry is better with commit data')}
  68. description={t(
  69. 'Adding one or more repositories will enable enhanced releases and the ability to resolve Sentry Issues via git message.'
  70. )}
  71. action={
  72. <Button external href="https://docs.sentry.io/learn/releases/">
  73. {t('Learn more')}
  74. </Button>
  75. }
  76. />
  77. </Panel>
  78. )}
  79. </div>
  80. );
  81. }
  82. export default OrganizationRepositories;