fix(techdocs): fix ReportIssue style issue when loaded as dynamic plu…

…gin (#2024)

Signed-off-by: Christoph Jerolimov <[email protected]>

dynamic-plugins/wrappers/backstage-plugin-techdocs/src/ShadowRootStylesProvider.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import type { StylesOptions } from '@material-ui/styles';
+
+// It's neccessary that this provider is loaded from `core/styles` not just `styles`!
+import { StylesProvider as WrappedStylesProvider, jssPreset } from '@material-ui/core/styles';
+import { create as createJss } from 'jss';
+
+/**
+ * Creates a new JSS StylesProvider that inserts additional styles
+ * to the current (react and browser) dom position.
+ * This is only useful in a shadow root world because MUI v4 component
+ * styles are handled globally.
+ */
+export const ShadowRootStylesProvider = ({ children }: { children: any }) => {
+  const [insertionPoint, setInsertionPoint] = React.useState<HTMLDivElement | null>(null);
+
+  const stylesOptions = React.useMemo<StylesOptions | null>(() => {
+    if (!insertionPoint) {
+      return null;
+    }
+    return {
+      jss: createJss({
+        ...jssPreset(),
+        insertionPoint,
+      }),
+      sheetsManager: new Map(),
+    }
+  }, [insertionPoint])
+
+  return (
+    <div>
+      <div ref={setInsertionPoint}></div>
+      {stylesOptions ? (
+        <WrappedStylesProvider {...stylesOptions}>
+          {children}
+        </WrappedStylesProvider>
+      ) : null}
+    </div>
+  );
+};

dynamic-plugins/wrappers/backstage-plugin-techdocs/src/addons.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { techdocsPlugin } from '@backstage/plugin-techdocs';
+import { createTechDocsAddonExtension, TechDocsAddonLocations } from '@backstage/plugin-techdocs-react';
+
+import { ReportIssue as ReportIssueBase } from "@backstage/plugin-techdocs-module-addons-contrib";
+import { ShadowRootStylesProvider } from './ShadowRootStylesProvider';
+
+/**
+ * Automatically wrap the backstage ReportIssue component with a (JSS)
+ * StylesProvider, the underlaying styling technique under MUI v4.
+ *
+ * With this, the additional styles for overlay button are applied correctly
+ * because the techdocs content is rendered in a shadow root, but the styles
+ * from the ReportIssue components are added to the root document.
+ *
+ * It isn't possible to create an additional shadow root here without reusing
+ * or copying more components from the techdocs packages.
+ *
+ * The addons are rendered with a (react) portal above the content while the
+ * addon itself is added below the content.
+ *
+ * HTML structure:
+ *
+ * html root doc
+ *   backstage sidebar
+ *   backstage header
+ *   techdocs shadow root
+ *     left sidebar (content navigation)
+ *     right sidebar (table of content)
+ *     content
+ *       (report issue link is added here when text is selected)
+ *       content itself
+ *       addons
+ *         report issue wrapper
+ */
+const ReportIssueWrapper = () => {
+  return (
+    <div id="techdocs-report-issue-wrapper">
+      <ShadowRootStylesProvider>
+        <ReportIssueBase />
+      </ShadowRootStylesProvider>
+    </div>
+  );
+};
+
+export const ReportIssue = techdocsPlugin.provide(
+  createTechDocsAddonExtension<{}>({
+    name: 'ReportIssue',
+    location: TechDocsAddonLocations.Content,
+    component: ReportIssueWrapper,
+  }),
+);

dynamic-plugins/wrappers/backstage-plugin-techdocs/src/wrapped.tsx

@@ -2,7 +2,6 @@ import {
   EntityTechdocsContent as EntityTechdocsContentBase,
   TechDocsReaderPage as TechDocsReaderPageBase,
 } from "@backstage/plugin-techdocs";
-import { ReportIssue } from "@backstage/plugin-techdocs-module-addons-contrib";
 import { TechDocsAddons } from "@backstage/plugin-techdocs-react";
 
 import { SearchFilter, useSearch } from "@backstage/plugin-search-react";
@@ -14,6 +13,8 @@ import {
 
 import { useApi } from "@backstage/core-plugin-api";
 
+import { ReportIssue } from "./addons";
+
 export const TechDocsReaderPage = {
   element: TechDocsReaderPageBase,
   staticJSXContent: (