changeContractEndDateAction.tsx 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import {Fragment} from 'react';
  2. import moment from 'moment-timezone';
  3. import {openModal} from 'sentry/actionCreators/modal';
  4. import {Button} from 'sentry/components/core/button';
  5. import DateTimeField from 'sentry/components/deprecatedforms/dateTimeField';
  6. import Form from 'sentry/components/deprecatedforms/form';
  7. class DateField extends DateTimeField {
  8. getType() {
  9. return 'date';
  10. }
  11. }
  12. type Props = {
  13. contractPeriodEnd: string;
  14. onAction: (data: any) => void;
  15. };
  16. const openActionModal = ({onAction, contractPeriodEnd}: Props) =>
  17. openModal(({Header, Body, closeModal}) => (
  18. <Fragment>
  19. <Header>Update Contract End Date</Header>
  20. <Body>
  21. <Form
  22. onSubmit={formData => {
  23. const postData = {contractPeriodEnd};
  24. for (const k in formData) {
  25. if (formData[k] !== '' && formData[k] !== null) {
  26. // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
  27. postData[k] = formData[k];
  28. }
  29. }
  30. onAction(postData);
  31. closeModal();
  32. }}
  33. onCancel={closeModal}
  34. submitLabel="Submit"
  35. cancelLabel="Cancel"
  36. footerClass="modal-footer"
  37. >
  38. <DateField
  39. label="End Date"
  40. name="contractPeriodEnd"
  41. help="The date at which this contract should end."
  42. defaultValue={contractPeriodEnd}
  43. />
  44. </Form>
  45. </Body>
  46. </Fragment>
  47. ));
  48. function ChangeContractEndDateAction(props: Props) {
  49. return (
  50. <Button priority="link" size="zero" onClick={() => openActionModal(props)}>
  51. {moment(props.contractPeriodEnd).format('ll')}
  52. </Button>
  53. );
  54. }
  55. export default ChangeContractEndDateAction;