ref(admin): Migrate end immediate action from deprecated forms

static/gsAdmin/components/nextBillingPeriodAction.spec.tsx

@@ -0,0 +1,58 @@
+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 triggerEndPeriodEarlyModal from 'admin/components/nextBillingPeriodAction';
+
+describe('NextBillingPeriodAction', () => {
+  const organization = OrganizationFixture();
+  const subscription = SubscriptionFixture({organization});
+  const onSuccess = jest.fn();
+
+  const modalProps = {
+    orgId: organization.slug,
+    onSuccess,
+    subscription,
+  };
+
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+    ModalStore.reset();
+    jest.clearAllMocks();
+  });
+
+  it('ends the current period immediately', async () => {
+    const updateMock = MockApiClient.addMockResponse({
+      url: `/customers/${organization.slug}/`,
+      method: 'PUT',
+      body: {},
+    });
+
+    triggerEndPeriodEarlyModal(modalProps);
+    const {waitForModalToHide} = renderGlobalModal();
+
+    await userEvent.click(screen.getByRole('button', {name: 'Submit'}));
+
+    await waitForModalToHide();
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledWith(
+        `/customers/${organization.slug}/`,
+        expect.objectContaining({
+          method: 'PUT',
+          data: {endPeriodEarly: true},
+        })
+      );
+    });
+
+    expect(onSuccess).toHaveBeenCalled();
+  });
+});

static/gsAdmin/components/nextBillingPeriodAction.tsx

@@ -1,64 +1,84 @@
 import {Fragment} from 'react';
 
+import {Heading} from '@sentry/scraps/text';
+
 import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {openModal, type ModalRenderProps} from 'sentry/actionCreators/modal';
-import Form from 'sentry/components/deprecatedforms/form';
-import useApi from 'sentry/utils/useApi';
+import {Alert} from 'sentry/components/core/alert';
+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 EndPeriodEarlyModalProps extends ModalRenderProps {
   onSuccess: () => void;
   orgId: string;
   subscription: Subscription;
-};
-
-type ModalProps = Props & ModalRenderProps;
+}
 
-function EndPeriodEarlyModal({orgId, onSuccess, closeModal, Header, Body}: ModalProps) {
-  const api = useApi();
+function EndPeriodEarlyModal({
+  orgId,
+  onSuccess,
+  closeModal,
+  Header,
+  Body,
+}: EndPeriodEarlyModalProps) {
+  const {mutateAsync: endPeriodEarly, isPending} = useMutation<any>({
+    mutationFn: () =>
+      fetchMutation({
+        url: `/customers/${orgId}/`,
+        method: 'PUT',
+        data: {endPeriodEarly: true},
+      }),
+  });
 
-  async function onSubmit(_: any, _onSubmitSuccess: any, onSubmitError: any) {
+  const onSubmit: OnSubmitCallback = async (
+    _formData,
+    onSubmitSuccess,
+    onSubmitError
+  ) => {
     try {
-      const postData = {
-        endPeriodEarly: true,
-      };
-
-      await api.requestPromise(`/customers/${orgId}/`, {
-        method: 'PUT',
-        data: postData,
-        success: () => {
-          addSuccessMessage('Currrent period ended successfully');
-          onSuccess();
-        },
-      });
+      const response = await endPeriodEarly();
 
+      addSuccessMessage('Current period ended successfully');
+      onSubmitSuccess(response);
+      onSuccess();
       closeModal();
     } catch (err: any) {
       onSubmitError({
         responseJSON: err.responseJSON,
       });
     }
-  }
+  };
 
   return (
     <Fragment>
-      <Header>End Current Period Immediately</Header>
+      <Header closeButton>
+        <Heading as="h3">End Current Period Immediately</Heading>
+      </Header>
       <Body>
         <Form
           onSubmit={onSubmit}
           onCancel={closeModal}
           submitLabel="Submit"
+          submitDisabled={isPending}
           cancelLabel="Cancel"
         >
+          <Alert.Container>
+            <Alert type="warning" showIcon={false}>
+              Ending the current billing period will immediately start the next billing
+              cycle and may impact invoicing and usage proration.
+            </Alert>
+          </Alert.Container>
           <p>End the current billing period immediately and start a new one.</p>
         </Form>
       </Body>
     </Fragment>
   );
 }
 
-type Options = Pick<Props, 'orgId' | 'subscription' | 'onSuccess'>;
+type Options = Omit<EndPeriodEarlyModalProps, keyof ModalRenderProps>;
 
 const triggerEndPeriodEarlyModal = (opts: Options) =>
   openModal(deps => <EndPeriodEarlyModal {...deps} {...opts} />);