actionButtons.tsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import styled from '@emotion/styled';
  2. import {Button} from 'sentry/components/button';
  3. import ConfirmDelete from 'sentry/components/confirmDelete';
  4. import {IconDelete, IconStats, IconUpgrade} from 'sentry/icons';
  5. import {t} from 'sentry/locale';
  6. import {space} from 'sentry/styles/space';
  7. import {Organization, SentryApp} from 'sentry/types';
  8. type Props = {
  9. app: SentryApp;
  10. onDelete: (app: SentryApp) => void;
  11. org: Organization;
  12. showDelete: boolean;
  13. showPublish: boolean;
  14. disableDeleteReason?: string;
  15. // If you want to disable the publish or delete buttons, pass in a reason to display to the user in a tooltip
  16. disablePublishReason?: string;
  17. onPublish?: () => void;
  18. };
  19. function ActionButtons({
  20. org,
  21. app,
  22. showPublish,
  23. showDelete,
  24. onPublish,
  25. onDelete,
  26. disablePublishReason,
  27. disableDeleteReason,
  28. }: Props) {
  29. const appDashboardButton = (
  30. <StyledButton
  31. size="xs"
  32. icon={<IconStats />}
  33. to={`/settings/${org.slug}/developer-settings/${app.slug}/dashboard/`}
  34. >
  35. {t('Dashboard')}
  36. </StyledButton>
  37. );
  38. const publishRequestButton = showPublish ? (
  39. <StyledButton
  40. disabled={!!disablePublishReason}
  41. title={disablePublishReason}
  42. icon={<IconUpgrade />}
  43. size="xs"
  44. onClick={onPublish}
  45. >
  46. {t('Publish')}
  47. </StyledButton>
  48. ) : null;
  49. const deleteConfirmMessage = t(
  50. `Deleting %s will also delete any and all of its installations. This is a permanent action. Do you wish to continue?`,
  51. app.slug
  52. );
  53. const deleteButton = showDelete ? (
  54. disableDeleteReason ? (
  55. <StyledButton
  56. disabled
  57. title={disableDeleteReason}
  58. size="xs"
  59. icon={<IconDelete />}
  60. aria-label="Delete"
  61. />
  62. ) : (
  63. onDelete && (
  64. <ConfirmDelete
  65. message={deleteConfirmMessage}
  66. confirmInput={app.slug}
  67. priority="danger"
  68. onConfirm={() => onDelete(app)}
  69. >
  70. <StyledButton size="xs" icon={<IconDelete />} aria-label="Delete" />
  71. </ConfirmDelete>
  72. )
  73. )
  74. ) : null;
  75. return (
  76. <ButtonHolder>
  77. {appDashboardButton}
  78. {publishRequestButton}
  79. {deleteButton}
  80. </ButtonHolder>
  81. );
  82. }
  83. const ButtonHolder = styled('div')`
  84. flex-direction: row;
  85. display: flex;
  86. & > * {
  87. margin-left: ${space(0.5)};
  88. }
  89. `;
  90. const StyledButton = styled(Button)`
  91. color: ${p => p.theme.subText};
  92. `;
  93. export default ActionButtons;