fix: Custom component rendering (#3842)

* wip

* add ids to divs

* add workaround for height problem

* fix: don't redefine existing webcomponents

* add another way to try to fix the height problem

* fix import

* remove workarounds

---------

Co-authored-by: chriskari <chriskari@gmx.de>

Author: dbadura

examples/busola-web-components/script.js

@@ -111,4 +111,6 @@ class MyCustomPage extends HTMLElement {
 }
 
 // Define the custom element
-customElements.define('my-custom-page', MyCustomPage);
+if (!customElements.get('my-custom-page')) {
+  customElements.define('my-custom-page', MyCustomPage);
+}

examples/busola-web-components/ui.html

@@ -1,3 +1,3 @@
-<div>
+<div id="extension-web-component">
   <my-custom-page></my-custom-page>
 </div>

src/components/Extensibility/ExtensibilityList.js

@@ -12,12 +12,12 @@ import { getExtensibilityPath } from 'components/Extensibility/helpers/getExtens
 import { useGetCRbyPath } from './useGetCRbyPath';
 import ExtensibilityCreate from './ExtensibilityCreate';
 import {
-  useCreateResourceDescription,
-  TranslationBundleContext,
-  useGetTranslation,
   applyFormula,
-  getTextSearchProperties,
   getResourceDescAndUrl,
+  getTextSearchProperties,
+  TranslationBundleContext,
+  useCreateResourceDescription,
+  useGetTranslation,
 } from './helpers';
 import { sortBy } from './helpers/sortBy';
 import { Widget } from './components/Widget';
@@ -198,6 +198,7 @@ const ExtensibilityList = ({ overrideResMetadata, ...props }) => {
           {isExtensibilityCustomComponentsEnabled && resMetaData.customHtml ? (
             <>
               <div
+                id="custom-html"
                 dangerouslySetInnerHTML={{ __html: resMetaData.customHtml }}
               ></div>
               {createPortal(<YamlUploadDialog />, document.body)}

src/state/navigation/filters/areNodeFeaturesEnabled.ts

@@ -5,7 +5,7 @@ export const areNodeFeaturesEnabled = (
   configFeatures: ConfigFeatureList,
 ): boolean => {
   if (dependsOnConfigFeatures(node)) {
-    if (isARequiredFeatureDisabled(node, configFeatures)) {
+    if (isARequiredFeatureDisabled(node, configFeatures ?? {})) {
       return false;
     }
   }

src/web-components/DynamicPageWebComponent.jsx

@@ -4,6 +4,9 @@ import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/Dyn
 import { ThemeProvider } from '@ui5/webcomponents-react';
 import customCSS from 'shared/components/DynamicPageComponent/DynamicPageComponent.scss?inline';
 import { parseHtmlToJsx } from './htmlTojsx';
+import { BrowserRouter } from 'react-router';
+import { Spinner } from 'shared/components/Spinner/Spinner';
+import { Suspense } from 'react';
 
 function DynamicPageWithRecoil(props) {
   const transformedForm = stickyHeaderHeight => {
@@ -15,10 +18,16 @@ function DynamicPageWithRecoil(props) {
   return (
     <RecoilRoot>
       <ThemeProvider>
-        <DynamicPageComponent
-          {...props}
-          inlineEditForm={props?.inlineEditForm ? transformedForm : undefined}
-        />
+        <BrowserRouter>
+          <Suspense fallback={<Spinner />}>
+            <DynamicPageComponent
+              {...props}
+              inlineEditForm={
+                props?.inlineEditForm ? transformedForm : undefined
+              }
+            />
+          </Suspense>
+        </BrowserRouter>
       </ThemeProvider>
     </RecoilRoot>
   );

src/web-components/createWebComponent.jsx

@@ -24,6 +24,7 @@ function createWebComponent(
     connectedCallback() {
       if (!this.reactRoot) {
         this.reactRoot = document.createElement('div');
+        this.reactRoot.setAttribute('id', 'component-root');
         this.appendChild(this.reactRoot);
         this.reactRootInstance = createRoot(this.reactRoot); // Initialize root
       }
@@ -138,7 +139,9 @@ function createWebComponent(
     }
   }
 
-  customElements.define(tagName, GenericWebComponent);
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, GenericWebComponent);
+  }
 }
 
 export default createWebComponent;