Redesign custom ui urls

kyma-project · Oct 16, 2024 · 72524f0 · 72524f0
1 parent ee1a574
commit 72524f0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 39 deletions.
diff --git a/public/extensions/extensions.yaml b/public/extensions/extensions.yaml
@@ -14,6 +14,8 @@ general:
   backendUrls: 
     post: http://127.0.0.1:8001/api/v1/namespaces/ak/services/nginx-service/proxy/data.json
     get: /api/secrets
+    url: /api/service-offerings
+    query: sm_secret_name=sap-btp-service-operator&sm_secret_namespace=kyma-system
     host: http://localhost:8000
   features:
     disableDefaultColumns: true

diff --git a/src/components/Extensibility/ExtensibilityList.js b/src/components/Extensibility/ExtensibilityList.js
@@ -60,10 +60,13 @@ export const ExtensibilityListCore = ({
     apiGroup: resource?.group,
     apiVersion: resource?.version,
     hasDetailsView: !!resMetaData?.details,
-    getUrl: backendUrls?.get,
-    customUIUrl: backendUrls?.host,
   });
 
+  listProps.customUIUrl = {
+    host: backendUrls?.host,
+    url: backendUrls?.url,
+    query: backendUrls?.query,
+  };
   const resourceTitle = resMetaData?.general?.name;
   listProps.resourceTitle = exists('name')
     ? t('name')
@@ -137,6 +140,7 @@ export const ExtensibilityListCore = ({
       disableCreate={disableCreate}
       disableEdit={disableEdit}
       disableDelete={disableDelete}
+      disableDefaultColumns={disableDefaultColumns}
       createResourceForm={ExtensibilityCreate}
       sortBy={defaultSortOptions =>
         sortBy(jsonata, sortOptions, t, defaultSortOptions)

diff --git a/src/resources/helpers.js b/src/resources/helpers.js
@@ -33,26 +33,21 @@ export const usePrepareListProps = ({
   apiGroup,
   apiVersion,
   hasDetailsView,
-  getUrl,
-  customUIUrl,
 }) => {
   const { namespaceId } = useParams();
   const queryParams = new URLSearchParams(window.location.search);
   const { i18n, t } = useTranslation();
 
   const api = apiGroup ? `apis/${apiGroup}/${apiVersion}` : `api/${apiVersion}`;
-  const resourceUrl = getUrl
-    ? getUrl
-    : namespaceId && namespaceId !== '-all-'
-    ? `/${api}/namespaces/${namespaceId}/${resourceType?.toLowerCase()}`
-    : `/${api}/${resourceType?.toLowerCase()}`;
+  const resourceUrl =
+    namespaceId && namespaceId !== '-all-'
+      ? `/${api}/namespaces/${namespaceId}/${resourceType?.toLowerCase()}`
+      : `/${api}/${resourceType?.toLowerCase()}`;
 
   return {
     hasDetailsView,
     readOnly: queryParams.get('readOnly') === 'true',
     resourceUrl,
-    isAbsolute: !!getUrl,
-    customUIUrl: customUIUrl,
     resourceType: resourceCustomType || pluralize(resourceType || ''),
     resourceTitle: i18n.exists(resourceI18Key) ? t(resourceI18Key) : '',
     namespace: namespaceId,
@@ -69,16 +64,13 @@ export const usePrepareDetailsProps = ({
   resourceName,
   namespaceId,
   showYamlTab,
-  getUrl,
 }) => {
   const encodedResourceName = encodeURIComponent(resourceName);
   const queryParams = new URLSearchParams(window.location.search);
   const { i18n, t } = useTranslation();
   const api = apiGroup ? `apis/${apiGroup}/${apiVersion}` : `api/${apiVersion}`;
   const resourceUrl = resourceName
-    ? getUrl
-      ? getUrl
-      : namespaceId
+    ? namespaceId
       ? `/${api}/namespaces/${namespaceId}/${resourceType?.toLowerCase()}/${encodedResourceName}`
       : `/${api}/${resourceType?.toLowerCase()}/${encodedResourceName}`
     : '';

diff --git a/src/shared/components/ResourcesList/ResourcesList.js b/src/shared/components/ResourcesList/ResourcesList.js
@@ -146,7 +146,6 @@ function Resources(props) {
     resourceUrl,
     skipDataLoading,
     isCompact,
-    isAbsolute,
     customUIUrl,
   } = props;
   useWindowTitle(prettifyNamePlural(resourceTitle, resourceType), {
@@ -158,7 +157,6 @@ function Resources(props) {
     {
       pollingInterval: 3000,
       skip: skipDataLoading,
-      isAbsolute: isAbsolute,
       customUIUrl,
     },
   );

diff --git a/src/shared/hooks/BackendAPI/useFetch.ts b/src/shared/hooks/BackendAPI/useFetch.ts
@@ -8,14 +8,12 @@ import { getClusterConfig } from '../../../state/utils/getBackendInfo';
 import { clusterState, ActiveClusterState } from '../../../state/clusterAtom';
 
 export type FetchFn = ({
-  isAbsolute,
   customUIUrl,
   relativeUrl,
   abortController,
   init,
 }: {
-  isAbsolute?: string;
-  customUIUrl?: string;
+  customUIUrl?: any;
   relativeUrl: string;
   init?: any;
   abortController?: AbortController;
@@ -28,14 +26,12 @@ export const createFetchFn = ({
   authData: AuthDataState;
   cluster: ActiveClusterState;
 }): FetchFn => async ({
-  isAbsolute,
   customUIUrl,
   relativeUrl,
   abortController,
   init,
 }: {
-  isAbsolute?: string;
-  customUIUrl?: string;
+  customUIUrl?: any;
   relativeUrl: string;
   init?: any;
   abortController?: AbortController;
@@ -50,22 +46,21 @@ export const createFetchFn = ({
   };
   const { backendAddress, customUIBackendAddress } = getClusterConfig();
 
+  let preparedCustomUIUrl =
+    customUIUrl?.url && customUIUrl?.host
+      ? customUIBackendAddress +
+        customUIUrl?.url +
+        '?customUIUrl=' +
+        customUIUrl?.host
+      : '';
+  if (preparedCustomUIUrl) {
+    preparedCustomUIUrl = preparedCustomUIUrl + '&' + customUIUrl.query;
+  }
+
   try {
     const response = await fetch(
-      isAbsolute
-        ? customUIBackendAddress +
-            relativeUrl +
-            (customUIUrl ? `?customUIUrl=${customUIUrl}` : '')
-        : backendAddress + relativeUrl,
-      isAbsolute
-        ? {
-            ...init,
-            headers: {
-              ...init.headers,
-              'X-Cluster-Url': 'http://localhost:8000',
-            },
-          }
-        : init,
+      preparedCustomUIUrl ? preparedCustomUIUrl : backendAddress + relativeUrl,
+      init,
     );
     if (response.ok) {
       return response;

diff --git a/src/shared/hooks/BackendAPI/useGet.js b/src/shared/hooks/BackendAPI/useGet.js
@@ -19,7 +19,6 @@ const useGetHook = processDataFn =>
       onDataReceived,
       skip,
       errorTolerancy = undefined,
-      isAbsolute = false,
       customUIUrl,
     } = {},
   ) {
@@ -65,7 +64,6 @@ const useGetHook = processDataFn =>
           requestData.current[currentRequestId] = { start: Date.now() };
           const response = await fetch({
             relativeUrl: path,
-            isAbsolute: isAbsolute,
             customUIUrl: customUIUrl,
             abortController: abortController.current,
           });