webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js in foreman_webhooks-1.0.0 vs webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js in foreman_webhooks-1.1.0

@@ -1,16 +1,19 @@
 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, WEBHOOKS_PATH } from '../constants';
+import { WEBHOOKS_SEARCH_PROPS, WEBHOOK_CREATE_MODAL_ID } from '../constants';
+
 import WebhooksTable from './Components/WebhooksTable';
+import WebhookCreateModal from './Components/WebhookCreateModal';
+import EmptyWebhooksIndexPage from './Components/EmptyWebhooksIndexPage';
 
 const WebhooksIndexPage = ({
   fetchAndPush,
   search,
   isLoading,
@@ -22,44 +25,65 @@
   hasError,
   itemCount,
   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>
+    </>
   );
 };
 
 WebhooksIndexPage.propTypes = {
   fetchAndPush: PropTypes.func.isRequired,
@@ -73,15 +97,20 @@
   hasError: PropTypes.bool.isRequired,
   itemCount: PropTypes.number.isRequired,
   message: PropTypes.object,
   canCreate: PropTypes.bool.isRequired,
   toasts: PropTypes.array.isRequired,
+  reloadWithSearch: PropTypes.func.isRequired,
 };
 
 WebhooksIndexPage.defaultProps = {
   page: null,
   perPage: null,
   search: '',
   message: { type: 'empty', text: __('Try to create a new Webhook') },
 };
 
-export default WebhooksIndexPage;
+export default withRenderHandler({
+  Component: WebhooksIndexPage,
+  EmptyComponent: EmptyWebhooksIndexPage,
+  ErrorComponent: EmptyWebhooksIndexPage,
+});