Fix on teams switch NPE (#1281)

# What this PR does

Fix for teams switch NPE

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Fixed
+
+- Fixed NPE on teams switch
+
 ### Added
 
 - Optimize alert and alert group public api endpoints and add filter by id ([1274](https://github.com/grafana/oncall/pull/1274)

grafana-plugin/src/PluginPage.tsx

@@ -22,7 +22,7 @@ function RealPlugin(props: AppPluginPageProps): React.ReactNode {
     <RealPluginPage {...props}>
       {/* Render alerts at the top */}
       <Alerts />
-      <Header page={page} backendLicense={store.backendLicense} />
+      <Header backendLicense={store.backendLicense} />
       {pages[page]?.text && <h3 className="page-title">{pages[page].text}</h3>}
       {props.children}
     </RealPluginPage>

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

@@ -32,8 +32,10 @@ const DefaultPageLayout: FC<DefaultPageLayoutProps> = observer((props) => {
   return renderLegacyNavbar();
 
   function renderTopNavbar(): JSX.Element {
+    const matchingPageNav = (pages[page] || pages[DEFAULT_PAGE]).getPageNav();
+
     return (
-      <PluginPage pageNav={pages[page].getPageNav()}>
+      <PluginPage page={page} pageNav={matchingPageNav}>
         <div className={cx('root')}>{children}</div>
       </PluginPage>
     );

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

@@ -16,14 +16,9 @@ import styles from './GrafanaTeamSelect.module.scss';
 
 const cx = cn.bind(styles);
 
-interface GrafanaTeamSelectProps {
-  currentPage: string;
-}
-
-const GrafanaTeamSelect = observer((props: GrafanaTeamSelectProps) => {
+const GrafanaTeamSelect = observer(() => {
   const store = useStore();
 
-  const { currentPage } = props;
   const { userStore, grafanaTeamStore } = store;
   const grafanaTeams = grafanaTeamStore.getSearchResult();
   const user = userStore.currentUser;
@@ -35,16 +30,7 @@ const GrafanaTeamSelect = observer((props: GrafanaTeamSelectProps) => {
   const onTeamChange = async (teamId: GrafanaTeam['id']) => {
     await userStore.updateCurrentUser({ current_team: teamId });
 
-    const queryParams = new URLSearchParams();
-    queryParams.set('page', mapCurrentPage());
-    window.location.search = queryParams.toString();
-
-    function mapCurrentPage() {
-      if (currentPage === 'incident') {
-        return 'incidents';
-      }
-      return currentPage;
-    }
+    window.location.reload();
   };
 
   const content = (

grafana-plugin/src/navbar/Header/Header.tsx

@@ -13,7 +13,7 @@ import styles from './Header.module.scss';
 
 const cx = cn.bind(styles);
 
-export default function Header({ page, backendLicense }: { page: string; backendLicense: string }) {
+export default function Header({ backendLicense }: { backendLicense: string }) {
   return (
     <div className={cx('root')}>
       <div className={cx('page-header__inner', { 'header-topnavbar': isTopNavbar() })}>
@@ -25,7 +25,7 @@ export default function Header({ page, backendLicense }: { page: string; backend
           <div className="page-header__info-block">{renderHeading()}</div>
         </div>
         <div className={cx('navbar-right')}>
-          <GrafanaTeamSelect currentPage={page} />
+          <GrafanaTeamSelect />
         </div>
       </div>
     </div>

grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx

@@ -110,7 +110,7 @@ export const Root = observer((props: AppRootProps) => {
     <DefaultPageLayout {...props} page={page}>
       {!isTopNavbar() && (
         <>
-          <Header page={page} backendLicense={store.backendLicense} />
+          <Header backendLicense={store.backendLicense} />
           <LegacyNavTabsBar currentPage={page} />
         </>
       )}