move call of getQueryParams back to PluginRoot and rely on this.props.query instead

grafana-plugin/src/containers/UsersTimezones/UsersTimezones.tsx

@@ -51,7 +51,11 @@ const UsersTimezones: FC<UsersTimezonesProps> = (props) => {
     [userIds, store.userStore.items]
   );
 
-  const currentMoment = useMemo(() => dayjs().tz(tz), [tz]);
+  const currentMoment = useMemo(() => {
+    console.log({ tz });
+    console.log(dayjs().format());
+    return dayjs().tz(tz);
+  }, [tz]);
 
   const currentTimeX = useMemo(() => {
     const midnight = dayjs().tz(tz).startOf('day');

grafana-plugin/src/pages/incident/Incident.tsx

@@ -1,6 +1,5 @@
 import React, { useState, SyntheticEvent } from 'react';
 
-import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
 import {
   Button,
@@ -49,8 +48,7 @@ import {
 } from 'models/alertgroup/alertgroup.types';
 import { ResolutionNoteSourceTypesToDisplayName } from 'models/resolution_note/resolution_note.types';
 import { pages } from 'pages';
-import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers';
-import { WithStoreProps } from 'state/types';
+import { PageProps, WithStoreProps } from 'state/types';
 import { useStore } from 'state/useStore';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
@@ -63,7 +61,7 @@ import styles from './Incident.module.css';
 
 const cx = cn.bind(styles);
 
-interface IncidentPageProps extends WithStoreProps, AppRootProps {}
+interface IncidentPageProps extends WithStoreProps, PageProps {}
 
 interface IncidentPageState extends PageBaseState {
   showIntegrationSettings?: boolean;
@@ -97,8 +95,10 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
   update = () => {
     this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false
 
-    const { store } = this.props;
-    const { id } = getQueryParams();
+    const {
+      store,
+      query: { id },
+    } = this.props;
 
     store.alertGroupStore
       .getAlert(id)
@@ -106,8 +106,10 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
   };
 
   render() {
-    const { store } = this.props;
-    const { id, cursor, start, perpage } = getQueryParams();
+    const {
+      store,
+      query: { id, cursor, start, perpage },
+    } = this.props;
 
     const { errorData, showIntegrationSettings, showAttachIncidentForm } = this.state;
     const { isNotFoundError, isWrongTeamError } = errorData;
@@ -192,9 +194,11 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
   }
 
   renderHeader = () => {
-    const { store } = this.props;
+    const {
+      store,
+      query: { id, cursor, start, perpage },
+    } = this.props;
 
-    const { id, cursor, start, perpage } = getQueryParams();
     const { alerts } = store.alertGroupStore;
 
     const incident = alerts.get(id);
@@ -311,9 +315,11 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
   };
 
   renderTimeline = () => {
-    const { store } = this.props;
+    const {
+      store,
+      query: { id },
+    } = this.props;
 
-    const { id } = getQueryParams();
     const incident = store.alertGroupStore.alerts.get(id);
 
     if (!incident.render_after_resolve_report_json) {
@@ -401,9 +407,11 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
   };
 
   handleCreateResolutionNote = () => {
-    const { store } = this.props;
+    const {
+      store,
+      query: { id },
+    } = this.props;
 
-    const { id } = getQueryParams();
     const { resolutionNoteText } = this.state;
     store.resolutionNotesStore
       .createResolutionNote(id, resolutionNoteText)

grafana-plugin/src/pages/incidents/Incidents.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, SyntheticEvent } from 'react';
 
-import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
 import { Button, Icon, Tooltip, VerticalGroup, LoadingPlaceholder, HorizontalGroup } from '@grafana/ui';
 import { PluginPage } from 'PluginPage';
@@ -25,9 +24,8 @@ import { Alert, Alert as AlertType, AlertAction } from 'models/alertgroup/alertg
 import { User } from 'models/user/user.types';
 import { pages } from 'pages';
 import { getActionButtons, getIncidentStatusTag, renderRelatedUsers } from 'pages/incident/Incident.helpers';
-import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers';
 import { move } from 'state/helpers';
-import { WithStoreProps } from 'state/types';
+import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
 
@@ -54,7 +52,7 @@ function withSkeleton(fn: (alert: AlertType) => ReactElement | ReactElement[]) {
   return WithSkeleton;
 }
 
-interface IncidentsPageProps extends WithStoreProps, AppRootProps {}
+interface IncidentsPageProps extends WithStoreProps, PageProps {}
 
 interface IncidentsPageState {
   selectedIncidentIds: Array<Alert['pk']>;
@@ -71,8 +69,10 @@ class Incidents extends React.Component<IncidentsPageProps, IncidentsPageState>
   constructor(props: IncidentsPageProps) {
     super(props);
 
-    const { store } = props;
-    const { cursor: cursorQuery, start: startQuery, perpage: perpageQuery } = getQueryParams();
+    const {
+      store,
+      query: { cursor: cursorQuery, start: startQuery, perpage: perpageQuery },
+    } = props;
 
     const cursor = cursorQuery || undefined;
     const start = !isNaN(startQuery) ? Number(startQuery) : 1;

grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
 import { Button, HorizontalGroup } from '@grafana/ui';
 import { PluginPage } from 'PluginPage';
@@ -22,8 +21,7 @@ import { WithPermissionControl } from 'containers/WithPermissionControl/WithPerm
 import { ActionDTO } from 'models/action';
 import { OutgoingWebhook } from 'models/outgoing_webhook/outgoing_webhook.types';
 import { pages } from 'pages';
-import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers';
-import { WithStoreProps } from 'state/types';
+import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
 
@@ -31,7 +29,7 @@ import styles from './OutgoingWebhooks.module.css';
 
 const cx = cn.bind(styles);
 
-interface OutgoingWebhooksProps extends WithStoreProps, AppRootProps {}
+interface OutgoingWebhooksProps extends WithStoreProps, PageProps {}
 
 interface OutgoingWebhooksState extends PageBaseState {
   outgoingWebhookIdToEdit?: OutgoingWebhook['id'] | 'new';
@@ -43,14 +41,12 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
     errorData: initErrorDataState(),
   };
 
-  private outgoingWebhookId: string;
-
   async componentDidMount() {
     this.update().then(this.parseQueryParams);
   }
 
-  componentDidUpdate() {
-    if (this.outgoingWebhookId !== getQueryParams()['id']) {
+  componentDidUpdate(prevProps: OutgoingWebhooksProps) {
+    if (prevProps.query.id !== this.props.query.id) {
       this.parseQueryParams();
     }
   }
@@ -61,10 +57,10 @@ class OutgoingWebhooks extends React.Component<OutgoingWebhooksProps, OutgoingWe
       outgoingWebhookIdToEdit: undefined,
     })); // reset state on query parse
 
-    const { store } = this.props;
-    const { id } = getQueryParams();
-
-    this.outgoingWebhookId = id;
+    const {
+      store,
+      query: { id },
+    } = this.props;
 
     if (!id) {
       return;

grafana-plugin/src/pages/schedule/Schedule.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
 import { Button, HorizontalGroup, VerticalGroup, IconButton, ToolbarButton, Icon, Modal } from '@grafana/ui';
 import { PluginPage } from 'PluginPage';
@@ -24,8 +23,7 @@ import UsersTimezones from 'containers/UsersTimezones/UsersTimezones';
 import { Schedule, ScheduleType, Shift } from 'models/schedule/schedule.types';
 import { Timezone } from 'models/timezone/timezone.types';
 import { pages } from 'pages';
-import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers';
-import { WithStoreProps } from 'state/types';
+import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
 
@@ -35,7 +33,7 @@ import styles from './Schedule.module.css';
 
 const cx = cn.bind(styles);
 
-interface SchedulePageProps extends AppRootProps, WithStoreProps {}
+interface SchedulePageProps extends PageProps, WithStoreProps {}
 
 interface SchedulePageState {
   startMoment: dayjs.Dayjs;
@@ -67,8 +65,10 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
   }
 
   async componentDidMount() {
-    const { store } = this.props;
-    const { id } = getQueryParams();
+    const {
+      store,
+      query: { id },
+    } = this.props;
 
     store.userStore.updateItems();
 
@@ -87,8 +87,10 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
   }
 
   render() {
-    const { store } = this.props;
-    const { id: scheduleId } = getQueryParams();
+    const {
+      store,
+      query: { id: scheduleId },
+    } = this.props;
 
     const {
       startMoment,
@@ -299,8 +301,10 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
   };
 
   updateEvents = () => {
-    const { store } = this.props;
-    const { id: scheduleId } = getQueryParams();
+    const {
+      store,
+      query: { id: scheduleId },
+    } = this.props;
 
     const { startMoment } = this.state;
 
@@ -424,8 +428,10 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
   };
 
   updateEventsFor = async (scheduleId: Schedule['id'], withEmpty = true, with_gap = true) => {
-    const { store } = this.props;
-    const { id } = getQueryParams();
+    const {
+      store,
+      query: { id },
+    } = this.props;
 
     const { scheduleStore } = store;
 
@@ -444,8 +450,10 @@ class SchedulePage extends React.Component<SchedulePageProps, SchedulePageState>
   };
 
   handleDelete = () => {
-    const { store } = this.props;
-    const { id: scheduleId } = getQueryParams();
+    const {
+      store,
+      query: { id: scheduleId },
+    } = this.props;
 
     store.scheduleStore.delete(scheduleId).then(() => {
       getLocationSrv().update({ query: { page: 'schedules' } });

grafana-plugin/src/pages/users/Users.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { AppRootProps } from '@grafana/data';
 import { getLocationSrv } from '@grafana/runtime';
 import { Alert, Button, HorizontalGroup, Icon, VerticalGroup } from '@grafana/ui';
 import { PluginPage } from 'PluginPage';
@@ -24,8 +23,7 @@ import { WithPermissionControl } from 'containers/WithPermissionControl/WithPerm
 import { getRole } from 'models/user/user.helpers';
 import { User as UserType, UserRole } from 'models/user/user.types';
 import { pages } from 'pages';
-import { getQueryParams } from 'plugin/GrafanaPluginRootPage.helpers';
-import { WithStoreProps } from 'state/types';
+import { PageProps, WithStoreProps } from 'state/types';
 import { UserAction } from 'state/userAction';
 import { withMobXProviderContext } from 'state/withStore';
 
@@ -35,7 +33,7 @@ import styles from './Users.module.css';
 
 const cx = cn.bind(styles);
 
-interface UsersProps extends WithStoreProps, AppRootProps {}
+interface UsersProps extends WithStoreProps, PageProps {}
 
 const ITEMS_PER_PAGE = 100;
 
@@ -65,10 +63,10 @@ class Users extends React.Component<UsersProps, UsersState> {
 
   initialUsersLoaded = false;
 
-  private userId: string;
-
   async componentDidMount() {
-    const { p } = getQueryParams();
+    const {
+      query: { p },
+    } = this.props;
     this.setState({ page: p ? Number(p) : 1 }, this.updateUsers);
 
     this.parseParams();
@@ -87,7 +85,7 @@ class Users extends React.Component<UsersProps, UsersState> {
     return await userStore.updateItems(getRealFilters(usersFilters), page);
   };
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: UsersProps) {
     const { store } = this.props;
 
     if (!this.initialUsersLoaded && store.isUserActionAllowed(UserAction.ViewOtherUsers)) {
@@ -95,7 +93,7 @@ class Users extends React.Component<UsersProps, UsersState> {
       this.initialUsersLoaded = true;
     }
 
-    if (this.userId !== getQueryParams()['id']) {
+    if (prevProps.query.id !== this.props.query.id) {
       this.parseParams();
     }
   }
@@ -103,10 +101,10 @@ class Users extends React.Component<UsersProps, UsersState> {
   parseParams = async () => {
     this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false on query parse
 
-    const { store } = this.props;
-    const { id } = getQueryParams();
-
-    this.userId = id;
+    const {
+      store,
+      query: { id },
+    } = this.props;
 
     if (id) {
       await (id === 'me' ? store.userStore.loadCurrentUser() : store.userStore.loadUser(String(id), true)).catch(

grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx

@@ -37,7 +37,7 @@ import 'style/vars.css';
 import 'style/global.css';
 import 'style/utils.css';
 
-import { isTopNavbar } from './GrafanaPluginRootPage.helpers';
+import { getQueryParams, isTopNavbar } from './GrafanaPluginRootPage.helpers';
 
 export const GrafanaPluginRootPage = (props: AppRootProps) => (
   <Provider store={rootStore}>
@@ -156,7 +156,7 @@ export const Root = observer((props: AppRootProps) => {
           'u-position-relative'
         )}
       >
-        <Page {...props} path={pathWithoutLeadingSlash} store={store} />
+        <Page {...props} query={...getQueryParams()} path={pathWithoutLeadingSlash} store={store} />
       </div>
     </DefaultPageLayout>
   );

grafana-plugin/src/state/types.ts

@@ -1,9 +1,15 @@
+import { AppPluginMeta, KeyValue } from '@grafana/data';
 import { RootStore } from 'state/index';
 
 export interface WithStoreProps {
   store: RootStore;
 }
 
+export interface PageProps<T extends KeyValue = KeyValue> {
+  meta: AppPluginMeta<T>;
+  query: KeyValue
+}
+
 export interface SelectOption {
   value: string | number;
   display_name: string;