feat: use columnLayoutState to track currentResource

chriskari · chriskari · commit 332059b336ba · 2025-02-13T13:49:05.000+01:00
diff --git a/src/components/App/ExtensibilityRoutes.js b/src/components/App/ExtensibilityRoutes.js
@@ -41,6 +41,8 @@ const ColumnWrapper = ({
           resourceName: resourceName,
           resourceType: urlPath ?? resourceType,
           namespaceId: namespaceId,
+          apiGroup: extension?.general.resource.group,
+          apiVersion: extension?.general.resource.version,
         },
         endColumn: null,
       }
diff --git a/src/components/KymaCompanion/api/getPromptSuggestions.ts b/src/components/KymaCompanion/api/getPromptSuggestions.ts
@@ -1,6 +1,3 @@
-import { getClusterConfig } from 'state/utils/getBackendInfo';
-import { extractApiGroup } from 'resources/Roles/helpers';
-
 interface GetPromptSuggestionsParams {
   namespace?: string;
   resourceType?: string;
@@ -21,18 +18,18 @@ export default async function getPromptSuggestions({
   certificateAuthorityData,
 }: GetPromptSuggestionsParams): Promise<string[] | false> {
   try {
-    const { backendAddress } = getClusterConfig();
-    const url = `${backendAddress}/api/v1/namespaces/ai-core/services/http:ai-backend-clusterip:5000/proxy/api/v1/llm/init`;
-    const apiGroup = extractApiGroup(groupVersion);
+    const url = 'https://companion.cp.dev.kyma.cloud.sap/api/conversations/';
     const payload = JSON.parse(
-      `{"resource_kind":"${resourceType.toLowerCase()}","resource_api_version": "${apiGroup}","resource_name":"${resourceName}","namespace":"${namespace}"}`,
+      `{"resource_kind":"${resourceType.toLowerCase()}","resource_api_version": "${groupVersion}","resource_name":"${resourceName}","namespace":"${namespace}"}`,
     );
     const k8sAuthorization = `Bearer ${token}`;
 
+    const AUTH_TOKEN = '<AUTH_TOKEN>';
     let { results } = await fetch(url, {
       headers: {
         accept: 'application/json',
-        'content-type': 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${AUTH_TOKEN}`,
         'X-Cluster-Certificate-Authority-Data': certificateAuthorityData,
         'X-Cluster-Url': clusterUrl,
         'X-K8s-Authorization': k8sAuthorization,
diff --git a/src/components/KymaCompanion/hooks/usePromptSuggestions.ts b/src/components/KymaCompanion/hooks/usePromptSuggestions.ts
@@ -3,25 +3,46 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { sessionIDState } from '../../../state/companion/sessionIDAtom';
 import { clusterState } from 'state/clusterAtom';
 import getPromptSuggestions from '../api/getPromptSuggestions';
-import { currentResourceState } from 'state/companion/currentResourceAtom';
+import { ColumnLayoutState, columnLayoutState } from 'state/columnLayoutAtom';
+import { prettifyNameSingular } from 'shared/utils/helpers';
 
 export function usePromptSuggestions() {
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const setSessionID = useSetRecoilState(sessionIDState);
   const cluster = useRecoilValue(clusterState);
-  const currentResource = useRecoilValue(currentResourceState);
+  const columnLayout = useRecoilValue(columnLayoutState);
+
+  const getResourceFromColumnnLayout = (columnLayout: ColumnLayoutState) => {
+    return {
+      namespace: columnLayout.midColumn?.namespaceId ?? '',
+      resourceType: prettifyNameSingular(
+        columnLayout.midColumn?.resourceType ?? '',
+      ),
+      apiGroup: columnLayout.midColumn?.apiGroup ?? '',
+      apiVersion: columnLayout.midColumn?.apiVersion ?? '',
+      resourceName: columnLayout.midColumn?.resourceName ?? '',
+    };
+  };
 
   useEffect(() => {
     const userAuth = cluster?.currentContext.user.user;
+    const {
+      namespace,
+      resourceType,
+      apiGroup,
+      apiVersion,
+      resourceName,
+    } = getResourceFromColumnnLayout(columnLayout);
+    const groupVersion = apiGroup ? `${apiGroup}/${apiVersion}` : apiVersion;
 
     async function fetchSuggestions() {
       const sessionID = ''; // TODO
       setSessionID(sessionID);
       const promptSuggestions = await getPromptSuggestions({
-        namespace: currentResource.namespace,
-        resourceType: currentResource.resourceType,
-        groupVersion: currentResource.groupVersion,
-        resourceName: currentResource.resourceName,
+        namespace: namespace,
+        resourceType: resourceType,
+        groupVersion: groupVersion,
+        resourceName: resourceName,
         clusterUrl: cluster?.currentContext.cluster.cluster.server ?? '',
         token: userAuth && 'token' in userAuth ? userAuth.token : '', // TODO
         certificateAuthorityData:
@@ -34,15 +55,10 @@ export function usePromptSuggestions() {
       }
     }
 
-    if (
-      cluster &&
-      currentResource.resourceType &&
-      currentResource.groupVersion &&
-      suggestions.length === 0
-    ) {
+    if (cluster && resourceType && groupVersion && suggestions.length === 0) {
       fetchSuggestions();
     }
-  }, [cluster, currentResource, suggestions, setSessionID]);
+  }, [cluster, columnLayout, suggestions, setSessionID]);
 
   return suggestions;
 }
diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
@@ -50,6 +50,7 @@ import {
   useModuleTemplatesQuery,
 } from './kymaModulesQueries';
 import { findStatus } from './support';
+import { extractApiGroupVersion } from 'resources/Roles/helpers';
 
 export default function KymaModulesList({
   DeleteMessageBox,
@@ -345,12 +346,17 @@ export default function KymaModulesList({
         ? namespaceUrl(partialPath)
         : clusterUrl(partialPath);
 
+      const { group, version } = extractApiGroupVersion(
+        moduleStatus?.resource?.apiVersion,
+      );
       if (!isExtension) {
         setLayoutColumn({
           midColumn: {
             resourceType: moduleCrd?.metadata?.name,
             resourceName: moduleStatus?.resource?.metadata?.name,
             namespaceId: moduleStatus?.resource?.metadata.namespace || '',
+            apiGroup: group,
+            apiVersion: version,
           },
           layout: 'TwoColumnsMidExpanded',
           endColumn: null,
@@ -368,6 +374,8 @@ export default function KymaModulesList({
             ).toLowerCase(),
             resourceName: moduleStatus?.resource?.metadata?.name,
             namespaceId: moduleStatus?.resource?.metadata.namespace || '',
+            apiGroup: group,
+            apiVersion: version,
           },
           layout: 'TwoColumnsMidExpanded',
           endColumn: null,
diff --git a/src/resources/Roles/helpers.js b/src/resources/Roles/helpers.js
@@ -2,18 +2,20 @@ export function unique(arr) {
   return [...new Set(arr)];
 }
 export const EMPTY_API_GROUP_KEY = 'core-api-group';
-export const extractApiGroup = groupVersion => {
+export const extractApiGroupVersion = groupVersion => {
+  if (!groupVersion) return { group: '', version: '' };
   // handle core ('') group
-  if (groupVersion === 'v1') return '';
-  const [apiGroup] = groupVersion.split('/');
-  return apiGroup;
+  if (groupVersion === 'v1') return { group: '', version: 'v1' };
+
+  const [apiGroup, apiVersion] = groupVersion.split('/');
+  return { group: apiGroup, version: apiVersion };
 };
 
 export const getApiGroupInputOptions = groupVersions =>
-  unique(groupVersions?.map(extractApiGroup))?.map(g =>
-    g === ''
+  unique(groupVersions?.map(extractApiGroupVersion))?.map(({ group }) =>
+    group === ''
       ? { key: EMPTY_API_GROUP_KEY, text: '(core)' }
-      : { key: g, text: g },
+      : { key: group, text: group },
   ) ?? [];
 
 export function createRoleTemplate(namespace, { name = '', rules } = {}) {
diff --git a/src/resources/createResourceRoutes.js b/src/resources/createResourceRoutes.js
@@ -64,6 +64,8 @@ const ColumnWrapper = ({
           resourceName: resourceName,
           resourceType: props.resourceType,
           namespaceId: namespaceId,
+          apiGroup: props.apiGroup,
+          apiVersion: props.apiVersion,
         },
         endColumn: null,
       }
diff --git a/src/shared/ResourceForm/useCreateResource.js b/src/shared/ResourceForm/useCreateResource.js
@@ -14,6 +14,7 @@ import { usePrepareLayout } from 'shared/hooks/usePrepareLayout';
 import { columnLayoutState } from 'state/columnLayoutAtom';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
+import { extractApiGroupVersion } from 'resources/Roles/helpers';
 
 export function useCreateResource({
   singularName,
@@ -65,6 +66,7 @@ export function useCreateResource({
           showCreate: null,
         });
       } else {
+        const { group, version } = extractApiGroupVersion(resource?.apiVersion);
         setLayoutColumn(
           nextLayout === 'TwoColumnsMidExpanded'
             ? {
@@ -74,6 +76,8 @@ export function useCreateResource({
                   resourceName: resource.metadata.name,
                   resourceType: resource.kind,
                   namespaceId: resource.metadata.namespace,
+                  apiGroup: group,
+                  apiVersion: version,
                 },
                 endColumn: null,
               }
diff --git a/src/shared/components/GenericList/GenericList.js b/src/shared/components/GenericList/GenericList.js
@@ -32,6 +32,7 @@ import pluralize from 'pluralize';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
 import { handleActionIfFormOpen } from '../UnsavedMessageBox/helpers';
+import { extractApiGroupVersion } from 'resources/Roles/helpers';
 import './GenericList.scss';
 
 const defaultSort = {
@@ -71,7 +72,6 @@ export const GenericList = ({
   hasDetailsView,
   disableHiding = true,
   displayArrow = false,
-  handleRedirect = null,
   nameColIndex = 0,
   namespaceColIndex = -1,
   noHideFields,
@@ -343,20 +343,6 @@ export const GenericList = ({
       setEntrySelectedNamespace(itemNamespace);
       return customRowClick(item, selectedEntry);
     } else {
-      if (handleRedirect) {
-        const redirectLayout = handleRedirect(selectedEntry, resourceType);
-        if (redirectLayout) {
-          setLayoutColumn({
-            ...redirectLayout,
-          });
-          navigate(
-            redirectLayout.layout === 'OneColumn'
-              ? linkTo(selectedEntry)
-              : `${linkTo(selectedEntry)}?layout=${redirectLayout.layout}`,
-          );
-          return;
-        }
-      }
       setEntrySelected(
         selectedEntry?.metadata?.name ?? e.target.children[0].innerText,
       );
@@ -370,6 +356,9 @@ export const GenericList = ({
 
         navigate(linkTo(selectedEntry));
       } else {
+        const { group, version } = extractApiGroupVersion(
+          selectedEntry?.apiVersion,
+        );
         setLayoutColumn(
           columnLayout
             ? {
@@ -384,6 +373,8 @@ export const GenericList = ({
                     e.target.children[0].innerText,
                   resourceType: resourceType,
                   namespaceId: selectedEntry?.metadata?.namespace,
+                  apiGroup: group,
+                  apiVersion: version,
                 },
                 endColumn: null,
                 layout: 'TwoColumnsMidExpanded',
diff --git a/src/shared/components/ResourceDetails/ResourceDetails.js b/src/shared/components/ResourceDetails/ResourceDetails.js
@@ -1,4 +1,4 @@
-import React, { createContext, Suspense, useEffect, useState } from 'react';
+import React, { createContext, Suspense, useState } from 'react';
 import PropTypes from 'prop-types';
 import pluralize from 'pluralize';
 import { useTranslation } from 'react-i18next';
@@ -27,10 +27,9 @@ import { ResourceStatusCard } from '../ResourceStatusCard/ResourceStatusCard';
 import { EMPTY_TEXT_PLACEHOLDER } from '../../constants';
 import { ReadableElapsedTimeFromNow } from '../ReadableElapsedTimeFromNow/ReadableElapsedTimeFromNow';
 import { HintButton } from '../DescriptionHint/DescriptionHint';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { columnLayoutState } from 'state/columnLayoutAtom';
 import BannerCarousel from 'components/Extensibility/components/FeaturedCard/BannerCarousel';
-import { currentResourceState } from 'state/companion/currentResourceAtom';
 
 // This component is loaded after the page mounts.
 // Don't try to load it on scroll. It was tested.
@@ -171,25 +170,6 @@ function Resource({
   className,
   headerDescription,
 }) {
-  const SetCurrentResource = useSetRecoilState(currentResourceState);
-  useEffect(() => {
-    SetCurrentResource({
-      namespace: resource?.metadata?.namespace ?? '',
-      resourceType: resource?.kind ?? '',
-      groupVersion: resource?.apiVersion ?? '',
-      resourceName: resource?.metadata?.name ?? '',
-    });
-
-    return () => {
-      SetCurrentResource({
-        namespace: '',
-        resourceType: '',
-        groupVersion: '',
-        resourceName: '',
-      });
-    };
-  }, [SetCurrentResource, resource]);
-
   useVersionWarning({ resourceUrl, resourceType });
   const { t } = useTranslation();
   const prettifiedResourceKind = prettifyNameSingular(
diff --git a/src/shared/components/ResourcesList/ResourcesList.js b/src/shared/components/ResourcesList/ResourcesList.js
@@ -71,7 +71,6 @@ ResourcesList.propTypes = {
   disableMargin: PropTypes.bool,
   enableColumnLayout: PropTypes.bool,
   layoutNumber: PropTypes.string,
-  handleRedirect: PropTypes.func,
   filterFn: PropTypes.func,
 };
 
@@ -232,7 +231,6 @@ export function ResourceListRenderer({
   simpleEmptyListMessage = false,
   disableHiding,
   displayArrow,
-  handleRedirect,
   accessibleName,
 }) {
   useVersionWarning({
@@ -562,7 +560,6 @@ export function ResourceListRenderer({
               ...emptyListProps,
               simpleEmptyListMessage: simpleEmptyListMessage,
             }}
-            handleRedirect={handleRedirect}
             nameColIndex={nameColIndex}
             namespaceColIndex={namespaceColIndex}
           />
diff --git a/src/state/columnLayoutAtom.ts b/src/state/columnLayoutAtom.ts
@@ -4,13 +4,15 @@ type ColumnState = {
   resourceName: null | string;
   resourceType: null | string;
   namespaceId: null | string;
+  apiGroup: null | string;
+  apiVersion: null | string;
 };
 type ShowCreate = {
   resourceType: null | string;
   namespaceId: null | string;
 };
 
-type ColumnLayoutState = {
+export type ColumnLayoutState = {
   midColumn: null | ColumnState;
   endColumn: null | ColumnState;
   showCreate?: null | ShowCreate;
diff --git a/src/state/companion/currentResourceAtom.ts b/src/state/companion/currentResourceAtom.ts

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,8 @@ const ColumnWrapper = ({`
`41`	`41`	`resourceName: resourceName,`
`42`	`42`	`resourceType: urlPath ?? resourceType,`
`43`	`43`	`namespaceId: namespaceId,`
	`44`	`+ apiGroup: extension?.general.resource.group,`
	`45`	`+ apiVersion: extension?.general.resource.version,`
`44`	`46`	`},`
`45`	`47`	`endColumn: null,`
`46`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,8 @@ const ColumnWrapper = ({`
`64`	`64`	`resourceName: resourceName,`
`65`	`65`	`resourceType: props.resourceType,`
`66`	`66`	`namespaceId: namespaceId,`
	`67`	`+ apiGroup: props.apiGroup,`
	`68`	`+ apiVersion: props.apiVersion,`
`67`	`69`	`},`
`68`	`70`	`endColumn: null,`
`69`	`71`	`}`