fix: create webhooks on an empty list page

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

@@ -44,6 +44,7 @@ import { useTypedSelector } from '../../../../core/store/hooks';
 
 import { useWebhooks } from './hooks/useWebhooks';
 
+
 /* -------------------------------------------------------------------------------------------------
  * ListPage
  * -----------------------------------------------------------------------------------------------*/
@@ -383,7 +384,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

@@ -8,6 +8,7 @@ import { rest } from 'msw';
 
 import { ListPage } from '../ListPage';
 
+
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useRBAC: jest.fn().mockImplementation(() => ({
@@ -17,6 +18,18 @@ jest.mock('@strapi/helper-plugin', () => ({
   useFocusWhenNavigate: jest.fn(),
 }));
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'), 
+  useHistory: () => ({
+    push: mockedPush
+  }),
+  useLocation: jest.fn().mockReturnValue({
+    pathname: '/admin/settings/webhooks',
+  })
+}));
+const mockedPush = jest.fn();
+
+
 describe('Webhooks | ListPage', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -148,4 +161,28 @@ 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 { getByText, getByRole } = render(<ListPage />);
+
+    await waitFor(() => {
+      expect(getByText('No webhooks found')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByRole('button', {name: 'Create new webhook'}));
+
+
+
+    expect(mockedPush).toHaveBeenCalledWith('/admin/settings/webhooks/create')
+  });
 });