Skip to content
This repository was archived by the owner on Jun 26, 2026. It is now read-only.

Commit cfecfcb

Browse files
twoGiantsclaude
andcommitted
feat: add FunctionsEmptyState component
PatternFly 6 empty state with "No functions found" heading and a "Create function" link to /functions/create. Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 1d9432c commit cfecfcb

2 files changed

Lines changed: 62 additions & 0 deletions

File tree

src/components/EmptyState.test.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { MemoryRouter } from 'react-router-dom';
3+
import { FunctionsEmptyState } from './EmptyState';
4+
5+
jest.mock('react-i18next', () => ({
6+
useTranslation: () => ({ t: (key: string) => key }),
7+
}));
8+
9+
afterEach(() => {
10+
jest.restoreAllMocks();
11+
});
12+
13+
describe('FunctionsEmptyState', () => {
14+
it('renders a heading with "No functions found"', () => {
15+
render(
16+
<MemoryRouter>
17+
<FunctionsEmptyState />
18+
</MemoryRouter>,
19+
);
20+
21+
expect(
22+
screen.getByRole('heading', { name: 'No functions found' }),
23+
).toBeInTheDocument();
24+
});
25+
26+
it('renders a "Create function" link pointing to /functions/create', () => {
27+
render(
28+
<MemoryRouter>
29+
<FunctionsEmptyState />
30+
</MemoryRouter>,
31+
);
32+
33+
const link = screen.getByRole('link', { name: 'Create function' });
34+
expect(link).toHaveAttribute('href', '/functions/create');
35+
});
36+
});

src/components/EmptyState.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {
2+
EmptyState,
3+
EmptyStateActions,
4+
EmptyStateBody,
5+
EmptyStateFooter,
6+
} from '@patternfly/react-core';
7+
import { CubesIcon } from '@patternfly/react-icons';
8+
import { useTranslation } from 'react-i18next';
9+
import { Link } from 'react-router-dom';
10+
11+
export function FunctionsEmptyState() {
12+
const { t } = useTranslation('plugin__console-functions-plugin');
13+
14+
return (
15+
<EmptyState headingLevel="h2" icon={CubesIcon} titleText={t('No functions found')}>
16+
<EmptyStateBody>
17+
{t('Create a serverless function to get started.')}
18+
</EmptyStateBody>
19+
<EmptyStateFooter>
20+
<EmptyStateActions>
21+
<Link to="/functions/create">{t('Create function')}</Link>
22+
</EmptyStateActions>
23+
</EmptyStateFooter>
24+
</EmptyState>
25+
);
26+
}

0 commit comments

Comments
 (0)