minor enhancements

kyma-project · Nov 15, 2024 · 4eafab6 · 4eafab6
1 parent efd4090
commit 4eafab6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/examples/web-component-ext/script.js b/examples/web-component-ext/script.js
@@ -91,7 +91,7 @@ function decodeBase64(base64) {
 
 async function getSMsecret() {
   let url = `/api/v1/namespaces/kyma-system/secrets/sap-btp-service-operator`;
-  const fetchFn = window.kymaFetchFn;
+  const fetchFn = window.extensionProps.kymaFetchFn;
 
   let resp = await fetchFn({ relativeUrl: url });
   let data = await resp.json();
@@ -117,7 +117,7 @@ async function createServiceInstance(name, namespace, offering, plan) {
   };
   let relativeUrl = `/apis/services.cloud.sap.com/v1/namespaces/${namespace}/serviceinstances`;
   try {
-    let resp = await window.kymaFetchFn({
+    let resp = await window.extensionProps.kymaFetchFn({
       relativeUrl,
       init: {
         method: 'POST',
@@ -139,19 +139,19 @@ async function createServiceInstance(name, namespace, offering, plan) {
 
 async function getServiceInstances() {
   let relativeUrl = '/apis/services.cloud.sap.com/v1/serviceinstances';
-  let resp = await window.kymaFetchFn({ relativeUrl });
+  let resp = await window.extensionProps.kymaFetchFn({ relativeUrl });
   let data = await resp.json();
   return data.items;
 }
 async function getServiceBindings() {
   let relativeUrl = '/apis/services.cloud.sap.com/v1/servicebindings';
-  let resp = await window.kymaFetchFn({ relativeUrl });
+  let resp = await window.extensionProps.kymaFetchFn({ relativeUrl });
   let data = await resp.json();
   return data.items;
 }
 async function getNamespaces() {
   let relativeUrl = '/api/v1/namespaces';
-  let resp = await window.kymaFetchFn({ relativeUrl });
+  let resp = await window.extensionProps.kymaFetchFn({ relativeUrl });
   let data = await resp.json();
   return data.items;
 }

diff --git a/src/components/Extensibility/ExtensibilityList.js b/src/components/Extensibility/ExtensibilityList.js
@@ -1,5 +1,6 @@
 import pluralize from 'pluralize';
 import { useTranslation } from 'react-i18next';
+import { useEffect } from 'react';
 
 import { ResourcesList } from 'shared/components/ResourcesList/ResourcesList';
 import { usePrepareListProps } from 'resources/helpers';
@@ -142,18 +143,26 @@ const ExtensibilityList = ({ overrideResMetadata, ...props }) => {
   const defaultResMetadata = useGetCRbyPath();
   const resMetaData = overrideResMetadata || defaultResMetadata;
   const { urlPath, defaultPlaceholder } = resMetaData?.general ?? {};
-  if (resMetaData?.general?.customElement) {
-    if (!customElements.get(resMetaData.general.customElement)) {
+
+  useEffect(() => {
+    const customElement = resMetaData?.general?.customElement;
+    const customScript = resMetaData?.customScript;
+
+    if (customElement && customScript && !customElements.get(customElement)) {
       const script = document.createElement('script');
       script.type = 'module';
-      script.textContent = resMetaData.customScript;
-      console.log(script);
+      script.textContent = customScript;
+      script.onerror = e => {
+        console.error('Script loading or execution error:', e);
+      };
       document.head.appendChild(script);
-      console.log('Custom element loaded');
-    } else {
-      console.log('Custom element already exists');
+
+      return () => {
+        document.head.removeChild(script);
+      };
     }
-  }
+  }, [resMetaData]);
+
   return (
     <TranslationBundleContext.Provider
       value={{

diff --git a/src/state/navigation/extensionsAtom.ts b/src/state/navigation/extensionsAtom.ts
@@ -353,7 +353,6 @@ const getExtensions = async (
       },
       [] as ExtResourceWithMetadata[],
     );
-    console.log('configMapsExtensions', configMapsExtensions);
     const defaultExtensionsWithoutOverride = defaultExtensions.filter(
       defExt => {
         return configMapsExtensions.every(cmExt => {
@@ -418,8 +417,10 @@ export const useGetExtensions = () => {
   );
 
   // expose fetchFn and authData to the window object for the extensions to use
-  window.kymaFetchFn = fetchFn;
-  window.kymaAuth = auth;
+  (window as any).extensionProps = {
+    kymaFetchFn: fetchFn,
+    kymaAuth: auth,
+  };
 
   useEffect(() => {
     (crds as any)?.items.forEach((crd: CustomResourceDefinition) => {