foreman_webhooks 4.0.2 → 5.0.0

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

@@ -1,24 +1,14 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import * as Yup from 'yup';
-
 import { translate as __ } from 'foremanReact/common/I18n';
-import ForemanForm from 'foremanReact/components/common/forms/ForemanForm';
-
+import { Form, ActionGroup, Button } from '@patternfly/react-core';
 import WebhookFormTabs from './Components/WebhookFormTabs';
 
-import { HTTP_METHODS, WEBHOOK_ITEM } from './constants';
-
-const webhookFormSchema = Yup.object().shape({
-  name: Yup.string().required(__('is required')),
-  target_url: Yup.string().required(__('is required')),
-  http_method: Yup.string().required(__('is required')),
-  event: Yup.string().required(__('is required')),
-  webhook_template_id: Yup.string().required(__('is required')),
-});
+import { HTTP_METHODS } from './constants';
 
 const WebhookForm = ({
   onCancel,
+  isLoading,
   handleSubmit,
   initialValues,
   templates,
@@ -26,7 +16,6 @@ const WebhookForm = ({
   isTemplatesLoading,
   isEventsLoading,
   isPasswordDisabled,
-  setIsPasswordDisabled,
 }) => {
   const webhookTemplates = templates.map(t => ({ value: t.id, label: t.name }));
 
@@ -36,16 +25,44 @@ const WebhookForm = ({
     setActiveTab(tabIndex);
   };
 
+  const [inputValues, setInputValues] = useState(initialValues);
+
+  const requiredFields = [
+    'event',
+    'name',
+    'target_url',
+    'webhook_template_id',
+    'http_method',
+  ];
+
+  const verifyFields = () =>
+    !requiredFields.every(field => {
+      if (field === 'target_url') return urlValidated() === 'success';
+      return (
+        inputValues[field] !== undefined &&
+        inputValues[field] !== null &&
+        String(inputValues[field]).trim() !== ''
+      );
+    });
+
+  const urlValidated = () => {
+    const value = inputValues.target_url;
+    if (!value || !value.trim()) return 'error';
+    try {
+      const u = new URL(value.trim());
+      return u.protocol === 'http:' || u.protocol === 'https:'
+        ? 'success'
+        : 'error';
+    } catch {
+      return 'error';
+    }
+  };
+
   return (
-    <ForemanForm
-      onSubmit={handleSubmit}
-      initialValues={initialValues}
-      validationSchema={webhookFormSchema}
-      onCancel={onCancel}
-      enableReinitialize
-      item={WEBHOOK_ITEM}
-    >
+    <Form isHorizontal>
       <WebhookFormTabs
+        inputValues={inputValues}
+        setInputValues={setInputValues}
         activeTab={activeTab}
         handleTabClick={handleTabClick}
         webhookTemplates={webhookTemplates}
@@ -54,13 +71,27 @@ const WebhookForm = ({
         isEventsLoading={isEventsLoading}
         isTemplatesLoading={isTemplatesLoading}
         isPasswordDisabled={isPasswordDisabled}
-        setIsPasswordDisabled={setIsPasswordDisabled}
+        urlValidated={urlValidated}
       />
-    </ForemanForm>
+      <ActionGroup>
+        <Button
+          ouiaId="submit-webhook-form"
+          isDisabled={verifyFields() || isLoading}
+          variant="primary"
+          onClick={() => handleSubmit(inputValues)}
+        >
+          {__('Submit')}
+        </Button>
+        <Button ouiaId="cancel-webhook-form" variant="link" onClick={onCancel}>
+          {__('Cancel')}
+        </Button>
+      </ActionGroup>
+    </Form>
   );
 };
 
 WebhookForm.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
   onCancel: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   initialValues: PropTypes.object.isRequired,
@@ -69,12 +100,10 @@ WebhookForm.propTypes = {
   isEventsLoading: PropTypes.bool.isRequired,
   isTemplatesLoading: PropTypes.bool.isRequired,
   isPasswordDisabled: PropTypes.bool,
-  setIsPasswordDisabled: PropTypes.func,
 };
 
 WebhookForm.defaultProps = {
   isPasswordDisabled: false,
-  setIsPasswordDisabled: undefined,
 };
 
 export default WebhookForm;

data/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/WebhookForm.test.js

@@ -1,51 +1,267 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 import WebhookForm from '../WebhookForm';
 
-const props = {
+const defaultProps = {
   handleSubmit: jest.fn(),
   onCancel: jest.fn(),
-  onSuccess: jest.fn(),
+  initialValues: {
+    http_method: 'POST',
+    enabled: true,
+    verify_ssl: true,
+    http_content_type: 'application/json',
+    event: 'host_created.event.foreman',
+    name: '',
+    target_url: '',
+    user: '',
+    password: '',
+    webhook_template_id: '',
+    ssl_ca_certs: '',
+    proxy_authorization: false,
+    http_headers: '',
+  },
   templates: [
     { id: 204, name: 'default template' },
     { id: 205, name: 'default template clone' },
   ],
-  availableEvents: ['host_created'],
+  availableEvents: [
+    { value: 'host_created.event.foreman', label: 'Host Created' },
+    { value: 'host_updated.event.foreman', label: 'Host Updated' },
+  ],
   isEventsLoading: false,
   isTemplatesLoading: false,
+  isPasswordDisabled: false,
+  isLoading: false,
+  setIsPasswordDisabled: jest.fn(),
 };
 
-const fixtures = {
-  'should render for new page': {
-    ...props,
-    initialValues: {
-      http_method: 'POST',
-      enabled: true,
-      verify_ssl: true,
-      http_content_type: 'application/json',
-      event: 'host_created.event.foreman',
-    },
-  },
-  'should render for edit page': {
-    ...props,
-    initialValues: {
-      id: 54,
-      http_method: 'PUT',
-      enabled: true,
-      verify_ssl: true,
-      http_content_type: 'application/json',
-      event: 'host_created.event.foreman',
-      name: 'first webhook',
-      target_url: 'https://foreman.example.com',
-      user: undefined,
-      password: undefined,
-      webhook_template_id: 204,
-      ssl_ca_certs: undefined,
-    },
-  },
-};
+describe('WebhookForm RTL Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders General tab fields by default', () => {
+    render(<WebhookForm {...defaultProps} />);
+
+    expect(screen.getByText('General')).toBeInTheDocument();
+    expect(screen.getByText('Credentials')).toBeInTheDocument();
+    expect(screen.getByText('Additional')).toBeInTheDocument();
+
+    expect(screen.getByText('Subscribe to')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Target URL')).toBeInTheDocument();
+    expect(screen.getByText('Template')).toBeInTheDocument();
+    expect(screen.getByText('HTTP Method')).toBeInTheDocument();
+    expect(screen.getByText('Enabled')).toBeInTheDocument();
+
+    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
+  describe('Tab Navigation', () => {
+    test('switches to Credentials tab when clicked', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Credentials'));
+
+      expect(screen.getByText('User')).toBeInTheDocument();
+      expect(screen.getByText('Password')).toBeInTheDocument();
+      expect(screen.getByText('Verify SSL')).toBeInTheDocument();
+      expect(screen.getByText('Proxy Authorization')).toBeInTheDocument();
+      expect(
+        screen.getByText('X509 Certificate Authorities')
+      ).toBeInTheDocument();
+    });
+
+    test('switches to Additional tab when clicked', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Additional'));
+
+      expect(screen.getByText('HTTP Content Type')).toBeInTheDocument();
+      expect(screen.getByText('HTTP Headers')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Field Interactions', () => {
+    test('toggles enabled checkbox', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      const enabledCheckbox = document.querySelector('input#id-enabled');
+      expect(enabledCheckbox).toBeChecked();
+
+      fireEvent.click(enabledCheckbox);
+      expect(enabledCheckbox).not.toBeChecked();
+    });
+
+    test('updates user field in Credentials tab', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Credentials'));
+
+      const userInput = document.querySelector('input#id-user');
+      fireEvent.change(userInput, { target: { value: 'testuser' } });
+
+      expect(userInput.value).toBe('testuser');
+    });
+  });
+
+  describe('Form Submission', () => {
+    test('Submit button is disabled should not call handleSubmit', async () => {
+      const handleSubmit = jest.fn();
+      render(<WebhookForm {...defaultProps} handleSubmit={handleSubmit} />);
+
+      const submitBtn = screen.getByRole('button', { name: 'Submit' });
+
+      expect(submitBtn).toBeDisabled();
+      fireEvent.click(submitBtn);
+
+      expect(handleSubmit).toHaveBeenCalledTimes(0);
+    });
+
+    test('calls handleSubmit with form data when Submit button is clicked', async () => {
+      const handleSubmit = jest.fn();
+      const initialValues = {
+        ...defaultProps.initialValues,
+        webhook_template_id: 204,
+      };
+
+      render(
+        <WebhookForm
+          {...defaultProps}
+          initialValues={initialValues}
+          handleSubmit={handleSubmit}
+        />
+      );
+
+      const input = document.querySelector('input#id-name');
+      expect(input).toBeInTheDocument();
+      await userEvent.type(input, 'Test Webhook');
+      fireEvent.change(document.querySelector('input#id-target_url'), {
+        target: { value: 'https://example.com/webhook' },
+      });
+
+      const submitBtn = screen.getByRole('button', { name: 'Submit' });
+
+      expect(submitBtn).not.toBeDisabled();
+      fireEvent.click(submitBtn);
+
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+      expect(handleSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Test Webhook',
+          target_url: 'https://example.com/webhook',
+        })
+      );
+    });
+
+    test('calls onCancel when Cancel button is clicked', () => {
+      const onCancel = jest.fn();
+      render(<WebhookForm {...defaultProps} onCancel={onCancel} />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Loading States', () => {
+    test('disables password field when isPasswordDisabled is true', async () => {
+      render(<WebhookForm {...defaultProps} isPasswordDisabled />);
+
+      await fireEvent.click(screen.getByText('Credentials'));
+
+      const passwordInput = document.querySelector('input#id-password');
+      expect(passwordInput).toBeDisabled();
+    });
+
+    test('password field rendered correctly when isPasswordDisabled is false', async () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      await fireEvent.click(screen.getByText('Credentials'));
+
+      const passwordInput = document.querySelector('input#id-password');
+      expect(passwordInput).toBeInTheDocument();
+      expect(passwordInput).not.toBeDisabled();
+    });
+  });
+
+  describe('Initial Values', () => {
+    test('renders with provided initial values', () => {
+      const initialValues = {
+        ...defaultProps.initialValues,
+        name: 'Initial Webhook',
+        target_url: 'https://initial.example.com',
+        enabled: false,
+        verify_ssl: false,
+      };
+
+      render(<WebhookForm {...defaultProps} initialValues={initialValues} />);
+
+      expect(document.querySelector('input#id-name')).toHaveValue(
+        'Initial Webhook'
+      );
+      expect(document.querySelector('input#id-target_url')).toHaveValue(
+        'https://initial.example.com'
+      );
+      expect(document.querySelector('input#id-enabled')).not.toBeChecked();
+
+      fireEvent.click(screen.getByText('Credentials'));
+      expect(document.querySelector('input#id-verify_ssl')).not.toBeChecked();
+    });
+  });
+
+  describe('Test submitted data', () => {
+    test('submits correct data structure', async () => {
+      const handleSubmit = jest.fn();
+      render(<WebhookForm {...defaultProps} handleSubmit={handleSubmit} />);
+
+      const nameInput = document.querySelector('input#id-name');
+      await userEvent.type(nameInput, 'Webhook Test');
+      await fireEvent.change(document.querySelector('input#id-target_url'), {
+        target: { value: 'https://example.com/webhook' },
+      });
+
+      const webhookTemplateInput = document.querySelector(
+        'input#id-webhook_template_id'
+      );
+      fireEvent.click(webhookTemplateInput);
+
+      await waitFor(() => {
+        const option = screen.getByRole('option', { name: 'default template' });
+        fireEvent.click(option);
+      });
+
+      await fireEvent.click(screen.getByText('Credentials'));
+
+      const userInput = document.querySelector('input#id-user');
+      await fireEvent.change(userInput, { target: { value: 'testuser' } });
+
+      const passwordInput = document.querySelector('input#id-password');
+      await fireEvent.change(passwordInput, { target: { value: 'testpass' } });
+
+      const submitBtn = screen.getByRole('button', { name: 'Submit' });
+
+      expect(submitBtn).not.toBeDisabled();
+      fireEvent.click(submitBtn);
 
-describe('WebhookForm', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(WebhookForm, fixtures));
+      expect(handleSubmit).toHaveBeenCalledWith({
+        name: 'Webhook Test',
+        target_url: 'https://example.com/webhook',
+        webhook_template_id: 204,
+        http_method: 'POST',
+        enabled: true,
+        verify_ssl: true,
+        http_content_type: 'application/json',
+        event: 'host_created.event.foreman',
+        user: 'testuser',
+        password: 'testpass',
+        proxy_authorization: false,
+        ssl_ca_certs: '',
+        http_headers: '',
+      });
+    });
+  });
 });

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

@@ -25,11 +25,11 @@ import {
 const params = { page: 1, search: 'snippet = false', per_page: 'all' };
 
 const ConnectedWebhookForm = ({
+  isLoading,
   onCancel,
   handleSubmit,
   initialValues,
   isPasswordDisabled,
-  setIsPasswordDisabled,
 }) => {
   const dispatch = useDispatch();
 
@@ -59,6 +59,7 @@ const ConnectedWebhookForm = ({
 
   return (
     <WebhookForm
+      isLoading={isLoading}
       templates={templates}
       availableEvents={availableEvents}
       onCancel={onCancel}
@@ -67,22 +68,20 @@ const ConnectedWebhookForm = ({
       isTemplatesLoading={isTemplatesLoading}
       isEventsLoading={isEventsLoading}
       isPasswordDisabled={isPasswordDisabled}
-      setIsPasswordDisabled={setIsPasswordDisabled}
     />
   );
 };
 
 ConnectedWebhookForm.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
   onCancel: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   initialValues: PropTypes.object.isRequired,
   isPasswordDisabled: PropTypes.bool,
-  setIsPasswordDisabled: PropTypes.func,
 };
 
 ConnectedWebhookForm.defaultProps = {
   isPasswordDisabled: false,
-  setIsPasswordDisabled: undefined,
 };
 
 export default ConnectedWebhookForm;

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

@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'patternfly-react';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 import { useDispatch } from 'react-redux';
 
 import { translate as __ } from 'foremanReact/common/I18n';
-import { submitForm } from 'foremanReact/redux/actions/common/forms';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import ForemanModal from 'foremanReact/components/ForemanModal';
+import { APIActions } from 'foremanReact/redux/API';
 
 import ConnectedWebhookForm from '../../Components/WebhookForm';
 
@@ -14,9 +13,10 @@ import { WEBHOOK_CREATE_MODAL_ID, WEBHOOKS_PATH } from '../../constants';
 
 import './WebhookModal.scss';
 
-const WebhookCreateModal = ({ onSuccess, onCancel }) => {
+const WebhookCreateModal = ({ onSuccess, onCancel, isOpen }) => {
   const dispatch = useDispatch();
 
+  const [isLoading, setIsLoading] = useState(false);
   const initialWebhookValues = {
     name: '',
     target_url: '',
@@ -33,39 +33,50 @@ const WebhookCreateModal = ({ onSuccess, onCancel }) => {
     proxy_authorization: false,
   };
 
-  const handleSubmit = (values, actions) =>
+  const handleSubmit = values => {
+    setIsLoading(true);
     dispatch(
-      submitForm({
+      APIActions.post({
         url: foremanUrl(`/api${WEBHOOKS_PATH}`),
-        values: { ...values, controller: 'webhooks' },
-        item: 'Webhook',
-        message: __('Webhook was successfully created.'),
-        successCallback: onSuccess,
-        actions,
+        key: WEBHOOK_CREATE_MODAL_ID,
+        params: { ...values, controller: 'webhooks' },
+        successToast: () => __('Webhook was successfully created.'),
+        handleSuccess: () => {
+          onSuccess();
+          setIsLoading(false);
+        },
+        handleError: () => setIsLoading(false),
+        errorToast: ({ response }) =>
+          // eslint-disable-next-line camelcase
+          response?.data?.error?.full_messages?.[0] || response,
       })
     );
+  };
 
   return (
-    <ForemanModal
+    <Modal
+      position="top"
+      variant={ModalVariant.medium}
+      isOpen={isOpen}
+      onClose={onCancel}
       id={WEBHOOK_CREATE_MODAL_ID}
-      backdrop="static"
-      className="webhooks-modal"
+      ouiaId={WEBHOOK_CREATE_MODAL_ID}
+      title={__('Create Webhook')}
     >
-      <Modal.Header>
-        <Modal.Title>{__('Create Webhook')}</Modal.Title>
-      </Modal.Header>
       <ConnectedWebhookForm
+        isLoading={isLoading}
         handleSubmit={handleSubmit}
         initialValues={initialWebhookValues}
         onCancel={onCancel}
       />
-    </ForemanModal>
+    </Modal>
   );
 };
 
 WebhookCreateModal.propTypes = {
   onSuccess: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
 };
 
 export default WebhookCreateModal;

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

@@ -1,40 +1,74 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { APIActions } from 'foremanReact/redux/API';
+import { useDispatch } from 'react-redux';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import ForemanModal from 'foremanReact/components/ForemanModal';
 import { foremanUrl } from 'foremanReact/common/helpers';
+import { Modal, Button, ModalVariant } from '@patternfly/react-core';
 
 import { WEBHOOK_DELETE_MODAL_ID } from '../../constants';
 
-const WebhookDeleteModal = ({ toDelete, onSuccess }) => {
+const WebhookDeleteModal = ({ toDelete, onSuccess, modalState }) => {
   const { id, name } = toDelete;
 
+  const dispatch = useDispatch();
+  const handleSubmit = () =>
+    dispatch(
+      APIActions.delete({
+        url: foremanUrl(`/api/v2/webhooks/${id}`),
+        key: WEBHOOK_DELETE_MODAL_ID,
+        successToast: () =>
+          sprintf(__('Webhook %s was successfully deleted'), name),
+        errorToast: response =>
+          // eslint-disable-next-line camelcase
+          response?.response?.data?.error?.full_messages?.[0] || response,
+        handleSuccess: onSuccess,
+      })
+    );
+
   return (
-    <ForemanModal
+    <Modal
+      position="top"
+      variant={ModalVariant.small}
       id={WEBHOOK_DELETE_MODAL_ID}
+      ouiaId={WEBHOOK_DELETE_MODAL_ID}
       title={__('Confirm Webhook Deletion')}
-      backdrop="static"
-      enforceFocus
-      submitProps={{
-        url: foremanUrl(`/api/v2/webhooks/${id}`),
-        message: sprintf(__('Webhook %s was successfully deleted'), name),
-        onSuccess,
-        submitBtnProps: {
-          bsStyle: 'danger',
-          btnText: __('Delete'),
-        },
-      }}
-    >
-      {sprintf(__('You are about to delete %s. Are you sure?'), name)}
-      <ForemanModal.Footer />
-    </ForemanModal>
+      isOpen={modalState.isOpen}
+      onClose={modalState.closeModal}
+      description={sprintf(
+        __('You are about to delete %s. Are you sure?'),
+        name
+      )}
+      actions={[
+        <Button
+          ouiaId="submitBtn"
+          key="confirm"
+          variant="danger"
+          onClick={handleSubmit}
+        >
+          {__('Delete')}
+        </Button>,
+        <Button
+          ouiaId="cancelBtn"
+          key="cancel"
+          variant="link"
+          onClick={modalState.closeModal}
+        >
+          {__('Cancel')}
+        </Button>,
+      ]}
+    />
   );
 };
 
 WebhookDeleteModal.propTypes = {
   toDelete: PropTypes.object,
   onSuccess: PropTypes.func.isRequired,
+  modalState: PropTypes.shape({
+    isOpen: PropTypes.bool.isRequired,
+    closeModal: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 WebhookDeleteModal.defaultProps = {