feat: show flux graph

Author: Lasserich

src/components/BentoGrid/GraphCard/GraphCard.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
 import Graph from '../../Graphs/Graph';
 import styles from './GraphCard.module.css';
+import { ColorBy } from '../../Graphs/types';
 
 export interface GraphCardProps {
   title?: string;
   className?: string;
+  colorBy?: ColorBy;
 }
 
 export const GraphCard: React.FC<GraphCardProps> = ({ 
-  className = '' 
+  className = '',
+  colorBy = 'source'
 }) => {
   return (
     <div className={`${styles.container} ${className}`}>
       <div className={styles.simpleWrapper}>
-        <Graph />
+        <Graph colorBy={colorBy} />
       </div>
     </div>
   );

src/components/Graphs/Graph.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { ReactFlow, Background, Controls, Node, BackgroundVariant } from '@xyflow/react';
 import type { NodeProps } from '@xyflow/react';
 import { Button, Popover } from '@ui5/webcomponents-react';
@@ -28,14 +28,23 @@ const nodeTypes = {
   ),
 };
 
-const Graph: React.FC = () => {
+interface GraphProps {
+  colorBy?: ColorBy;
+}
+
+const Graph: React.FC<GraphProps> = ({ colorBy: initialColorBy = 'source' }) => {
   const { t } = useTranslation();
   const { isDarkTheme } = useTheme();
-  const [colorBy, setColorBy] = useState<ColorBy>('source');
+  const [colorBy, setColorBy] = useState<ColorBy>(initialColorBy);
   const [yamlDialogOpen, setYamlDialogOpen] = useState(false);
   const [yamlResource, setYamlResource] = useState<ManagedResourceItem | null>(null);
   const [filterPopoverOpen, setFilterPopoverOpen] = useState(false);
 
+  // Update colorBy when prop changes
+  useEffect(() => {
+    setColorBy(initialColorBy);
+  }, [initialColorBy]);
+
   const handleYamlClick = useCallback((item: ManagedResourceItem) => {
     setYamlResource(item);
     setYamlDialogOpen(true);

src/spaces/mcp/pages/McpPage.tsx

@@ -130,32 +130,6 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
     }, 300);
   };
 
-  // Remove separate page logic - we'll do dynamic expansion within the grid
-  // if (expandedCard) {
-  //   return (
-  //     <McpPageExpanded
-  //       mcp={mcp}
-  //       controlPlaneName={controlPlaneName}
-  //       onCollapse={handleCollapseExpanded}
-  //     />
-  //   );
-  // }
-
-  // For now, small cards will also scroll to their respective sections
-  const handleKyvernoClick = () => {
-    const el = document.querySelector('#crossplane');
-    if (el) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
-
-  const handleVaultClick = () => {
-    const el = document.querySelector('#crossplane');
-    if (el) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
-
   return (
     <ObjectPage
       preserveHeaderStateOnClick={true}
@@ -205,7 +179,10 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
               gridRow="1 / 5"
               className={expandedCard ? styles.expandedCard : ''}
             >
-              <GraphCard title="Resource Dependencies" />
+              <GraphCard 
+                title="Resource Dependencies" 
+                colorBy={expandedCard === 'gitops' ? 'flux' : 'source'}
+              />
             </BentoCard>
 
             {/* Crossplane component - shows in default view or when expanded */}
@@ -335,7 +312,6 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
                     isLoading={managedResourcesLoading}
                     error={managedResourcesError}
                     config={veleroConfig}
-                    onClick={handleKyvernoClick}
                     size="small"
                   />
                 </BentoCard>
@@ -354,7 +330,6 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
                     isLoading={managedResourcesLoading}
                     error={managedResourcesError}
                     config={vaultConfig}
-                    onClick={handleVaultClick}
                     size="small"
                   />
                 </BentoCard>