From 12a04db2ed4733505bebe63ed17d0303fec88f73 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Fri, 24 Feb 2023 13:14:45 +0200
Subject: [PATCH] Append grafana styles to head instead of referencing the
 wrong path (#1348)

# What this PR does

Fixed #672 so that we import the css as a whole and add it as a `style`
element, instead of relying on path location which can differ if url is
rewritten.

## Which issue(s) this PR fixes

#672

## Checklist

- [ ] Tests updated
- [ ] Documentation added
- [ ] `CHANGELOG.md` updated
---
 CHANGELOG.md                                        |  6 ++++++
 grafana-plugin/package.json                         |  1 +
 grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx | 13 +++++++++++--
 grafana-plugin/yarn.lock                            | 10 +++++++++-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c53b814d..16a4f339 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- Fixed importing of global grafana styles ([672](https://github.com/grafana/oncall/issues/672))
+
 ## v1.1.29 (2023-02-23)
 
 ### Changed
diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json
index 8cb32ba7..baf484db 100644
--- a/grafana-plugin/package.json
+++ b/grafana-plugin/package.json
@@ -118,6 +118,7 @@
     "mobx-react": "6.1.1",
     "object-hash": "^3.0.0",
     "prettier": "^2.8.2",
+    "raw-loader": "^4.0.2",
     "rc-table": "^7.17.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-draggable": "^4.4.5",
diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
index 48a26310..b9f3df12 100644
--- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
+++ b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
@@ -61,6 +61,8 @@ import 'style/responsive.css';
 import { getQueryParams, isTopNavbar } from './GrafanaPluginRootPage.helpers';
 import PluginSetup from './PluginSetup';
 
+import grafanaGlobalStyle from '!raw-loader!img/grafanaGlobalStyles.css';
+
 export const GrafanaPluginRootPage = (props: AppRootProps) => {
   return (
     <Provider store={rootStore}>
@@ -82,12 +84,19 @@ export const Root = observer((props: AppRootProps) => {
     let link = document.createElement('link');
     link.type = 'text/css';
     link.rel = 'stylesheet';
-    link.href = '/public/plugins/grafana-oncall-app/img/grafanaGlobalStyles.css';
+
+    // create a style element
+    const styleEl = document.createElement('style');
+    const head = document.head || document.getElementsByTagName('head')[0];
+    styleEl.appendChild(document.createTextNode(grafanaGlobalStyle));
+
+    // append grafana overriding styles to head
+    head.appendChild(styleEl);
 
     document.head.appendChild(link);
 
     return () => {
-      document.head.removeChild(link);
+      head.removeChild(styleEl); // remove on unmount
     };
   }, []);
 
diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock
index 2d2b20d0..a478a372 100644
--- a/grafana-plugin/yarn.lock
+++ b/grafana-plugin/yarn.lock
@@ -11073,6 +11073,14 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rbush@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/rbush/-/rbush-3.0.1.tgz#5fafa8a79b3b9afdfe5008403a720cc1de882ecf"
@@ -12279,7 +12287,7 @@ schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==