foreman_webhooks 4.0.1 → 5.0.0

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

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Modal } from 'patternfly-react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { translate as __ } from 'foremanReact/common/I18n';
-import ForemanModal from 'foremanReact/components/ForemanModal';
 import Loading from 'foremanReact/components/Loading';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import { submitForm } from 'foremanReact/redux/actions/common/forms';
-import { get } from 'foremanReact/redux/API';
+import { get, put } from 'foremanReact/redux/API';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 
 import ConnectedWebhookForm from '../../Components/WebhookForm';
 
@@ -20,20 +18,19 @@ import {
 } from '../../constants';
 
 import {
-  selectIsLoading,
   selectWebhookValues,
   selectWebhookTemplateId,
 } from './WebhookEditModalSelectors';
 
 import './WebhookModal.scss';
 
-const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
+const WebhookEditModal = ({ toEdit, onSuccess, modalState }) => {
   const dispatch = useDispatch();
 
   const [isPasswordDisabled, setIsPasswordDisabled] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const id = toEdit;
 
-  const isLoading = useSelector(selectIsLoading);
   const isPasswordSet = useSelector(selectWebhookValues).passwordSet;
   const initialWebhookValues = {
     id: useSelector(selectWebhookValues).id,
@@ -56,23 +53,32 @@ const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
     setIsPasswordDisabled(isPasswordSet);
   }, [isPasswordSet]);
 
-  const handleSubmit = (values, actions) => {
+  const handleSubmit = values => {
+    setIsLoading(true);
     if (isPasswordDisabled) {
       delete values.password;
     }
     dispatch(
-      submitForm({
+      put({
         url: foremanUrl(`/api${WEBHOOKS_PATH}/${id}`),
-        values: { ...values, controller: 'webhooks' },
-        item: 'Webhook',
-        message: __('Webhook was successfully updated.'),
-        method: 'put',
-        successCallback: onSuccess,
-        actions,
+        key: WEBHOOK_API_REQUEST_KEY,
+        params: { ...values, controller: 'webhooks' },
+        successToast: () => __('Webhook was successfully updated.'),
+        handleSuccess: () => {
+          onSuccess();
+          setIsLoading(false);
+        },
+        errorToast: ({ response }) =>
+          // eslint-disable-next-line camelcase
+          response?.data?.error?.full_messages?.[0] || response,
       })
     );
   };
 
+  useEffect(() => {
+    if (initialWebhookValues.id) setIsLoading(false);
+  }, [initialWebhookValues.id]);
+
   useEffect(() => {
     if (id) {
       dispatch(
@@ -86,24 +92,26 @@ const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
 
   const onEditCancel = () => {
     if (isPasswordSet) setIsPasswordDisabled(true);
-    onCancel();
+    modalState.closeModal();
   };
 
+  const modalTitle = initialWebhookValues.name ?? '';
+
   return (
-    <ForemanModal
+    <Modal
+      position="top"
+      variant={ModalVariant.medium}
       id={WEBHOOK_EDIT_MODAL_ID}
-      backdrop="static"
-      className="webhooks-modal"
+      ouiaId={WEBHOOK_EDIT_MODAL_ID}
+      isOpen={modalState.isOpen}
+      onClose={modalState.closeModal}
+      title={`${__('Edit')} ${modalTitle}`}
     >
-      <Modal.Header>
-        <Modal.Title>
-          {`${__('Edit')} ${initialWebhookValues.name}`}
-        </Modal.Title>
-      </Modal.Header>
       {isLoading ? (
         <Loading />
       ) : (
         <ConnectedWebhookForm
+          isLoading={isLoading}
           handleSubmit={handleSubmit}
           initialValues={initialWebhookValues}
           onCancel={onEditCancel}
@@ -111,14 +119,17 @@ const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
           setIsPasswordDisabled={setIsPasswordDisabled}
         />
       )}
-    </ForemanModal>
+    </Modal>
   );
 };
 
 WebhookEditModal.propTypes = {
   onSuccess: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
   toEdit: PropTypes.number,
+  modalState: PropTypes.shape({
+    isOpen: PropTypes.bool.isRequired,
+    closeModal: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 WebhookEditModal.defaultProps = {

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

@@ -1,61 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import ForemanModal from 'foremanReact/components/ForemanModal';
-import ForemanForm from 'foremanReact/components/common/forms/ForemanForm';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import { submitForm } from 'foremanReact/redux/actions/common/forms';
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
-
-import ForemanFormikField from '../../../Webhooks/Components/WebhookForm/Components/ForemanFormikField';
+import {
+  Form,
+  Button,
+  ActionGroup,
+  Modal,
+  ModalVariant,
+} from '@patternfly/react-core';
 
+import { APIActions } from 'foremanReact/redux/API';
 import {
   WEBHOOK_TEST_MODAL_ID,
   WEBHOOKS_API_PLAIN_PATH,
 } from '../../constants';
 
 import './WebhookModal.scss';
+import FieldConstructor from '../../Components/WebhookForm/Components/FieldConstructor';
 
-const WebhookTestModal = ({ toTest }) => {
+const WebhookTestModal = ({ toTest, modalState }) => {
   const dispatch = useDispatch();
 
   const { id, name } = toTest;
-  const { setModalClosed: setTestModalClosed } = useForemanModal({
-    id: WEBHOOK_TEST_MODAL_ID,
-  });
   const initialTestValues = {
     payload: '',
   };
+
+  const [value, setValue] = useState(initialTestValues);
+
   const errorToast = error =>
     sprintf(
       __('Webhook test failed: %s'),
       error?.response?.data?.error?.message
     );
 
-  const handleSubmit = (values, actions) => {
+  const handleSubmit = values => {
     dispatch(
-      submitForm({
+      APIActions.post({
+        key: WEBHOOK_TEST_MODAL_ID,
         url: foremanUrl(`${WEBHOOKS_API_PLAIN_PATH}/${id}/test`),
-        values: { ...values, controller: 'webhooks' },
-        item: 'WebhookTest',
-        message: sprintf(__('Webhook %s test was successful'), name),
-        method: 'post',
-        successCallback: () => actions.setSubmitting(false),
-        actions,
-        errorToast,
-        handleError: () => actions.setSubmitting(false),
+        params: {
+          ...values,
+          controller: 'webhooks',
+        },
+        successToast: () => sprintf(__('Webhook %s test was successful'), name),
+        errorToast: error => errorToast(error),
+        handleSuccess: () => modalState.closeModal(),
       })
     );
   };
 
   return (
-    <ForemanModal
+    <Modal
+      variant={ModalVariant.medium}
+      isOpen={modalState.isOpen}
+      onClose={modalState.closeModal}
       id={WEBHOOK_TEST_MODAL_ID}
+      ouiaId={WEBHOOK_TEST_MODAL_ID}
       title={`${__('Test')} ${name}`}
-      backdrop="static"
-      enforceFocus
       className="webhooks-modal"
     >
       {`${sprintf(__('You are about to test %s webhook.'), name)} `}
@@ -68,12 +73,8 @@ const WebhookTestModal = ({ toTest }) => {
       {__('You can specify below a custom payload to test the webhook with.')}
       <br />
       <br />
-      <ForemanForm
-        onSubmit={handleSubmit}
-        initialValues={initialTestValues}
-        onCancel={setTestModalClosed}
-      >
-        <ForemanFormikField
+      <Form>
+        <FieldConstructor
           name="payload"
           type="textarea"
           label={__('Payload')}
@@ -81,14 +82,38 @@ const WebhookTestModal = ({ toTest }) => {
           placeholder="{&#13;&#10;id: 1,&#13;&#10;name: test&#13;&#10;}"
           inputSizeClass="col-md-8"
           rows={8}
+          value={value.payload}
+          setValue={(key, val) => {
+            setValue(prev => ({ ...prev, [key]: val }));
+          }}
         />
-      </ForemanForm>
-    </ForemanModal>
+        <ActionGroup>
+          <Button
+            ouiaId="submit-webhook-form"
+            variant="primary"
+            onClick={() => handleSubmit(value)}
+          >
+            {__('Submit')}
+          </Button>
+          <Button
+            ouiaId="cancel-webhook-form"
+            variant="link"
+            onClick={modalState.closeModal}
+          >
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
   );
 };
 
 WebhookTestModal.propTypes = {
   toTest: PropTypes.object,
+  modalState: PropTypes.shape({
+    isOpen: PropTypes.bool.isRequired,
+    closeModal: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 WebhookTestModal.defaultProps = {

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/Components/NameToEditCell.js

@@ -5,6 +5,7 @@ import { Button } from '@patternfly/react-core';
 const NameToEditCell = ({ active, id, name, controller, onClick, children }) =>
   active ? (
     <Button
+      ouiaId="name-edit-active-button"
       variant="link"
       isInline
       component="span"
@@ -13,7 +14,13 @@ const NameToEditCell = ({ active, id, name, controller, onClick, children }) =>
       {children}
     </Button>
   ) : (
-    <Button variant="link" isInline isDisabled component="span">
+    <Button
+      ouiaId="name-edit-disabled-button"
+      variant="link"
+      isInline
+      isDisabled
+      component="span"
+    >
       {children}
     </Button>
   );

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/Components/__tests__/__snapshots__/EnabledCell.test.js.snap

@@ -1,17 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EnabledCell should render blank cell 1`] = `
-<BanIcon
-  color="currentColor"
-  noVerticalAlign={false}
-  size="sm"
-/>
-`;
+exports[`EnabledCell should render blank cell 1`] = `<BanIcon />`;
 
-exports[`EnabledCell should render marked cell 1`] = `
-<CheckIcon
-  color="currentColor"
-  noVerticalAlign={false}
-  size="sm"
-/>
-`;
+exports[`EnabledCell should render marked cell 1`] = `<CheckIcon />`;

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

@@ -6,7 +6,6 @@ import { isEmpty } from 'lodash';
 import { Table } from 'foremanReact/components/common/table';
 import Pagination from 'foremanReact/components/Pagination';
 import Loading from 'foremanReact/components/Loading';
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 
 import WebhookDeleteModal from '../WebhookDeleteModal';
 import WebhookEditModal from '../WebhookEditModal';
@@ -15,8 +14,6 @@ import EmptyWebhooksTable from './Components/EmptyWebhooksTable';
 
 import createWebhooksTableSchema from './WebhooksTableSchema';
 
-import { WEBHOOK_EDIT_MODAL_ID } from '../../../constants';
-
 import {
   selectWebhooks,
   selectPage,
@@ -38,6 +35,7 @@ const WebhooksTable = ({
   onEditClick,
   reloadWithSearch,
   webhookActions,
+  modalsStates,
 }) => {
   const webhooks = useSelector(selectWebhooks);
   const page = useSelector(selectPage);
@@ -51,15 +49,12 @@ const WebhooksTable = ({
   const message = useSelector(selectMessage);
 
   const onDeleteSuccess = () => {
+    modalsStates.deleteModal.closeModal();
     const currentPage = page;
     const maxPage = Math.ceil((itemCount - 1) / perPage);
     fetchAndPush({ page: maxPage < currentPage ? maxPage : currentPage });
   };
 
-  const { setModalClosed: setEditModalClosed } = useForemanModal({
-    id: WEBHOOK_EDIT_MODAL_ID,
-  });
-
   if (isLoading && !hasError) return <Loading />;
 
   if (!isLoading && !hasData && isEmpty(search)) {
@@ -68,16 +63,20 @@ const WebhooksTable = ({
 
   return (
     <React.Fragment>
-      <WebhookDeleteModal toDelete={toDelete} onSuccess={onDeleteSuccess} />
+      <WebhookDeleteModal
+        toDelete={toDelete}
+        onSuccess={onDeleteSuccess}
+        modalState={modalsStates.deleteModal}
+      />
       <WebhookEditModal
         toEdit={toEdit}
         onSuccess={() => {
-          setEditModalClosed();
+          modalsStates.editModal.closeModal();
           reloadWithSearch(search);
         }}
-        onCancel={setEditModalClosed}
+        modalState={modalsStates.editModal}
       />
-      <WebhookTestModal toTest={toTest} />
+      <WebhookTestModal toTest={toTest} modalState={modalsStates.testModal} />
       <Table
         key="webhooks-table"
         columns={createWebhooksTableSchema(
@@ -103,6 +102,20 @@ WebhooksTable.propTypes = {
   toEdit: PropTypes.number.isRequired,
   reloadWithSearch: PropTypes.func.isRequired,
   webhookActions: PropTypes.object.isRequired,
+  modalsStates: PropTypes.shape({
+    deleteModal: PropTypes.shape({
+      isOpen: PropTypes.bool.isRequired,
+      closeModal: PropTypes.func.isRequired,
+    }).isRequired,
+    editModal: PropTypes.shape({
+      isOpen: PropTypes.bool.isRequired,
+      closeModal: PropTypes.func.isRequired,
+    }).isRequired,
+    testModal: PropTypes.shape({
+      isOpen: PropTypes.bool.isRequired,
+      closeModal: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
 };
 
 export default WebhooksTable;

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/__tests__/__snapshots__/WebhooksTable.test.js.snap

@@ -8,6 +8,22 @@ exports[`WebhooksTable rendering should render when loading 1`] = `
   hasError={false}
   isLoading={true}
   itemCount={0}
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}
@@ -54,6 +70,22 @@ exports[`WebhooksTable rendering should render with error 1`] = `
       "type": "error",
     }
   }
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}
@@ -94,6 +126,22 @@ exports[`WebhooksTable rendering should render with no data 1`] = `
   hasError={false}
   isLoading={false}
   itemCount={0}
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}
@@ -134,6 +182,22 @@ exports[`WebhooksTable rendering should render with webhooks 1`] = `
   hasError={false}
   isLoading={false}
   itemCount={2}
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/index.js

@@ -1,43 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
-
 import WebhooksTable from './WebhooksTable';
-import {
-  WEBHOOK_DELETE_MODAL_ID,
-  WEBHOOK_EDIT_MODAL_ID,
-  WEBHOOK_TEST_MODAL_ID,
-} from '../../../constants';
 
 const WrappedWebhooksTable = props => {
-  const { setModalOpen: setDeleteModalOpen } = useForemanModal({
-    id: WEBHOOK_DELETE_MODAL_ID,
-  });
-
-  const { setModalOpen: setEditModalOpen } = useForemanModal({
-    id: WEBHOOK_EDIT_MODAL_ID,
-  });
-
-  const { setModalOpen: setTestModalOpen } = useForemanModal({
-    id: WEBHOOK_TEST_MODAL_ID,
-  });
+  const [isTestModalOpen, setIsTestModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
   const { setToDelete, setToEdit, setToTest, ...rest } = props;
 
   const onDeleteClick = rowData => {
     setToDelete(rowData);
-    setDeleteModalOpen();
+    setIsDeleteModalOpen(true);
   };
 
   const onEditClick = rowData => {
     setToEdit(rowData);
-    setEditModalOpen();
+    setIsEditModalOpen(true);
   };
 
   const onTestClick = rowData => {
     setToTest(rowData);
-    setTestModalOpen();
+    setIsTestModalOpen(true);
   };
 
   const webhookActions = {
@@ -53,6 +38,20 @@ const WrappedWebhooksTable = props => {
     <WebhooksTable
       onEditClick={onEditClick}
       onTestClick={onTestClick}
+      modalsStates={{
+        testModal: {
+          isOpen: isTestModalOpen,
+          closeModal: () => setIsTestModalOpen(false),
+        },
+        deleteModal: {
+          isOpen: isDeleteModalOpen,
+          closeModal: () => setIsDeleteModalOpen(false),
+        },
+        editModal: {
+          isOpen: isEditModalOpen,
+          closeModal: () => setIsEditModalOpen(false),
+        },
+      }}
       webhookActions={webhookActions}
       {...rest}
     />

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

@@ -3,13 +3,8 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 
-import {
-  WEBHOOKS_API_PATH,
-  WEBHOOKS_API_REQUEST_KEY,
-  WEBHOOK_CREATE_MODAL_ID,
-} from '../constants';
+import { WEBHOOKS_API_PATH, WEBHOOKS_API_REQUEST_KEY } from '../constants';
 
 import { selectSearch } from '../WebhooksPageSelectors';
 
@@ -26,29 +21,28 @@ const WebhooksIndexPage = () => {
   const [toDelete, setToDelete] = useState({});
   const [toTest, setToTest] = useState({});
   const [toEdit, setToEdit] = useState(0);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const {
-    setModalOpen: setCreateModalOpen,
-    setModalClosed: setCreateModalClosed,
-  } = useForemanModal({
-    id: WEBHOOK_CREATE_MODAL_ID,
-  });
+  const openModal = () => {
+    setIsCreateModalOpen(true);
+  };
 
   return (
     <>
       <WebhookCreateModal
+        isOpen={isCreateModalOpen}
         onSuccess={() => {
-          setCreateModalClosed();
+          setIsCreateModalOpen(false);
           dispatch(reloadWithSearch(search));
         }}
-        onCancel={setCreateModalClosed}
+        onCancel={() => setIsCreateModalOpen(false)}
       />
       <TableIndexPage
         header={__('Webhooks')}
         controller="webhooks"
         apiUrl={WEBHOOKS_API_PATH}
         apiOptions={{ key: WEBHOOKS_API_REQUEST_KEY }}
-        customCreateAction={() => setCreateModalOpen}
+        customCreateAction={() => openModal}
       >
         <WebhooksTable
           fetchAndPush={params => dispatch(fetchAndPush(params))}

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/integration.test.js

@@ -24,11 +24,8 @@ describe('WebhooksIndexPage - Integration Test', () => {
         <ConnectedWebhooksIndexPage history={history} />
       </Router>
     );
-    integrationTestHelper.takeStoreAndLastActionSnapshot('rendered');
 
     expect(component.exists('WebhooksTable')).toEqual(true);
     expect(component.exists('WebhookCreateModal')).toEqual(true);
-
-    integrationTestHelper.takeStoreAndLastActionSnapshot('initial state');
   });
 });