feat: add YAML splitter (#309)

Co-authored-by: Copilot <[email protected]>

Author: andreaskienle

src/AppRouter.tsx

@@ -6,6 +6,8 @@ import { SentryRoutes } from './mount.ts';
 import ProjectPage from './spaces/onboarding/pages/ProjectPage.tsx';
 import McpPage from './spaces/mcp/pages/McpPage.tsx';
 import { SearchParamToggleVisibility } from './components/Helper/FeatureToggleExistance.tsx';
+import { SplitterProvider } from './components/Splitter/SplitterContext.tsx';
+import { SplitterLayout } from './components/Splitter/SplitterLayout.tsx';
 
 function AppRouter() {
   return (
@@ -20,20 +22,24 @@ function AppRouter() {
         <ShellBarComponent />
       </SearchParamToggleVisibility>
 
-      <Router>
-        <SentryRoutes>
-          <Route path="/mcp" element={<GlobalProviderOutlet />}>
-            <Route path="projects" element={<ProjectListView />} />
-            <Route path="projects/:projectName" element={<ProjectPage />} />
-            <Route
-              path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName"
-              element={<McpPage />}
-            />
-          </Route>
-          <Route path="/" element={<Navigate to="/mcp/projects" />} />
-          <Route path="*" element={<Navigate to="/" />} />
-        </SentryRoutes>
-      </Router>
+      <SplitterProvider>
+        <SplitterLayout>
+          <Router>
+            <SentryRoutes>
+              <Route path="/mcp" element={<GlobalProviderOutlet />}>
+                <Route path="projects" element={<ProjectListView />} />
+                <Route path="projects/:projectName" element={<ProjectPage />} />
+                <Route
+                  path="projects/:projectName/workspaces/:workspaceName/mcps/:controlPlaneName"
+                  element={<McpPage />}
+                />
+              </Route>
+              <Route path="/" element={<Navigate to="/mcp/projects" />} />
+              <Route path="*" element={<Navigate to="/" />} />
+            </SentryRoutes>
+          </Router>
+        </SplitterLayout>
+      </SplitterProvider>
     </>
   );
 }

src/components/ControlPlane/FluxList.tsx

@@ -11,6 +11,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 export default function FluxList() {
   const { data: gitReposData, error: repoErr, isLoading: repoIsLoading } = useApiResource(FluxRequest); //404 if component not enabled
@@ -81,7 +82,7 @@ export default function FluxList() {
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
-          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },
     ],
@@ -125,7 +126,9 @@ export default function FluxList() {
         width: 75,
         accessor: 'yaml',
         disableFilters: true,
-        Cell: (cellData: CellData<FluxRow>) => <YamlViewButton resourceObject={cellData.cell.row.original?.item} />,
+        Cell: (cellData: CellData<FluxRow>) => (
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
+        ),
       },
     ],
     [t],
@@ -173,14 +176,14 @@ export default function FluxList() {
       <div className="crossplane-table-element">
         <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
           <Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
-          <YamlViewButton resourceObject={gitReposData} />
+          <YamlViewButton variant="resource" resource={gitReposData as unknown as Resource} />
         </FlexBox>
         <ConfiguredAnalyticstable columns={gitReposColumns} isLoading={repoIsLoading} data={gitReposRows} />
       </div>
       <div className="crossplane-table-element">
         <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
           <Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
-          <YamlViewButton resourceObject={kustmizationData} />
+          <YamlViewButton variant="resource" resource={kustmizationData as unknown as Resource} />
         </FlexBox>
         <ConfiguredAnalyticstable
           columns={kustomizationsColumns}

src/components/ControlPlane/ManagedResources.tsx

@@ -17,6 +17,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 interface CellData<T> {
   cell: {
@@ -107,7 +108,7 @@ export function ManagedResources() {
         disableFilters: true,
         Cell: (cellData: CellData<ResourceRow>) =>
           cellData.cell.row.original?.item ? (
-            <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+            <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
           ) : undefined,
       },
     ],

src/components/ControlPlane/Providers.tsx

@@ -19,6 +19,7 @@ import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 interface CellData<T> {
   cell: {
@@ -110,7 +111,7 @@ export function Providers() {
         accessor: 'yaml',
         disableFilters: true,
         Cell: (cellData: CellData<ProvidersRow>) => (
-          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+          <YamlViewButton variant="resource" resource={cellData.cell.row.original?.item as Resource} />
         ),
       },
     ],

src/components/ControlPlane/ProvidersConfig.tsx

@@ -13,6 +13,7 @@ import { formatDateAsTimeAgo } from '../../utils/i18n/timeAgo';
 import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 
 import { useMemo } from 'react';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 type Rows = {
   parent: string;
@@ -79,7 +80,7 @@ export function ProvidersConfig() {
         disableFilters: true,
         Cell: (cellData: CellData<Rows>) =>
           cellData.cell.row.original?.resource ? (
-            <YamlViewButton resourceObject={cellData.cell.row.original?.resource} />
+            <YamlViewButton variant="resource" resource={cellData.cell.row.original?.resource as Resource} />
           ) : undefined,
       },
     ],

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -22,13 +22,13 @@ import {
   PatchMCPResourceForDeletionBody,
 } from '../../../lib/api/types/crate/deleteMCP.ts';
 
-import { YamlViewButtonWithLoader } from '../../Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 import { useToast } from '../../../context/ToastContext.tsx';
 import { canConnectToMCP } from '../controlPlanes.ts';
+
 import { Infobox } from '../../Ui/Infobox/Infobox.tsx';
 
 import { ControlPlaneCardMenu } from './ControlPlaneCardMenu.tsx';
-
 import { EditManagedControlPlaneWizardDataLoader } from '../../Wizards/CreateManagedControlPlane/EditManagedControlPlaneWizardDataLoader.tsx';
 import { DISPLAY_NAME_ANNOTATION } from '../../../lib/api/types/shared/keyNames.ts';
 
@@ -99,7 +99,8 @@ export const ControlPlaneCard = ({ controlPlane, workspace, projectName }: Props
                 setIsEditManagedControlPlaneWizardOpen={handleIsManagedControlPlaneWizardOpen}
               />
               <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" gap={10}>
-                <YamlViewButtonWithLoader
+                <YamlViewButton
+                  variant="loader"
                   workspaceName={controlPlane.metadata.namespace}
                   resourceName={controlPlane.metadata.name}
                   resourceType={'managedcontrolplanes'}

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -17,7 +17,7 @@ import { ListControlPlanes } from '../../../lib/api/types/crate/controlPlanes.ts
 import IllustratedError from '../../Shared/IllustratedError.tsx';
 import { APIError } from '../../../lib/api/error.ts';
 import { useTranslation } from 'react-i18next';
-import { YamlViewButtonWithLoader } from '../../Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { useLink } from '../../../lib/shared/useLink.ts';
 import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
@@ -119,7 +119,8 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
 
               <MembersAvatarView members={uniqueMembers} project={projectName} workspace={workspaceName} />
               <FlexBox justifyContent={'SpaceBetween'} gap={10}>
-                <YamlViewButtonWithLoader
+                <YamlViewButton
+                  variant="loader"
                   workspaceName={workspace.metadata.namespace}
                   resourceName={workspaceName}
                   resourceType={'workspaces'}

src/components/Graphs/Graph.tsx

@@ -7,14 +7,13 @@ import '@xyflow/react/dist/style.css';
 import { NodeData, ColorBy } from './types';
 import CustomNode from './CustomNode';
 import { Legend, LegendItem } from './Legend';
-import { YamlViewDialog } from '../Yaml/YamlViewDialog';
-import YamlViewer from '../Yaml/YamlViewer';
-import { stringify } from 'yaml';
-import { removeManagedFieldsAndFilterData, Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 import { useTranslation } from 'react-i18next';
 import { useGraph } from './useGraph';
 import { ManagedResourceItem } from '../../lib/shared/types';
 import { useTheme } from '../../hooks/useTheme';
+import { useSplitter } from '../Splitter/SplitterContext.tsx';
+import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
+import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
 const nodeTypes = {
   custom: (props: NodeProps<Node<NodeData, 'custom'>>) => (
@@ -31,33 +30,22 @@ const nodeTypes = {
 
 const Graph: React.FC = () => {
   const { t } = useTranslation();
+  const { openInAside } = useSplitter();
   const { isDarkTheme } = useTheme();
   const [colorBy, setColorBy] = useState<ColorBy>('provider');
-  const [yamlDialogOpen, setYamlDialogOpen] = useState(false);
-  const [yamlResource, setYamlResource] = useState<ManagedResourceItem | null>(null);
 
-  const handleYamlClick = useCallback((item: ManagedResourceItem) => {
-    setYamlResource(item);
-    setYamlDialogOpen(true);
-  }, []);
+  const handleYamlClick = useCallback(
+    (item: ManagedResourceItem) => {
+      const yamlFilename = item
+        ? `${item.kind ?? ''}${item.metadata?.name ? '_' : ''}${item.metadata?.name ?? ''}`
+        : '';
 
-  const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick);
-
-  const yamlString = useMemo(
-    () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource as unknown as Resource, true)) : ''),
-    [yamlResource],
+      openInAside(<YamlSidePanel resource={item as unknown as Resource} filename={yamlFilename} />);
+    },
+    [openInAside],
   );
 
-  const yamlStringToCopy = useMemo(
-    () => (yamlResource ? stringify(removeManagedFieldsAndFilterData(yamlResource as unknown as Resource, false)) : ''),
-    [yamlResource],
-  );
-
-  const yamlFilename = useMemo(() => {
-    if (!yamlResource) return '';
-    const { kind, metadata } = yamlResource;
-    return `${kind ?? ''}${metadata?.name ? '_' : ''}${metadata?.name ?? ''}`;
-  }, [yamlResource]);
+  const { nodes, edges, colorMap, loading, error } = useGraph(colorBy, handleYamlClick);
 
   const legendItems: LegendItem[] = useMemo(
     () =>
@@ -136,13 +124,6 @@ const Graph: React.FC = () => {
           </Panel>
         </ReactFlow>
       </div>
-      <YamlViewDialog
-        isOpen={yamlDialogOpen}
-        setIsOpen={setYamlDialogOpen}
-        dialogContent={
-          <YamlViewer yamlString={yamlString} yamlStringToCopy={yamlStringToCopy} filename={yamlFilename} />
-        }
-      />
     </div>
   );
 };

src/components/Projects/ProjectsList.tsx

@@ -9,7 +9,7 @@ import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/arrow-right';
 import { ListProjectNames } from '../../lib/api/types/crate/listProjectNames';
 import { t } from 'i18next';
-import { YamlViewButtonWithLoader } from '../Yaml/YamlViewButtonWithLoader.tsx';
+import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
 import { useMemo } from 'react';
 import { ProjectsListItemMenu } from './ProjectsListItemMenu.tsx';
 
@@ -98,7 +98,8 @@ export default function ProjectsList() {
               alignItems: 'center',
             }}
           >
-            <YamlViewButtonWithLoader
+            <YamlViewButton
+              variant="loader"
               resourceType={'projects'}
               resourceName={instance.cell.row.original?.projectName}
             />

src/components/Splitter/SplitterContext.tsx

@@ -0,0 +1,39 @@
+import { createContext, ReactNode, use, useCallback, useMemo, useState } from 'react';
+
+interface SplitterContextType {
+  isAsideVisible: boolean;
+  asideContent: ReactNode;
+  closeAside: () => void;
+  openInAside: (content: ReactNode) => void;
+}
+
+const SplitterContext = createContext<SplitterContextType | null>(null);
+
+export function SplitterProvider({ children }: { children: ReactNode }) {
+  const [isAsideVisible, setIsAsideVisible] = useState(false);
+  const [asideContent, setAsideContent] = useState<ReactNode | null>(null);
+
+  const openInAside = useCallback((node: ReactNode) => {
+    setAsideContent(node);
+    setIsAsideVisible(true);
+  }, []);
+
+  const closeAside = useCallback(() => {
+    setIsAsideVisible(false);
+    setAsideContent(null);
+  }, []);
+
+  const value = useMemo(() => {
+    return { isAsideVisible, asideContent, closeAside, openInAside };
+  }, [isAsideVisible, asideContent, closeAside, openInAside]);
+
+  return <SplitterContext value={value}>{children}</SplitterContext>;
+}
+
+export function useSplitter() {
+  const context = use(SplitterContext);
+  if (!context) {
+    throw new Error('useSplitter must be used within an SplitterProvider.');
+  }
+  return context;
+}