fix(tekton): resolved css collision issue from tekton (#2281)

* fix(tekton): resolved css collision issue from tekton Signed-off-by: Yi Cai <yicai@redhat.com> * Addressed comment Signed-off-by: Yi Cai <yicai@redhat.com> --------- Signed-off-by: Yi Cai <yicai@redhat.com>
janus-idp · Oct 10, 2024 · 14673f6 · 14673f6
1 parent 9c4b4ab
commit 14673f6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/plugins/tekton/src/components/Tekton/TektonCIComponent.tsx b/plugins/tekton/src/components/Tekton/TektonCIComponent.tsx
@@ -8,9 +8,43 @@ import { ModelsPlural } from '../../models';
 import PermissionAlert from '../common/PermissionAlert';
 import PipelineRunList from '../PipelineRunList/PipelineRunList';
 
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/patternfly/patternfly-theme-dark.css';
+import '@patternfly/patternfly/patternfly-charts-theme-dark.css';
+import '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
+
+const savedStylesheets = new Set<HTMLLinkElement>();
+
 export const TektonCIComponent = () => {
   useDarkTheme();
 
+  React.useLayoutEffect(() => {
+    const scalprumStyles = Array.from(
+      document.querySelectorAll('link[rel="stylesheet"]'),
+    ).filter(link =>
+      link.attributes
+        .getNamedItem('href')
+        ?.value?.includes('backstage-plugin-tekton'),
+    );
+
+    scalprumStyles.forEach(link =>
+      savedStylesheets.add(link as HTMLLinkElement),
+    );
+
+    savedStylesheets.forEach(link => {
+      if (!document.head.contains(link)) {
+        document.head.appendChild(link);
+      }
+    });
+    return () => {
+      savedStylesheets.forEach(link => {
+        if (document.head.contains(link)) {
+          document.head.removeChild(link);
+        }
+      });
+    };
+  }, []);
+
   const watchedResources = [
     ModelsPlural.pipelineruns,
     ModelsPlural.taskruns,

diff --git a/plugins/tekton/src/plugin.ts b/plugins/tekton/src/plugin.ts
@@ -1,8 +1,3 @@
-import '@patternfly/react-core/dist/styles/base.css';
-import '@patternfly/patternfly/patternfly-theme-dark.css';
-import '@patternfly/patternfly/patternfly-charts-theme-dark.css';
-import '@patternfly/patternfly/utilities/Accessibility/accessibility.css';
-
 import {
   createApiFactory,
   createComponentExtension,