chore(hybrid-cloud): Replace withRouter with hooks part 3 (#41786)

static/app/components/events/interfaces/spans/index.tsx

@@ -1,6 +1,4 @@
 import {useMemo} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {withRouter, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 import {Observer} from 'mobx-react';
@@ -17,6 +15,7 @@ import {objectIsEmpty} from 'sentry/utils';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {QuickTraceContext} from 'sentry/utils/performance/quickTrace/quickTraceContext';
 import {TraceError} from 'sentry/utils/performance/quickTrace/types';
+import {useLocation} from 'sentry/utils/useLocation';
 import withOrganization from 'sentry/utils/withOrganization';
 
 import * as AnchorLinkManager from './anchorLinkManager';
@@ -31,7 +30,7 @@ type Props = {
   event: EventTransaction;
   organization: Organization;
   affectedSpanIds?: string[];
-} & WithRouterProps;
+};
 
 function TraceErrorAlerts({
   isLoading,
@@ -85,7 +84,8 @@ function TraceErrorAlerts({
   );
 }
 
-function SpansInterface({event, affectedSpanIds, organization, location}: Props) {
+function SpansInterface({event, affectedSpanIds, organization}: Props) {
+  const location = useLocation();
   const parsedTrace = useMemo(() => parseTrace(event), [event]);
 
   const waterfallModel = useMemo(
@@ -192,4 +192,4 @@ const ErrorLabel = styled('div')`
   margin-bottom: ${space(1)};
 `;
 
-export default withRouter(withOrganization(SpansInterface));
+export default withOrganization(SpansInterface);

static/app/components/modals/widgetViewerModal.tsx

@@ -47,7 +47,7 @@ import {MetricsCardinalityProvider} from 'sentry/utils/performance/contexts/metr
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {decodeInteger, decodeList, decodeScalar} from 'sentry/utils/queryString';
 import useApi from 'sentry/utils/useApi';
-import {useParams} from 'sentry/utils/useParams';
+import {useLocation} from 'sentry/utils/useLocation';
 import {useRouteContext} from 'sentry/utils/useRouteContext';
 import withPageFilters from 'sentry/utils/withPageFilters';
 import {DisplayType, Widget, WidgetType} from 'sentry/views/dashboardsV2/types';
@@ -168,8 +168,8 @@ function WidgetViewerModal(props: Props) {
     pageLinks: defaultPageLinks,
     seriesResultsType,
   } = props;
-  const {location, router, routes} = useRouteContext();
-  const params = useParams();
+  const location = useLocation();
+  const {router} = useRouteContext();
   const shouldShowSlider = organization.features.includes('widget-viewer-modal-minimap');
   // Get widget zoom from location
   // We use the start and end query params for just the initial state
@@ -832,9 +832,6 @@ function WidgetViewerModal(props: Props) {
             ) : (
               <MemoizedWidgetCardChartContainer
                 location={location}
-                router={router}
-                routes={routes}
-                params={params}
                 api={api}
                 organization={organization}
                 selection={modalChartSelection.current}

static/app/components/version.tsx

@@ -1,5 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import {withRouter, WithRouterProps} from 'react-router';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -12,6 +10,7 @@ import space from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {formatVersion} from 'sentry/utils/formatters';
 import theme from 'sentry/utils/theme';
+import {useLocation} from 'sentry/utils/useLocation';
 import withOrganization from 'sentry/utils/withOrganization';
 
 type Props = {
@@ -61,8 +60,8 @@ const Version = ({
   projectId,
   truncate,
   className,
-  location,
-}: WithRouterProps & Props) => {
+}: Props) => {
+  const location = useLocation();
   const versionToDisplay = formatVersion(version, withPackage);
 
   let releaseDetailProjectId: null | undefined | string | string[];
@@ -187,8 +186,4 @@ const TooltipClipboardIconWrapper = styled('span')`
   }
 `;
 
-type PropsWithoutOrg = Omit<Props, 'organization'>;
-
-export default withOrganization(
-  withRouter(Version)
-) as React.ComponentClass<PropsWithoutOrg>;
+export default withOrganization(Version);

static/app/views/dashboardsV2/widgetCard/index.tsx

@@ -230,6 +230,7 @@ class WidgetCard extends Component<Props, State> {
       noDashboardsMEPProvider,
       dashboardFilters,
       isWidgetInvalid,
+      location,
     } = this.props;
 
     if (widget.displayType === DisplayType.TOP_N) {
@@ -289,6 +290,7 @@ class WidgetCard extends Component<Props, State> {
                 </Fragment>
               ) : noLazyLoad ? (
                 <WidgetCardChartContainer
+                  location={location}
                   api={api}
                   organization={organization}
                   selection={selection}
@@ -303,6 +305,7 @@ class WidgetCard extends Component<Props, State> {
               ) : (
                 <LazyLoad once resize height={200}>
                   <WidgetCardChartContainer
+                    location={location}
                     api={api}
                     organization={organization}
                     selection={selection}

static/app/views/dashboardsV2/widgetCard/widgetCardChartContainer.tsx

@@ -1,9 +1,8 @@
 import {Fragment} from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {withRouter, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 import type {DataZoomComponentOption} from 'echarts';
 import {LegendComponentOption} from 'echarts';
+import {Location} from 'history';
 
 import {Client} from 'sentry/api';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
@@ -12,6 +11,8 @@ import {Organization, PageFilters} from 'sentry/types';
 import {EChartEventHandler, Series} from 'sentry/types/echarts';
 import {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import {AggregationOutputType} from 'sentry/utils/discover/fields';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useRouteContext} from 'sentry/utils/useRouteContext';
 
 import {DashboardFilters, Widget, WidgetType} from '../types';
 
@@ -21,8 +22,9 @@ import IssueWidgetQueries from './issueWidgetQueries';
 import ReleaseWidgetQueries from './releaseWidgetQueries';
 import WidgetQueries from './widgetQueries';
 
-type Props = WithRouterProps & {
+type Props = {
   api: Client;
+  location: Location;
   organization: Organization;
   selection: PageFilters;
   widget: Widget;
@@ -52,8 +54,6 @@ type Props = WithRouterProps & {
 };
 
 export function WidgetCardChartContainer({
-  location,
-  router,
   api,
   organization,
   selection,
@@ -72,6 +72,8 @@ export function WidgetCardChartContainer({
   noPadding,
   chartZoomOptions,
 }: Props) {
+  const location = useLocation();
+  const {router} = useRouteContext();
   if (widget.widgetType === WidgetType.ISSUE) {
     return (
       <IssueWidgetQueries
@@ -198,7 +200,7 @@ export function WidgetCardChartContainer({
   );
 }
 
-export default withRouter(WidgetCardChartContainer);
+export default WidgetCardChartContainer;
 
 const StyledTransparentLoadingMask = styled(props => (
   <TransparentLoadingMask {...props} maskBackgroundColor="transparent" />

static/app/views/issueList/filters.tsx

@@ -1,5 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import {withRouter, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 
 import DatePageFilter from 'sentry/components/datePageFilter';
@@ -12,10 +10,11 @@ import {
 } from 'sentry/components/smartSearchBar/actions';
 import space from 'sentry/styles/space';
 import {Organization, SavedSearch} from 'sentry/types';
+import {useLocation} from 'sentry/utils/useLocation';
 
 import IssueListSearchBar from './searchBar';
 
-interface Props extends WithRouterProps {
+interface Props {
   onSearch: (query: string) => void;
   organization: Organization;
   query: string;
@@ -23,14 +22,9 @@ interface Props extends WithRouterProps {
   sort: string;
 }
 
-function IssueListFilters({
-  organization,
-  savedSearch,
-  query,
-  sort,
-  onSearch,
-  location,
-}: Props) {
+function IssueListFilters({organization, savedSearch, query, sort, onSearch}: Props) {
+  const location = useLocation();
+
   const pinnedSearch = savedSearch?.isPinned ? savedSearch : undefined;
 
   return (
@@ -86,4 +80,4 @@ const StyledIssueListSearchBar = styled(IssueListSearchBar)`
   }
 `;
 
-export default withRouter(IssueListFilters);
+export default IssueListFilters;

static/app/views/issueList/issueListSetAsDefault.tsx

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
-import {browserHistory, withRouter, WithRouterProps} from 'react-router';
+import {browserHistory} from 'react-router';
 import isNil from 'lodash/isNil';
 
 import Button from 'sentry/components/button';
@@ -8,10 +7,11 @@ import {IconBookmark} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {Organization, SavedSearch, SavedSearchType} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
+import {useLocation} from 'sentry/utils/useLocation';
 import {usePinSearch} from 'sentry/views/issueList/mutations/usePinSearch';
 import {useUnpinSearch} from 'sentry/views/issueList/mutations/useUnpinSearch';
 
-interface IssueListSetAsDefaultProps extends WithRouterProps {
+interface IssueListSetAsDefaultProps {
   organization: Organization;
   query: string;
   savedSearch: SavedSearch | null;
@@ -19,12 +19,13 @@ interface IssueListSetAsDefaultProps extends WithRouterProps {
 }
 
 const IssueListSetAsDefault = ({
-  location,
   organization,
   savedSearch,
   sort,
   query,
 }: IssueListSetAsDefaultProps) => {
+  const location = useLocation();
+
   const pinnedSearch = savedSearch?.isPinned ? savedSearch : undefined;
   const pinnedSearchActive = !isNil(pinnedSearch);
 
@@ -88,4 +89,4 @@ const IssueListSetAsDefault = ({
   );
 };
 
-export default withRouter(IssueListSetAsDefault);
+export default IssueListSetAsDefault;

static/app/views/organizationGroupDetails/groupEventAttachments/groupEventAttachmentsFilter.tsx

@@ -1,5 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import {withRouter, WithRouterProps} from 'react-router';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 import xor from 'lodash/xor';
@@ -10,6 +8,7 @@ import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Project} from 'sentry/types';
 import {isMobilePlatform} from 'sentry/utils/platform';
+import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 
 const crashReportTypes = ['event.minidump', 'event.applecrashreport'];
@@ -17,11 +16,11 @@ const SCREENSHOT_TYPE = 'event.screenshot';
 
 type Props = {
   project: Project;
-} & WithRouterProps;
+};
 
 const GroupEventAttachmentsFilter = (props: Props) => {
   const {project} = props;
-  const {query, pathname} = props.location;
+  const {query, pathname} = useLocation();
   const {types} = query;
   const allAttachmentsQuery = omit(query, 'types');
   const onlyCrashReportsQuery = {
@@ -77,4 +76,4 @@ const FilterWrapper = styled('div')`
 `;
 
 export {crashReportTypes, SCREENSHOT_TYPE};
-export default withRouter(GroupEventAttachmentsFilter);
+export default GroupEventAttachmentsFilter;

static/app/views/performance/charts/chart.tsx

@@ -1,4 +1,3 @@
-import {InjectedRouter} from 'react-router';
 import {useTheme} from '@emotion/react';
 import max from 'lodash/max';
 import min from 'lodash/min';
@@ -14,12 +13,12 @@ import {
   tooltipFormatter,
 } from 'sentry/utils/discover/charts';
 import {aggregateOutputType} from 'sentry/utils/discover/fields';
+import {useRouteContext} from 'sentry/utils/useRouteContext';
 
 type Props = {
   data: Series[];
   end: DateString;
   loading: boolean;
-  router: InjectedRouter;
   start: DateString;
   statsPeriod: string | null | undefined;
   utc: boolean;
@@ -64,7 +63,6 @@ function computeAxisMax(data: Series[]) {
 function Chart({
   data,
   previousData,
-  router,
   statsPeriod,
   start,
   end,
@@ -78,6 +76,7 @@ function Chart({
   chartColors,
   isLineChart,
 }: Props) {
+  const {router} = useRouteContext();
   const theme = useTheme();
 
   if (!data || data.length <= 0) {

static/app/views/performance/charts/index.tsx

@@ -43,7 +43,7 @@ class Container extends Component<Props> {
   }
 
   render() {
-    const {api, organization, location, eventView, router} = this.props;
+    const {api, organization, location, eventView} = this.props;
 
     // construct request parameters for fetching chart data
     const globalSelection = eventView.getPageFilters();
@@ -115,7 +115,6 @@ class Container extends Component<Props> {
                       <Chart
                         data={results}
                         loading={loading || reloading}
-                        router={router}
                         statsPeriod={globalSelection.datetime.period}
                         start={start}
                         end={end}