moving yalm viewer outside of Reactflow to fix bug

Author: Hubert-Szczepanski-SAP

src/components/Graphs/CustomNode.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { Handle, Position } from 'reactflow';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import { YamlViewButton } from '../Yaml/YamlViewButton';
+import { Button, Icon } from '@ui5/webcomponents-react';
 import StatusIcon from './StatusIcon';
-import { CustomNodeProps } from './types';
+import { CustomNodeProps, ManagedResourceItem } from './types';
 import styles from './CustomNode.module.css';
 
-const CustomNode: React.FC<CustomNodeProps> = ({ data }) => (
+const CustomNode: React.FC<CustomNodeProps & { onYamlClick: (item: ManagedResourceItem) => void }> = ({
+  data,
+  onYamlClick,
+}) => (
   <div className={styles.nodeContainer} style={{ fontFamily: ThemingParameters.sapFontFamily }}>
     <Handle type="target" position={Position.Top} style={{ visibility: 'hidden' }} />
     <Handle type="source" position={Position.Bottom} style={{ visibility: 'hidden' }} />
@@ -22,7 +25,15 @@ const CustomNode: React.FC<CustomNodeProps> = ({ data }) => (
       </div>
     </div>
     <div className={styles.yamlButtonWrapper}>
-      <YamlViewButton resourceObject={data.item} smallerIcon={true} />
+      <Button
+        className={styles.smallerIconButton}
+        design="Transparent"
+        aria-label="YAML"
+        title="YAML"
+        onClick={() => onYamlClick(data.item)}
+      >
+        <Icon name="document" style={{ color: 'rgb(0, 100, 217)' }} />
+      </Button>
     </div>
   </div>
 );

src/components/Graphs/Graph.tsx

@@ -9,6 +9,7 @@ import {
   useEdgesState,
   MarkerType,
   Position,
+  NodeProps,
 } from 'reactflow';
 import styles from './Graph.module.css';
 import dagre from 'dagre';
@@ -21,14 +22,14 @@ import { NodeData, ManagedResourceGroup, ManagedResourceItem } from './types';
 import CustomNode from './CustomNode';
 import { Legend } from './Legend';
 import { extractRefs, generateColorMap, getStatusFromConditions, resolveProviderType } from './graphUtils';
+import { YamlViewDialog } from '../Yaml/YamlViewDialog';
+import YamlViewer from '../Yaml/YamlViewer';
+import { stringify } from 'yaml';
+import { removeManagedFieldsProperty } from '../../utils/removeManagedFieldsProperty';
 
 const nodeWidth = 250;
 const nodeHeight = 60;
 
-const nodeTypes = {
-  custom: CustomNode,
-};
-
 function buildGraph(
   treeData: NodeData[],
   colorBy: 'provider' | 'source',
@@ -106,6 +107,28 @@ const Graph: React.FC = () => {
   const [edges, setEdges] = useEdgesState<Edge[]>([]);
   const [colorBy, setColorBy] = useState<'provider' | 'source'>('provider');
 
+  const [yamlDialogOpen, setYamlDialogOpen] = useState(false);
+  const [yamlResource, setYamlResource] = useState<ManagedResourceItem | null>(null);
+
+  const handleYamlClick = (item: ManagedResourceItem) => {
+    setYamlResource(item);
+    setYamlDialogOpen(true);
+  };
+
+  const nodeTypes = {
+    custom: (props: NodeProps<NodeData>) => <CustomNode {...props} onYamlClick={handleYamlClick} />,
+  };
+
+  const yamlString = useMemo(
+    () => (yamlResource ? stringify(removeManagedFieldsProperty(yamlResource)) : ''),
+    [yamlResource],
+  );
+  const yamlFilename = useMemo(() => {
+    if (!yamlResource) return '';
+    const { kind, metadata } = yamlResource;
+    return `${kind ?? ''}${metadata?.name ? '_' : ''}${metadata?.name ?? ''}`;
+  }, [yamlResource]);
+
   const treeData = useMemo(() => {
     const allNodesMap = new Map<string, NodeData>();
     if (managedResources) {
@@ -249,13 +272,20 @@ const Graph: React.FC = () => {
           nodesDraggable={false}
           nodesConnectable={false}
           elementsSelectable={false}
-          zoomOnScroll={false}
+          zoomOnScroll={true}
           panOnDrag={true}
         >
           <Controls />
           <Background />
         </ReactFlow>
       </div>
+      {yamlDialogOpen && yamlResource && (
+        <YamlViewDialog
+          isOpen={yamlDialogOpen}
+          setIsOpen={setYamlDialogOpen}
+          dialogContent={<YamlViewer yamlString={yamlString} filename={yamlFilename} />}
+        />
+      )}
       <Legend nodes={nodes.map((n) => n.data as NodeData)} colorBy={colorBy} generateColorMap={generateColorMap} />
     </div>
   );

src/components/Yaml/YamlViewButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon } from '@ui5/webcomponents-react';
+import { Button } from '@ui5/webcomponents-react';
 import { FC, useMemo, useState } from 'react';
 import styles from './YamlViewer.module.css';
 import { useTranslation } from 'react-i18next';
@@ -10,10 +10,9 @@ import { YamlViewDialog } from './YamlViewDialog.tsx';
 
 export type YamlViewButtonProps = {
   resourceObject: unknown;
-  smallerIcon?: boolean;
 };
 
-export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject, smallerIcon }) => {
+export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useTranslation();
   const resource = resourceObject as Resource;
@@ -34,15 +33,15 @@ export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject, smalle
       />
 
       <Button
-        className={smallerIcon ? styles.smallerIconButton : styles.button}
+        className={styles.button}
         design={'Transparent'}
         aria-label={t('buttons.viewResource')}
         title={t('buttons.viewResource')}
         onClick={() => {
           setIsOpen(true);
         }}
       >
-        {smallerIcon ? <Icon name="document" className={styles.smallIcon} /> : <YamlIcon />}
+        <YamlIcon />
       </Button>
     </span>
   );