Unified logo with IRM, added few minor UI tweaks, bumped labels version (#3531)

# What this PR does

- Mostly this -> https://github.com/grafana/oncall/issues/1905

## Which issue(s) this PR fixes

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

grafana-plugin/e2e-tests/integrations/heartbeat.test.ts

@@ -7,6 +7,7 @@ const HEARTBEAT_SETTINGS_FORM_TEST_ID = 'heartbeat-settings-form';
 test.describe("updating an integration's heartbeat interval works", async () => {
   const _openHeartbeatSettingsForm = async (page: Page) => {
     await page.getByTestId('integration-settings-context-menu-wrapper').getByRole('img').click();
+    await page.waitForTimeout(1000);
     await page.getByTestId('integration-heartbeat-settings').click();
   };
 
@@ -29,6 +30,8 @@ test.describe("updating an integration's heartbeat interval works", async () =>
 
     await heartbeatSettingsForm.getByTestId('update-heartbeat').click();
 
+    await page.waitForTimeout(1000);
+
     await _openHeartbeatSettingsForm(page);
 
     const heartbeatIntervalValue = await heartbeatSettingsForm

grafana-plugin/e2e-tests/utils/schedule.ts

@@ -20,13 +20,6 @@ export const createOnCallSchedule = async (page: Page, scheduleName: string, use
 
   await clickButton({ page, buttonText: 'Add rotation' });
 
-  /**
-   * Drag the modal such that the "Create" button will always be visible within the viewport. We cannot scroll
-   * on the modal itself
-   * https://playwright.dev/docs/input#dragging-manually
-   */
-  await page.locator('.ReactModal__Content .drag-handler').dragTo(page.locator('.page-header__logo'));
-
   await selectDropdownValue({
     page,
     selectType: 'grafanaSelect',

grafana-plugin/package.json

@@ -122,7 +122,7 @@
     "@grafana/data": "^9.2.4",
     "@grafana/faro-web-sdk": "^1.0.0-beta4",
     "@grafana/faro-web-tracing": "^1.0.0-beta4",
-    "@grafana/labels": "~1.4.2",
+    "@grafana/labels": "~1.4.3",
     "@grafana/runtime": "9.3.0-beta1",
     "@grafana/ui": "^10.2.0",
     "@lifeomic/attempt": "^3.0.3",

grafana-plugin/src/PluginPage.tsx

@@ -3,8 +3,10 @@ import React from 'react';
 import { PluginPageProps, PluginPage as RealPluginPage } from '@grafana/runtime';
 import Header from 'navbar/Header/Header';
 
+import RenderConditionally from 'components/RenderConditionally/RenderConditionally';
 import { pages } from 'pages';
 import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers';
+import { DEFAULT_PAGE } from 'utils/consts';
 
 interface AppPluginPageProps extends PluginPageProps {
   page?: string;
@@ -14,10 +16,14 @@ export const PluginPage = (isTopNavbar() ? RealPlugin : PluginPageFallback) as R
 
 function RealPlugin(props: AppPluginPageProps): React.ReactNode {
   const { page } = props;
+  const isDefaultPage = page === DEFAULT_PAGE;
 
   return (
     <RealPluginPage {...props}>
-      <Header />
+      <RenderConditionally shouldRender={isDefaultPage}>
+        <Header />
+      </RenderConditionally>
+
       {pages[page]?.text && !pages[page]?.hideTitle && (
         <h3 className="page-title" data-testid="page-title">
           {pages[page].text}

grafana-plugin/src/navbar/Header/Header.module.scss

@@ -4,7 +4,7 @@
 
 .header-topnavbar {
   padding-top: 0;
-  padding-bottom: 36px;
+  padding-bottom: 12px;
 }
 
 .navbar-heading {
@@ -34,6 +34,7 @@
   flex-direction: row;
   column-gap: 8px;
   row-gap: 8px;
+  margin-left: -50px;
 }
 
 .irm-icon {
@@ -52,3 +53,12 @@
     margin-bottom: 0;
   }
 }
+
+.logo-container,
+.page-header__img {
+  height: 32px;
+}
+
+.page-header__title {
+  margin-bottom: 8px;
+}

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

@@ -23,8 +23,8 @@ const Header = observer(() => {
       <div className={cx('root')}>
         <div className={cx('page-header__inner', { 'header-topnavbar': isTopNavbar() })}>
           <div className={cx('navbar-left')}>
-            <span className="page-header__logo">
-              <img className="page-header__img" src={logo} alt="Grafana OnCall" />
+            <span className={cx('page-header__logo', 'logo-container')}>
+              <img className={cx('page-header__img')} src={logo} alt="Grafana OnCall" />
             </span>
             <div className="page-header__info-block">{renderHeading()}</div>
           </div>
@@ -41,6 +41,7 @@ const Header = observer(() => {
           <h1 className={cx('page-header__title')}>Grafana OnCall</h1>
           <div className={cx('navbar-heading-container')}>
             <div className={cx('page-header__sub-title')}>{APP_SUBTITLE}</div>
+
             <Card heading={undefined} className={cx('navbar-heading')}>
               <a
                 href="https://github.com/grafana/oncall"

grafana-plugin/src/pages/integrations/Integrations.module.scss

@@ -7,6 +7,10 @@
   width: 40px;
 }
 
+.title {
+  margin-bottom: 16px;
+}
+
 .tabsBar {
   margin-bottom: 24px;
 }

grafana-plugin/yarn.lock

@@ -2027,10 +2027,10 @@
     "@opentelemetry/sdk-trace-web" "^1.8.0"
     "@opentelemetry/semantic-conventions" "^1.8.0"
 
-"@grafana/labels@~1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.4.2.tgz#3ce4fb4e06c86793df85622de9fd47793261a849"
-  integrity sha512-4d/+SnLxxBGCYGZI/BAtF1s6M/K5cxFmOEDmUORBs5sXTiUXHsvNXbsh1ACfcH/wCUlbypYY6FQULSAWs6pOeQ==
+"@grafana/labels@~1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@grafana/labels/-/labels-1.4.3.tgz#1103ef41341c84cac8d7d7e0b36d4671d20311b6"
+  integrity sha512-ImmkKERHkbDqakjgFN1Tl6FmwQa+7/YTyV+G8vBtX6HlNWIPGso7glNuHOEvMdvhz1fuJgSFEQ9+nggZv1TW4g==
   dependencies:
     "@emotion/css" "^11.11.2"
     "@grafana/ui" "^10.0.0"