footer.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. import styled from '@emotion/styled';
  2. import Button from 'sentry/components/button';
  3. import ButtonBar from 'sentry/components/buttonBar';
  4. import Confirm from 'sentry/components/confirm';
  5. import type {LinkProps} from 'sentry/components/links/link';
  6. import {t} from 'sentry/locale';
  7. import space from 'sentry/styles/space';
  8. interface Props {
  9. goBackLocation: LinkProps['to'];
  10. invalidForm: boolean;
  11. onSave: (event: React.MouseEvent) => void;
  12. isEditing?: boolean;
  13. onDelete?: () => void;
  14. }
  15. export function Footer({
  16. goBackLocation,
  17. onSave,
  18. onDelete,
  19. invalidForm,
  20. isEditing,
  21. }: Props) {
  22. return (
  23. <Wrapper>
  24. <Actions gap={1}>
  25. <Button to={goBackLocation}>{t('Cancel')}</Button>
  26. {isEditing && onDelete && (
  27. <Confirm
  28. priority="danger"
  29. message={t('Are you sure you want to delete this widget?')}
  30. onConfirm={onDelete}
  31. >
  32. <Button priority="danger">{t('Delete')}</Button>
  33. </Confirm>
  34. )}
  35. <Button
  36. priority="primary"
  37. onClick={onSave}
  38. disabled={invalidForm}
  39. title={
  40. invalidForm
  41. ? t('Required fields must be filled out and contain valid inputs')
  42. : undefined
  43. }
  44. >
  45. {isEditing ? t('Update Widget') : t('Add Widget')}
  46. </Button>
  47. </Actions>
  48. </Wrapper>
  49. );
  50. }
  51. const Actions = styled(ButtonBar)`
  52. justify-content: flex-end;
  53. max-width: 1000px;
  54. padding: ${space(4)} ${space(2)};
  55. /* to match Layout.Main padding + Field padding-right */
  56. padding-right: calc(${space(2)} + ${space(2)});
  57. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  58. padding: ${space(4)};
  59. /* to match Layout.Main padding + Field padding-right */
  60. padding-right: calc(${space(4)} + ${space(2)});
  61. }
  62. `;
  63. const Wrapper = styled('div')`
  64. background: ${p => p.theme.background};
  65. border-top: 1px solid ${p => p.theme.gray200};
  66. `;