fix: create webhooks on an empty list page

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/ListPage.tsx

@@ -229,7 +229,7 @@ const ListPage = () => {
               colCount={5}
               rowCount={numberOfWebhooks + 1}
               footer={
-                <TFooter onClick={canCreate ? goTo('create') : undefined} icon={<Plus />}>
+                <TFooter onClick={goTo('create')} icon={<Plus />}>
                   {formatMessage({
                     id: 'Settings.webhooks.list.button.add',
                     defaultMessage: 'Create new webhook',
@@ -383,7 +383,8 @@ const ListPage = () => {
                 <Button
                   variant="secondary"
                   startIcon={<Plus />}
-                  onClick={() => (canCreate ? goTo('create') : {})}
+                  disabled={!canCreate}
+                  onClick={canCreate ? goTo('create') : undefined}
                 >
                   {formatMessage({
                     id: 'Settings.webhooks.list.button.add',

packages/core/admin/admin/src/pages/Settings/pages/Webhooks/tests/ListPage.test.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { useRBAC } from '@strapi/helper-plugin';
 import { fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
 import { mockData } from '@tests/mockData';
-import { render, waitFor, server } from '@tests/utils';
+import { render, waitFor, server, screen } from '@tests/utils';
 import { rest } from 'msw';
+import { useLocation } from 'react-router-dom';
 
 import { ListPage } from '../ListPage';
 
@@ -17,6 +18,12 @@ jest.mock('@strapi/helper-plugin', () => ({
   useFocusWhenNavigate: jest.fn(),
 }));
 
+const LocationDisplay = () => {
+  const location = useLocation();
+
+  return <span data-testId="location">{location.pathname}</span>;
+};
+
 describe('Webhooks | ListPage', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -148,4 +155,34 @@ describe('Webhooks | ListPage', () => {
       expect(enableSwitches[0]).toHaveAttribute('aria-checked', 'false');
     });
   });
+
+  it('should allow to create a new webhook on empty state screen by clicking on the button', async () => {
+    server.use(
+      rest.get('/admin/webhooks', (req, res, ctx) => {
+        return res(
+          ctx.json({
+            data: [],
+          })
+        );
+      })
+    );
+
+    const { getByRole, findByText, user } = render(<ListPage />, {
+      renderOptions: {
+        wrapper({ children }) {
+          return (
+            <>
+              {children}
+              <LocationDisplay />
+            </>
+          );
+        },
+      },
+    });
+
+    await findByText('No webhooks found');
+    expect(screen.getByTestId('location')).not.toHaveTextContent('/create');
+    await user.click(getByRole('button', { name: 'Create new webhook' }));
+    await waitFor(() => expect(screen.getByTestId('location')).toHaveTextContent('/create'));
+  });
 });