feat: Show GA and SA IDs in cluster metadata (#3889)

* feat: display GA and SA ids in metadata

* cleanup

* fix: add placeholder

* fix: import

* fix jobs test

Author: OliwiaGowor

public/i18n/en.yaml

@@ -117,6 +117,8 @@ clusters:
     title-current-cluster: Cluster Details
     kyma-version: Kyma Version
     kubernetes-version: Kubernetes Version
+    global-account-id: Global Account ID
+    subaccount-id: Subaccount ID
   statuses:
     inmemory: In Memory
     localstorage: Local Storage

src/components/App/App.tsx

@@ -22,7 +22,6 @@ import { useResourceSchemas } from './resourceSchemas/useResourceSchemas';
 import { useAfterInitHook } from 'state/useAfterInitHook';
 import useSidebarCondensed from 'sidebar/useSidebarCondensed';
 import { useGetValidationEnabledSchemas } from 'state/validationEnabledSchemasAtom';
-import { useGetKymaResources } from 'state/kymaResourcesAtom';
 
 import { SplitterElement, SplitterLayout } from '@ui5/webcomponents-react';
 import { showKymaCompanionState } from 'state/companion/showKymaCompanionAtom';
@@ -74,7 +73,6 @@ export default function App() {
   useSentry();
   useAppTracking();
   useAfterInitHook(kubeconfigIdState);
-  useGetKymaResources();
 
   const showCompanion = useRecoilValue(showKymaCompanionState);
 

src/components/Clusters/views/ClusterOverview/ClusterDetails.js

@@ -1,12 +1,18 @@
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ClusterStorageType } from '../ClusterStorageType';
+import { useRecoilValue } from 'recoil';
+
 import { useGetGardenerProvider } from './useGetGardenerProvider';
 import { useGetVersions } from './useGetVersions';
 import { useFeature } from 'hooks/useFeature';
+import { kymaResourcesAtom } from 'state/kymaResourcesAtom';
+
+import { Text } from '@ui5/webcomponents-react';
 import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/DynamicPageComponent';
 import ResourceDetailsCard from 'shared/components/ResourceDetails/ResourceDetailsCard';
-import { Text } from '@ui5/webcomponents-react';
 import ClusterModulesCard from './ClusterModulesCard';
+import { ClusterStorageType } from '../ClusterStorageType';
+import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 
 const GardenerProvider = () => {
   const { t } = useTranslation();
@@ -29,7 +35,14 @@ const GardenerProvider = () => {
 export default function ClusterDetails({ currentCluster }) {
   const { t } = useTranslation();
   const { loading, kymaVersion, k8sVersion } = useGetVersions();
+  const kymaResources = useRecoilValue(kymaResourcesAtom);
   const config = currentCluster?.config;
+  const kymaResourceLabels = useMemo(
+    () =>
+      kymaResources?.items.find(kymaResource => kymaResource?.status)?.metadata
+        .labels || kymaResources?.items[0]?.metadata?.labels,
+    [kymaResources],
+  );
 
   return (
     <div className="resource-details-container">
@@ -63,6 +76,22 @@ export default function ClusterDetails({ currentCluster }) {
               </Text>
             </DynamicPageComponent.Column>
             <GardenerProvider />
+            {kymaResourceLabels && (
+              <>
+                <DynamicPageComponent.Column
+                  title={t('clusters.overview.global-account-id')}
+                >
+                  {kymaResourceLabels['kyma-project.io/global-account-id'] ??
+                    EMPTY_TEXT_PLACEHOLDER}
+                </DynamicPageComponent.Column>
+                <DynamicPageComponent.Column
+                  title={t('clusters.overview.subaccount-id')}
+                >
+                  {kymaResourceLabels['kyma-project.io/subaccount-id'] ??
+                    EMPTY_TEXT_PLACEHOLDER}
+                </DynamicPageComponent.Column>
+              </>
+            )}
           </>
         }
       />

src/state/kymaResourcesAtom.ts

@@ -1,41 +1,29 @@
-import { atom, useRecoilValue, useSetRecoilState } from 'recoil';
+import { atom, selector } from 'recoil';
 import { getFetchFn } from './utils/getFetchFn';
-import { useEffect, useState } from 'react';
 import { clusterState } from './clusterAtom';
 
-export async function useGetKymaResources() {
-  const setKymaResources = useSetRecoilState(kymaResourcesAtom);
-  const [fetched, setFetched] = useState(false);
-  const cluster = useRecoilValue(clusterState);
+const kymaResourcesQuery = selector({
+  key: 'kymaResourcesQuery',
+  get: async ({ get }) => {
+    // We need to track if cluster changes
+    const _cluster = get(clusterState); // eslint-disable-line @typescript-eslint/no-unused-vars
+    const fetchFn = getFetchFn(get);
 
-  let kymas;
-  const fetchFn = getFetchFn(useRecoilValue);
+    if (!fetchFn) return null;
 
-  useEffect(() => {
-    setFetched(false);
-  }, [cluster?.name]);
-
-  if (fetched || !fetchFn) {
-    return;
-  }
-
-  if (fetchFn) {
     try {
       const response = await fetchFn({
         relativeUrl:
           '/apis/operator.kyma-project.io/v1beta2/namespaces/kyma-system/kymas',
       });
-      kymas = await response.json();
+      return await response.json();
     } catch (e) {
-      console.warn('Cannot load cluster params from the target cluster: ', e);
-    } finally {
-      setFetched(true);
+      return null;
     }
-  }
-  setKymaResources(kymas);
-}
+  },
+});
 
 export const kymaResourcesAtom = atom({
   key: 'kymaResourcesAtom',
-  default: null,
+  default: kymaResourcesQuery,
 });