refactor: move action buttons into toolbar

The refresh and create buttons were placed in separate
locations (header and a Content block). This moves both
into a PatternFly Toolbar above the table, following the
standard pattern used elsewhere in the project.

The toolbar only renders when functions are loaded, so the
refresh button test now checks the icon after initial load
completes rather than during loading.

Signed-off-by: Matej Vašek <matejvasek@gmail.com>
Co-Authored-By: Claude <noreply@anthropic.com>

Author: matejvasek

src/views/FunctionsListPage.test.tsx

@@ -464,15 +464,8 @@ describe('FunctionsListPage', () => {
 
   it('does not spin the refresh icon on initial page load', async () => {
     renderAuthenticated();
-    let resolveRepos: (value: unknown[]) => void;
-    const mockListRepos = vi.fn().mockImplementation(
-      () =>
-        new Promise((resolve) => {
-          resolveRepos = resolve;
-        }),
-    );
     mockUseSourceControl.mockReturnValue({
-      listFunctionRepos: mockListRepos,
+      listFunctionRepos: vi.fn().mockResolvedValue([repoFixture('fn-a')]),
       fetchFileContent: vi.fn().mockResolvedValue('name: fn-a\nruntime: go\nnamespace: demo\n'),
     });
     mockUseClusterService.mockReturnValue(clusterData());
@@ -483,11 +476,10 @@ describe('FunctionsListPage', () => {
       </MemoryRouter>,
     );
 
+    await screen.findByTestId('fn-name');
+
     const icon = screen.getByRole('button', { name: 'Refresh' }).querySelector('svg');
     expect(icon?.classList.contains('func-console__refresh-spin')).toBe(false);
-
-    resolveRepos!([repoFixture('fn-a')]);
-    await screen.findByTestId('fn-name');
   });
 
   it('spins the refresh icon only while a button-triggered refresh is in flight', async () => {

src/views/FunctionsListPage.tsx

@@ -10,6 +10,10 @@ import {
   ContentVariants,
   PageSection,
   Spinner,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
   Tooltip,
 } from '@patternfly/react-core';
 import { SyncAltIcon } from '@patternfly/react-icons';
@@ -46,11 +50,6 @@ function FunctionsListPageContent() {
     <>
       <DocumentTitle>{t('Functions')}</DocumentTitle>
       <ListPageHeader title={t('Functions')}>
-        <Tooltip content={t('Refresh')}>
-          <Button variant="plain" aria-label={t('Refresh')} onClick={onRefresh}>
-            <SyncAltIcon className={refreshing ? 'func-console__refresh-spin' : undefined} />
-          </Button>
-        </Tooltip>
         <UserAvatar enableReconnect />
       </ListPageHeader>
       <PageSection>
@@ -72,20 +71,35 @@ function FunctionsListPageContent() {
                 'Serverless functions in your repository and deployed to your cluster. Manage lifecycle, monitor status, and scale on demand.',
               )}
             </Content>
-            <Content component={ContentVariants.p}>
-              {!isConnectedToForge ? (
-                <Button variant="primary" isDisabled>
-                  {t('Create new function')}
-                </Button>
-              ) : (
-                <Button
-                  variant="primary"
-                  component={(props) => <Link {...props} to="/faas/create" />}
-                >
-                  {t('Create new function')}
-                </Button>
-              )}
-            </Content>
+            <Toolbar>
+              <ToolbarContent>
+                <ToolbarItem>
+                  {!isConnectedToForge ? (
+                    <Button variant="primary" isDisabled>
+                      {t('Create new function')}
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="primary"
+                      component={(props) => <Link {...props} to="/faas/create" />}
+                    >
+                      {t('Create new function')}
+                    </Button>
+                  )}
+                </ToolbarItem>
+                <ToolbarGroup align={{ default: 'alignEnd' }}>
+                  <ToolbarItem>
+                    <Tooltip content={t('Refresh')}>
+                      <Button variant="plain" aria-label={t('Refresh')} onClick={onRefresh}>
+                        <SyncAltIcon
+                          className={refreshing ? 'func-console__refresh-spin' : undefined}
+                        />
+                      </Button>
+                    </Tooltip>
+                  </ToolbarItem>
+                </ToolbarGroup>
+              </ToolbarContent>
+            </Toolbar>
             <FunctionTable functions={functions} onEdit={onEdit} />
           </>
         )}