ref(ts): Extract FormProps to a type (#40223)

static/app/components/externalIssues/abstractExternalIssueForm.tsx

@@ -5,7 +5,7 @@ import * as qs from 'query-string';
 import {ModalRenderProps} from 'sentry/actionCreators/modal';
 import AsyncComponent from 'sentry/components/asyncComponent';
 import FieldFromConfig from 'sentry/components/forms/fieldFromConfig';
-import Form from 'sentry/components/forms/form';
+import Form, {FormProps} from 'sentry/components/forms/form';
 import FormModel, {FieldValue} from 'sentry/components/forms/model';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {tct} from 'sentry/locale';
@@ -284,11 +284,11 @@ export default class AbstractExternalIssueForm<
   renderNavTabs = (): React.ReactNode => null;
   renderBodyText = (): React.ReactNode => null;
   getTitle = () => tct('Issue Link Settings', {});
-  getFormProps = (): Form['props'] => {
+  getFormProps = (): FormProps => {
     throw new Error("Method 'getFormProps()' must be implemented.");
   };
 
-  getDefaultFormProps = (): Form['props'] => {
+  getDefaultFormProps = (): FormProps => {
     return {
       footerClass: 'modal-footer',
       onFieldChange: this.onFieldChange,

static/app/components/forms/apiForm.tsx

@@ -1,11 +1,11 @@
 import {useCallback} from 'react';
 
 import {addLoadingMessage, clearIndicators} from 'sentry/actionCreators/indicator';
-import Form from 'sentry/components/forms/form';
+import Form, {FormProps} from 'sentry/components/forms/form';
 import {t} from 'sentry/locale';
 import useApi from 'sentry/utils/useApi';
 
-type Props = Form['props'] & {
+type Props = FormProps & {
   apiEndpoint: string;
   apiMethod: string;
   onSubmit?: (data: Record<string, any>) => void;

static/app/components/forms/form.tsx

@@ -18,7 +18,7 @@ type RenderProps = {
 
 type RenderFunc = (props: RenderProps) => React.ReactNode;
 
-type Props = {
+export type FormProps = {
   additionalFieldProps?: {[key: string]: any};
   allowUndo?: boolean;
   /**
@@ -86,8 +86,8 @@ type Props = {
   submitPriority?: ButtonProps['priority'];
 } & Pick<FormOptions, 'onSubmitSuccess' | 'onSubmitError' | 'onFieldChange'>;
 
-export default class Form extends Component<Props> {
-  constructor(props: Props, context: FormContextData) {
+export default class Form extends Component<FormProps> {
+  constructor(props: FormProps, context: FormContextData) {
     super(props, context);
     const {
       saveOnBlur,

static/app/components/group/externalIssueForm.tsx

@@ -5,7 +5,7 @@ import AsyncComponent from 'sentry/components/asyncComponent';
 import AbstractExternalIssueForm, {
   ExternalIssueAction,
 } from 'sentry/components/externalIssues/abstractExternalIssueForm';
-import Form from 'sentry/components/forms/form';
+import {FormProps} from 'sentry/components/forms/form';
 import NavTabs from 'sentry/components/navTabs';
 import {t, tct} from 'sentry/locale';
 import {Group, Integration, IntegrationExternalIssue} from 'sentry/types';
@@ -97,7 +97,7 @@ export default class ExternalIssueForm extends AbstractExternalIssueForm<Props,
     return tct('[integration] Issue', {integration: integration.provider.name});
   };
 
-  getFormProps = (): Form['props'] => {
+  getFormProps = (): FormProps => {
     const {action} = this.state;
     return {
       ...this.getDefaultFormProps(),

static/app/components/integrationExternalMappingForm.tsx

@@ -4,7 +4,7 @@ import capitalize from 'lodash/capitalize';
 
 import {FieldFromConfig} from 'sentry/components/forms';
 import {SelectAsyncControlProps} from 'sentry/components/forms/controls/selectAsyncControl';
-import Form from 'sentry/components/forms/form';
+import Form, {FormProps} from 'sentry/components/forms/form';
 import FormModel from 'sentry/components/forms/model';
 import {Field} from 'sentry/components/forms/types';
 import {t, tct} from 'sentry/locale';
@@ -19,7 +19,7 @@ import {
   sentryNameToOption,
 } from 'sentry/utils/integrationUtil';
 
-type Props = Pick<Form['props'], 'onCancel' | 'onSubmitSuccess' | 'onSubmitError'> &
+type Props = Pick<FormProps, 'onCancel' | 'onSubmitSuccess' | 'onSubmitError'> &
   Pick<SelectAsyncControlProps, 'defaultOptions'> & {
     dataEndpoint: string;
     getBaseFormEndpoint: (mapping?: ExternalActorMappingOrSuggestion) => string;

static/app/components/repositoryEditForm.tsx

@@ -1,5 +1,5 @@
 import {FieldFromConfig} from 'sentry/components/forms';
-import Form from 'sentry/components/forms/form';
+import Form, {FormProps} from 'sentry/components/forms/form';
 import {Field} from 'sentry/components/forms/types';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
@@ -7,7 +7,7 @@ import {Repository} from 'sentry/types';
 
 import Alert from './alert';
 
-type Props = Pick<Form['props'], 'onSubmitSuccess' | 'onCancel'> & {
+type Props = Pick<FormProps, 'onSubmitSuccess' | 'onCancel'> & {
   closeModal: () => void;
   onSubmitSuccess: (data: any) => void;
   orgSlug: string;

static/app/components/repositoryProjectPathConfigForm.tsx

@@ -1,7 +1,7 @@
 import pick from 'lodash/pick';
 
 import {FieldFromConfig} from 'sentry/components/forms';
-import Form from 'sentry/components/forms/form';
+import Form, {FormProps} from 'sentry/components/forms/form';
 import {Field} from 'sentry/components/forms/types';
 import {t} from 'sentry/locale';
 import {
@@ -18,8 +18,8 @@ import {
 
 type Props = {
   integration: Integration;
-  onCancel: Form['props']['onCancel'];
-  onSubmitSuccess: Form['props']['onSubmitSuccess'];
+  onCancel: FormProps['onCancel'];
+  onSubmitSuccess: FormProps['onSubmitSuccess'];
   organization: Organization;
   projects: Project[];
   repos: Repository[];

static/app/views/alerts/rules/issue/index.tsx

@@ -23,7 +23,7 @@ import SelectControl from 'sentry/components/forms/controls/selectControl';
 import Field from 'sentry/components/forms/field';
 import FieldHelp from 'sentry/components/forms/field/fieldHelp';
 import SelectField from 'sentry/components/forms/fields/selectField';
-import Form from 'sentry/components/forms/form';
+import Form, {FormProps} from 'sentry/components/forms/form';
 import FormField from 'sentry/components/forms/formField';
 import IdBadge from 'sentry/components/idBadge';
 import Input from 'sentry/components/input';
@@ -1243,7 +1243,7 @@ class IssueRuleEditor extends AsyncView<Props, State> {
 export default withOrganization(withProjects(IssueRuleEditor));
 
 // TODO(ts): Understand why styled is not correctly inheriting props here
-const StyledForm = styled(Form)<Form['props']>`
+const StyledForm = styled(Form)<FormProps>`
   position: relative;
 `;
 

static/app/views/alerts/rules/issue/ticketRuleModal.tsx

@@ -4,7 +4,7 @@ import {addSuccessMessage} from 'sentry/actionCreators/indicator';
 import AbstractExternalIssueForm, {
   ExternalIssueFormErrors,
 } from 'sentry/components/externalIssues/abstractExternalIssueForm';
-import Form from 'sentry/components/forms/form';
+import {FormProps} from 'sentry/components/forms/form';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -110,7 +110,7 @@ class TicketRuleModal extends AbstractExternalIssueForm<Props, State> {
     return formData;
   };
 
-  onFormSubmit: Form['props']['onSubmit'] = (data, _success, _error, e, model) => {
+  onFormSubmit: FormProps['onSubmit'] = (data, _success, _error, e, model) => {
     const {onSubmitAction, closeModal} = this.props;
     const {fetchedFieldOptionsCache} = this.state;
 
@@ -125,7 +125,7 @@ class TicketRuleModal extends AbstractExternalIssueForm<Props, State> {
     }
   };
 
-  getFormProps = (): Form['props'] => {
+  getFormProps = (): FormProps => {
     const {closeModal} = this.props;
 
     return {

static/app/views/alerts/rules/metric/ruleForm.tsx

@@ -15,7 +15,7 @@ import Button from 'sentry/components/button';
 import {HeaderTitleLegend} from 'sentry/components/charts/styles';
 import CircleIndicator from 'sentry/components/circleIndicator';
 import Confirm from 'sentry/components/confirm';
-import Form from 'sentry/components/forms/form';
+import Form, {FormProps} from 'sentry/components/forms/form';
 import FormModel from 'sentry/components/forms/model';
 import * as Layout from 'sentry/components/layouts/thirds';
 import List from 'sentry/components/list';
@@ -87,7 +87,7 @@ type Props = {
   ruleId?: string;
   sessionId?: string;
 } & RouteComponentProps<{orgId: string; projectId?: string; ruleId?: string}, {}> & {
-    onSubmitSuccess?: Form['props']['onSubmitSuccess'];
+    onSubmitSuccess?: FormProps['onSubmitSuccess'];
   } & AsyncComponent['props'];
 
 type State = {