Standard fetch function contract

examples/web-component-ext/general.yaml

@@ -5,6 +5,6 @@ urlPath: service-management-ui
 category: Kyma
 name: Service Management UI
 scope: cluster
-customElement: my-component-1
+customElement: sm-catalog
 description: >-
   Service Management UI

examples/web-component-ext/script.js

@@ -97,12 +97,16 @@ function decodeBase64(base64) {
   const raw = Uint8Array.from(atob(base64), c => c.charCodeAt(0));
   return new TextDecoder().decode(raw);
 }
+function fetchWrapper(url, options) {
+  if (window.extensionProps.kymaFetchFn) {
+    return window.extensionProps.kymaFetchFn(url, options);
+  }
+  return fetch(url, options);
+}
 
 async function getSMsecret() {
   let url = `/api/v1/namespaces/kyma-system/secrets/sap-btp-service-operator`;
-  const fetchFn = window.extensionProps.kymaFetchFn;
-
-  let resp = await fetchFn({ relativeUrl: url });
+  let resp = await fetchWrapper(url);
   let data = await resp.json();
   let secret = data.data;
   for (const key in secret) {
@@ -126,16 +130,16 @@ async function createServiceInstance(name, namespace, offering, plan) {
   };
   let relativeUrl = `/apis/services.cloud.sap.com/v1/namespaces/${namespace}/serviceinstances`;
   try {
-    let resp = await window.extensionProps.kymaFetchFn({
+    let resp = await fetchWrapper(
       relativeUrl,
-      init: {
+      {
         method: 'POST',
         body: JSON.stringify(serviceInstance),
         headers: {
           'Content-Type': 'application/json',
         },
-      },
-    });
+      }
+    );
     console.log(resp);
     return { status: 'ok', message: 'Service instance created' };
   } catch (e) {
@@ -148,12 +152,7 @@ async function createServiceInstance(name, namespace, offering, plan) {
 async function deleteServiceInstance(name, namespace) {
   let relativeUrl = `/apis/services.cloud.sap.com/v1/namespaces/${namespace}/serviceinstances/${name}`;
   try {
-    let resp = await window.extensionProps.kymaFetchFn({
-      relativeUrl,
-      init: {
-        method: 'DELETE',
-      },
-    });
+    let resp = await fetchWrapper(relativeUrl, {method: 'DELETE'});
     console.log(resp);
     return { status: 'ok', message: 'Service instance deleted' };
   } catch (e) {
@@ -165,19 +164,19 @@ async function deleteServiceInstance(name, namespace) {
 }
 async function getServiceInstances() {
   let relativeUrl = '/apis/services.cloud.sap.com/v1/serviceinstances';
-  let resp = await window.extensionProps.kymaFetchFn({ relativeUrl });
+  let resp = await fetchWrapper(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.extensionProps.kymaFetchFn({ relativeUrl });
+  let resp = await fetchWrapper(relativeUrl);
   let data = await resp.json();
   return data.items;
 }
 async function getNamespaces() {
   let relativeUrl = '/api/v1/namespaces';
-  let resp = await window.extensionProps.kymaFetchFn({ relativeUrl });
+  let resp = await fetchWrapper( relativeUrl );
   let data = await resp.json();
   return data.items;
 }

src/state/navigation/extensionsAtom.ts

@@ -424,12 +424,21 @@ export const useGetExtensions = () => {
   const { data: crds } = useGet(
     `/apis/apiextensions.k8s.io/v1/customresourcedefinitions`,
   );
-
+  
   useEffect(() => {
     if (isExtensibilityCustomComponentsEnabled) {
-      // Expose fetchFn and authData to the window object for the extensions to use
+      // Wrap busola fetch function to be able to use it in the extensions as regular fetch. 
+      // It reduces the learning curve for the extension developers and introduces loose coupling between Busola and the extensions.
+      function asRegularFetch(busolaFetch:any, url: string, options: any) {
+        return busolaFetch({
+          relativeUrl: url,
+          init: options,
+          abortController: options?.signal ? {signal: options?.signal}: undefined,
+        });
+      }
+
       (window as any).extensionProps = {
-        kymaFetchFn: fetchFn,
+        kymaFetchFn: (url:string, options:any) => asRegularFetch(fetchFn, url, options),
       };
     }