From aceba98aa13c2edfdd2f713a6a3d947e2b084d0d Mon Sep 17 00:00:00 2001
From: Robert Luby <rluby@redhat.com>
Date: Tue, 16 Jun 2026 16:04:37 +0200
Subject: [PATCH] SRVOCF-850: Editor Page layout and UX improvements

---
 .../function-edit/FunctionEditPage.test.tsx   | 13 +++++++
 src/pages/function-edit/FunctionEditPage.tsx  | 39 ++++++++++++-------
 .../components/FileTreeView.test.tsx          | 17 ++++++++
 .../function-edit/components/FileTreeView.tsx |  7 +++-
 4 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/pages/function-edit/FunctionEditPage.test.tsx b/src/pages/function-edit/FunctionEditPage.test.tsx
index 7a65709..c730a39 100644
--- a/src/pages/function-edit/FunctionEditPage.test.tsx
+++ b/src/pages/function-edit/FunctionEditPage.test.tsx
@@ -122,6 +122,19 @@ describe('FunctionEditPage', () => {
     expect(screen.getByRole('button', { name: /Back to Functions/ })).toBeInTheDocument();
   });
 
+  it('shows info bar with function name and repo link after loading', async () => {
+    setupFetchHandlers();
+
+    renderEditPage('my-func');
+
+    await waitFor(() => {
+      expect(screen.getByText('func.yaml')).toBeInTheDocument();
+    });
+
+    const repoLink = screen.getByRole('link', { name: 'twoGiants/my-func' });
+    expect(repoLink).toHaveAttribute('target', '_blank');
+  });
+
   it('auto-selects handler file based on runtime from func.yaml', async () => {
     setupFetchHandlers();
 
diff --git a/src/pages/function-edit/FunctionEditPage.tsx b/src/pages/function-edit/FunctionEditPage.tsx
index 00c92d4..3a45b14 100644
--- a/src/pages/function-edit/FunctionEditPage.tsx
+++ b/src/pages/function-edit/FunctionEditPage.tsx
@@ -1,6 +1,15 @@
 import { CodeEditor, DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
 import type { Language } from '@patternfly/react-code-editor';
-import { EmptyState, EmptyStateBody, Flex, FlexItem, PageSection } from '@patternfly/react-core';
+import {
+  Content,
+  ContentVariants,
+  EmptyState,
+  EmptyStateBody,
+  PageSection,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+} from '@patternfly/react-core';
 import { CodeIcon } from '@patternfly/react-icons';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -40,15 +49,17 @@ function FunctionEditPageContent() {
       </ListPageHeader>
       <PageSection>
         <EditToolbar hasChanges={state.hasChanges} onSave={state.saveFiles} />
-        <Flex
-          direction={{ default: 'row' }}
-          flexWrap={{ default: 'nowrap' }}
-          alignItems={{ default: 'alignItemsStretch' }}
-        >
-          <FlexItem
-            flex={{ default: 'flexNone' }}
-            style={{ width: '16rem', overflowX: 'auto', overflowY: 'auto' }}
-          >
+        {state.repoMetadata && (
+          <Content component={ContentVariants.p}>
+            {state.repoMetadata.name}
+            {' · '}
+            <a href={state.repoMetadata.url} target="_blank" rel="noopener noreferrer">
+              {state.repoMetadata.owner}/{state.repoMetadata.name}
+            </a>
+          </Content>
+        )}
+        <Sidebar hasGutter hasBorder>
+          <SidebarPanel width={{ default: 'width_25' }}>
             <FileTreeView
               files={state.files}
               selectedPath={state.selectedPath}
@@ -56,8 +67,8 @@ function FunctionEditPageContent() {
               isLoading={state.isLoading}
               onSelect={state.onFileSelect}
             />
-          </FlexItem>
-          <FlexItem grow={{ default: 'grow' }} style={{ minWidth: '32rem' }}>
+          </SidebarPanel>
+          <SidebarContent>
             <CodeEditor
               value={state.selectedContent}
               language={state.selectedLanguage}
@@ -73,8 +84,8 @@ function FunctionEditPageContent() {
               }
               isLanguageLabelVisible
             />
-          </FlexItem>
-        </Flex>
+          </SidebarContent>
+        </Sidebar>
       </PageSection>
     </>
   );
diff --git a/src/pages/function-edit/components/FileTreeView.test.tsx b/src/pages/function-edit/components/FileTreeView.test.tsx
index bd69181..fecf174 100644
--- a/src/pages/function-edit/components/FileTreeView.test.tsx
+++ b/src/pages/function-edit/components/FileTreeView.test.tsx
@@ -174,6 +174,23 @@ describe('FileTreeView', () => {
     expect(screen.queryByText('No files')).not.toBeInTheDocument();
   });
 
+  it('renders folder icons on directory nodes but not files', () => {
+    render(
+      <FileTreeView
+        files={nodeFuncFiles}
+        selectedPath={null}
+        dirtyPaths={new Set()}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    const testDir = screen.getByText('test').closest('[role="treeitem"]');
+    expect(testDir?.querySelector('.pf-v6-c-tree-view__node-icon')).toBeInTheDocument();
+
+    const fileItem = screen.getByText('index.js').closest('[role="treeitem"]');
+    expect(fileItem?.querySelector('.pf-v6-c-tree-view__node-icon')).not.toBeInTheDocument();
+  });
+
   it('shows dirty indicator for modified files', () => {
     render(
       <FileTreeView
diff --git a/src/pages/function-edit/components/FileTreeView.tsx b/src/pages/function-edit/components/FileTreeView.tsx
index 9d6666f..0ff5cf1 100644
--- a/src/pages/function-edit/components/FileTreeView.tsx
+++ b/src/pages/function-edit/components/FileTreeView.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { Spinner, TreeView, TreeViewDataItem } from '@patternfly/react-core';
+import { FolderIcon, FolderOpenIcon } from '@patternfly/react-icons';
 import { FileEntry } from '../../../common/services/types';
 import * as React from 'react';
 
@@ -146,7 +147,11 @@ function buildFileTree(files: FileEntry[], dirtyPaths: Set<string>): TreeViewDat
       name: dirtyPaths.has(id) ? `${name} \u25CF` : name,
       defaultExpanded: true,
     };
-    if (isDir) item.children = [];
+    if (isDir) {
+      item.children = [];
+      item.icon = <FolderIcon />;
+      item.expandedIcon = <FolderOpenIcon />;
+    }
     items.push(item);
   }