foreman_webhooks 0.0.1

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

@@ -0,0 +1,75 @@
+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 WebhookDeleteModal from '../WebhookDeleteModal';
+import EmptyWebhooksTable from '../EmptyWebhooksTable';
+
+import createWebhooksTableSchema from './WebhooksTableSchema';
+
+const WebhooksTable = ({
+  fetchAndPush,
+  itemCount,
+  results,
+  sort,
+  pagination,
+  toDelete,
+  onDeleteClick,
+  message,
+}) => {
+  const onSuccess = () => {
+    const currentPage = pagination.page;
+    const maxPage = Math.ceil((itemCount - 1) / pagination.perPage);
+    fetchAndPush({ page: maxPage < currentPage ? maxPage : currentPage });
+  };
+  return (
+    <React.Fragment>
+      <WebhookDeleteModal toDelete={toDelete} onSuccess={onSuccess} />
+      <Table
+        key="webhooks-table"
+        columns={createWebhooksTableSchema(
+          fetchAndPush,
+          sort.by,
+          sort.order,
+          onDeleteClick
+        )}
+        rows={results}
+        id="webhooks-table"
+        style={{ marginBottom: -6 }}
+      />
+      <Pagination
+        viewType="list"
+        itemCount={itemCount}
+        pagination={pagination}
+        onChange={fetchAndPush}
+        dropdownButtonId="webhooks-page-pagination-dropdown"
+      />
+    </React.Fragment>
+  );
+};
+
+WebhooksTable.propTypes = {
+  results: PropTypes.array.isRequired,
+  fetchAndPush: PropTypes.func.isRequired,
+  onDeleteClick: PropTypes.func.isRequired,
+  itemCount: PropTypes.number.isRequired,
+  sort: PropTypes.object,
+  pagination: PropTypes.object.isRequired,
+  toDelete: PropTypes.object.isRequired,
+  message: PropTypes.object,
+};
+
+WebhooksTable.defaultProps = {
+  sort: { by: '', order: '' },
+  message: { type: 'empty', text: __('Try to create a new Webhook') },
+};
+
+export default withRenderHandler({
+  Component: WebhooksTable,
+  EmptyComponent: EmptyWebhooksTable,
+  ErrorComponent: EmptyWebhooksTable,
+});

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

@@ -0,0 +1,41 @@
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  column,
+  sortableColumn,
+  headerFormatterWithProps,
+  nameCellFormatter,
+  deleteActionCellFormatter,
+  cellFormatter,
+} from 'foremanReact/components/common/table';
+
+import { enabledCellFormatter } from './Components/Formatters';
+
+const sortControllerFactory = (apiCall, sortBy, sortOrder) => ({
+  apply: (by, order) => {
+    apiCall({ sort: { by, order } });
+  },
+  property: sortBy,
+  order: sortOrder,
+});
+
+const createWebhooksTableSchema = (apiCall, by, order, onDeleteClick) => {
+  const sortController = sortControllerFactory(apiCall, by, order);
+
+  return [
+    sortableColumn('name', __('Name'), 4, sortController, [
+      nameCellFormatter('webhooks'),
+    ]),
+    sortableColumn('targetUrl', __('Target URL'), 4, sortController),
+    sortableColumn('enabled', __('Enabled'), 2, sortController, [
+      enabledCellFormatter(),
+    ]),
+    column(
+      'actions',
+      __('Actions'),
+      [headerFormatterWithProps],
+      [deleteActionCellFormatter(onDeleteClick), cellFormatter]
+    ),
+  ];
+};
+
+export default createWebhooksTableSchema;

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

@@ -0,0 +1,57 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import {
+  propsFactory,
+  webhooks,
+} from '../../../__tests__/WebhooksIndexPage.fixtures';
+import WrappedWebhooksTable from '../index';
+
+const props = {
+  fetchAndPush: () => {},
+  onDeleteClick: () => {},
+  setToDelete: () => {},
+  itemCount: 0,
+  canCreate: true,
+};
+
+const fixtures = {
+  'should render when loading': propsFactory({
+    ...props,
+    isLoading: true,
+    hasData: false,
+    hasError: false,
+    toasts: [],
+  }),
+  'should render with no data': propsFactory({
+    ...props,
+    isLoading: false,
+    hasData: false,
+    hasError: false,
+    toasts: [],
+  }),
+  'should render with error': propsFactory({
+    isLoading: false,
+    hasData: false,
+    hasError: true,
+    message: {
+      type: 'error',
+      text: 'this is error',
+    },
+    ...props,
+    toasts: [],
+  }),
+  'should render with webhooks': propsFactory({
+    ...props,
+    isLoading: false,
+    hasError: false,
+    hasData: true,
+    toasts: [],
+    webhooks,
+    itemCount: webhooks.length,
+  }),
+};
+
+describe('WebhooksTable', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(WrappedWebhooksTable, fixtures));
+});

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

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WebhooksTable rendering should render when loading 1`] = `
+<Component
+  canCreate={true}
+  fetchAndPush={[Function]}
+  hasData={false}
+  hasError={false}
+  isLoading={true}
+  itemCount={0}
+  onDeleteClick={[Function]}
+  page={5}
+  perPage={42}
+  search="name=foo"
+  sort={
+    Object {
+      "by": "defaultName",
+      "order": "ASC",
+    }
+  }
+  toasts={Array []}
+/>
+`;
+
+exports[`WebhooksTable rendering should render with error 1`] = `
+<Component
+  canCreate={true}
+  fetchAndPush={[Function]}
+  hasData={false}
+  hasError={true}
+  isLoading={false}
+  itemCount={0}
+  message={
+    Object {
+      "text": "this is error",
+      "type": "error",
+    }
+  }
+  onDeleteClick={[Function]}
+  page={5}
+  perPage={42}
+  search="name=foo"
+  sort={
+    Object {
+      "by": "defaultName",
+      "order": "ASC",
+    }
+  }
+  toasts={Array []}
+/>
+`;
+
+exports[`WebhooksTable rendering should render with no data 1`] = `
+<Component
+  canCreate={true}
+  fetchAndPush={[Function]}
+  hasData={false}
+  hasError={false}
+  isLoading={false}
+  itemCount={0}
+  onDeleteClick={[Function]}
+  page={5}
+  perPage={42}
+  search="name=foo"
+  sort={
+    Object {
+      "by": "defaultName",
+      "order": "ASC",
+    }
+  }
+  toasts={Array []}
+/>
+`;
+
+exports[`WebhooksTable rendering should render with webhooks 1`] = `
+<Component
+  canCreate={true}
+  fetchAndPush={[Function]}
+  hasData={true}
+  hasError={false}
+  isLoading={false}
+  itemCount={2}
+  onDeleteClick={[Function]}
+  page={5}
+  perPage={42}
+  search="name=foo"
+  sort={
+    Object {
+      "by": "defaultName",
+      "order": "ASC",
+    }
+  }
+  toasts={Array []}
+  webhooks={
+    Array [
+      Object {
+        "canDelete": true,
+        "canEdit": true,
+        "enabled": true,
+        "id": 1,
+        "name": "my-webhook",
+        "targetUrl": "https://my-machine.example.com",
+      },
+      Object {
+        "canDelete": false,
+        "canEdit": false,
+        "enabled": false,
+        "id": 2,
+        "name": "your-webhook",
+        "targetUrl": "https://your-machine.example.com",
+      },
+    ]
+  }
+/>
+`;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
+
+import WebhooksTable from './WebhooksTable';
+import { WEBHOOK_DELETE_MODAL_ID } from '../../../constants';
+
+const WrappedWebhooksTable = props => {
+  const { setModalOpen } = useForemanModal({ id: WEBHOOK_DELETE_MODAL_ID });
+  const { setToDelete, ...rest } = props;
+
+  const onDeleteClick = rowData => {
+    setToDelete(rowData);
+    setModalOpen();
+  };
+
+  return <WebhooksTable {...rest} onDeleteClick={onDeleteClick} />;
+};
+
+WrappedWebhooksTable.propTypes = {
+  setToDelete: PropTypes.func.isRequired,
+};
+
+export default WrappedWebhooksTable;

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

@@ -0,0 +1,87 @@
+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 { WEBHOOKS_SEARCH_PROPS, WEBHOOKS_PATH } from '../constants';
+import WebhooksTable from './Components/WebhooksTable';
+
+const WebhooksIndexPage = ({
+  fetchAndPush,
+  search,
+  isLoading,
+  hasData,
+  webhooks,
+  page,
+  perPage,
+  sort,
+  hasError,
+  itemCount,
+  message,
+  canCreate,
+  toasts,
+}) => {
+  const handleSearch = query => fetchAndPush({ searchQuery: query, page: 1 });
+  const [toDelete, setToDelete] = useState({});
+  const createBtn = (
+    <Link to={foremanUrl(`${WEBHOOKS_PATH}/new`)}>
+      <Button bsStyle="primary">{__('Create Webhook')}</Button>
+    </Link>
+  );
+  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}
+      />
+    </PageLayout>
+  );
+};
+
+WebhooksIndexPage.propTypes = {
+  fetchAndPush: PropTypes.func.isRequired,
+  search: PropTypes.string,
+  isLoading: PropTypes.bool.isRequired,
+  hasData: PropTypes.bool.isRequired,
+  webhooks: PropTypes.array.isRequired,
+  page: PropTypes.number,
+  perPage: PropTypes.number,
+  sort: PropTypes.object.isRequired,
+  hasError: PropTypes.bool.isRequired,
+  itemCount: PropTypes.number.isRequired,
+  message: PropTypes.object,
+  canCreate: PropTypes.bool.isRequired,
+  toasts: PropTypes.array.isRequired,
+};
+
+WebhooksIndexPage.defaultProps = {
+  page: null,
+  perPage: null,
+  search: '',
+  message: { type: 'empty', text: __('Try to create a new Webhook') },
+};
+
+export default WebhooksIndexPage;

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

@@ -0,0 +1,74 @@
+import { WEBHOOKS_API_REQUEST_KEY } from '../../constants';
+
+export const pickedQuery = { by: 'default_name', order: 'ASC' };
+
+const searchString = 'name=foo';
+
+const stateSearch = { search: searchString };
+
+const querySearch = { searchQuery: searchString };
+
+export const querySort = {
+  sort: {
+    by: 'defaultName',
+    order: 'ASC',
+  },
+};
+
+const pageParams = {
+  page: 5,
+  perPage: 42,
+};
+
+const stateParams = {
+  ...pageParams,
+  ...stateSearch,
+  ...querySort,
+};
+
+export const resultParams = {
+  ...pageParams,
+  ...querySearch,
+  sort: pickedQuery,
+};
+
+export const queryParams = {
+  ...pageParams,
+  ...querySearch,
+  ...querySort,
+};
+
+export const stateFactory = state => ({
+  API: {
+    [WEBHOOKS_API_REQUEST_KEY]: {
+      response: {
+        ...stateParams,
+        ...state,
+      },
+    },
+  },
+});
+
+export const propsFactory = (state = {}) => ({
+  ...stateParams,
+  ...state,
+});
+
+export const webhooks = [
+  {
+    id: 1,
+    name: 'my-webhook',
+    targetUrl: 'https://my-machine.example.com',
+    canEdit: true,
+    canDelete: true,
+    enabled: true,
+  },
+  {
+    id: 2,
+    name: 'your-webhook',
+    targetUrl: 'https://your-machine.example.com',
+    canEdit: false,
+    canDelete: false,
+    enabled: false,
+  },
+];