fix(ui): Typescript 4 misc fixes

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/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

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import debounce from 'lodash/debounce';
 import styled from '@emotion/styled';
@@ -14,7 +13,6 @@ import IdBadge from 'app/components/idBadge';
 import MemberListStore from 'app/stores/memberListStore';
 import ProjectsStore from 'app/stores/projectsStore';
 import SelectControl from 'app/components/forms/selectControl';
-import SentryTypes from 'app/sentryTypes';
 import TeamStore from 'app/stores/teamStore';
 import Tooltip from 'app/components/tooltip';
 import withApi from 'app/utils/withApi';
@@ -77,18 +75,6 @@ type FilterOption<T> = {
  * A component that allows you to select either members and/or teams
  */
 class SelectMembers extends React.Component<Props, State> {
-  static propTypes = {
-    project: SentryTypes.Project,
-    organization: SentryTypes.Organization,
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    onInputChange: PropTypes.func,
-    disabled: PropTypes.bool,
-    styles: PropTypes.shape({
-      control: PropTypes.func,
-    }),
-  };
-
   state: State = {
     loading: false,
     inputValue: '',

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

@@ -249,7 +249,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]. [docs:Read the docs] for more information.`,
             {
-              pattern: <code>matcher:glob -> fingerprint, values</code>,
+              pattern: <code>matcher:glob -&gt; fingerprint, values</code>,
               docs: (
                 <ExternalLink href="https://docs.sentry.io/platform-redirect/?next=%2Fdata-management%2Fevent-grouping%2Fserver-side-fingerprinting%2F" />
               ),

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

@@ -58,7 +58,7 @@ export type UnsavedIssueAlertRule = {
   actions: IssueAlertRuleAction[];
   conditions: IssueAlertRuleCondition[];
   filters: IssueAlertRuleCondition[];
-  environment: null | string;
+  environment?: null | string;
   frequency: number;
   name: string;
 };

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

@@ -1082,7 +1082,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/views/alerts/details/activity/index.tsx

@@ -212,7 +212,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) {