foreman_webhooks 1.0.0 → 1.1.0

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

@@ -0,0 +1,9 @@
+export const HTTP_METHODS = [
+  { value: 'POST', label: 'POST' },
+  { value: 'GET', label: 'GET' },
+  { value: 'PUT', label: 'PUT' },
+  { value: 'DELETE', label: 'DELETE' },
+  { value: 'PATCH', label: 'PATCH' },
+];
+
+export const WEBHOOK_ITEM = 'Webhook';

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

@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { startCase, camelCase } from 'lodash';
+
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { get } from 'foremanReact/redux/API';
+
+import WebhookForm from './WebhookForm';
+
+import {
+  selectWebhookTemplates,
+  selectWebhookEvents,
+  selectTemplatesIsLoading,
+  selectEventsIsLoading,
+} from './WebhookFormSelectors';
+
+import {
+  WEBHOOK_TEMPLATES_API_REQUEST_KEY,
+  WEBHOOK_TEMPLATES_API_PATH,
+  WEBHOOK_EVENTS_API_REQUEST_KEY,
+  WEBHOOKS_API_PLAIN_PATH,
+} from '../../constants';
+
+const params = { page: 1, search: 'snippet = false', per_page: 'all' };
+
+const ConnectedWebhookForm = ({ onCancel, handleSubmit, initialValues }) => {
+  const dispatch = useDispatch();
+
+  const templates = useSelector(selectWebhookTemplates);
+  const availableEvents = useSelector(selectWebhookEvents).map(e => ({
+    value: `${e}.event.foreman`,
+    label: startCase(camelCase(e)),
+  }));
+  const isTemplatesLoading = useSelector(selectTemplatesIsLoading);
+  const isEventsLoading = useSelector(selectEventsIsLoading);
+
+  useEffect(() => {
+    dispatch(
+      get({
+        key: WEBHOOK_TEMPLATES_API_REQUEST_KEY,
+        url: foremanUrl(WEBHOOK_TEMPLATES_API_PATH),
+        params,
+      })
+    );
+    dispatch(
+      get({
+        key: WEBHOOK_EVENTS_API_REQUEST_KEY,
+        url: foremanUrl(`${WEBHOOKS_API_PLAIN_PATH}/events`),
+      })
+    );
+  }, [dispatch]);
+
+  return (
+    <WebhookForm
+      templates={templates}
+      availableEvents={availableEvents}
+      onCancel={onCancel}
+      handleSubmit={handleSubmit}
+      initialValues={initialValues}
+      isTemplatesLoading={isTemplatesLoading}
+      isEventsLoading={isEventsLoading}
+    />
+  );
+};
+
+ConnectedWebhookForm.propTypes = {
+  onCancel: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  initialValues: PropTypes.object.isRequired,
+};
+
+export default ConnectedWebhookForm;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import DefaultEmptyState from 'foremanReact/components/common/EmptyState';
+
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+
+import WebhookCreateModal from '../WebhookCreateModal';
+import { WEBHOOK_CREATE_MODAL_ID } from '../../../constants';
+
+const EmptyWebhooksIndexPage = ({
+  search,
+  reloadWithSearch,
+  message: { type, text },
+}) => {
+  const {
+    setModalOpen: setCreateModalOpen,
+    setModalClosed: setCreateModalClosed,
+  } = useForemanModal({
+    id: WEBHOOK_CREATE_MODAL_ID,
+  });
+
+  return (
+    <>
+      <WebhookCreateModal
+        onSuccess={() => {
+          setCreateModalClosed();
+          reloadWithSearch(search);
+        }}
+        onCancel={setCreateModalClosed}
+      />
+      <DefaultEmptyState
+        icon={type === 'error' ? 'error-circle-o' : 'add-circle-o'}
+        header={type === 'error' ? __('Error') : __('No Results')}
+        description={text}
+        documentation={null}
+        action={{
+          title: __('Create Webhook'),
+          onClick: () => setCreateModalOpen(),
+        }}
+      />
+    </>
+  );
+};
+
+EmptyWebhooksIndexPage.propTypes = {
+  message: PropTypes.shape({
+    type: PropTypes.oneOf(['empty', 'error']),
+    text: PropTypes.string,
+  }),
+  search: PropTypes.string,
+  reloadWithSearch: PropTypes.func.isRequired,
+};
+
+EmptyWebhooksIndexPage.defaultProps = {
+  message: {
+    type: 'empty',
+    text: __('Try to create a new Webhook'),
+  },
+  search: '',
+};
+
+export default EmptyWebhooksIndexPage;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 ConnectedWebhookForm from '../../Components/WebhookForm';
+
+import { WEBHOOK_CREATE_MODAL_ID, WEBHOOKS_PATH } from '../../constants';
+
+import './WebhookModal.scss';
+
+const WebhookCreateModal = ({ onSuccess, onCancel }) => {
+  const dispatch = useDispatch();
+
+  const initialWebhookValues = {
+    name: '',
+    target_url: '',
+    user: '',
+    password: '',
+    webhook_template_id: undefined,
+    event: '',
+    http_method: 'POST',
+    http_content_type: 'application/json',
+    enabled: true,
+    verify_ssl: true,
+    ssl_ca_certs: '',
+    http_headers: '',
+    proxy_authorization: false,
+  };
+
+  const handleSubmit = (values, actions) =>
+    dispatch(
+      submitForm({
+        url: foremanUrl(`/api${WEBHOOKS_PATH}`),
+        values: { ...values, controller: 'webhooks' },
+        item: 'Webhook',
+        message: __('Webhook was successfully created.'),
+        successCallback: onSuccess,
+        actions,
+      })
+    );
+
+  return (
+    <ForemanModal
+      id={WEBHOOK_CREATE_MODAL_ID}
+      title={__('Create Webhook')}
+      backdrop="static"
+      className="webhooks-modal"
+    >
+      <ForemanModal.Header />
+      <ConnectedWebhookForm
+        handleSubmit={handleSubmit}
+        initialValues={initialWebhookValues}
+        onCancel={onCancel}
+      />
+    </ForemanModal>
+  );
+};
+
+WebhookCreateModal.propTypes = {
+  onSuccess: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default WebhookCreateModal;

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

@@ -14,6 +14,7 @@ const WebhookDeleteModal = ({ toDelete, onSuccess }) => {
     <ForemanModal
       id={WEBHOOK_DELETE_MODAL_ID}
       title={__('Confirm Webhook Deletion')}
+      backdrop="static"
       enforceFocus
       submitProps={{
         url: foremanUrl(`/api/v2/webhooks/${id}`),

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

@@ -0,0 +1,107 @@
+import React, { useEffect } from '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 ConnectedWebhookForm from '../../Components/WebhookForm';
+
+import {
+  WEBHOOKS_PATH,
+  WEBHOOK_API_REQUEST_KEY,
+  WEBHOOK_EDIT_MODAL_ID,
+  WEBHOOKS_API_PLAIN_PATH,
+} from '../../constants';
+
+import {
+  selectIsLoading,
+  selectWebhookValues,
+  selectWebhookTemplateId,
+} from './WebhookEditModalSelectors';
+
+import './WebhookModal.scss';
+
+const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
+  const dispatch = useDispatch();
+
+  const id = toEdit;
+
+  const handleSubmit = (values, actions) =>
+    dispatch(
+      submitForm({
+        url: foremanUrl(`/api${WEBHOOKS_PATH}/${id}`),
+        values: { ...values, controller: 'webhooks' },
+        item: 'Webhook',
+        message: __('Webhook was successfully updated.'),
+        method: 'put',
+        successCallback: onSuccess,
+        actions,
+      })
+    );
+
+  const isLoading = useSelector(selectIsLoading);
+  const initialWebhookValues = {
+    id: useSelector(selectWebhookValues).id,
+    name: useSelector(selectWebhookValues).name,
+    target_url: useSelector(selectWebhookValues).targetUrl,
+    user: useSelector(selectWebhookValues).user || '',
+    password: '',
+    http_method: useSelector(selectWebhookValues).httpMethod,
+    http_content_type: useSelector(selectWebhookValues).httpContentType || '',
+    webhook_template_id: useSelector(selectWebhookTemplateId),
+    event: useSelector(selectWebhookValues).event,
+    enabled: useSelector(selectWebhookValues).enabled,
+    verify_ssl: useSelector(selectWebhookValues).verifySsl,
+    ssl_ca_certs: useSelector(selectWebhookValues).sslCaCerts || '',
+    http_headers: useSelector(selectWebhookValues).httpHeaders || '',
+    proxy_authorization: useSelector(selectWebhookValues).proxyAuthorization,
+  };
+
+  useEffect(() => {
+    if (id) {
+      dispatch(
+        get({
+          key: WEBHOOK_API_REQUEST_KEY,
+          url: foremanUrl(`${WEBHOOKS_API_PLAIN_PATH}/${id}`),
+        })
+      );
+    }
+  }, [id, dispatch]);
+
+  return (
+    <ForemanModal
+      id={WEBHOOK_EDIT_MODAL_ID}
+      title={`${__('Edit')} ${initialWebhookValues.name}`}
+      backdrop="static"
+      className="webhooks-modal"
+    >
+      <ForemanModal.Header />
+      {isLoading ? (
+        <Loading />
+      ) : (
+        <ConnectedWebhookForm
+          handleSubmit={handleSubmit}
+          initialValues={initialWebhookValues}
+          onCancel={onCancel}
+        />
+      )}
+    </ForemanModal>
+  );
+};
+
+WebhookEditModal.propTypes = {
+  onSuccess: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  toEdit: PropTypes.number,
+};
+
+WebhookEditModal.defaultProps = {
+  toEdit: 0,
+};
+
+export default WebhookEditModal;

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

@@ -0,0 +1,22 @@
+import { STATUS } from 'foremanReact/constants';
+import { deepPropsToCamelCase } from 'foremanReact/common/helpers';
+import {
+  selectAPIStatus,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+
+import { WEBHOOK_API_REQUEST_KEY } from '../../constants';
+
+export const selectWebhookValues = state =>
+  deepPropsToCamelCase(selectAPIResponse(state, WEBHOOK_API_REQUEST_KEY)) || {};
+
+export const selectWebhookTemplateId = state =>
+  selectWebhookValues(state)?.webhookTemplate?.id || 0;
+
+const selectWebhooksEditPageStatus = state =>
+  selectAPIStatus(state, WEBHOOK_API_REQUEST_KEY);
+
+export const selectIsLoading = state => {
+  const status = selectWebhooksEditPageStatus(state);
+  return !status || status === STATUS.PENDING;
+};

data/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookModal.scss

@@ -0,0 +1,6 @@
+.webhooks-modal {
+  .modal-dialog {
+    width: 50vw;
+    min-width: 50vw;
+  }
+}

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

@@ -1 +1,2 @@
 export { default as enabledCellFormatter } from './enabledCellFormatter';
+export { default as nameToEditFormatter } from './nameToEditFormatter';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import NameToEditCell from '../NameToEditCell';
+
+const nameToEditFormatter = (controllerPluralize, onClick) => (
+  value,
+  { rowData: { canEdit, id, name } }
+) => (
+  <NameToEditCell
+    active={canEdit}
+    id={id}
+    name={encodeURI(name)}
+    controller={controllerPluralize}
+    onClick={onClick}
+  >
+    {value}
+  </NameToEditCell>
+);
+
+export default nameToEditFormatter;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@patternfly/react-core';
+
+const NameToEditCell = ({ active, id, name, controller, onClick, children }) =>
+  active ? (
+    <Button
+      variant="link"
+      isInline
+      component="span"
+      onClick={() => onClick(id)}
+    >
+      {children}
+    </Button>
+  ) : (
+    <Button variant="link" isInline isDisabled component="span">
+      {children}
+    </Button>
+  );
+
+NameToEditCell.propTypes = {
+  active: PropTypes.bool,
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  controller: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node,
+};
+
+NameToEditCell.defaultProps = {
+  active: false,
+  children: null,
+};
+
+export default NameToEditCell;

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

@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { translate as __ } from 'foremanReact/common/I18n';
 import { Table } from 'foremanReact/components/common/table';
 import Pagination from 'foremanReact/components/Pagination/PaginationWrapper';
-import { withRenderHandler } from 'foremanReact/common/HOC';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 
 import WebhookDeleteModal from '../WebhookDeleteModal';
-import EmptyWebhooksTable from '../EmptyWebhooksTable';
+import WebhookEditModal from '../WebhookEditModal';
 
 import createWebhooksTableSchema from './WebhooksTableSchema';
 
+import { WEBHOOK_EDIT_MODAL_ID } from '../../../constants';
+
 const WebhooksTable = ({
   fetchAndPush,
   itemCount,
@@ -19,23 +20,40 @@ const WebhooksTable = ({
   pagination,
   toDelete,
   onDeleteClick,
-  message,
+  toEdit,
+  onEditClick,
+  reloadWithSearch,
+  search,
 }) => {
-  const onSuccess = () => {
+  const onDeleteSuccess = () => {
     const currentPage = pagination.page;
     const maxPage = Math.ceil((itemCount - 1) / pagination.perPage);
     fetchAndPush({ page: maxPage < currentPage ? maxPage : currentPage });
   };
+
+  const { setModalClosed: setEditModalClosed } = useForemanModal({
+    id: WEBHOOK_EDIT_MODAL_ID,
+  });
+
   return (
     <React.Fragment>
-      <WebhookDeleteModal toDelete={toDelete} onSuccess={onSuccess} />
+      <WebhookDeleteModal toDelete={toDelete} onSuccess={onDeleteSuccess} />
+      <WebhookEditModal
+        toEdit={toEdit}
+        onSuccess={() => {
+          setEditModalClosed();
+          reloadWithSearch(search);
+        }}
+        onCancel={setEditModalClosed}
+      />
       <Table
         key="webhooks-table"
         columns={createWebhooksTableSchema(
           fetchAndPush,
           sort.by,
           sort.order,
-          onDeleteClick
+          onDeleteClick,
+          onEditClick
         )}
         rows={results}
         id="webhooks-table"
@@ -56,20 +74,19 @@ WebhooksTable.propTypes = {
   results: PropTypes.array.isRequired,
   fetchAndPush: PropTypes.func.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
+  onEditClick: PropTypes.func.isRequired,
   itemCount: PropTypes.number.isRequired,
   sort: PropTypes.object,
   pagination: PropTypes.object.isRequired,
   toDelete: PropTypes.object.isRequired,
-  message: PropTypes.object,
+  toEdit: PropTypes.number.isRequired,
+  reloadWithSearch: PropTypes.func.isRequired,
+  search: PropTypes.string,
 };
 
 WebhooksTable.defaultProps = {
   sort: { by: '', order: '' },
-  message: { type: 'empty', text: __('Try to create a new Webhook') },
+  search: '',
 };
 
-export default withRenderHandler({
-  Component: WebhooksTable,
-  EmptyComponent: EmptyWebhooksTable,
-  ErrorComponent: EmptyWebhooksTable,
-});
+export default WebhooksTable;