chore(ts): converts externalIssueForm (#16308)

Author: Stephen Cefali

src/sentry/static/sentry/app/components/group/externalIssueActions.tsx

@@ -21,7 +21,7 @@ type Props = AsyncComponent['props'] & {
 
 type State = AsyncComponent['state'] & {
   showModal: boolean;
-  action: string | null;
+  action: 'create' | 'link' | null;
   selectedIntegration: GroupIntegration;
   issue: IntegrationExternalIssue | null;
 };
@@ -31,7 +31,7 @@ class ExternalIssueActions extends AsyncComponent<Props, State> {
     integration: PropTypes.object.isRequired,
   };
 
-  constructor(props, context) {
+  constructor(props: Props, context) {
     super(props, context);
 
     this.state = {
@@ -53,7 +53,7 @@ class ExternalIssueActions extends AsyncComponent<Props, State> {
       : null;
   }
 
-  deleteIssue(issueId) {
+  deleteIssue(issueId: string) {
     const {group, integration} = this.props;
     const endpoint = `/groups/${group.id}/integrations/${
       integration.id
@@ -89,7 +89,7 @@ class ExternalIssueActions extends AsyncComponent<Props, State> {
     });
   };
 
-  handleClick = action => {
+  handleClick = (action: 'create' | 'link') => {
     this.setState({action});
   };
 

src/sentry/static/sentry/app/components/group/externalIssueForm.jsx renamed to src/sentry/static/sentry/app/components/group/externalIssueForm.tsx

@@ -7,8 +7,16 @@ import {addSuccessMessage} from 'app/actionCreators/indicator';
 import AsyncComponent from 'app/components/asyncComponent';
 import FieldFromConfig from 'app/views/settings/components/forms/fieldFromConfig';
 import Form from 'app/views/settings/components/forms/form';
+import {FieldValue} from 'app/views/settings/components/forms/model';
 import SentryTypes from 'app/sentryTypes';
 import {t} from 'app/locale';
+import {
+  Group,
+  Integration,
+  PlatformExternalIssue,
+  IntegrationIssueConfig,
+  IssueConfigField,
+} from 'app/types';
 
 const MESSAGES_BY_ACTION = {
   link: t('Successfully linked issue.'),
@@ -20,7 +28,19 @@ const SUBMIT_LABEL_BY_ACTION = {
   create: t('Create Issue'),
 };
 
-class ExternalIssueForm extends AsyncComponent {
+type Props = {
+  group: Group;
+  integration: Integration;
+  action: 'create' | 'link';
+  onSubmitSuccess: (externalIssue: PlatformExternalIssue) => void;
+} & AsyncComponent['props'];
+
+type State = {
+  integrationDetails: IntegrationIssueConfig;
+  dynamicFieldValues?: {[key: string]: FieldValue};
+} & AsyncComponent['state'];
+
+class ExternalIssueForm extends AsyncComponent<Props, State> {
   static propTypes = {
     group: SentryTypes.Group.isRequired,
     integration: PropTypes.object.isRequired,
@@ -30,7 +50,7 @@ class ExternalIssueForm extends AsyncComponent {
 
   shouldRenderBadRequests = true;
 
-  getEndpoints() {
+  getEndpoints(): [string, string][] {
     const {group, integration, action} = this.props;
     return [
       [
@@ -40,7 +60,7 @@ class ExternalIssueForm extends AsyncComponent {
     ];
   }
 
-  onSubmitSuccess = data => {
+  onSubmitSuccess = (data: PlatformExternalIssue) => {
     addSuccessMessage(MESSAGES_BY_ACTION[this.props.action]);
     this.props.onSubmitSuccess(data);
   };
@@ -71,17 +91,19 @@ class ExternalIssueForm extends AsyncComponent {
     });
   };
 
-  getDynamicFields(integrationDetails) {
+  getDynamicFields(integrationDetails?: IntegrationIssueConfig) {
     integrationDetails = integrationDetails || this.state.integrationDetails;
     const {action} = this.props;
-    const config = integrationDetails[`${action}IssueConfig`];
+    const config: IssueConfigField[] = integrationDetails[`${action}IssueConfig`];
 
-    return config
-      .filter(field => field.updatesForm)
-      .reduce((a, field) => ({...a, [field.name]: field.default}), {});
+    return Object.fromEntries(
+      config
+        .filter((field: IssueConfigField) => field.updatesForm)
+        .map((field: IssueConfigField) => [field.name, field.default])
+    );
   }
 
-  onFieldChange = (label, value) => {
+  onFieldChange = (label: string, value: FieldValue) => {
     const dynamicFields = this.getDynamicFields();
     if (label in dynamicFields) {
       const dynamicFieldValues = this.state.dynamicFieldValues || {};
@@ -99,7 +121,7 @@ class ExternalIssueForm extends AsyncComponent {
     }
   };
 
-  getOptions = (field, input) => {
+  getOptions = (field: IssueConfigField, input: string) => {
     return new Promise((resolve, reject) => {
       if (!input) {
         const options = (field.choices || []).map(([value, label]) => ({value, label}));
@@ -116,14 +138,18 @@ class ExternalIssueForm extends AsyncComponent {
   };
 
   debouncedOptionLoad = debounce(
-    async (field, input, cb) => {
+    async (
+      field: IssueConfigField,
+      input: string,
+      cb: (err: Error | null, result?) => void
+    ) => {
       const query = queryString.stringify({
         ...this.state.dynamicFieldValues,
         field: field.name,
         query: input,
       });
 
-      const url = field.url;
+      const url = field.url || '';
       const separator = url.includes('?') ? '&' : '?';
       // We can't use the API client here since the URL is not scoped under the
       // API endpoints (which the client prefixes)
@@ -138,10 +164,10 @@ class ExternalIssueForm extends AsyncComponent {
     {trailing: true}
   );
 
-  getFieldProps = field =>
+  getFieldProps = (field: IssueConfigField) =>
     field.url
       ? {
-          loadOptions: input => this.getOptions(field, input),
+          loadOptions: (input: string) => this.getOptions(field, input),
           async: true,
           cache: false,
           onSelectResetsInput: false,
@@ -154,7 +180,7 @@ class ExternalIssueForm extends AsyncComponent {
   renderBody() {
     const {integrationDetails} = this.state;
     const {action, group, integration} = this.props;
-    const config = integrationDetails[`${action}IssueConfig`];
+    const config: IssueConfigField[] = integrationDetails[`${action}IssueConfig`];
 
     const initialData = {};
     config.forEach(field => {

src/sentry/static/sentry/app/types/index.tsx

@@ -701,3 +701,26 @@ export type SelectValue<T> = {
   label: string;
   value: T;
 };
+
+/**
+ * The issue config form fields we get are basically the form fields we use in the UI but with some extra information.
+ * Some fields marked optional in the form field are guaranteed to exist so we can mark them as required here
+ */
+
+export type IssueConfigField = Field & {
+  name: string;
+  default?: string;
+  choices?: [number | string, number | string][];
+  url?: string;
+  multiple?: boolean;
+};
+
+export type IntegrationIssueConfig = {
+  status: ObjectStatus;
+  name: string;
+  domainName: string;
+  linkIssueConfig?: IssueConfigField[];
+  createIssueConfig?: IssueConfigField[];
+  provider: IntegrationProvider;
+  icon: string[];
+};

src/sentry/static/sentry/app/views/settings/components/forms/fieldFromConfig.tsx

@@ -24,6 +24,9 @@ type Props = {
   field: Field;
   highlighted?: boolean;
   disabled?: boolean;
+  flexibleControlStateSize?: boolean;
+  stacked?: boolean;
+  inline?: boolean;
 
   access?: Scope[];
 };

src/sentry/static/sentry/app/views/settings/components/forms/type.tsx

@@ -34,6 +34,7 @@ type BaseField = {
   disabled?: boolean | ((props: any) => boolean);
   disabledReason?: string;
   defaultValue?: FieldValue;
+  updatesForm?: boolean;
 
   /**
    * Function to format the value displayed in the undo toast. May also be