PR changes

Author: Hubert-Szczepanski-SAP

src/components/Graphs/Graph.tsx

@@ -4,7 +4,7 @@ import type { NodeProps } from '@xyflow/react';
 import { RadioButton, FlexBox, FlexBoxAlignItems } from '@ui5/webcomponents-react';
 import styles from './Graph.module.css';
 import '@xyflow/react/dist/style.css';
-import { ManagedResourceItem, NodeData } from './types';
+import { ManagedResourceItem, NodeData, ColorBy } from './types';
 import CustomNode from './CustomNode';
 import { Legend, LegendItem } from './Legend';
 import { YamlViewDialog } from '../Yaml/YamlViewDialog';
@@ -27,7 +27,7 @@ const nodeTypes = {
 
 const Graph: React.FC = () => {
   const { t } = useTranslation();
-  const [colorBy, setColorBy] = useState<'provider' | 'source'>('provider');
+  const [colorBy, setColorBy] = useState<ColorBy>('provider');
   const [yamlDialogOpen, setYamlDialogOpen] = useState(false);
   const [yamlResource, setYamlResource] = useState<ManagedResourceItem | null>(null);
 
@@ -36,7 +36,7 @@ const Graph: React.FC = () => {
     setYamlDialogOpen(true);
   }, []);
 
-  const { nodes, edges, colorMap, treeData, loading, error } = useGraph(colorBy, handleYamlClick);
+  const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick);
 
   const yamlString = useMemo(
     () => (yamlResource ? stringify(removeManagedFieldsProperty(yamlResource)) : ''),
@@ -66,7 +66,7 @@ const Graph: React.FC = () => {
     return <div className={styles.message}>{t('Graphs.loadingGraph')}</div>;
   }
 
-  if (!treeData.length) {
+  if (!nodes.length) {
     return <div className={styles.message}>{t('Graphs.noResources')}</div>;
   }
 

src/components/Graphs/graphUtils.ts

@@ -8,9 +8,7 @@ export const getStatusFromConditions = (conditions?: Condition[]): StatusType =>
   return relevant?.status === 'True' ? 'OK' : 'ERROR';
 };
 
-export const resolveProviderType = (configName?: string, providerConfigsList?: ProviderConfig[]): string => {
-  if (!configName) return 'unknown';
-
+export const resolveProviderType = (configName: string, providerConfigsList : ProviderConfig[]): string => {
   for (const configList of providerConfigsList || []) {
     const match = configList.items?.find((item) => item.metadata?.name === configName);
 

src/components/Graphs/types.ts

@@ -1,3 +1,5 @@
+export type ColorBy = 'provider' | 'source';
+
 export interface Condition {
   type: 'Ready' | 'Synced' | unknown;
   status: 'True' | 'False';

src/components/Graphs/useGraph.ts

@@ -4,15 +4,15 @@ import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listMana
 import { resourcesInterval } from '../../lib/shared/constants';
 import { Node, Edge, Position, MarkerType } from '@xyflow/react';
 import dagre from 'dagre';
-import { NodeData, ManagedResourceGroup, ManagedResourceItem } from './types';
+import { NodeData, ManagedResourceGroup, ManagedResourceItem, ColorBy } from './types';
 import { extractRefs, generateColorMap, getStatusFromConditions, resolveProviderType } from './graphUtils';
 
 const nodeWidth = 250;
 const nodeHeight = 60;
 
 function buildGraph(
   treeData: NodeData[],
-  colorBy: 'provider' | 'source',
+  colorBy: ColorBy,
   colorMap: Record<string, string>,
 ): { nodes: Node<NodeData>[]; edges: Edge[] } {
   const dagreGraph = new dagre.graphlib.Graph();
@@ -76,7 +76,7 @@ function buildGraph(
   return { nodes: Object.values(nodeMap), edges: edgeList };
 }
 
-export function useGraph(colorBy: 'provider' | 'source', onYamlClick: (item: ManagedResourceItem) => void) {
+export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceItem) => void) {
   const {
     data: managedResources,
     isLoading: managedResourcesLoading,
@@ -178,5 +178,5 @@ export function useGraph(colorBy: 'provider' | 'source', onYamlClick: (item: Man
     setEdges(edges);
   }, [treeData, colorBy, colorMap]);
 
-  return { nodes, edges, colorMap, treeData, loading, error };
+  return { nodes, edges, colorMap, loading, error };
 }