chore(ui): Upgrade to typescript 4

package.json

@@ -125,7 +125,7 @@
     "svg-sprite-loader": "^3.9.0",
     "svgo": "^1.0.3",
     "svgo-loader": "^2.1.0",
-    "typescript": "^3.8",
+    "typescript": "4.0.2",
     "u2f-api": "1.0.10",
     "webpack": "4.42.1",
     "webpack-cli": "3.3.11",

src/sentry/static/sentry/app/components/button.tsx

@@ -358,7 +358,7 @@ const getIconMargin = ({size, hasChildren}: IconProps) => {
   return size && size.endsWith('small') ? '6px' : '8px';
 };
 
-const Icon = styled('span')<IconProps>`
+const Icon = styled('span')<IconProps & Omit<StyledButtonProps, 'theme'>>`
   display: flex;
   align-items: center;
   margin-right: ${getIconMargin};

src/sentry/static/sentry/app/components/events/groupingInfo/utils.tsx

@@ -15,7 +15,7 @@ export function hasNonContributingComponent(component: EventGroupComponent | und
 }
 
 export function shouldInlineComponentValue(component: EventGroupComponent) {
-  return component.values.every(value => !isObject(value));
+  return (component.values as EventGroupComponent[]).every(value => !isObject(value));
 }
 
 export function groupingComponentFilter(

src/sentry/static/sentry/app/components/events/interfaces/spans/spanDetail.tsx

@@ -101,14 +101,14 @@ class SpanDetail extends React.Component<Props, State> {
       field: ['transaction', 'id', 'trace.span'],
       sort: ['-id'],
       query: `event.type:transaction trace:${traceID} trace.parent_span:${spanID}`,
-      project: organization.features.includes('global-views')
+      project: (organization.features.includes('global-views')
         ? [ALL_ACCESS_PROJECTS]
-        : [Number(event.projectID)],
+        : [Number(event.projectID)]) as number[] | undefined,
       start,
       end,
     };
 
-    if (query.project.length === 0) {
+    if (query.project!.length === 0) {
       delete query.project;
     }
 

src/sentry/static/sentry/app/components/events/interfaces/spans/utils.tsx

@@ -307,6 +307,8 @@ export const setBodyUserSelect = (nextValues: UserSelectValues): UserSelectValue
     // MozUserSelect is not typed in TS
     // @ts-ignore
     MozUserSelect: document.body.style.MozUserSelect,
+    // msUserSelect is not typed in TS
+    // @ts-ignore
     msUserSelect: document.body.style.msUserSelect,
     webkitUserSelect: document.body.style.webkitUserSelect,
   };
@@ -315,6 +317,8 @@ export const setBodyUserSelect = (nextValues: UserSelectValues): UserSelectValue
   // MozUserSelect is not typed in TS
   // @ts-ignore
   document.body.style.MozUserSelect = nextValues.MozUserSelect || '';
+  // msUserSelect is not typed in TS
+  // @ts-ignore
   document.body.style.msUserSelect = nextValues.msUserSelect || '';
   document.body.style.webkitUserSelect = nextValues.webkitUserSelect || '';
 

src/sentry/static/sentry/app/components/selectMembers/index.tsx

@@ -77,7 +77,7 @@ type FilterOption<T> = {
  * A component that allows you to select either members and/or teams
  */
 class SelectMembers extends React.Component<Props, State> {
-  static propTypes = {
+  static propTypes: any = {
     project: SentryTypes.Project,
     organization: SentryTypes.Organization,
     value: PropTypes.string,

src/sentry/static/sentry/app/data/forms/projectGeneralSettings.tsx

@@ -245,7 +245,7 @@ export const fields: Record<string, Field> = {
             `This can be used to modify the fingerprinting rules on the server with custom rules.
         Rules follow the pattern [pattern].`,
             {
-              pattern: <code>matcher:glob -> fingerprint, values</code>,
+              pattern: <code>matcher:glob -&gt; fingerprint, values</code>,
             }
           )}
         </div>

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

@@ -1076,7 +1076,7 @@ export type NewQuery = {
   createdBy?: User;
 
   // Query and Table
-  query: string;
+  query?: string;
   fields: Readonly<string[]>;
   widths?: Readonly<string[]>;
   orderby?: string;

src/sentry/static/sentry/app/utils/discover/eventView.tsx

@@ -918,7 +918,7 @@ class EventView {
     const environment = this.environment as string[];
 
     // generate event query
-    const eventQuery: EventQuery & LocationQuery = Object.assign(
+    const eventQuery = Object.assign(
       omit(picked, DATETIME_QUERY_STRING_KEYS),
       normalizedTimeWindowParams,
       {
@@ -929,7 +929,7 @@ class EventView {
         per_page: DEFAULT_PER_PAGE,
         query: this.query,
       }
-    );
+    ) as EventQuery & LocationQuery;
 
     if (!eventQuery.sort) {
       delete eventQuery.sort;

src/sentry/static/sentry/app/utils/withApi.tsx

@@ -4,7 +4,7 @@ import {Client} from 'app/api';
 import getDisplayName from 'app/utils/getDisplayName';
 
 type InjectedApiProps = {
-  api: Client;
+  api?: Client;
 };
 
 type WrappedProps<P> = Omit<P, keyof InjectedApiProps> & Partial<InjectedApiProps>;

src/sentry/static/sentry/app/utils/withConfig.tsx

@@ -7,7 +7,7 @@ import getDisplayName from 'app/utils/getDisplayName';
 import ConfigStore from 'app/stores/configStore';
 
 type InjectedConfigProps = {
-  config: Config;
+  config?: Config;
 };
 
 type State = {

src/sentry/static/sentry/app/utils/withIssueTags.tsx

@@ -9,7 +9,7 @@ import TagStore from 'app/stores/tagStore';
 import {User, TagCollection} from 'app/types';
 
 type InjectedTagsProps = {
-  tags: TagCollection;
+  tags?: TagCollection;
 };
 
 type State = {

src/sentry/static/sentry/app/utils/withOrganization.tsx

@@ -5,7 +5,7 @@ import getDisplayName from 'app/utils/getDisplayName';
 import {Organization, LightWeightOrganization} from 'app/types';
 
 type InjectedOrganizationProps = {
-  organization: Organization | LightWeightOrganization;
+  organization?: Organization | LightWeightOrganization;
 };
 
 const withOrganization = <P extends InjectedOrganizationProps>(

src/sentry/static/sentry/app/utils/withOrganizations.tsx

@@ -8,7 +8,7 @@ import {OrganizationSummary} from 'app/types';
 
 type InjectedOrganizationsProps = {
   organizationsLoading?: boolean;
-  organizations: OrganizationSummary[];
+  organizations?: OrganizationSummary[];
 };
 
 type State = {

src/sentry/static/sentry/app/utils/withProject.tsx

@@ -5,7 +5,7 @@ import getDisplayName from 'app/utils/getDisplayName';
 import {Project} from 'app/types';
 
 type InjectedProjectProps = {
-  project: Project;
+  project?: Project;
 };
 
 /**

src/sentry/static/sentry/app/utils/withSavedSearches.tsx

@@ -7,9 +7,9 @@ import getDisplayName from 'app/utils/getDisplayName';
 import {SavedSearch} from 'app/types';
 
 type InjectedSavedSearchesProps = {
-  savedSearches: SavedSearch[];
-  savedSearchLoading: boolean;
-  savedSearch: SavedSearch | null;
+  savedSearches?: SavedSearch[];
+  savedSearchLoading?: boolean;
+  savedSearch?: SavedSearch | null;
 };
 
 type State = {

src/sentry/static/sentry/app/utils/withSentryAppComponents.tsx

@@ -9,7 +9,7 @@ import SentryAppComponentsStore from 'app/stores/sentryAppComponentsStore';
 type Component = {};
 
 type InjectedAppComponentsProps = {
-  components: Component[];
+  components?: Component[];
 };
 
 type State = {

src/sentry/static/sentry/app/utils/withTags.tsx

@@ -7,7 +7,7 @@ import TagStore from 'app/stores/tagStore';
 import {TagCollection} from 'app/types';
 
 type InjectedTagsProps = {
-  tags: TagCollection;
+  tags?: TagCollection;
 };
 
 type State = {

src/sentry/static/sentry/app/views/alerts/details/activity/index.tsx

@@ -211,7 +211,6 @@ class ActivityContainer extends React.PureComponent<Props, State> {
 
     return (
       <Activity
-        noteInputId={this.state.noteInputId}
         alertId={alertId}
         me={me}
         api={api}

src/sentry/static/sentry/app/views/eventsV2/eventDetails/content.tsx

@@ -127,7 +127,7 @@ class EventDetailsContent extends AsyncComponent<Props, State> {
     }
     const eventReference = {...event};
     if (eventReference.id) {
-      delete eventReference.id;
+      delete (eventReference as any).id;
     }
     const tagKey = this.generateTagKey(tag);
     const nextView = getExpandedResults(eventView, {[tagKey]: tag.value}, eventReference);

src/sentry/static/sentry/app/views/eventsV2/queryList.tsx

@@ -235,7 +235,7 @@ class QueryList extends React.Component<Props> {
           onCursor={(cursor: string, path: string, query: Query, direction: number) => {
             const offset = Number(cursor.split(':')[1]);
 
-            const newQuery = {...query, cursor};
+            const newQuery: Query & {cursor?: string} = {...query, cursor};
             const isPrevious = direction === -1;
 
             if (offset <= 0 && isPrevious) {

src/sentry/static/sentry/app/views/settings/projectAlerts/issueEditor/index.tsx

@@ -212,7 +212,7 @@ class IssueRuleEditor extends AsyncView<Props, State> {
     const endpoint = `/projects/${organization.slug}/${project.slug}/rules/${ruleId}`;
 
     if (rule && rule.environment === ALL_ENVIRONMENTS_KEY) {
-      delete rule.environment;
+      delete (rule as any).environment;
     }
 
     addLoadingMessage();

yarn.lock

@@ -15937,12 +15937,7 @@ typescript-template-language-service-decorator@^2.2.0:
   resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-2.2.0.tgz#4ee6d580f307fb9239978e69626f2775b8a59b2a"
   integrity sha512-xiolqt1i7e22rpqMaprPgSFVgU64u3b9n6EJlAaUYE61jumipKAdI1+O5khPlWslpTUj80YzjUKjJ2jxT0D74w==
 
-typescript@^3.8:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
-  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
-
-typescript@^4.0.2:
+[email protected], typescript@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2"
   integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==