show GitHub star on navbar

grafana-plugin/src/GrafanaPluginRootPage.tsx

@@ -14,8 +14,8 @@ import { rootStore } from 'state';
 import { useStore } from 'state/useStore';
 import { useNavModel } from 'utils/hooks';
 
-import './vars.css';
-import './index.css';
+import './style/vars.css';
+import './style/index.css';
 
 import { AppFeature } from './state/features';
 

grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx

@@ -111,15 +111,6 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
     return groups;
   }, [filteredTemplatesToRender]);
 
-  const handleChangeActiveTemplate = useCallback(
-    (templateName) => {
-      const template = groups[activeGroup].find((template: Template) => template.name === templateName);
-
-      setActiveTemplate(template);
-    },
-    [groups, activeGroup]
-  );
-
   const getGroupByTemplateName = (templateName: string) => {
     Object.values(groups).find((group) => {
       const foundTemplate = group.find((obj: any) => {

grafana-plugin/src/components/NavBar/NavBarSubtitle.module.css

@@ -0,0 +1,20 @@
+:root {
+  --orange: #F5B73D;
+}
+
+.navbar-container {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-star-icon {
+  fill: var(--orange);
+}
+
+.navbar-heading {
+  padding: 4px;
+  margin-left: 8px;
+  border: 1px solid var(--gray-9);
+  width: initial;
+  font-size: 12px;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import cn from 'classnames/bind';
+
+import { Card, Icon } from '@grafana/ui';
+
+import { APP_SUBTITLE } from 'utils/consts';
+
+import styles from './NavBarSubtitle.module.css';
+
+const cx = cn.bind(styles);
+
+function NavBarSubtitle() {
+  return (
+    <div className={cx('navbar-container')}>
+      {APP_SUBTITLE}
+      <Card heading={undefined} className={cx('navbar-heading')}>
+        <a href="https://github.com/grafana/oncall">
+          <Icon name="star" className={cx('navbar-star-icon')} /> Star us on GitHub
+        </a>
+      </Card>
+    </div>
+  );
+}
+
+export default NavBarSubtitle;

grafana-plugin/src/img/grafanaGlobalStyles.css

@@ -33,3 +33,7 @@
     white-space: nowrap;
   }
 }
+
+.page-header__info-block {
+  flex-grow: 1; /* Stretch the navigation subtitle panel */
+}

grafana-plugin/src/utils/hooks.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useMemo } from 'react';
 
 import { AppRootProps, NavModelItem } from '@grafana/data';
 
+import NavBarSubtitle from 'components/NavBar/NavBarSubtitle';
 import { PageDefinition } from 'pages';
 
-import { APP_TITLE, APP_SUBTITLE } from './consts';
+import { APP_TITLE } from './consts';
 
 type Args = {
   meta: AppRootProps['meta'];
@@ -54,7 +55,7 @@ export function useNavModel({ meta, pages, path, page, grafanaUser, enableLiveSe
     const node = {
       text: APP_TITLE,
       img: meta.info.logos.large,
-      subTitle: APP_SUBTITLE,
+      subTitle: <NavBarSubtitle />,
       url: path,
       children: tabs,
     };