allTeamsList.tsx 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {openCreateTeamModal} from 'sentry/actionCreators/modal';
  4. import {Button} from 'sentry/components/button';
  5. import EmptyMessage from 'sentry/components/emptyMessage';
  6. import {t, tct} from 'sentry/locale';
  7. import type {Organization, Team} from 'sentry/types/organization';
  8. import TextBlock from 'sentry/views/settings/components/text/textBlock';
  9. import AllTeamsRow from './allTeamsRow';
  10. type Props = {
  11. access: Record<string, any>;
  12. openMembership: boolean;
  13. organization: Organization;
  14. teamList: Array<Team>;
  15. };
  16. function AllTeamsList({organization, openMembership, teamList, access}: Props) {
  17. const teamNodes = teamList.map(team => (
  18. <AllTeamsRow
  19. team={team}
  20. organization={organization}
  21. openMembership={openMembership}
  22. key={team.slug}
  23. />
  24. ));
  25. if (!teamNodes.length) {
  26. const canCreateTeam = access.has('project:admin');
  27. return (
  28. <EmptyMessage>
  29. {tct('No teams here. [teamCreate]', {
  30. root: <TextBlock noMargin />,
  31. teamCreate: canCreateTeam
  32. ? tct('You can always [link:create one].', {
  33. link: (
  34. <StyledButton
  35. priority="link"
  36. onClick={() =>
  37. openCreateTeamModal({
  38. organization,
  39. })
  40. }
  41. aria-label={t('Create team')}
  42. />
  43. ),
  44. })
  45. : null,
  46. })}
  47. </EmptyMessage>
  48. );
  49. }
  50. return <Fragment>{teamNodes}</Fragment>;
  51. }
  52. export default AllTeamsList;
  53. const StyledButton = styled(Button)`
  54. font-size: ${p => p.theme.fontSizeLarge};
  55. `;