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

@@ -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

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",

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
     };
   }, []);
 

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==