pass backendLicense to NavBarSubtitle

grafana-plugin/src/GrafanaPluginRootPage.tsx

@@ -91,6 +91,7 @@ export const Root = observer((props: AppRootProps) => {
   const pathWithoutLeadingSlash = path.replace(/^\//, '');
 
   const store = useStore();
+  const { backendLicense } = store;
 
   useEffect(() => {
     store.updateBasicData();
@@ -120,11 +121,13 @@ export const Root = observer((props: AppRootProps) => {
         grafanaUser: window.grafanaBootData.user,
         enableLiveSettings: store.hasFeature(AppFeature.LiveSettings),
         enableCloudPage: store.hasFeature(AppFeature.CloudConnection),
+        backendLicense,
       }),
       [meta, pathWithoutLeadingSlash, page, store.features]
     )
   );
   useEffect(() => {
+    /* @ts-ignore */
     onNavChanged(navModel);
   }, [navModel, onNavChanged]);
 

grafana-plugin/src/components/NavBar/NavBarSubtitle.tsx

@@ -4,29 +4,27 @@ import { Card } from '@grafana/ui';
 import cn from 'classnames/bind';
 
 import gitHubStarSVG from 'assets/img/github_star.svg';
-import { useStore } from 'state/useStore';
 import { APP_SUBTITLE, GRAFANA_LICENSE_OSS } from 'utils/consts';
 
 import styles from './NavBarSubtitle.module.css';
 
 const cx = cn.bind(styles);
 
-function NavBarSubtitle() {
-  const store = useStore();
-  if (store.backendLicense === GRAFANA_LICENSE_OSS) {
-    return APP_SUBTITLE;
+function NavBarSubtitle({ backendLicense }: { backendLicense: string }) {
+  if (backendLicense === GRAFANA_LICENSE_OSS) {
+    return (
+      <div className={cx('navbar-container')}>
+        {APP_SUBTITLE}
+        <Card heading={undefined} className={cx('navbar-heading')}>
+          <a href="https://github.com/grafana/oncall" className={cx('navbar-link')} target="_blank" rel="noreferrer">
+            <img src={gitHubStarSVG} className={cx('navbar-star-icon')} alt="" /> Star us on GitHub
+          </a>
+        </Card>
+      </div>
+    );
   }
 
-  return (
-    <div className={cx('navbar-container')}>
-      {APP_SUBTITLE}
-      <Card heading={undefined} className={cx('navbar-heading')}>
-        <a href="https://github.com/grafana/oncall" className={cx('navbar-link')} target="_blank" rel="noreferrer">
-          <img src={gitHubStarSVG} className={cx('navbar-star-icon')} alt="" /> Star us on GitHub
-        </a>
-      </Card>
-    </div>
-  );
+  return <>{APP_SUBTITLE}</>;
 }
 
 export default NavBarSubtitle;

grafana-plugin/src/utils/hooks.tsx

@@ -18,6 +18,7 @@ type Args = {
   };
   enableLiveSettings: boolean;
   enableCloudPage: boolean;
+  backendLicense: string;
 };
 
 export function useForceUpdate() {
@@ -25,7 +26,16 @@ export function useForceUpdate() {
   return () => setValue((value) => value + 1);
 }
 
-export function useNavModel({ meta, pages, path, page, grafanaUser, enableLiveSettings, enableCloudPage }: Args) {
+export function useNavModel({
+  meta,
+  pages,
+  path,
+  page,
+  grafanaUser,
+  enableLiveSettings,
+  enableCloudPage,
+  backendLicense,
+}: Args) {
   return useMemo(() => {
     const tabs: NavModelItem[] = [];
 
@@ -55,7 +65,7 @@ export function useNavModel({ meta, pages, path, page, grafanaUser, enableLiveSe
     const node = {
       text: APP_TITLE,
       img: meta.info.logos.large,
-      subTitle: <NavBarSubtitle />,
+      subTitle: <NavBarSubtitle backendLicense={backendLicense} />,
       url: path,
       children: tabs,
     };