Routing: Use location from hooks (#94148)

* Update GrafanaRoute

* Update Silences

* Update PublicDashboardPage

* Cleanup

* Switch to the location from locationService

* Move location to render

public/app/AppWrapper.tsx

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import { Switch, RouteComponentProps } from 'react-router-dom';
 import { CompatRoute, Navigate } from 'react-router-dom-v5-compat';
 
-import { config, navigationLogger, reportInteraction } from '@grafana/runtime';
+import { config, locationService, navigationLogger, reportInteraction } from '@grafana/runtime';
 import { ErrorBoundaryAlert, GlobalStyles, PortalContainer } from '@grafana/ui';
 import { getAppRoutes } from 'app/routes/routes';
 import { store } from 'app/store/store';
@@ -56,7 +56,6 @@ export class AppWrapper extends Component<AppWrapperProps, AppWrapperState> {
 
   renderRoute = (route: RouteDescriptor) => {
     const roles = route.roles ? route.roles() : [];
-
     return (
       <CompatRoute
         exact={route.exact === undefined ? true : route.exact}
@@ -64,6 +63,7 @@ export class AppWrapper extends Component<AppWrapperProps, AppWrapperState> {
         path={route.path}
         key={route.path}
         render={(props: RouteComponentProps) => {
+          const location = locationService.getLocation();
           // TODO[Router]: test this logic
           if (roles?.length) {
             if (!roles.some((r: string) => contextSrv.hasRole(r))) {
@@ -71,7 +71,7 @@ export class AppWrapper extends Component<AppWrapperProps, AppWrapperState> {
             }
           }
 
-          return <GrafanaRoute {...props} route={route} />;
+          return <GrafanaRoute {...props} route={route} location={location} />;
         }}
       />
     );

public/app/core/navigation/GrafanaRoute.tsx

@@ -25,7 +25,7 @@ export function GrafanaRoute(props: Props) {
   useEffect(() => {
     updateBodyClassNames(props.route);
     cleanupDOM();
-    navigationLogger('GrafanaRoute', false, 'Mounted', props.match);
+    navigationLogger('GrafanaRoute', false, 'Mounted', props.route);
 
     return () => {
       navigationLogger('GrafanaRoute', false, 'Unmounted', props.route);

public/app/features/alerting/unified/Silences.tsx

@@ -1,4 +1,5 @@
 import { Route, Switch } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 import { withErrorBoundary } from '@grafana/ui';
 import {
@@ -30,25 +31,7 @@ const Silences = () => {
           <SilencesTable alertManagerSourceName={selectedAlertmanager} />
         </Route>
         <Route exact path="/alerting/silence/new">
-          {({ location }) => {
+          <SilencesEditorComponent selectedAlertmanager={selectedAlertmanager} />
-            const queryParams = new URLSearchParams(location.search);
-
-            const potentialAlertRuleMatcher = parseQueryParamMatchers(queryParams.getAll('matcher')).find(
-              (m) => m.name === MATCHER_ALERT_RULE_UID
-            );
-
-            const potentialRuleUid = potentialAlertRuleMatcher?.value;
-
-            const formValues = getDefaultSilenceFormValues(defaultsFromQuery(queryParams));
-
-            return (
-              <SilencesEditor
-                formValues={formValues}
-                alertManagerSourceName={selectedAlertmanager}
-                ruleUid={potentialRuleUid}
-              />
-            );
-          }}
         </Route>
         <Route exact path="/alerting/silence/:id/edit">
           <ExistingSilenceEditor alertManagerSourceName={selectedAlertmanager} />
@@ -69,3 +52,23 @@ function SilencesPage() {
 }
 
 export default withErrorBoundary(SilencesPage, { style: 'page' });
+
+type SilencesEditorComponentProps = {
+  selectedAlertmanager: string;
+};
+const SilencesEditorComponent = ({ selectedAlertmanager }: SilencesEditorComponentProps) => {
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+
+  const potentialAlertRuleMatcher = parseQueryParamMatchers(queryParams.getAll('matcher')).find(
+    (m) => m.name === MATCHER_ALERT_RULE_UID
+  );
+
+  const potentialRuleUid = potentialAlertRuleMatcher?.value;
+
+  const formValues = getDefaultSilenceFormValues(defaultsFromQuery(queryParams));
+
+  return (
+    <SilencesEditor formValues={formValues} alertManagerSourceName={selectedAlertmanager} ruleUid={potentialRuleUid} />
+  );
+};

public/app/features/dashboard/containers/PublicDashboardPage.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useLocation, useParams } from 'react-router-dom-v5-compat';
 import { usePrevious } from 'react-use';
 
 import { GrafanaTheme2, PageLayoutType, TimeZone } from '@grafana/data';
@@ -56,11 +56,12 @@ const Toolbar = ({ dashboard }: { dashboard: DashboardModel }) => {
 };
 
 const PublicDashboardPage = (props: Props) => {
-  const { route, location } = props;
+  const { route } = props;
+  const location = useLocation();
   const { accessToken } = useParams();
   const dispatch = useDispatch();
   const context = useGrafana();
-  const prevProps = usePrevious(props);
+  const prevProps = usePrevious({ ...props, location });
   const styles = useStyles2(getStyles);
   const dashboardState = useSelector((store) => store.dashboard);
   const dashboard = dashboardState.getModel();