ref(types): add default type parameters for RouteComponentProps

static/app/components/deprecatedAsyncComponent.tsx

@@ -15,7 +15,7 @@ import type {
 import PermissionDenied from 'sentry/views/permissionDenied';
 import RouteError from 'sentry/views/routeError';
 
-export interface AsyncComponentProps extends Partial<RouteComponentProps<{}, {}>> {}
+export interface AsyncComponentProps extends Partial<RouteComponentProps> {}
 
 export interface AsyncComponentState {
   [key: string]: any;

static/app/components/search/sources/routeSource.tsx

@@ -56,7 +56,7 @@ type DefaultProps = {
   searchOptions: Fuse.IFuseOptions<NavigationItem>;
 };
 
-type Props = RouteComponentProps<{}, {}> &
+type Props = RouteComponentProps &
   DefaultProps & {
     /**
      * Render function that renders the route matches

static/app/types/hooks.tsx

@@ -76,7 +76,7 @@ type DateRangeProps = React.ComponentProps<typeof DateRange>;
 
 type SelectorItemsProps = React.ComponentProps<typeof SelectorItems>;
 
-type DisabledMemberViewProps = RouteComponentProps<{orgId: string}, {}>;
+type DisabledMemberViewProps = RouteComponentProps<{orgId: string}>;
 
 type MemberListHeaderProps = {
   members: Member[];

static/app/types/legacyReactRouter.tsx

@@ -84,9 +84,14 @@ export interface PlainRoute<Props = any> extends RouteProps<Props> {
   indexRoute?: PlainRoute | undefined;
 }
 
-export interface RouteComponentProps<P, R, ComponentProps = any, Q = any> {
+export interface RouteComponentProps<
+  P = Record<string, string | undefined>,
+  R = Record<string, string | undefined>,
+  ComponentProps = any,
+  Q = any,
+> {
   location: Location<Q>;
-  params: P & R;
+  params: P;
   route: PlainRoute<ComponentProps>;
   routeParams: R;
   router: InjectedRouter;
@@ -100,7 +105,7 @@ type ActiveFunction = (location: LocationDescriptor, indexOnly?: boolean) => boo
 type LeaveHookFunction = (route: any, callback: RouteHook) => () => void;
 type CreatePartFunction<Part> = (pathOrLoc: LocationDescriptor, query?: any) => Part;
 
-export interface InjectedRouter<P = Record<string, string>, Q = any> {
+export interface InjectedRouter<P = Record<string, string | undefined>, Q = any> {
   createHref: CreatePartFunction<Href>;
   createPath: CreatePartFunction<Path>;
   go: GoFunction;
@@ -115,14 +120,14 @@ export interface InjectedRouter<P = Record<string, string>, Q = any> {
   setRouteLeaveHook: LeaveHookFunction;
 }
 
-export interface WithRouterProps<P = Record<string, string>, Q = any> {
+export interface WithRouterProps<P = Record<string, string | undefined>, Q = any> {
   location: Location<Q>;
   params: P;
   router: InjectedRouter<P, Q>;
   routes: PlainRoute[];
 }
 
-export interface RouteContextInterface<P = Record<string, string>, Q = any> {
+export interface RouteContextInterface<P = Record<string, string | undefined>, Q = any> {
   location: Location<Q>;
   params: P;
   router: InjectedRouter<P, Q>;

static/app/utils/withDomainRedirect.spec.tsx

@@ -24,7 +24,7 @@ const projectRoutes = [
 ];
 
 describe('withDomainRedirect', function () {
-  type Props = RouteComponentProps<{orgId: string}, {}>;
+  type Props = RouteComponentProps<{orgId: string}>;
   function MyComponent(props: Props) {
     const {params} = props;
     return <div>Org slug: {params.orgId ?? 'no org slug'}</div>;

static/app/utils/withDomainRedirect.tsx

@@ -30,7 +30,7 @@ import useOrganization from './useOrganization';
  * If either a customer domain is not being used, or if :orgId is not present in the route path, then WrappedComponent
  * is rendered.
  */
-function withDomainRedirect<P extends RouteComponentProps<{}, {}>>(
+function withDomainRedirect<P extends RouteComponentProps>(
   WrappedComponent: RouteComponent
 ) {
   return function WithDomainRedirectWrapper(props: P) {
@@ -60,7 +60,6 @@ function withDomainRedirect<P extends RouteComponentProps<{}, {}>>(
       // Regenerate the full route with the :orgId parameter omitted.
       const newParams = {...params};
       Object.keys(params).forEach(param => {
-        // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
         newParams[param] = `:${param}`;
       });
       const fullRoute = recreateRoute('', {routes, params: newParams});

static/app/utils/withDomainRequired.spec.tsx

@@ -11,7 +11,7 @@ import withDomainRequired from 'sentry/utils/withDomainRequired';
 const originalLocation = window.location;
 
 describe('withDomainRequired', function () {
-  type Props = RouteComponentProps<{orgId: string}, {}>;
+  type Props = RouteComponentProps<{orgId: string}>;
   function MyComponent(props: Props) {
     const {params} = props;
     return <div>Org slug: {params.orgId ?? 'no org slug'}</div>;

static/app/utils/withDomainRequired.tsx

@@ -28,7 +28,7 @@ import type {RouteComponent, RouteComponentProps} from 'sentry/types/legacyReact
  *
  * Whenever https://orgslug.sentry.io/ is accessed in the browser, then both conditions above will be satisfied.
  */
-export default function withDomainRequired<P extends RouteComponentProps<{}, {}>>(
+export default function withDomainRequired<P extends RouteComponentProps>(
   WrappedComponent: RouteComponent
 ) {
   return function withDomainRequiredWrapper(props: P) {

static/app/views/acceptProjectTransfer/index.tsx

@@ -11,7 +11,7 @@ import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 
-type Props = RouteComponentProps<{}, {}>;
+type Props = RouteComponentProps;
 
 type TransferDetails = {
   organizations: Organization[];

static/app/views/admin/adminLayout.tsx

@@ -39,7 +39,7 @@ const renderAdminNavigation = () => (
 
 type Props = {
   children: React.ReactNode;
-} & RouteComponentProps<{}, {}>;
+} & RouteComponentProps;
 
 function AdminLayout({children, ...props}: Props) {
   return (

static/app/views/admin/adminOrganizations.tsx

@@ -3,7 +3,7 @@ import ResultGrid from 'sentry/components/resultGrid';
 import {t} from 'sentry/locale';
 import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
 
-type Props = RouteComponentProps<{}, {}>;
+type Props = RouteComponentProps;
 
 const getRow = (row: any) => [
   <td key={row.id}>

static/app/views/admin/adminProjects.tsx

@@ -13,7 +13,7 @@ type Row = {
   status: string;
 };
 
-type Props = RouteComponentProps<{}, {}>;
+type Props = RouteComponentProps;
 
 const getRow = (row: Row) => [
   <td key="name">

static/app/views/admin/adminRelays.tsx

@@ -10,7 +10,7 @@ import withApi from 'sentry/utils/withApi';
 
 const prettyDate = (x: string) => moment(x).format('ll LTS');
 
-type Props = RouteComponentProps<{}, {}> & {api: Client};
+type Props = RouteComponentProps & {api: Client};
 
 type State = {
   loading: boolean;

static/app/views/admin/adminUserEdit.tsx

@@ -120,7 +120,7 @@ class RemoveUserModal extends Component<RemoveModalProps, RemoveModalState> {
   }
 }
 
-type Props = DeprecatedAsyncComponent['props'] & RouteComponentProps<{id: string}, {}>;
+type Props = DeprecatedAsyncComponent['props'] & RouteComponentProps<{id: string}>;
 
 type State = DeprecatedAsyncComponent['state'] & {
   user: User | null;

static/app/views/admin/adminUsers.tsx

@@ -13,7 +13,7 @@ type Row = {
   username: string;
 };
 
-type Props = RouteComponentProps<{}, {}>;
+type Props = RouteComponentProps;
 
 const getRow = (row: Row) => [
   <td key="username">

static/app/views/alerts/builder/projectProvider.tsx

@@ -12,7 +12,7 @@ import {useIsMountedRef} from 'sentry/utils/useIsMountedRef';
 import useProjects from 'sentry/utils/useProjects';
 import useScrollToTop from 'sentry/utils/useScrollToTop';
 
-type Props = RouteComponentProps<RouteParams, {}> & {
+type Props = RouteComponentProps<RouteParams> & {
   hasMetricAlerts: boolean;
   organization: Organization;
   children?: React.ReactNode;

static/app/views/alerts/create.tsx

@@ -37,7 +37,7 @@ type RouteParams = {
   projectId?: string;
 };
 
-type Props = RouteComponentProps<RouteParams, {}> & {
+type Props = RouteComponentProps<RouteParams> & {
   hasMetricAlerts: boolean;
   members: Member[] | undefined;
   organization: Organization;

static/app/views/alerts/edit.tsx

@@ -24,7 +24,7 @@ type RouteParams = {
   ruleId: string;
 };
 
-type Props = RouteComponentProps<RouteParams, {}> & {
+type Props = RouteComponentProps<RouteParams> & {
   hasMetricAlerts: boolean;
   hasUptimeAlerts: boolean;
   members: Member[] | undefined;

static/app/views/alerts/incidentRedirect.tsx

@@ -15,7 +15,7 @@ import {alertDetailsLink} from './utils';
 
 type Props = {
   organization: Organization;
-} & RouteComponentProps<{alertId: string}, {}>;
+} & RouteComponentProps<{alertId: string}>;
 
 /**
  * Reirects from an incident to the incident's metric alert details page

static/app/views/alerts/list/incidents/index.tsx

@@ -32,7 +32,7 @@ import AlertListRow from './row';
 const DOCS_URL =
   'https://docs.sentry.io/workflow/alerts-notifications/alerts/?_ga=2.21848383.580096147.1592364314-1444595810.1582160976';
 
-type Props = RouteComponentProps<{}, {}> & {
+type Props = RouteComponentProps & {
   organization: Organization;
 };
 

static/app/views/alerts/rules/crons/details.tsx

@@ -40,7 +40,7 @@ import {makeMonitorDetailsQueryKey} from 'sentry/views/monitors/utils';
 
 const DEFAULT_POLL_INTERVAL_MS = 5000;
 
-type Props = RouteComponentProps<{monitorSlug: string; projectId: string}, {}>;
+type Props = RouteComponentProps<{monitorSlug: string; projectId: string}>;
 
 function hasLastCheckIn(monitor: Monitor) {
   return monitor.environments.some(e => e.lastCheckIn);

static/app/views/alerts/rules/issue/details/ruleDetails.tsx

@@ -47,7 +47,7 @@ import AlertRuleIssuesList from './issuesList';
 import Sidebar from './sidebar';
 
 interface AlertRuleDetailsProps
-  extends RouteComponentProps<{projectId: string; ruleId: string}, {}> {}
+  extends RouteComponentProps<{projectId: string; ruleId: string}> {}
 
 const PAGE_QUERY_PARAMS = [
   'pageStatsPeriod',

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

@@ -146,7 +146,7 @@ type Props = {
   userTeamIds: string[];
   loadingProjects?: boolean;
   onChangeTitle?: (data: string) => void;
-} & RouteComponentProps<RouteParams, {}>;
+} & RouteComponentProps<RouteParams>;
 
 type State = DeprecatedAsyncComponent['state'] & {
   configs: IssueAlertConfiguration | null;

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

@@ -27,7 +27,7 @@ type Props = {
   userTeamIds: string[];
   sessionId?: string;
   wizardTemplate?: WizardRuleTemplate;
-} & RouteComponentProps<RouteParams, {}>;
+} & RouteComponentProps<RouteParams>;
 
 /**
  * Show metric rules form with an empty rule. Redirects to alerts list after creation.

static/app/views/alerts/rules/metric/details/body.tsx

@@ -47,7 +47,7 @@ import RelatedTransactions from './relatedTransactions';
 import {MetricDetailsSidebar} from './sidebar';
 import {getFilter, getPeriodInterval} from './utils';
 
-export interface MetricDetailsBodyProps extends RouteComponentProps<{}, {}> {
+export interface MetricDetailsBodyProps extends RouteComponentProps {
   api: Client;
   location: Location;
   organization: Organization;

static/app/views/alerts/rules/metric/details/index.tsx

@@ -38,7 +38,7 @@ import {ALERT_RULE_STATUS, TIME_OPTIONS, TIME_WINDOWS} from './constants';
 import DetailsHeader from './header';
 import {buildMetricGraphDateRange} from './utils';
 
-interface Props extends RouteComponentProps<{ruleId: string}, {}> {
+interface Props extends RouteComponentProps<{ruleId: string}> {
   api: Client;
   location: Location;
   organization: Organization;

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

@@ -20,7 +20,7 @@ import type {WizardRuleTemplate} from 'sentry/views/alerts/wizard/options';
 
 import RuleForm from './ruleForm';
 
-interface MetricRuleDuplicateProps extends RouteComponentProps<{}, {}> {
+interface MetricRuleDuplicateProps extends RouteComponentProps {
   project: Project;
   userTeamIds: string[];
   eventView?: EventView;

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

@@ -25,7 +25,7 @@ type Props = {
   organization: Organization;
   project: Project;
   userTeamIds: string[];
-} & RouteComponentProps<RouteParams, {}>;
+} & RouteComponentProps<RouteParams>;
 
 export function MetricRulesEdit({
   organization,

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

@@ -115,7 +115,7 @@ type Props = {
   isDuplicateRule?: boolean;
   ruleId?: string;
   sessionId?: string;
-} & RouteComponentProps<{projectId?: string; ruleId?: string}, {}> & {
+} & RouteComponentProps<{projectId?: string; ruleId?: string}> & {
     onSubmitSuccess?: FormProps['onSubmitSuccess'];
   } & DeprecatedAsyncComponent['props'];
 

static/app/views/alerts/rules/uptime/details.tsx

@@ -47,7 +47,7 @@ import {UptimeChecksTable} from './uptimeChecksTable';
 import {UptimeIssues} from './uptimeIssues';
 
 interface UptimeAlertDetailsProps
-  extends RouteComponentProps<{projectId: string; uptimeRuleId: string}, {}> {}
+  extends RouteComponentProps<{projectId: string; uptimeRuleId: string}> {}
 
 export default function UptimeAlertDetails({params}: UptimeAlertDetailsProps) {
   const api = useApi();

static/app/views/alerts/rules/uptime/edit.tsx

@@ -27,7 +27,7 @@ type Props = {
   organization: Organization;
   project: Project;
   userTeamIds: string[];
-} & RouteComponentProps<RouteParams, {}>;
+} & RouteComponentProps<RouteParams>;
 
 export function UptimeRulesEdit({params, onChangeTitle, organization, project}: Props) {
   const api = useApi();

static/app/views/alerts/wizard/index.tsx

@@ -36,7 +36,7 @@ type RouteParams = {
   projectId?: string;
 };
 
-type AlertWizardProps = RouteComponentProps<RouteParams, {}> & {
+type AlertWizardProps = RouteComponentProps<RouteParams> & {
   organization: Organization;
   projectId: string;
 };

static/app/views/app/index.tsx

@@ -43,7 +43,7 @@ import {DEMO_HEADER_HEIGHT_PX} from '../../components/demo/demoHeader';
 
 type Props = {
   children: React.ReactNode;
-} & RouteComponentProps<{orgId?: string}, {}>;
+} & RouteComponentProps<{orgId?: string}>;
 
 const InstallWizard = lazy(
   () => import('sentry/views/admin/installWizard')

static/app/views/auth/login.tsx

@@ -27,7 +27,7 @@ type ActiveTab = keyof typeof FORM_COMPONENTS;
 
 type TabConfig = [key: ActiveTab, label: string, disabled?: boolean];
 
-type Props = RouteComponentProps<{orgId?: string}, {}> & {
+type Props = RouteComponentProps<{orgId?: string}> & {
   api: Client;
 };
 

static/app/views/dashboards/create.tsx

@@ -16,7 +16,7 @@ import type {Widget} from './types';
 import {DashboardState} from './types';
 import {cloneDashboard, constructWidgetFromQuery} from './utils';
 
-type Props = RouteComponentProps<{templateId?: string; widgetId?: string}, {}> & {
+type Props = RouteComponentProps<{templateId?: string; widgetId?: string}> & {
   children: React.ReactNode;
   organization: Organization;
 };