fix(techdocs): fix ReportIssue style issue when loaded as dynamic plugin [release-1.3]

dynamic-plugins/wrappers/backstage-plugin-techdocs/package.json

@@ -32,7 +32,9 @@
     "@backstage/plugin-search-react": "1.7.13",
     "@backstage/plugin-techdocs": "1.10.7",
     "@backstage/plugin-techdocs-module-addons-contrib": "1.1.12",
-    "@backstage/plugin-techdocs-react": "1.2.6"
+    "@backstage/plugin-techdocs-react": "1.2.6",
+    "@material-ui/core": "^4.12.4",
+    "jss": "^10.10.0"
   },
   "peerDependencies": {
     "react": "16.13.1 || ^17.0.0 || ^18.0.0"

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

@@ -0,0 +1,45 @@
+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} />
+      {stylesOptions ? (
+        <WrappedStylesProvider {...stylesOptions}>
+          {children}
+        </WrappedStylesProvider>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,56 @@
+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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import {
   TechDocsReaderPage as TechDocsReaderPageBase,
@@ -15,6 +14,8 @@ import {
 
 import { useApi } from '@backstage/core-plugin-api';
 
+import { ReportIssue } from './addons';
+
 export const TechDocsReaderPage = {
   element: TechDocsReaderPageBase,
   staticJSXContent: (

yarn.lock

@@ -23180,7 +23180,7 @@ jss-plugin-vendor-prefixer@^10.5.1:
     css-vendor "^2.0.8"
     jss "10.10.0"
 
-[email protected], jss@^10.5.1, jss@~10.10.0:
+[email protected], jss@^10.10.0, jss@^10.5.1, jss@~10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc"
   integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==