chore(fe): Convert <ExternalIssueForm /> to an FC

static/app/components/externalIssues/abstractExternalIssueForm.tsx

@@ -18,6 +18,7 @@ import FormModel from 'sentry/components/forms/model';
 import {tct} from 'sentry/locale';
 import type {Choices, SelectValue} from 'sentry/types/core';
 import type {IntegrationIssueConfig, IssueConfigField} from 'sentry/types/integrations';
+import {defined} from 'sentry/utils';
 import type {FormField} from 'sentry/views/alerts/rules/issue/ruleNode';
 
 export type ExternalIssueAction = 'create' | 'link';
@@ -89,8 +90,9 @@ export default class AbstractExternalIssueForm<
   ): {[key: string]: FieldValue | null} => {
     return getDynamicFields({
       action: this.state.action,
-      paramConfig: integrationDetailsParam,
-      stateConfig: this.state.integrationDetails,
+      integrationDetails: defined(integrationDetailsParam)
+        ? integrationDetailsParam
+        : this.state.integrationDetails,
     });
   };
 

static/app/components/externalIssues/externalIssueForm.spec.tsx

@@ -1,12 +1,16 @@
-import styled from '@emotion/styled';
 import {GitHubIntegrationFixture} from 'sentry-fixture/githubIntegration';
 import {GroupFixture} from 'sentry-fixture/group';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ExternalIssueForm from 'sentry/components/externalIssues/externalIssueForm';
-import {makeCloseButton} from 'sentry/components/globalModal/components';
+import {
+  makeClosableHeader,
+  makeCloseButton,
+  ModalBody,
+  ModalFooter,
+} from 'sentry/components/globalModal/components';
 
 jest.mock('lodash/debounce', () => {
   const debounceMap = new Map();
@@ -28,14 +32,17 @@ jest.mock('lodash/debounce', () => {
 });
 
 describe('ExternalIssueForm', () => {
-  let group!: ReturnType<typeof GroupFixture>;
-  let integration!: ReturnType<typeof GitHubIntegrationFixture>;
+  const group = GroupFixture();
+  const integration = GitHubIntegrationFixture({externalIssues: []});
+  const organization = OrganizationFixture();
+
   let formConfig!: any;
+
+  const closeModal = jest.fn();
   const onChange = jest.fn();
+
   beforeEach(() => {
     MockApiClient.clearMockResponses();
-    group = GroupFixture();
-    integration = GitHubIntegrationFixture({externalIssues: []});
   });
 
   afterEach(() => {
@@ -50,20 +57,20 @@ describe('ExternalIssueForm', () => {
       match: [MockApiClient.matchQuery({action: 'create'})],
     });
 
-    const styledWrapper = styled<any>((c: {children: React.ReactNode}) => c.children);
     const wrapper = render(
       <ExternalIssueForm
-        Body={styledWrapper()}
-        Footer={styledWrapper()}
-        organization={OrganizationFixture()}
-        Header={c => <span>{c.children}</span>}
+        Body={ModalBody}
+        Header={makeClosableHeader(closeModal)}
+        Footer={ModalFooter}
+        CloseButton={makeCloseButton(closeModal)}
+        closeModal={closeModal}
+        onChange={onChange}
         group={group}
         integration={integration}
-        onChange={onChange}
-        CloseButton={makeCloseButton(() => {})}
-        closeModal={() => {}}
-      />
+      />,
+      {organization}
     );
+    expect(await screen.findByTestId('loading-indicator')).not.toBeInTheDocument();
     await userEvent.click(screen.getByText(action));
     return wrapper;
   };