foreman_webhooks 1.0.0 → 1.1.0

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

@@ -3,12 +3,14 @@ import {
   column,
   sortableColumn,
   headerFormatterWithProps,
-  nameCellFormatter,
   deleteActionCellFormatter,
   cellFormatter,
 } from 'foremanReact/components/common/table';
 
-import { enabledCellFormatter } from './Components/Formatters';
+import {
+  enabledCellFormatter,
+  nameToEditFormatter,
+} from './Components/Formatters';
 
 const sortControllerFactory = (apiCall, sortBy, sortOrder) => ({
   apply: (by, order) => {
@@ -18,12 +20,18 @@ const sortControllerFactory = (apiCall, sortBy, sortOrder) => ({
   order: sortOrder,
 });
 
-const createWebhooksTableSchema = (apiCall, by, order, onDeleteClick) => {
+const createWebhooksTableSchema = (
+  apiCall,
+  by,
+  order,
+  onDeleteClick,
+  onEditClick
+) => {
   const sortController = sortControllerFactory(apiCall, by, order);
 
   return [
     sortableColumn('name', __('Name'), 4, sortController, [
-      nameCellFormatter('webhooks'),
+      nameToEditFormatter('webhooks', onEditClick),
     ]),
     sortableColumn('targetUrl', __('Target URL'), 4, sortController),
     sortableColumn('enabled', __('Enabled'), 2, sortController, [

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

@@ -7,11 +7,20 @@ import {
 import WrappedWebhooksTable from '../index';
 
 const props = {
-  fetchAndPush: () => {},
-  onDeleteClick: () => {},
-  setToDelete: () => {},
+  fetchAndPush: jest.fn(),
+  onDeleteClick: jest.fn(),
+  setToDelete: jest.fn(),
+  setToEdit: jest.fn(),
+  reloadWithSearch: jest.fn(),
   itemCount: 0,
   canCreate: true,
+  results: [],
+  pagination: {
+    page: 1,
+    perPage: 20,
+  },
+  toDelete: {},
+  toEdit: 0,
 };
 
 const fixtures = {
@@ -46,7 +55,7 @@ const fixtures = {
     hasError: false,
     hasData: true,
     toasts: [],
-    webhooks,
+    results: webhooks,
     itemCount: webhooks.length,
   }),
 };

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

@@ -1,16 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WebhooksTable rendering should render when loading 1`] = `
-<Component
+<WebhooksTable
   canCreate={true}
-  fetchAndPush={[Function]}
+  fetchAndPush={[MockFunction]}
   hasData={false}
   hasError={false}
   isLoading={true}
   itemCount={0}
-  onDeleteClick={[Function]}
+  onDeleteClick={[MockFunction]}
+  onEditClick={[Function]}
   page={5}
+  pagination={
+    Object {
+      "page": 1,
+      "perPage": 20,
+    }
+  }
   perPage={42}
+  reloadWithSearch={[MockFunction]}
+  results={Array []}
   search="name=foo"
   sort={
     Object {
@@ -18,14 +27,16 @@ exports[`WebhooksTable rendering should render when loading 1`] = `
       "order": "ASC",
     }
   }
+  toDelete={Object {}}
+  toEdit={0}
   toasts={Array []}
 />
 `;
 
 exports[`WebhooksTable rendering should render with error 1`] = `
-<Component
+<WebhooksTable
   canCreate={true}
-  fetchAndPush={[Function]}
+  fetchAndPush={[MockFunction]}
   hasData={false}
   hasError={true}
   isLoading={false}
@@ -36,9 +47,18 @@ exports[`WebhooksTable rendering should render with error 1`] = `
       "type": "error",
     }
   }
-  onDeleteClick={[Function]}
+  onDeleteClick={[MockFunction]}
+  onEditClick={[Function]}
   page={5}
+  pagination={
+    Object {
+      "page": 1,
+      "perPage": 20,
+    }
+  }
   perPage={42}
+  reloadWithSearch={[MockFunction]}
+  results={Array []}
   search="name=foo"
   sort={
     Object {
@@ -46,21 +66,32 @@ exports[`WebhooksTable rendering should render with error 1`] = `
       "order": "ASC",
     }
   }
+  toDelete={Object {}}
+  toEdit={0}
   toasts={Array []}
 />
 `;
 
 exports[`WebhooksTable rendering should render with no data 1`] = `
-<Component
+<WebhooksTable
   canCreate={true}
-  fetchAndPush={[Function]}
+  fetchAndPush={[MockFunction]}
   hasData={false}
   hasError={false}
   isLoading={false}
   itemCount={0}
-  onDeleteClick={[Function]}
+  onDeleteClick={[MockFunction]}
+  onEditClick={[Function]}
   page={5}
+  pagination={
+    Object {
+      "page": 1,
+      "perPage": 20,
+    }
+  }
   perPage={42}
+  reloadWithSearch={[MockFunction]}
+  results={Array []}
   search="name=foo"
   sort={
     Object {
@@ -68,30 +99,32 @@ exports[`WebhooksTable rendering should render with no data 1`] = `
       "order": "ASC",
     }
   }
+  toDelete={Object {}}
+  toEdit={0}
   toasts={Array []}
 />
 `;
 
 exports[`WebhooksTable rendering should render with webhooks 1`] = `
-<Component
+<WebhooksTable
   canCreate={true}
-  fetchAndPush={[Function]}
+  fetchAndPush={[MockFunction]}
   hasData={true}
   hasError={false}
   isLoading={false}
   itemCount={2}
-  onDeleteClick={[Function]}
+  onDeleteClick={[MockFunction]}
+  onEditClick={[Function]}
   page={5}
-  perPage={42}
-  search="name=foo"
-  sort={
+  pagination={
     Object {
-      "by": "defaultName",
-      "order": "ASC",
+      "page": 1,
+      "perPage": 20,
     }
   }
-  toasts={Array []}
-  webhooks={
+  perPage={42}
+  reloadWithSearch={[MockFunction]}
+  results={
     Array [
       Object {
         "canDelete": true,
@@ -111,5 +144,15 @@ exports[`WebhooksTable rendering should render with webhooks 1`] = `
       },
     ]
   }
+  search="name=foo"
+  sort={
+    Object {
+      "by": "defaultName",
+      "order": "ASC",
+    }
+  }
+  toDelete={Object {}}
+  toEdit={0}
+  toasts={Array []}
 />
 `;

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

@@ -4,22 +4,44 @@ import PropTypes from 'prop-types';
 import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 
 import WebhooksTable from './WebhooksTable';
-import { WEBHOOK_DELETE_MODAL_ID } from '../../../constants';
+import {
+  WEBHOOK_DELETE_MODAL_ID,
+  WEBHOOK_EDIT_MODAL_ID,
+} from '../../../constants';
 
 const WrappedWebhooksTable = props => {
-  const { setModalOpen } = useForemanModal({ id: WEBHOOK_DELETE_MODAL_ID });
-  const { setToDelete, ...rest } = props;
+  const { setModalOpen: setDeleteModalOpen } = useForemanModal({
+    id: WEBHOOK_DELETE_MODAL_ID,
+  });
+
+  const { setModalOpen: setEditModalOpen } = useForemanModal({
+    id: WEBHOOK_EDIT_MODAL_ID,
+  });
+
+  const { setToDelete, setToEdit, ...rest } = props;
 
   const onDeleteClick = rowData => {
     setToDelete(rowData);
-    setModalOpen();
+    setDeleteModalOpen();
+  };
+
+  const onEditClick = rowData => {
+    setToEdit(rowData);
+    setEditModalOpen();
   };
 
-  return <WebhooksTable {...rest} onDeleteClick={onDeleteClick} />;
+  return (
+    <WebhooksTable
+      onDeleteClick={onDeleteClick}
+      onEditClick={onEditClick}
+      {...rest}
+    />
+  );
 };
 
 WrappedWebhooksTable.propTypes = {
   setToDelete: PropTypes.func.isRequired,
+  setToEdit: PropTypes.func.isRequired,
 };
 
 export default WrappedWebhooksTable;

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

@@ -1,14 +1,17 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
 import { Button } from 'patternfly-react';
 
 import { translate as __ } from 'foremanReact/common/I18n';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
-import { foremanUrl } from 'foremanReact/common/helpers';
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+import { withRenderHandler } from 'foremanReact/common/HOC';
+
+import { WEBHOOKS_SEARCH_PROPS, WEBHOOK_CREATE_MODAL_ID } from '../constants';
 
-import { WEBHOOKS_SEARCH_PROPS, WEBHOOKS_PATH } from '../constants';
 import WebhooksTable from './Components/WebhooksTable';
+import WebhookCreateModal from './Components/WebhookCreateModal';
+import EmptyWebhooksIndexPage from './Components/EmptyWebhooksIndexPage';
 
 const WebhooksIndexPage = ({
   fetchAndPush,
@@ -24,40 +27,61 @@ const WebhooksIndexPage = ({
   message,
   canCreate,
   toasts,
+  reloadWithSearch,
 }) => {
-  const handleSearch = query => fetchAndPush({ searchQuery: query, page: 1 });
   const [toDelete, setToDelete] = useState({});
+  const [toEdit, setToEdit] = useState(0);
+
+  const {
+    setModalOpen: setCreateModalOpen,
+    setModalClosed: setCreateModalClosed,
+  } = useForemanModal({
+    id: WEBHOOK_CREATE_MODAL_ID,
+  });
+
   const createBtn = (
-    <Link to={foremanUrl(`${WEBHOOKS_PATH}/new`)}>
-      <Button bsStyle="primary">{__('Create Webhook')}</Button>
-    </Link>
+    <Button onClick={setCreateModalOpen} bsStyle="primary">
+      {__('Create Webhook')}
+    </Button>
   );
+
   return (
-    <PageLayout
-      header={__('Webhooks')}
-      searchable={!isLoading}
-      searchProps={WEBHOOKS_SEARCH_PROPS}
-      searchQuery={search}
-      isLoading={isLoading && hasData}
-      onSearch={handleSearch}
-      onBookmarkClick={handleSearch}
-      toastNotifications={toasts}
-      toolbarButtons={canCreate && createBtn}
-    >
-      <WebhooksTable
-        results={webhooks}
-        fetchAndPush={fetchAndPush}
-        pagination={{ page, perPage }}
-        itemCount={itemCount}
-        sort={sort}
-        toDelete={toDelete}
-        setToDelete={setToDelete}
-        message={message}
-        hasData={hasData}
-        hasError={hasError}
-        isLoading={isLoading}
+    <>
+      <WebhookCreateModal
+        onSuccess={() => {
+          setCreateModalClosed();
+          reloadWithSearch(search);
+        }}
+        onCancel={setCreateModalClosed}
       />
-    </PageLayout>
+      <PageLayout
+        header={__('Webhooks')}
+        searchable={!isLoading}
+        searchProps={WEBHOOKS_SEARCH_PROPS}
+        searchQuery={search}
+        isLoading={isLoading && hasData}
+        onSearch={reloadWithSearch}
+        onBookmarkClick={reloadWithSearch}
+        toastNotifications={toasts}
+        toolbarButtons={canCreate && createBtn}
+      >
+        <WebhooksTable
+          results={webhooks}
+          fetchAndPush={fetchAndPush}
+          pagination={{ page, perPage }}
+          itemCount={itemCount}
+          sort={sort}
+          toDelete={toDelete}
+          setToDelete={setToDelete}
+          hasData={hasData}
+          hasError={hasError}
+          isLoading={isLoading}
+          toEdit={toEdit}
+          setToEdit={setToEdit}
+          reloadWithSearch={reloadWithSearch}
+        />
+      </PageLayout>
+    </>
   );
 };
 
@@ -75,6 +99,7 @@ WebhooksIndexPage.propTypes = {
   message: PropTypes.object,
   canCreate: PropTypes.bool.isRequired,
   toasts: PropTypes.array.isRequired,
+  reloadWithSearch: PropTypes.func.isRequired,
 };
 
 WebhooksIndexPage.defaultProps = {
@@ -84,4 +109,8 @@ WebhooksIndexPage.defaultProps = {
   message: { type: 'empty', text: __('Try to create a new Webhook') },
 };
 
-export default WebhooksIndexPage;
+export default withRenderHandler({
+  Component: WebhooksIndexPage,
+  EmptyComponent: EmptyWebhooksIndexPage,
+  ErrorComponent: EmptyWebhooksIndexPage,
+});

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

@@ -72,3 +72,39 @@ export const webhooks = [
     enabled: false,
   },
 ];
+
+export const spySelector = selectors => {
+  jest.spyOn(selectors, 'selectIsLoading');
+  jest.spyOn(selectors, 'selectHasError');
+  jest.spyOn(selectors, 'selectWebhooks');
+  jest.spyOn(selectors, 'selectHasData');
+  jest.spyOn(selectors, 'selectPage');
+  jest.spyOn(selectors, 'selectPerPage');
+  jest.spyOn(selectors, 'selectSearch');
+  jest.spyOn(selectors, 'selectSort');
+  jest.spyOn(selectors, 'selectCanCreate');
+  jest.spyOn(selectors, 'selectSubtotal');
+  jest.spyOn(selectors, 'selectMessage');
+
+  selectors.selectIsLoading.mockImplementation(() => false);
+  selectors.selectHasError.mockImplementation(() => false);
+  selectors.selectWebhooks.mockImplementation(() => []);
+  selectors.selectHasData.mockImplementation(() => true);
+  selectors.selectPage.mockImplementation(() => 1);
+  selectors.selectPerPage.mockImplementation(() => 20);
+  selectors.selectSearch.mockImplementation(() => '');
+  selectors.selectSort.mockImplementation(() => ({ by: '', order: '' }));
+  selectors.selectCanCreate.mockImplementation(() => true);
+  selectors.selectSubtotal.mockImplementation(() => 0);
+  selectors.selectMessage.mockImplementation(() => ({}));
+};
+
+export const spyEditSelector = selectors => {
+  jest.spyOn(selectors, 'selectIsLoading');
+  jest.spyOn(selectors, 'selectWebhookValues');
+  jest.spyOn(selectors, 'selectWebhookTemplateId');
+
+  selectors.selectIsLoading.mockImplementation(() => false);
+  selectors.selectWebhookValues.mockImplementation(() => ({}));
+  selectors.selectWebhookTemplateId.mockImplementation(() => 1);
+};