ref(admin): Migrate ChangeDatesModal away from deprecated form

static/gsAdmin/components/changeDatesAction.spec.tsx

@@ -0,0 +1,80 @@
+import {OrganizationFixture} from 'sentry-fixture/organization';
+
+import {SubscriptionFixture} from 'getsentry-test/fixtures/subscription';
+import {
+  renderGlobalModal,
+  screen,
+  userEvent,
+  waitFor,
+} from 'sentry-test/reactTestingLibrary';
+
+import ModalStore from 'sentry/stores/modalStore';
+
+import triggerChangeDatesModal from 'admin/components/changeDatesAction';
+
+describe('ChangeDatesAction', () => {
+  const organization = OrganizationFixture();
+  const subscription = SubscriptionFixture({
+    organization,
+    onDemandPeriodStart: '2024-01-01',
+    onDemandPeriodEnd: '2024-02-01',
+    contractPeriodStart: '2024-03-01',
+    contractPeriodEnd: '2024-04-01',
+  });
+
+  const onSuccess = jest.fn();
+
+  const modalProps = {
+    orgId: organization.slug,
+    onSuccess,
+    subscription,
+  };
+
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+    ModalStore.reset();
+    jest.clearAllMocks();
+  });
+
+  async function updateDateField(label: string, value: string) {
+    const input = await screen.findByLabelText(label);
+    await userEvent.click(input);
+    await userEvent.keyboard('{Control>}a{/Control}');
+    await userEvent.keyboard(value);
+  }
+
+  it('submits updated contract and on-demand dates', async () => {
+    const updateMock = MockApiClient.addMockResponse({
+      url: `/customers/${organization.slug}/`,
+      method: 'PUT',
+      body: {},
+    });
+
+    triggerChangeDatesModal(modalProps);
+    const {waitForModalToHide} = renderGlobalModal();
+
+    await updateDateField('Contract Period End Date', '2024-05-15');
+    await updateDateField('On-Demand Period End Date', '2024-02-10');
+
+    await userEvent.click(screen.getByRole('button', {name: 'Submit'}));
+
+    await waitForModalToHide();
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledWith(
+        `/customers/${organization.slug}/`,
+        expect.objectContaining({
+          method: 'PUT',
+          data: {
+            onDemandPeriodStart: '2024-01-01',
+            onDemandPeriodEnd: '2024-02-10',
+            contractPeriodStart: '2024-03-01',
+            contractPeriodEnd: '2024-05-15',
+          },
+        })
+      );
+    });
+
+    expect(onSuccess).toHaveBeenCalled();
+  });
+});

static/gsAdmin/components/changeDatesAction.tsx

@@ -1,44 +1,48 @@
 import {Fragment} from 'react';
+import styled from '@emotion/styled';
+
+import {Heading} from '@sentry/scraps/text';
 
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {openModal, type ModalRenderProps} from 'sentry/actionCreators/modal';
 import {Alert} from 'sentry/components/core/alert';
-import {DateTimeField} from 'sentry/components/deprecatedforms/dateTimeField';
-import Form from 'sentry/components/deprecatedforms/form';
-import withFormContext from 'sentry/components/deprecatedforms/withFormContext';
-import useApi from 'sentry/utils/useApi';
+import InputField from 'sentry/components/forms/fields/inputField';
+import Form from 'sentry/components/forms/form';
+import type {OnSubmitCallback} from 'sentry/components/forms/types';
+import {fetchMutation, useMutation} from 'sentry/utils/queryClient';
 
 import type {Subscription} from 'getsentry/types';
 
-type Props = {
+interface ChangeDatesModalProps extends ModalRenderProps {
   onSuccess: () => void;
   orgId: string;
   subscription: Subscription;
-};
-
-type ModalProps = Props & ModalRenderProps;
-
-class DateFieldNoContext extends DateTimeField {
-  getType() {
-    return 'date';
-  }
 }
 
-const DateField = withFormContext(DateFieldNoContext);
-
 function ChangeDatesModal({
   orgId,
   subscription,
   onSuccess,
   closeModal,
   Header,
   Body,
-}: ModalProps) {
-  const api = useApi();
+}: ChangeDatesModalProps) {
+  const {mutateAsync: updateSubscriptionDates, isPending: isUpdating} = useMutation<
+    Record<string, any>,
+    unknown,
+    Record<string, any>
+  >({
+    mutationFn: (payload: Record<string, any>) =>
+      fetchMutation({
+        url: `/customers/${orgId}/`,
+        method: 'PUT',
+        data: payload,
+      }),
+  });
 
-  async function onSubmit(formData: any, _onSubmitSuccess: unknown, onSubmitError: any) {
+  const onSubmit: OnSubmitCallback = async (formData, onSubmitSuccess, onSubmitError) => {
     try {
-      const postData = {
+      const postData: Record<string, any> = {
         onDemandPeriodStart: subscription.onDemandPeriodStart,
         onDemandPeriodEnd: subscription.onDemandPeriodEnd,
         contractPeriodStart: subscription.contractPeriodStart,
@@ -47,78 +51,87 @@ function ChangeDatesModal({
 
       for (const k in formData) {
         if (formData[k] !== '' && formData[k]) {
-          // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
           postData[k] = formData[k];
         }
       }
 
-      await api.requestPromise(`/customers/${orgId}/`, {
-        method: 'PUT',
-        data: postData,
-        success: () => {
-          addSuccessMessage('Contract and on-demand period dates updated');
-          onSuccess();
-        },
-      });
+      const response = await updateSubscriptionDates(postData);
 
+      addSuccessMessage('Contract and on-demand period dates updated');
+      onSubmitSuccess(response);
+      onSuccess();
       closeModal();
     } catch (err: any) {
       onSubmitError({
         responseJSON: err.responseJSON,
       });
     }
-  }
+  };
 
   return (
     <Fragment>
-      <Header>Change Contract and Current On-Demand Period Dates</Header>
+      <Header closeButton>
+        <Heading as="h3">Change Contract and Current On-Demand Period Dates</Heading>
+      </Header>
       <Body>
         <Form
           onSubmit={onSubmit}
           onCancel={closeModal}
           submitLabel="Submit"
+          submitDisabled={isUpdating}
           cancelLabel="Cancel"
         >
           <Alert.Container>
-            <Alert type="warning" showIcon={false}>
+            <Alert type="info" showIcon={false}>
               This overrides the current contract and on-demand period dates so the
               subscription may fall into a weird state.
             </Alert>
           </Alert.Container>
-          <p>To end the contract period immediately, use the End Period Now action.</p>
+          <p>
+            To end the contract period immediately, use the "End Billing Period
+            Immediately" action.
+          </p>
           <DateField
             label="On-Demand Period Start Date"
             name="onDemandPeriodStart"
             help="The new start date for the on-demand period."
             defaultValue={subscription.onDemandPeriodStart}
+            type="date"
           />
           <DateField
             label="On-Demand Period End Date"
             name="onDemandPeriodEnd"
             help="The new end date for the on-demand period."
             defaultValue={subscription.onDemandPeriodEnd}
+            type="date"
           />
           <DateField
             label="Contract Period Start Date"
             name="contractPeriodStart"
             help="The new start date for the contract period."
             defaultValue={subscription.contractPeriodStart}
+            type="date"
           />
           <DateField
             label="Contract Period End Date"
             name="contractPeriodEnd"
             help="The new end date for the contract period."
             defaultValue={subscription.contractPeriodEnd}
+            type="date"
           />
         </Form>
       </Body>
     </Fragment>
   );
 }
 
-type Options = Pick<Props, 'orgId' | 'subscription' | 'onSuccess'>;
+type Options = Omit<ChangeDatesModalProps, keyof ModalRenderProps>;
 
 const triggerChangeDatesModal = (opts: Options) =>
   openModal(deps => <ChangeDatesModal {...deps} {...opts} />);
 
 export default triggerChangeDatesModal;
+
+const DateField = styled(InputField)`
+  padding-left: 0px;
+`;