foreman_webhooks 5.0.3 → 6.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 25c2a83a7c2015b3e3d0b184beb4ce534c27bbe90cbd9fb301d138d7e183e5c5
-  data.tar.gz: b0a16fa70ffde8610190a3c0718046d4c0dedf25633a21bfb5ba341efde778ce
+  metadata.gz: 0b5922c7ae2630c642e151ea99d59e8fce67ca342a93bd595a3c80d8837db0c7
+  data.tar.gz: c7d0bc6894477642639612f3d7b68974ea90dff25fabb91c3d684316fcd12230
 SHA512:
-  metadata.gz: ce79fa03fd4dccce1a495510bbeded83546b3330dde622fa5b4d03ef61d8eb1f0d752c72257ab36f6fcc28cf7b1c8164fb500c764914d6f06d0712ce756c38cb
-  data.tar.gz: 5a949f01600d04a667e710107e2275f58e104ced6a5317c90a21285851cb7a9e39a85770cdd34b9c6e4bed029fe9d705b4bfd31e1cd9680b1eceac1456bb6488
+  metadata.gz: 3f8c365cbf5d75887f69a3ffe3c9949e4fdfff3ca3129f12432747dda722ddf017892f700eb712353a2d805e07a53ff1f82f278afe8db3ac92ef6bec802bb76a
+  data.tar.gz: 34717dcb661c339a41377fbaa2c40603d0821bc5a0949f80abfd828497c49c9778543cd87d4505207d2e1b92cc9f684e7adca9c90eca4d854d6267dcce28a964

data/Rakefile

@@ -6,21 +6,6 @@ begin
 rescue LoadError
   puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
-begin
-  require 'rdoc/task'
-rescue LoadError
-  require 'rdoc/rdoc'
-  require 'rake/rdoctask'
-  RDoc::Task = Rake::RDocTask
-end
-
-RDoc::Task.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'ForemanWebhooks'
-  rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.rdoc')
-  rdoc.rdoc_files.include('lib/**/*.rb')
-end
 
 APP_RAKEFILE = File.expand_path('test/dummy/Rakefile', __dir__)
 

data/app/models/webhook.rb

@@ -11,7 +11,7 @@ class Webhook < ApplicationRecord
 
   graphql_type 'ForemanWebhooks::Types::Webhook'
 
-  EVENT_POSTFIX = ".#{Foreman::Observable::DEFAULT_NAMESPACE}"
+  EVENT_POSTFIX = ".#{Foreman::Observable::DEFAULT_NAMESPACE}".freeze
 
   DEFAULT_PAYLOAD_TEMPLATE = 'Webhook Template - Payload Default'
 

data/lib/foreman_webhooks/engine.rb

@@ -14,7 +14,7 @@ module ForemanWebhooks
     initializer 'foreman_webhooks.register_plugin', before: :finisher_hook do |app|
       app.reloader.to_prepare do
         Foreman::Plugin.register :foreman_webhooks do
-          requires_foreman '>= 3.18'
+          requires_foreman '>= 5.0'
           register_gettext
 
           apipie_documented_controllers ["#{ForemanWebhooks::Engine.root}/app/controllers/api/v2/*.rb"]

data/lib/foreman_webhooks/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ForemanWebhooks
-  VERSION = "5.0.3"
+  VERSION = "6.0.0"
 end

data/webpack/ForemanWebhooks/Routes/ForemanWebhooksRoutes.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ConnectedWebhooksIndexPage from './Webhooks/WebhooksIndexPage';
+import ConnectedWebhooksIndexPage from './Webhooks/WebhooksIndexPage/WebhooksIndexPage';
 
 const ForemanWebhooksRoutes = [
   {

data/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 
+import FieldConstructor from 'foremanReact/components/common/FieldConstructor/FieldConstructor';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 
 import './WebhookFormTabs.css';
-import FieldConstructor from './FieldConstructor';
 
 const WebhookFormTabs = ({
   inputValues,
@@ -48,7 +48,7 @@ const WebhookFormTabs = ({
             type="select"
             label={__('Subscribe to')}
             required
-            allowClear={false}
+            allowClear
             options={availableEvents}
             isLoading={isEventsLoading}
             placeholder={__('Start typing to search...')}
@@ -93,7 +93,7 @@ const WebhookFormTabs = ({
             type="select"
             label={__('Template')}
             required
-            allowClear={false}
+            allowClear
             options={webhookTemplates}
             isLoading={isTemplatesLoading}
             placeholder={__('Start typing to search...')}
@@ -105,7 +105,7 @@ const WebhookFormTabs = ({
             type="select"
             label={__('HTTP Method')}
             required
-            allowClear={false}
+            allowClear
             options={httpMethods}
             placeholder={__('Start typing to search...')}
           />
@@ -173,7 +173,6 @@ const WebhookFormTabs = ({
             placeholder={__(
               "Optional CAs in PEM format concatenated to verify the receiver's SSL certificate"
             )}
-            inputSizeClass="col-md-8"
             rows={8}
             setValue={updateFieldValue}
           />
@@ -200,7 +199,6 @@ const WebhookFormTabs = ({
             label={__('HTTP Headers')}
             labelHelp={__('Optional. Must be a JSON object (ERB allowed)')}
             placeholder='{&#13;&#10;"X-Shellhook-Arg-1": "value",&#13;&#10;"X-Shellhook-Arg-2": "<%= @object.id %>"&#13;&#10;}'
-            inputSizeClass="col-md-8"
             rows={8}
             setValue={updateFieldValue}
           />

data/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/Formatters/__tests__/actionCellFormatter.test.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import actionCellFormatter from '../actionCellFormatter';
+
+jest.mock(
+  'foremanReact/components/common/table',
+  () => ({
+    cellFormatter: content => (
+      <div data-testid="cell-formatter-mock">
+        {content === false ? null : content}
+      </div>
+    ),
+  }),
+  { virtual: true }
+);
+
+jest.mock('../../ActionButtons/ActionButton', () => {
+  // eslint-disable-next-line global-require
+  const PropTypes = require('prop-types');
+
+  const ActionButton = ({ id, name, canDelete }) => (
+    <span
+      data-testid="action-button"
+      data-id={id}
+      data-name={name}
+      data-can-delete={String(canDelete)}
+    />
+  );
+  ActionButton.propTypes = {
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    name: PropTypes.string.isRequired,
+    canDelete: PropTypes.bool,
+  };
+  ActionButton.defaultProps = {
+    canDelete: false,
+  };
+
+  return { ActionButton };
+});
+
+describe('actionCellFormatter', () => {
+  const webhookActions = {
+    deleteWebhook: jest.fn(),
+    testWebhook: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('wraps the action control in cellFormatter when rowData is present and the row is editable', () => {
+    const formatter = actionCellFormatter(webhookActions);
+    const row = { id: 10, name: 'Wh', can_edit: true, can_delete: true };
+
+    render(formatter(null, { rowData: row }));
+
+    expect(screen.getByTestId('cell-formatter-mock')).toBeInTheDocument();
+    const action = screen.getByTestId('action-button');
+    expect(action).toHaveAttribute('data-id', '10');
+    expect(action).toHaveAttribute('data-name', 'Wh');
+    expect(action).toHaveAttribute('data-can-delete', 'true');
+  });
+
+  it('passes canDelete from can_delete when rowData is present', () => {
+    const formatter = actionCellFormatter(webhookActions);
+    const row = { id: 2, name: 'A', can_edit: true, can_delete: false };
+
+    render(formatter(null, { rowData: row }));
+
+    expect(screen.getByTestId('action-button')).toHaveAttribute(
+      'data-can-delete',
+      'false'
+    );
+  });
+
+  it('renders falsy content through cellFormatter when rowData is present but the row is not editable', () => {
+    const formatter = actionCellFormatter(webhookActions);
+    const row = { id: 5, name: 'B', can_edit: false };
+
+    render(formatter(null, { rowData: row }));
+
+    expect(screen.getByTestId('cell-formatter-mock')).toBeInTheDocument();
+    expect(screen.queryByTestId('action-button')).not.toBeInTheDocument();
+  });
+
+  it('returns the action control without cellFormatter when rowData is omitted', () => {
+    const formatter = actionCellFormatter(webhookActions);
+    const row = { id: 20, name: 'Direct', can_edit: true, canDelete: true };
+
+    render(formatter(row));
+
+    expect(screen.queryByTestId('cell-formatter-mock')).not.toBeInTheDocument();
+    expect(screen.getByTestId('action-button')).toHaveAttribute(
+      'data-id',
+      '20'
+    );
+  });
+
+  it('returns nothing when rowData is omitted and the row is not editable', () => {
+    const formatter = actionCellFormatter(webhookActions);
+    const row = { id: 1, name: 'X', can_edit: false };
+
+    const { container } = render(formatter(row));
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

data/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/Formatters/__tests__/enabledCellFormatter.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import enabledCellFormatter from '../enabledCellFormatter';
+
+jest.mock('@patternfly/react-icons', () => ({
+  CheckIcon: () => <span data-testid="check-icon" />,
+  BanIcon: () => <span data-testid="ban-icon" />,
+}));
+
+const renderCell = (value, extra) => {
+  const formatter = enabledCellFormatter();
+  const element = formatter(value, extra);
+  return render(element);
+};
+
+describe('enabledCellFormatter', () => {
+  it('uses the cell value when row context includes rowData and value is true', () => {
+    renderCell(true, { rowData: { id: 1, enabled: false } });
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('uses the cell value when row context includes rowData and value is false', () => {
+    renderCell(false, { rowData: { id: 1, enabled: true } });
+    expect(screen.getByTestId('ban-icon')).toBeInTheDocument();
+  });
+
+  it('uses value.enabled when rowData is not present and enabled is true', () => {
+    renderCell({ enabled: true });
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('uses value.enabled when rowData is not present and enabled is false', () => {
+    renderCell({ enabled: false });
+    expect(screen.getByTestId('ban-icon')).toBeInTheDocument();
+  });
+});

data/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/Formatters/__tests__/nameToEditFormatter.test.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import nameToEditFormatter from '../nameToEditFormatter';
+
+jest.mock('@patternfly/react-core', () => {
+  // eslint-disable-next-line global-require
+  const PropTypes = require('prop-types');
+
+  const Button = ({ children, onClick, isDisabled }) => (
+    <button type="button" onClick={onClick} disabled={isDisabled}>
+      {children}
+    </button>
+  );
+  Button.propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+    isDisabled: PropTypes.bool,
+  };
+  Button.defaultProps = {
+    children: null,
+    onClick: () => {},
+    isDisabled: false,
+  };
+
+  return { Button };
+});
+
+describe('nameToEditFormatter', () => {
+  it('renders the cell value as the label and calls the handler with the row id when can_edit is true', () => {
+    const onEdit = jest.fn();
+    const formatter = nameToEditFormatter(onEdit);
+    const row = { id: 42, name: 'Other', can_edit: true };
+
+    render(formatter('Shown name', { rowData: row }));
+
+    expect(screen.getByText('Shown name')).toBeInTheDocument();
+    fireEvent.click(screen.getByText('Shown name'));
+    expect(onEdit).toHaveBeenCalledTimes(1);
+    expect(onEdit).toHaveBeenCalledWith(42);
+  });
+
+  it('prefers canEdit over can_edit when both are set', () => {
+    const onEdit = jest.fn();
+    const formatter = nameToEditFormatter(onEdit);
+
+    render(
+      formatter('Label', {
+        rowData: { id: 1, name: 'N', canEdit: true, can_edit: false },
+      })
+    );
+
+    fireEvent.click(screen.getByText('Label'));
+    expect(onEdit).toHaveBeenCalledWith(1);
+  });
+
+  it('does not call the handler when the row cannot be edited', () => {
+    const onEdit = jest.fn();
+    const formatter = nameToEditFormatter(onEdit);
+
+    render(
+      formatter('Read only', {
+        rowData: { id: 7, name: 'X', can_edit: false },
+      })
+    );
+
+    const control = screen.getByText('Read only');
+    expect(control.closest('button')).toBeDisabled();
+    fireEvent.click(control);
+    expect(onEdit).not.toHaveBeenCalled();
+  });
+
+  it('uses row.name as the label when rowData is not passed and value is the row object', () => {
+    const formatter = nameToEditFormatter(jest.fn());
+    const row = { id: 3, name: 'From row', can_edit: false };
+
+    render(formatter(row));
+
+    expect(screen.getByText('From row')).toBeInTheDocument();
+  });
+});

data/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/Formatters/actionCellFormatter.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cellFormatter } from 'foremanReact/components/common/table';
+import { ActionButton } from '../ActionButtons/ActionButton';
+
+const actionCellFormatter = webhookActions => (value, extra) => {
+  const row = extra?.rowData ?? value;
+  const canEdit = row.canEdit ?? row.can_edit;
+  const canDelete = row.canDelete ?? row.can_delete;
+  const { id, name } = row;
+
+  const content = canEdit && (
+    <ActionButton
+      canDelete={canDelete}
+      id={id}
+      name={name}
+      webhookActions={webhookActions}
+    />
+  );
+
+  return extra?.rowData != null ? cellFormatter(content) : content;
+};
+
+export default actionCellFormatter;

data/webpack/ForemanWebhooks/Routes/Webhooks/{WebhooksIndexPage/Components/WebhooksTable/Components/EnabledCell.js → Components/WebhookTable/Components/Formatters/enabledCellFormatter.js}

@@ -13,4 +13,9 @@ EnabledCell.defaultProps = {
   condition: false,
 };
 
-export default EnabledCell;
+const enabledCellFormatter = () => (value, extra) => {
+  const condition = extra?.rowData != null ? value : value?.enabled;
+  return <EnabledCell condition={Boolean(condition)} />;
+};
+
+export default enabledCellFormatter;

data/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/Formatters/nameToEditFormatter.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+
+const nameToEditFormatter = onClick => (value, extra) => {
+  const row = extra?.rowData ?? value;
+  const canEdit = row.canEdit ?? row.can_edit;
+  const { id } = row;
+  const label = extra?.rowData != null ? value : row.name;
+
+  return canEdit ? (
+    <Button
+      ouiaId="name-edit-active-button"
+      variant="link"
+      isInline
+      component="span"
+      onClick={() => onClick(id)}
+    >
+      {label}
+    </Button>
+  ) : (
+    <Button
+      ouiaId="name-edit-disabled-button"
+      variant="link"
+      isInline
+      isDisabled
+      component="span"
+    >
+      {label}
+    </Button>
+  );
+};
+
+export default nameToEditFormatter;

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookCreateModal.js

@@ -42,6 +42,7 @@ const WebhookCreateModal = ({ onSuccess, onCancel, isOpen }) => {
         params: { ...values, controller: 'webhooks' },
         successToast: () => __('Webhook was successfully created.'),
         handleSuccess: () => {
+          setIsSubmitting(false);
           onSuccess();
         },
         handleError: () => setIsSubmitting(false),

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookDeleteModal.js

@@ -14,6 +14,7 @@ const WebhookDeleteModal = ({ toDelete, onSuccess, modalState }) => {
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const dispatch = useDispatch();
+
   const handleSubmit = () => {
     setIsSubmitting(true);
     dispatch(
@@ -25,7 +26,10 @@ const WebhookDeleteModal = ({ toDelete, onSuccess, modalState }) => {
         errorToast: response =>
           // eslint-disable-next-line camelcase
           response?.response?.data?.error?.full_messages?.[0] || response,
-        handleSuccess: onSuccess,
+        handleSuccess: () => {
+          setIsSubmitting(false);
+          onSuccess();
+        },
         handleError: () => setIsSubmitting(false),
       })
     );

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookEditModal.js

@@ -69,6 +69,7 @@ const WebhookEditModal = ({ toEdit, onSuccess, modalState }) => {
         params: { ...values, controller: 'webhooks' },
         successToast: () => __('Webhook was successfully updated.'),
         handleSuccess: () => {
+          setIsSubmitting(false);
           onSuccess();
         },
         handleError: () => setIsSubmitting(false),

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js

@@ -12,6 +12,7 @@ import {
   ModalVariant,
 } from '@patternfly/react-core';
 
+import FieldConstructor from 'foremanReact/components/common/FieldConstructor/FieldConstructor';
 import { APIActions } from 'foremanReact/redux/API';
 import {
   WEBHOOK_TEST_MODAL_ID,
@@ -19,7 +20,6 @@ import {
 } from '../../constants';
 
 import './WebhookModal.scss';
-import FieldConstructor from '../../Components/WebhookForm/Components/FieldConstructor';
 
 const WebhookTestModal = ({ toTest, modalState }) => {
   const dispatch = useDispatch();
@@ -80,7 +80,6 @@ const WebhookTestModal = ({ toTest, modalState }) => {
           label={__('Payload')}
           labelHelp={__('Will be sent as is')}
           placeholder="{
id: 1,
name: test
}"
-          inputSizeClass="col-md-8"
           rows={8}
           value={value.payload}
           setValue={(key, val) => {

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js

@@ -4,12 +4,25 @@ import { useSelector, useDispatch } from 'react-redux';
 import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-import { WEBHOOKS_API_PATH, WEBHOOKS_API_REQUEST_KEY } from '../constants';
+import {
+  WEBHOOKS_API_REQUEST_KEY,
+  WEBHOOKS_API_PLAIN_PATH,
+} from '../constants';
 
-import { selectSearch } from '../WebhooksPageSelectors';
+import {
+  selectPage,
+  selectPerPage,
+  selectSearch,
+  selectSubtotal,
+} from '../WebhooksPageSelectors';
 
-import WebhooksTable from './Components/WebhooksTable';
 import WebhookCreateModal from './Components/WebhookCreateModal';
+import WebhookDeleteModal from './Components/WebhookDeleteModal';
+import WebhookEditModal from './Components/WebhookEditModal';
+import WebhookTestModal from './Components/WebhookTestModal';
+import nameToEditFormatter from '../Components/WebhookTable/Components/Formatters/nameToEditFormatter';
+import enabledCellFormatter from '../Components/WebhookTable/Components/Formatters/enabledCellFormatter';
+import actionCellFormatter from '../Components/WebhookTable/Components/Formatters/actionCellFormatter';
 
 import { reloadWithSearch, fetchAndPush } from '../WebhooksPageActions';
 
@@ -17,16 +30,100 @@ const WebhooksIndexPage = () => {
   const dispatch = useDispatch();
 
   const search = useSelector(selectSearch);
+  const page = useSelector(selectPage);
+  const perPage = useSelector(selectPerPage);
+  const itemCount = useSelector(selectSubtotal);
 
   const [toDelete, setToDelete] = useState({});
   const [toTest, setToTest] = useState({});
   const [toEdit, setToEdit] = useState(0);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isTestModalOpen, setIsTestModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
   const openModal = () => {
     setIsCreateModalOpen(true);
   };
 
+  const onEditClick = rowData => {
+    setToEdit(rowData);
+    setIsEditModalOpen(true);
+  };
+
+  const onTestClick = rowData => {
+    setToTest(rowData);
+    setIsTestModalOpen(true);
+  };
+
+  const onDeleteClick = rowData => {
+    setToDelete(rowData);
+    setIsDeleteModalOpen(true);
+  };
+
+  const webhookActions = {
+    deleteWebhook: (id, name) => {
+      onDeleteClick({ id, name });
+    },
+    testWebhook: (id, name) => {
+      onTestClick({ id, name });
+    },
+  };
+
+  const modalsStates = {
+    testModal: {
+      isOpen: isTestModalOpen,
+      closeModal: () => {
+        setToTest({});
+        setIsTestModalOpen(false);
+      },
+    },
+    deleteModal: {
+      isOpen: isDeleteModalOpen,
+      closeModal: () => {
+        setToDelete({});
+        setIsDeleteModalOpen(false);
+      },
+    },
+    editModal: {
+      isOpen: isEditModalOpen,
+      closeModal: () => {
+        setToEdit(0);
+        setIsEditModalOpen(false);
+      },
+    },
+  };
+
+  const columns = {
+    name: {
+      title: __('Name'),
+      wrapper: nameToEditFormatter(onEditClick),
+      isSorted: true,
+    },
+    target_url: {
+      title: __('Target URL'),
+      isSorted: true,
+    },
+    enabled: {
+      title: __('Enabled'),
+      wrapper: enabledCellFormatter(),
+      isSorted: true,
+    },
+    actions: {
+      title: __('Actions'),
+      wrapper: actionCellFormatter(webhookActions),
+    },
+  };
+
+  const onDeleteSuccess = () => {
+    modalsStates.deleteModal.closeModal();
+    const currentPage = page;
+    const maxPage = Math.ceil((itemCount - 1) / perPage);
+    dispatch(
+      fetchAndPush({ page: maxPage < currentPage ? maxPage : currentPage })
+    );
+  };
+
   return (
     <>
       <WebhookCreateModal
@@ -37,24 +134,31 @@ const WebhooksIndexPage = () => {
         }}
         onCancel={() => setIsCreateModalOpen(false)}
       />
+      <WebhookDeleteModal
+        toDelete={toDelete}
+        onSuccess={onDeleteSuccess}
+        modalState={modalsStates.deleteModal}
+      />
+      <WebhookEditModal
+        toEdit={toEdit}
+        onSuccess={() => {
+          modalsStates.editModal.closeModal();
+          dispatch(reloadWithSearch(search));
+        }}
+        modalState={modalsStates.editModal}
+      />
+      <WebhookTestModal toTest={toTest} modalState={modalsStates.testModal} />
+
       <TableIndexPage
         header={__('Webhooks')}
         controller="webhooks"
-        apiUrl={WEBHOOKS_API_PATH}
+        apiUrl={WEBHOOKS_API_PLAIN_PATH}
         apiOptions={{ key: WEBHOOKS_API_REQUEST_KEY }}
         customCreateAction={() => openModal}
-      >
-        <WebhooksTable
-          fetchAndPush={params => dispatch(fetchAndPush(params))}
-          toDelete={toDelete}
-          setToDelete={setToDelete}
-          toEdit={toEdit}
-          setToEdit={setToEdit}
-          toTest={toTest}
-          setToTest={setToTest}
-          reloadWithSearch={query => dispatch(reloadWithSearch(query))}
-        />
-      </TableIndexPage>
+        columns={columns}
+        id="webhooks-table"
+        key="webhooks-table"
+      />
     </>
   );
 };