+
+
+
+ t(view.empty-state, {"context":"title","name":"Quipucords"})
+
-
-
-
- Welcome to Quipucords
-
-
- Begin by adding one or more sources. A source contains a collection of network information,
-
-
+
+
-
- Add Source
-
-
+ t(view.empty-state, {"context":"label"})
+
`;
exports[`SourcesEmptyState Component should render the application name: application name 1`] = `
-
-
- Welcome to
- Ipsum
-
-
+ t(view.empty-state, {"context":"title","name":"Ipsum"})
+
+
`;
diff --git a/src/components/sources/__tests__/__snapshots__/sourcesTableCells.test.js.snap b/src/components/sources/__tests__/__snapshots__/sourcesTableCells.test.js.snap
new file mode 100644
index 00000000..5b169600
--- /dev/null
+++ b/src/components/sources/__tests__/__snapshots__/sourcesTableCells.test.js.snap
@@ -0,0 +1,264 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SourcesTableCells should export specific function components: function components 1`] = `
+Object {
+ "actionsCell": [Function],
+ "credentialsCellContent": [Function],
+ "description": [Function],
+ "failedHostsCellContent": [Function],
+ "okHostsCellContent": [Function],
+ "scanStatus": [Function],
+ "statusCell": [Function],
+ "statusContent": [Function],
+ "unreachableHostsCellContent": [Function],
+}
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic actionsCell cell 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ t(table.label, {"context":"scan"})
+
+
+
+
+
+
+
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic credentialsCellContent cell 1`] = `
+Object {
+ "content":
+ t(table.label_status, {"context":"cell","count":0}, [object Object],[object Object])
+ ,
+ "expandedContent": undefined,
+}
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic description cell 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic failedHostsCellContent cell 1`] = `
+Object {
+ "content":
+ t(table.label_status, {"context":"cell","count":0}, [object Object],[object Object])
+ ,
+ "expandedContent": undefined,
+}
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic okHostsCellContent cell 1`] = `
+Object {
+ "content":
+ t(table.label_status, {"context":"cell","count":0}, [object Object],[object Object])
+ ,
+ "expandedContent": undefined,
+}
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic scanStatus cell 1`] = `
+
+
+
+
+
+ t(table.label, {"context":"status"})
+
+ a day ago
+
+
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic statusCell cell 1`] = `
+
+ t(table.label_status, {"context":"cell","count":0}, [object Object],[object Object])
+
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic statusContent cell 1`] = `
+
+ [Function]
+
+`;
+
+exports[`SourcesTableCells should return consistent cell results: basic unreachableHostsCellContent cell 1`] = `
+Object {
+ "content":
+ t(table.label_status, {"context":"cell","count":0}, [object Object],[object Object])
+ ,
+ "expandedContent": undefined,
+}
+`;
diff --git a/src/components/sources/__tests__/sourceCredentialsList.test.js b/src/components/sources/__tests__/sourceCredentialsList.test.js
deleted file mode 100644
index e7fce687..00000000
--- a/src/components/sources/__tests__/sourceCredentialsList.test.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import SourceCredentialsList from '../sourceCredentialsList';
-
-describe('SourceCredentialsList Component', () => {
- it('should render a sorted list', () => {
- const props = {
- source: {
- credentials: [
- {
- name: 'a test'
- },
- {
- name: 'b test'
- }
- ]
- }
- };
-
- const component = mount(
);
-
- expect(component.render()).toMatchSnapshot();
- });
-});
diff --git a/src/components/sources/__tests__/sourceListItem.test.js b/src/components/sources/__tests__/sourceListItem.test.js
deleted file mode 100644
index d0f95d94..00000000
--- a/src/components/sources/__tests__/sourceListItem.test.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { Provider } from 'react-redux';
-import { mount, shallow } from 'enzyme';
-import { ConnectedSourceListItem, SourceListItem } from '../sourceListItem';
-import { reduxTypes } from '../../../redux';
-import { apiTypes } from '../../../constants/apiConstants';
-
-describe('SourceListItem Component', () => {
- const generateEmptyStore = (obj = {}) => configureMockStore()(obj);
-
- it('should render a connected component with default props', () => {
- const store = generateEmptyStore({ sources: { view: {} }, viewOptions: { [reduxTypes.view.SOURCES_VIEW]: {} } });
- const props = {
- item: {
- [apiTypes.API_RESPONSE_SOURCE_ID]: 1,
- [apiTypes.API_RESPONSE_SOURCE_SOURCE_TYPE]: 'network'
- }
- };
- const component = shallow(
-
-
- );
-
- expect(component.find(ConnectedSourceListItem)).toMatchSnapshot('connected');
- });
-
- it('should render a non-connected component', () => {
- const props = {
- item: {
- [apiTypes.API_RESPONSE_SOURCE_ID]: 1,
- [apiTypes.API_RESPONSE_SOURCE_SOURCE_TYPE]: 'network'
- }
- };
-
- const component = mount(
);
-
- expect(component.render()).toMatchSnapshot('non-connected');
- });
-});
diff --git a/src/components/sources/__tests__/sources.test.js b/src/components/sources/__tests__/sources.test.js
index 8f0c9737..49633ce0 100644
--- a/src/components/sources/__tests__/sources.test.js
+++ b/src/components/sources/__tests__/sources.test.js
@@ -1,70 +1,64 @@
import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { Provider } from 'react-redux';
-import { mount, shallow } from 'enzyme';
-import { ConnectedSources, Sources } from '../sources';
+import { Sources } from '../sources';
import { apiTypes } from '../../../constants/apiConstants';
describe('Sources Component', () => {
- const generateEmptyStore = (obj = {}) => configureMockStore()(obj);
-
- it('should render a connected component with default props', () => {
- const store = generateEmptyStore({ sources: { view: {} }, viewOptions: {} });
- const component = shallow(
-
-
- );
-
- expect(component.find(ConnectedSources)).toMatchSnapshot('connected');
- });
-
- it('should render a non-connected component', () => {
+ it('should render a basic component', async () => {
const props = {
- fulfilled: true,
- sources: [
- {
- [apiTypes.API_RESPONSE_SOURCE_ID]: '1',
- [apiTypes.API_RESPONSE_SOURCE_NAME]: 'lorem'
- }
- ],
- viewOptions: {
- selectedItems: []
- }
+ useGetSources: () => ({
+ fulfilled: true
+ })
};
- const component = shallow(
);
-
- expect(component).toMatchSnapshot('non-connected');
+ const component = await shallowHookComponent(
);
+ expect(component).toMatchSnapshot('basic');
});
- it('should render a non-connected component error', () => {
+ it('should handle multiple display states, pending, error, fulfilled', async () => {
const props = {
- error: true
+ useGetSources: () => ({
+ pending: true
+ })
};
- const component = shallow(
);
+ const component = await shallowHookComponent(
);
+ expect(component).toMatchSnapshot('pending');
- expect(component.render()).toMatchSnapshot('error');
- });
+ component.setProps({
+ useGetSources: () => ({
+ pending: false,
+ error: true
+ })
+ });
- it('should render a non-connected component pending', () => {
- const props = {
- pending: true,
- sources: []
- };
+ expect(component).toMatchSnapshot('error');
- const component = mount(
);
+ component.setProps({
+ useGetSources: () => ({
+ pending: false,
+ error: false,
+ fulfilled: true,
+ data: [
+ {
+ [apiTypes.API_RESPONSE_SOURCE_ID]: '1',
+ [apiTypes.API_RESPONSE_SOURCE_NAME]: 'lorem'
+ }
+ ]
+ })
+ });
- expect(component.render()).toMatchSnapshot('pending');
+ expect(component).toMatchSnapshot('fulfilled');
});
- it('should render a non-connected component with empty state', () => {
- const props = {};
-
- const component = mount(
);
+ it('should return an empty state when there are no sources', async () => {
+ const props = {
+ useGetSources: () => ({
+ fulfilled: true,
+ data: []
+ })
+ };
- expect(component.find('button').length).toEqual(1);
+ const component = await shallowHookComponent(
);
expect(component.render()).toMatchSnapshot('empty state');
});
});
diff --git a/src/components/sources/__tests__/sourcesContext.test.js b/src/components/sources/__tests__/sourcesContext.test.js
new file mode 100644
index 00000000..cbe6d6c9
--- /dev/null
+++ b/src/components/sources/__tests__/sourcesContext.test.js
@@ -0,0 +1,100 @@
+import { context, useGetSources, useOnDelete, usePoll } from '../sourcesContext';
+import { apiTypes } from '../../../constants/apiConstants';
+import { reduxTypes } from '../../../redux';
+
+describe('SourcesContext', () => {
+ it('should return specific properties', () => {
+ expect(context).toMatchSnapshot('specific properties');
+ });
+
+ it('should handle deleting a source with a confirmation', async () => {
+ const mockDispatch = jest.fn();
+ const mockSource = {
+ [apiTypes.API_RESPONSE_SOURCE_NAME]: 'lorem ipsum name',
+ [apiTypes.API_RESPONSE_SOURCE_ID]: 'dolor sit id'
+ };
+
+ // call confirmation
+ const { result: onDeleteConfirmation } = shallowHook(() => useOnDelete({ useDispatch: () => mockDispatch }));
+ onDeleteConfirmation(mockSource);
+
+ // delete results
+ await mountHook(() =>
+ useOnDelete({
+ useDispatch: () => mockDispatch,
+ useSelector: () => mockSource,
+ useSelectorsResponse: () => ({ fulfilled: true })
+ })
+ );
+
+ expect(mockDispatch.mock.calls).toMatchSnapshot('dispatch delete a source, confirmation');
+ mockDispatch.mockClear();
+ });
+
+ it('should attempt to poll sources', async () => {
+ const mockUseTimeout = jest.fn();
+ const options = {
+ pollInterval: 0,
+ useSelector: () => [{ connection: { status: 'pending' } }],
+ useTimeout: (callback, interval) => {
+ mockUseTimeout({
+ callback: callback(),
+ interval
+ });
+ return {};
+ }
+ };
+
+ await shallowHook(() => usePoll(options));
+ await shallowHook(() =>
+ usePoll({
+ ...options,
+ useSelector: () => []
+ })
+ );
+
+ expect(mockUseTimeout.mock.calls).toMatchSnapshot('timeout');
+ });
+
+ it('should apply a hook for retreiving data from multiple selectors', () => {
+ const { result: errorResponse } = shallowHook(() =>
+ useGetSources({
+ useSelectorsResponse: () => ({ error: true, message: 'Lorem ipsum' })
+ })
+ );
+
+ const { result: pendingResponse } = shallowHook(() =>
+ useGetSources({
+ useSelectorsResponse: () => ({ pending: true })
+ })
+ );
+
+ const { result: fulfilledResponse } = shallowHook(() =>
+ useGetSources({
+ useSelectorsResponse: () => ({ fulfilled: true, data: { view: { results: ['dolor', 'sit'] } } })
+ })
+ );
+
+ const { result: mockStoreSuccessResponse } = shallowHook(() => useGetSources(), {
+ state: {
+ viewOptions: {
+ [reduxTypes.view.SOURCES_VIEW]: {}
+ },
+ sources: {
+ expanded: {},
+ selected: {},
+ view: {
+ fulfilled: true,
+ data: {
+ results: ['lorem', 'ipsum']
+ }
+ }
+ }
+ }
+ });
+
+ expect({ errorResponse, fulfilledResponse, pendingResponse, mockStoreSuccessResponse }).toMatchSnapshot(
+ 'responses'
+ );
+ });
+});
diff --git a/src/components/sources/__tests__/sourcesEmptyState.test.js b/src/components/sources/__tests__/sourcesEmptyState.test.js
index 882365f6..ac9d6ba6 100644
--- a/src/components/sources/__tests__/sourcesEmptyState.test.js
+++ b/src/components/sources/__tests__/sourcesEmptyState.test.js
@@ -1,6 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
-import { EmptyState } from 'patternfly-react';
+import { Title } from '@patternfly/react-core';
import SourcesEmptyState from '../sourcesEmptyState';
describe('SourcesEmptyState Component', () => {
@@ -17,6 +17,6 @@ describe('SourcesEmptyState Component', () => {
};
const component = mount(
);
- expect(component.find(EmptyState.Title)).toMatchSnapshot('application name');
+ expect(component.find(Title)).toMatchSnapshot('application name');
});
});
diff --git a/src/components/sources/__tests__/sourcesTableCells.test.js b/src/components/sources/__tests__/sourcesTableCells.test.js
new file mode 100644
index 00000000..e96c4f87
--- /dev/null
+++ b/src/components/sources/__tests__/sourcesTableCells.test.js
@@ -0,0 +1,11 @@
+import { sourcesTableCells } from '../sourcesTableCells';
+
+describe('SourcesTableCells', () => {
+ it('should export specific function components', () => {
+ expect(sourcesTableCells).toMatchSnapshot('function components');
+ });
+
+ it('should return consistent cell results', () => {
+ Object.entries(sourcesTableCells).forEach(([key, value]) => expect(value()).toMatchSnapshot(`basic ${key} cell`));
+ });
+});
diff --git a/src/components/sources/sourceCredentialsList.js b/src/components/sources/sourceCredentialsList.js
deleted file mode 100644
index 8367da4f..00000000
--- a/src/components/sources/sourceCredentialsList.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Grid, Icon } from 'patternfly-react';
-import { apiTypes } from '../../constants/apiConstants';
-
-const SourceCredentialsList = ({ source }) => {
- const credentials =
- (source[apiTypes.API_RESPONSE_SOURCE_CREDENTIALS] && [...source[apiTypes.API_RESPONSE_SOURCE_CREDENTIALS]]) || [];
-
- credentials.sort((item1, item2) =>
- item1[apiTypes.API_RESPONSE_SOURCE_CREDENTIALS_NAME].localeCompare(
- item2[apiTypes.API_RESPONSE_SOURCE_CREDENTIALS_NAME]
- )
- );
-
- return (
-
- {credentials.map(credential => (
-
-
-
-
-
-
- ))}
-
- );
-};
-
-SourceCredentialsList.propTypes = {
- source: PropTypes.shape({
- credentials: PropTypes.array
- }).isRequired
-};
-
-export { SourceCredentialsList as default, SourceCredentialsList };
diff --git a/src/components/sources/sourceListItem.js b/src/components/sources/sourceListItem.js
deleted file mode 100644
index f2fee6f9..00000000
--- a/src/components/sources/sourceListItem.js
+++ /dev/null
@@ -1,443 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Button, Checkbox, Grid, Icon, ListView } from 'patternfly-react';
-import _get from 'lodash/get';
-import _size from 'lodash/size';
-import { connect, reduxActions, reduxTypes, store } from '../../redux';
-import { helpers } from '../../common/helpers';
-import { dictionary } from '../../constants/dictionaryConstants';
-import SourceCredentialsList from './sourceCredentialsList';
-import ScanHostList from '../scanHostList/scanHostList';
-import ToolTip from '../tooltip/tooltip';
-import ListStatusItem from '../listStatusItem/listStatusItem';
-import Poll from '../poll/poll';
-import { apiTypes } from '../../constants/apiConstants';
-
-class SourceListItem extends React.Component {
- state = {
- expandType: null
- };
-
- onRefresh = () => {
- store.dispatch({
- type: reduxTypes.sources.UPDATE_SOURCES
- });
- };
-
- onItemSelectChange = event => {
- const { checked } = event.target;
- const { item } = this.props;
-
- store.dispatch({
- type: checked ? reduxTypes.view.SELECT_ITEM : reduxTypes.view.DESELECT_ITEM,
- viewType: reduxTypes.view.SOURCES_VIEW,
- item
- });
- };
-
- onToggleExpand = toggleExpandType => {
- const { expandType } = this.state;
- const toggle = expandType === toggleExpandType ? null : toggleExpandType;
-
- this.setState({ expandType: toggle });
- };
-
- onCloseExpand = () => {
- this.setState({ expandType: null });
- };
-
- onDelete = source => {
- const { deleteSource } = this.props;
-
- const onConfirm = () => {
- store.dispatch({
- type: reduxTypes.confirmationModal.CONFIRMATION_MODAL_HIDE
- });
-
- deleteSource(source[apiTypes.API_RESPONSE_SOURCE_ID]).then(
- () => {
- store.dispatch({
- type: reduxTypes.toastNotifications.TOAST_ADD,
- alertType: 'success',
- message: (
-
- Deleted source {source[apiTypes.API_RESPONSE_SOURCE_NAME]} .
-
- )
- });
-
- store.dispatch({
- type: reduxTypes.view.DESELECT_ITEM,
- viewType: reduxTypes.view.SOURCES_VIEW,
- item: source
- });
-
- store.dispatch({
- type: reduxTypes.sources.UPDATE_SOURCES
- });
- },
- error => {
- store.dispatch({
- type: reduxTypes.toastNotifications.TOAST_ADD,
- alertType: 'error',
- header: 'Error',
- message: helpers.getMessageFromResults(error).message
- });
- }
- );
- };
-
- store.dispatch({
- type: reduxTypes.confirmationModal.CONFIRMATION_MODAL_SHOW,
- title: 'Delete Source',
- heading: (
-
- Are you sure you want to delete the source {source[apiTypes.API_RESPONSE_SOURCE_NAME]} ?
-
- ),
- confirmButtonText: 'Delete',
- onConfirm
- });
- };
-
- onEdit = source => {
- store.dispatch({
- type: reduxTypes.sources.EDIT_SOURCE_SHOW,
- source
- });
- };
-
- onScan = source => {
- store.dispatch({
- type: reduxTypes.scans.EDIT_SCAN_SHOW,
- sources: [source]
- });
- };
-
- isSelected() {
- const { item, selectedSources } = this.props;
-
- return (
- selectedSources.find(nextSelected => nextSelected[apiTypes.API_RESPONSE_SOURCE_ID] === item.id) !== undefined
- );
- }
-
- renderSourceType() {
- const { item } = this.props;
- const typeIcon = helpers.sourceTypeIcon(item.source_type);
-
- return (
-
-
- );
- }
-
- renderActions() {
- const { item } = this.props;
-
- return (
-
-
- this.onEdit(item)} bsStyle="link">
-
-
-
- this.onDelete(item)} bsStyle="link">
-
-
- this.onScan(item)}>Scan
-
- );
- }
-
- renderStatusItems() {
- const { expandType } = this.state;
- const { item } = this.props;
-
- const credentialCount = _size(_get(item, 'credentials', []));
- let okHostCount = _get(item, 'connection.source_systems_scanned', 0);
- let failedHostCount = _get(item, 'connection.source_systems_failed', 0);
- const unreachableHostCount = _get(item, 'connection.source_systems_unreachable', 0);
-
- if (helpers.DEV_MODE) {
- okHostCount = helpers.devModeNormalizeCount(okHostCount);
- failedHostCount = helpers.devModeNormalizeCount(failedHostCount);
- }
-
- return [
-
,
-
,
-
,
-
- ];
- }
-
- static renderHostRow(host) {
- const iconInfo = helpers.scanStatusIcon(host.status);
-
- return (
-
-
-
-
-
- {host.status === 'success' && (
-
-
-
-
- )}
-
- );
- }
-
- renderExpansionContents() {
- const { expandType } = this.state;
- const { item, lastRefresh } = this.props;
-
- switch (expandType) {
- case 'okHosts':
- return (
-
- {({ host }) => SourceListItem.renderHostRow(host)}
-
- );
- case 'failedHosts':
- return (
-
- {({ host }) => SourceListItem.renderHostRow(host)}
-
- );
- case 'unreachableHosts':
- return (
-
- {({ host }) => SourceListItem.renderHostRow(host)}
-
- );
- case 'credentials':
- return
;
- default:
- return null;
- }
- }
-
- renderDescription() {
- const { item } = this.props;
-
- const itemHostsPopover = (
-
- {item.hosts && item.hosts.length > 1 && (
-
- {item.hosts.map(host => (
- {host}
- ))}
-
- )}
- {item.hosts && item.hosts.length === 1 &&
{item.hosts[0]}
}
-
- );
-
- let itemDescription;
-
- if (_size(item.hosts)) {
- if (item.source_type === 'network') {
- itemDescription = (
-
-
-
- Network Range
-
-
-
- );
- } else {
- itemDescription =
{item.hosts[0]} ;
- }
- }
-
- return (
-
-
- {item.name}
- {itemDescription}
-
- {this.renderScanStatus()}
-
- );
- }
-
- renderScanStatus() {
- const { item } = this.props;
-
- const scan = _get(item, 'connection');
- let scanDescription = '';
- let scanTime = _get(scan, 'end_time');
- let icon = null;
-
- switch (_get(scan, 'status')) {
- case 'completed':
- scanDescription = 'Last Connected';
- icon =
;
- break;
- case 'failed':
- scanDescription = 'Connection Failed';
- icon =
;
- break;
- case 'canceled':
- scanDescription = 'Connection Canceled';
- icon =
;
- break;
- case 'created':
- case 'pending':
- case 'running':
- scanTime = _get(scan, 'start_time');
- scanDescription = 'Connection in Progress';
- icon =
;
- break;
- case 'paused':
- scanDescription = 'Connection Paused';
- icon =
;
- break;
- default:
- return null;
- }
-
- return (
-
- {icon}
-
-
{scanDescription}
-
{helpers.getTimeDisplayHowLongAgo(scanTime)}
-
-
- );
- }
-
- render() {
- const { expandType } = this.state;
- const { item, pollInterval } = this.props;
- const selected = this.isSelected();
- const sourceStatus = _get(item, ['connection', 'status']);
-
- return (
-
-
- );
- }
-}
-
-SourceListItem.propTypes = {
- deleteSource: PropTypes.func,
- item: PropTypes.object.isRequired,
- lastRefresh: PropTypes.number,
- pollInterval: PropTypes.number,
- selectedSources: PropTypes.array
-};
-
-SourceListItem.defaultProps = {
- deleteSource: helpers.noop,
- lastRefresh: 0,
- pollInterval: 120000,
- selectedSources: []
-};
-
-const mapDispatchToProps = dispatch => ({
- deleteSource: id => dispatch(reduxActions.sources.deleteSource(id))
-});
-
-const mapStateToProps = state => ({ selectedSources: state.viewOptions[reduxTypes.view.SOURCES_VIEW].selectedItems });
-
-const ConnectedSourceListItem = connect(mapStateToProps, mapDispatchToProps)(SourceListItem);
-
-export { ConnectedSourceListItem as default, ConnectedSourceListItem, SourceListItem };
diff --git a/src/components/sources/sources.js b/src/components/sources/sources.js
index 83190629..b01d3be3 100644
--- a/src/components/sources/sources.js
+++ b/src/components/sources/sources.js
@@ -1,199 +1,248 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { Alert, Button, EmptyState, ListView, Modal, Spinner } from 'patternfly-react';
-import _isEqual from 'lodash/isEqual';
-import _size from 'lodash/size';
-import { connect, reduxActions, reduxTypes, store } from '../../redux';
-import helpers from '../../common/helpers';
+import { Alert, AlertVariant, Button, ButtonVariant, EmptyState, Spinner } from '@patternfly/react-core';
+import { IconSize } from '@patternfly/react-icons';
+import { Modal, ModalVariant } from '../modal/modal';
+import { reduxTypes, storeHooks } from '../../redux';
import ViewToolbar from '../viewToolbar/viewToolbar';
import ViewPaginationRow from '../viewPaginationRow/viewPaginationRow';
import SourcesEmptyState from './sourcesEmptyState';
-import SourceListItem from './sourceListItem';
import { SourceFilterFields, SourceSortFields } from './sourceConstants';
-import { apiTypes } from '../../constants/apiConstants';
-
-class Sources extends React.Component {
- componentDidMount() {
- const { getSources, viewOptions } = this.props;
-
- getSources(helpers.createViewQueryObject(viewOptions));
- }
-
- componentDidUpdate(prevProps) {
- const { getSources, updateSources, viewOptions } = this.props;
-
- const prevQuery = helpers.createViewQueryObject(prevProps.viewOptions);
- const nextQuery = helpers.createViewQueryObject(viewOptions);
-
- if (updateSources || !_isEqual(prevQuery, nextQuery)) {
- getSources(nextQuery);
- }
- }
-
- onShowAddSourceWizard = () => {
- store.dispatch({
- type: reduxTypes.sources.CREATE_SOURCE_SHOW
- });
- };
-
- onScanSources = () => {
- const { viewOptions } = this.props;
-
- store.dispatch({
+import { translate } from '../i18n/i18n';
+import { Table } from '../table/table';
+import { sourcesTableCells } from './sourcesTableCells';
+import {
+ useGetSources,
+ useOnDelete,
+ useOnEdit,
+ useOnExpand,
+ useOnRefresh,
+ useOnScan,
+ useOnSelect
+} from './sourcesContext';
+import { useOnShowAddSourceWizard } from '../addSourceWizard/addSourceWizardContext';
+
+const VIEW_ID = 'sources';
+
+/**
+ * A sources view.
+ *
+ * @param {object} props
+ * @param {Function} props.t
+ * @param {Function} props.useGetSources
+ * @param {Function} props.useOnDelete
+ * @param {Function} props.useOnEdit
+ * @param {Function} props.useOnExpand
+ * @param {Function} props.useOnRefresh
+ * @param {Function} props.useOnScan
+ * @param {Function} props.useOnSelect
+ * @param {Function} props.useOnShowAddSourceWizard
+ * @param {Function} props.useDispatch
+ * @param {Function} props.useSelectors
+ * @param {string} props.viewId
+ * @returns {React.ReactNode}
+ */
+const Sources = ({
+ t,
+ useGetSources: useAliasGetSources,
+ useOnDelete: useAliasOnDelete,
+ useOnEdit: useAliasOnEdit,
+ useOnExpand: useAliasOnExpand,
+ useOnRefresh: useAliasOnRefresh,
+ useOnScan: useAliasOnScan,
+ useOnSelect: useAliasOnSelect,
+ useOnShowAddSourceWizard: useAliasOnShowAddSourceWizard,
+ useDispatch: useAliasDispatch,
+ useSelectors: useAliasSelectors,
+ viewId
+}) => {
+ const dispatch = useAliasDispatch();
+ const onDelete = useAliasOnDelete();
+ const onEdit = useAliasOnEdit();
+ const onExpand = useAliasOnExpand();
+ const onRefresh = useAliasOnRefresh();
+ const onScan = useAliasOnScan();
+ const onSelect = useAliasOnSelect();
+ const onShowAddSourceWizard = useAliasOnShowAddSourceWizard();
+ const { pending, error, errorMessage, date, data, selectedRows = {}, expandedRows = {} } = useAliasGetSources();
+ const [viewOptions = {}] = useAliasSelectors([
+ ({ viewOptions: stateViewOptions }) => stateViewOptions[reduxTypes.view.SOURCES_VIEW]
+ ]);
+ const filtersOrSourcesActive = viewOptions?.activeFilters?.length > 0 || data?.length > 0 || false;
+
+ // ToDo: review onScanSources, renderToolbarActions being standalone with upcoming toolbar updates
+ /**
+ * Toolbar actions onScanSources
+ *
+ * @event onScanSources
+ */
+ const onScanSources = () => {
+ dispatch({
type: reduxTypes.scans.EDIT_SCAN_SHOW,
- sources: viewOptions.selectedItems
- });
- };
-
- onRefresh = () => {
- store.dispatch({
- type: reduxTypes.sources.UPDATE_SOURCES
+ sources: Object.values(selectedRows).filter(val => val !== null)
});
};
- onClearFilters = () => {
- store.dispatch({
- type: reduxTypes.viewToolbar.CLEAR_FILTERS,
- viewType: reduxTypes.view.SOURCES_VIEW
- });
- };
-
- renderSourceActions() {
- const { viewOptions } = this.props;
-
+ /**
+ * Return toolbar actions.
+ *
+ * @returns {React.ReactNode}
+ */
+ const renderToolbarActions = () => (
+
+ {t('table.label', { context: 'add' })} {' '}
+ val !== null).length === 0}
+ onClick={onScanSources}
+ >
+ {t('table.label', { context: 'scan' })}
+
+
+ );
+
+ if (pending) {
return (
-
-
- Add
-
-
- Scan
-
-
+
+ {t('view.loading', { context: viewId })}
+
);
}
- renderPendingMessage() {
- const { pending } = this.props;
-
- if (pending) {
- return (
-
-
- Loading...
-
-
- );
- }
-
- return null;
- }
-
- renderSourcesList(sources) {
- const { lastRefresh } = this.props;
-
- if (sources.length) {
- return (
-
- {sources.map(source => (
-
- );
- }
-
+ if (error) {
return (
-
- No Results Match the Filter Criteria
- The active filters are hiding all items.
-
-
- Clear Filters
-
-
+
+
+ {t('view.error-message', { context: [viewId], message: errorMessage })}
+
);
}
- render() {
- const { error, errorMessage, lastRefresh, pending, sources, viewOptions } = this.props;
-
- if (error) {
- return (
-
-
- Error retrieving sources: {errorMessage}
-
- {this.renderPendingMessage()}
-
- );
- }
-
- if (pending && !sources.length) {
- return {this.renderPendingMessage()}
;
- }
-
- if (sources.length || _size(viewOptions.activeFilters)) {
- return (
-
+ return (
+
+ {filtersOrSourcesActive && (
+
onRefresh()}
+ lastRefresh={new Date(date).getTime()}
+ actions={renderToolbarActions()}
itemsType="Source"
itemsTypePlural="Sources"
- selectedCount={viewOptions.selectedItems.length}
+ selectedCount={viewOptions.selectedItems?.length}
{...viewOptions}
/>
{this.renderSourcesList(sources)}
- {this.renderPendingMessage()}
-
- );
- }
-
- return
;
- }
-}
+
+ )}
+
+
({
+ isSelected: (selectedRows?.[item.id] && true) || false,
+ source: item,
+ cells: [
+ {
+ content: sourcesTableCells.description(item),
+ dataLabel: t('table.header', { context: ['description'] })
+ },
+ {
+ content: sourcesTableCells.scanStatus(item, { viewId }),
+ width: 20,
+ dataLabel: t('table.header', { context: ['scan'] })
+ },
+ {
+ ...sourcesTableCells.credentialsCellContent(item),
+ isExpanded: expandedRows?.[item.id] === 2,
+ width: 8,
+ dataLabel: t('table.header', { context: ['credentials'] })
+ },
+ {
+ ...sourcesTableCells.okHostsCellContent(item, { viewId }),
+ isExpanded: expandedRows?.[item.id] === 3,
+ width: 8,
+ dataLabel: t('table.header', { context: ['success', viewId] })
+ },
+ {
+ ...sourcesTableCells.failedHostsCellContent(item, { viewId }),
+ isExpanded: expandedRows?.[item.id] === 4,
+ width: 8,
+ dataLabel: t('table.header', { context: ['failed', viewId] })
+ },
+ {
+ ...sourcesTableCells.unreachableHostsCellContent(item, { viewId }),
+ isExpanded: expandedRows?.[item.id] === 5,
+ width: 8,
+ dataLabel: t('table.header', { context: ['unreachable', viewId] })
+ },
+ {
+ content: sourcesTableCells.actionsCell({
+ isFirst: index === 0,
+ isLast: index === data.length - 1,
+ item,
+ onDelete: () => onDelete(item),
+ onEdit: () => onEdit(item),
+ onScan: () => onScan(item)
+ }),
+ isActionCell: true
+ }
+ ]
+ }))}
+ >
+
+
+
-
-
- Welcome to {uiShortName}
-
- Begin by adding one or more sources. A source contains a collection of network information,
-
-
- Add Source
-
-
-
-
-
+/**
+ * Return a sources empty state.
+ *
+ * @param {object} props
+ * @param {Function} props.onAddSource
+ * @param {Function} props.t
+ * @param {string} props.uiShortName
+ * @param {string} props.viewId
+ * @returns {React.ReactNode}
+ */
+const SourcesEmptyState = ({ onAddSource, t, uiShortName, viewId }) => (
+
+ {t('view.empty-state', { context: ['title'], name: uiShortName })}
+ {t('view.empty-state', { context: ['description', viewId] })}
+
+ {t('view.empty-state', { context: ['label', viewId] })}
+
+
);
+/**
+ * Prop types
+ *
+ * @type {{uiShortName: string, viewId: string, t: Function, onAddSource: Function}}
+ */
SourcesEmptyState.propTypes = {
onAddSource: PropTypes.func,
- uiShortName: PropTypes.string
+ uiShortName: PropTypes.string,
+ t: PropTypes.func,
+ viewId: PropTypes.string
};
+/**
+ * Default props
+ *
+ * @type {{uiShortName: string, viewId: null, t: translate, onAddSource: Function}}
+ */
SourcesEmptyState.defaultProps = {
onAddSource: helpers.noop,
- uiShortName: helpers.UI_SHORT_NAME
+ uiShortName: helpers.UI_SHORT_NAME,
+ t: translate,
+ viewId: null
};
export { SourcesEmptyState as default, SourcesEmptyState };
diff --git a/src/components/sources/sourcesTableCells.js b/src/components/sources/sourcesTableCells.js
new file mode 100644
index 00000000..25d7298f
--- /dev/null
+++ b/src/components/sources/sourcesTableCells.js
@@ -0,0 +1,392 @@
+import React from 'react';
+import {
+ Button,
+ ButtonVariant,
+ Grid,
+ GridItem,
+ List,
+ ListItem,
+ OverflowMenu,
+ OverflowMenuControl,
+ OverflowMenuContent,
+ OverflowMenuGroup,
+ OverflowMenuItem
+} from '@patternfly/react-core';
+import { PencilAltIcon, TrashIcon, EllipsisVIcon } from '@patternfly/react-icons';
+import { ContextIcon, ContextIconVariant } from '../contextIcon/contextIcon';
+import { Tooltip } from '../tooltip/tooltip';
+import { dictionary } from '../../constants/dictionaryConstants';
+import { ConnectedScanHostList as ScanHostList } from '../scanHostList/scanHostList';
+import { apiTypes } from '../../constants/apiConstants';
+import { translate } from '../i18n/i18n';
+import { helpers } from '../../common';
+import { DropdownSelect, SelectButtonVariant, SelectDirection, SelectPosition } from '../dropdownSelect/dropdownSelect';
+
+/**
+ * Source description and type icon
+ *
+ * @param {object} params
+ * @param {Array} params.hosts
+ * @param {string} params.name
+ * @param {string} params.source_type
+ * @param {object} options
+ * @param {Function} options.t
+ * @returns {React.ReactNode}
+ */
+const description = ({ hosts, name, source_type: sourceType } = {}, { t = translate } = {}) => {
+ const itemHostsPopover = (
+
+ {hosts?.length > 1 && (
+
+ {hosts.map(host => (
+ {host}
+ ))}
+
+ )}
+ {hosts?.length === 1 &&
{hosts[0]}
}
+
+
+ {t('table.label', { context: 'network-range' })}
+
+
+ );
+ } else {
+ [itemDescription] = hosts;
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+ {name}
+
+ {itemDescription}
+
+
+ );
+};
+
+/**
+ * Scan status, icon and description
+ *
+ * @param {object} params
+ * @param {object} params.connection
+ * @param {object} options
+ * @param {Function} options.t
+ * @param {string} options.viewId
+ * @returns {React.ReactNode|null}
+ */
+const scanStatus = ({ connection: scan = {} } = {}, { t = translate, viewId } = {}) => {
+ const { end_time: endTime, start_time: startTime, status } = scan;
+ const isPending = status === 'created' || status === 'pending' || status === 'running';
+ const scanTime = (isPending && startTime) || endTime;
+
+ return (
+
+
+
+
+ {t('table.label', { context: ['status', status, viewId] })}
+ {helpers.getTimeDisplayHowLongAgo(scanTime)}
+
+
+ );
+};
+
+/**
+ * Generate a consistent status cell.
+ *
+ * @param {object} params
+ * @param {number} params.count
+ * @param {string} params.status
+ * @param {Function} params.t
+ * @param {string} params.viewId
+ * @returns {React.ReactNode}
+ */
+const statusCell = ({ count, status = ContextIconVariant.unknown, t = translate, viewId } = {}) => {
+ let updatedCount = count || 0;
+
+ if (helpers.DEV_MODE) {
+ updatedCount = helpers.devModeNormalizeCount(updatedCount);
+ }
+
+ return (
+
+ {t('table.label', { context: ['status', 'cell', viewId], count: updatedCount }, [
+
+ );
+};
+
+/**
+ * Generate a consistent display row for expandable content.
+ *
+ * @param {object} params
+ * @param {object} params.connection
+ * @param {string} params.id
+ * @param {string} params.status
+ * @param {object} options
+ * @param {boolean} options.useConnectionResults
+ * @param {boolean} options.useInspectionResults
+ * @returns {React.ReactNode}
+ */
+const statusContent = (
+ { connection, id, status } = {},
+ { useConnectionResults = true, useInspectionResults = false } = {}
+) => (
+
+ {({ host }) => (
+
+
+
+ {host?.status === 'success' && (
+
+
+ )}
+
+ )}
+
+);
+
+/**
+ * Generate credentials expandable content.
+ *
+ * @param {object} source
+ * @returns {React.ReactNode}
+ */
+const credentialsContent = ({ [apiTypes.API_RESPONSE_SOURCE_CREDENTIALS]: sourceCredentials } = {}) => {
+ const credentials = (sourceCredentials && [...sourceCredentials]) || [];
+
+ credentials.sort((item1, item2) =>
+ item1[apiTypes.API_RESPONSE_SOURCE_CREDENTIALS_NAME].localeCompare(
+ item2[apiTypes.API_RESPONSE_SOURCE_CREDENTIALS_NAME]
+ )
+ );
+
+ return (
+
+ {credentials?.map(credential => (
+
+ );
+};
+
+/**
+ * Credentials cell status, and expandable content
+ *
+ * @param {object} item
+ * @param {Array} item.credentials
+ * @returns {{content: React.ReactNode, status: React.ReactNode}}
+ */
+const credentialsCellContent = (item = {}) => {
+ const { credentials = [] } = item;
+ const count = credentials?.length;
+
+ return {
+ content: statusCell({ count, status: ContextIconVariant.idCard }),
+ expandedContent: (count && credentialsContent(item)) || undefined
+ };
+};
+
+/**
+ * Failed hosts cell and expandable content.
+ *
+ * @param {object} params
+ * @param {object} params.connection
+ * @param {string} params.id
+ * @param {object} options
+ * @param {string} options.viewId
+ * @returns {{cell: React.ReactNode, content: React.ReactNode}}
+ */
+const failedHostsCellContent = ({ connection, id } = {}, { viewId } = {}) => {
+ const count = Number.parseInt(connection?.source_systems_failed, 10);
+
+ return {
+ content: statusCell({ count, status: ContextIconVariant.failed, viewId }),
+ expandedContent: (count && statusContent({ connection, id, status: ContextIconVariant.failed })) || undefined
+ };
+};
+
+/**
+ * Ok hosts cell and expandable content.
+ *
+ * @param {object} params
+ * @param {object} params.connection
+ * @param {string} params.id
+ * @param {object} options
+ * @param {string} options.viewId
+ * @returns {{cell: React.ReactNode, content: React.ReactNode}}
+ */
+const okHostsCellContent = ({ connection, id } = {}, { viewId } = {}) => {
+ const count = Number.parseInt(connection?.source_systems_scanned, 10);
+
+ return {
+ content: statusCell({ count, status: ContextIconVariant.success, viewId }),
+ expandedContent: (count && statusContent({ connection, id, status: ContextIconVariant.success })) || undefined
+ };
+};
+
+/**
+ * Unreachable hosts cell and expandable content.
+ *
+ * @param {object} params
+ * @param {object} params.connection
+ * @param {string} params.id
+ * @param {object} options
+ * @param {string} options.viewId
+ * @returns {{cell: React.ReactNode, content: React.ReactNode}}
+ */
+const unreachableHostsCellContent = ({ connection, id } = {}, { viewId } = {}) => {
+ const count = Number.parseInt(connection?.source_systems_unreachable, 10);
+
+ return {
+ content: statusCell({ count, status: ContextIconVariant.unreachable, viewId }),
+ expandedContent: (count && statusContent({ connection, id, status: ContextIconVariant.unreachable })) || undefined
+ };
+};
+
+// FixMe: PF Overflow menu is attempting state updates on unmounted components
+/**
+ * Action cell content
+ *
+ * @param {object} params
+ * @param {boolean} params.isFirst
+ * @param {boolean} params.isLast
+ * @param {object} params.item
+ * @param {Function} params.onScan
+ * @param {Function} params.onDelete
+ * @param {Function} params.onEdit
+ * @param {Function} params.t
+ * @returns {React.ReactNode}
+ */
+const actionsCell = ({
+ isFirst = false,
+ isLast = false,
+ item = {},
+ onScan = helpers.noop,
+ onDelete = helpers.noop,
+ onEdit = helpers.noop,
+ t = translate
+} = {}) => {
+ const onSelect = ({ value }) => {
+ switch (value) {
+ case 'edit':
+ return onEdit(item);
+ case 'delete':
+ return onDelete(item);
+ case 'scan':
+ default:
+ return onScan(item);
+ }
+ };
+
+ return (
+
+
+
+
+
+ onEdit(item)}
+ aria-label={t('table.label', { context: 'edit' })}
+ variant={ButtonVariant.plain}
+ >
+
+
+
+
+
+ onDelete(item)}
+ aria-label={t('table.label', { context: 'delete' })}
+ variant={ButtonVariant.plain}
+ >
+
+
+
+
+ onScan(item)}>
+ {t('table.label', { context: 'scan' })}
+
+
+
+
+
+
+
+ );
+};
+
+const sourcesTableCells = {
+ actionsCell,
+ credentialsCellContent,
+ description,
+ failedHostsCellContent,
+ okHostsCellContent,
+ scanStatus,
+ statusCell,
+ statusContent,
+ unreachableHostsCellContent
+};
+
+export {
+ sourcesTableCells as default,
+ sourcesTableCells,
+ actionsCell,
+ credentialsCellContent,
+ description,
+ failedHostsCellContent,
+ okHostsCellContent,
+ scanStatus,
+ statusCell,
+ statusContent,
+ unreachableHostsCellContent
+};
diff --git a/src/components/table/__tests__/__snapshots__/table.test.js.snap b/src/components/table/__tests__/__snapshots__/table.test.js.snap
new file mode 100644
index 00000000..5f941d3d
--- /dev/null
+++ b/src/components/table/__tests__/__snapshots__/table.test.js.snap
@@ -0,0 +1,775 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Table Component should allow expandable cell content: expand cell event 1`] = `
+Array [
+ Array [
+ Object {
+ "cellIndex": 0,
+ "data": Object {
+ "data": Object {
+ "hello": "world",
+ },
+ },
+ "isExpanded": true,
+ "rowIndex": 0,
+ "type": "compound",
+ },
+ ],
+]
+`;
+
+exports[`Table Component should allow expandable cell content: expandable cell content 1`] = `null`;
+
+exports[`Table Component should allow expandable cell content: expanded cell 1`] = `
+
+
+ dolor sit expandable content
+
+
+`;
+
+exports[`Table Component should allow expandable row content: expand row event 1`] = `
+Array [
+ Array [
+ Object {
+ "cellIndex": -1,
+ "data": Object {
+ "data": Object {
+ "hello": "world",
+ },
+ },
+ "isExpanded": true,
+ "rowIndex": 0,
+ "type": "row",
+ },
+ ],
+]
+`;
+
+exports[`Table Component should allow expandable row content: expandable row content 1`] = `null`;
+
+exports[`Table Component should allow expandable row content: expanded row 1`] = `
+
+
+ dolor sit expandable content
+
+
+`;
+
+exports[`Table Component should allow selectable row content: select row content 1`] = `
+Array [
+
+
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table Component should allow sortable content: sorted column, asc 1`] = `
+
+
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table Component should allow sortable content: sorted column, desc 1`] = `
+
+
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table Component should allow variations in table layout: ariaLabel and summary 1`] = `
+Object {
+ "aria-label": "lorem ipsum aria-label",
+ "borders": false,
+ "children": Array [
+ false,
+
+
+
+
+ dolor
+
+
+
+
+
+
+ sit
+
+
+
+ ,
+ ],
+ "className": "quipucords-table ",
+ "summary": "lorem ipsum summary",
+ "variant": "compact",
+}
+`;
+
+exports[`Table Component should allow variations in table layout: borders and table header removed 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+ dolor
+
+
+
+
+
+
+
+
+
+
+
+
+ sit
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table Component should allow variations in table layout: className and variant 1`] = `
+Object {
+ "aria-label": "lorem ipsum aria-label",
+ "borders": false,
+ "children": Array [
+ false,
+
+
+
+
+ dolor
+
+
+
+
+
+
+ sit
+
+
+
+ ,
+ ],
+ "className": "quipucords-table lorem-ipsum-class",
+ "summary": "lorem ipsum summary",
+ "variant": "compact",
+}
+`;
+
+exports[`Table Component should allow variations in table layout: generated rows 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+ lorem ipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ dolor
+
+
+
+
+
+
+
+
+
+
+
+
+ sit
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Table Component should pass child components, nodes when there are no rows: children 1`] = `
+
+
+ Loading...
+
+
+`;
+
+exports[`Table Component should render a basic component: basic 1`] = `
+
+
+
+
+`;
diff --git a/src/components/table/__tests__/__snapshots__/tableEmpty.test.js.snap b/src/components/table/__tests__/__snapshots__/tableEmpty.test.js.snap
new file mode 100644
index 00000000..5be3b681
--- /dev/null
+++ b/src/components/table/__tests__/__snapshots__/tableEmpty.test.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableEmpty Component should render a basic component: basic 1`] = `
+
+
+
+ t(table.empty-state_title, No results found)
+
+
+ t(table.empty-state_description, Clear all filters and try again.)
+
+
+
+`;
diff --git a/src/components/table/__tests__/__snapshots__/tableHelpers.test.js.snap b/src/components/table/__tests__/__snapshots__/tableHelpers.test.js.snap
new file mode 100644
index 00000000..eb7718a4
--- /dev/null
+++ b/src/components/table/__tests__/__snapshots__/tableHelpers.test.js.snap
@@ -0,0 +1,598 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableHelpers parseContent should return a consistent output from multiple types: multiple types 1`] = `
+Object {
+ "func": "lorem ipsum",
+ "node":
+ dolor sit
+ ,
+ "null": "null",
+ "obj": "[object Object]",
+ "undefined": "",
+}
+`;
+
+exports[`TableHelpers should have specific functions: tableHelpers 1`] = `
+Object {
+ "parseContent": [Function],
+ "tableHeader": [Function],
+ "tableRows": [Function],
+}
+`;
+
+exports[`TableHelpers tableHeader should return parsed table header settings, props: tableHeader 1`] = `
+Object {
+ "basic": Object {
+ "headerRow": Array [],
+ "headerSelectProps": Object {},
+ },
+ "columnHeaders": Object {
+ "headerRow": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0",
+ },
+ Object {
+ "content": "dolor",
+ "data": Object {},
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "props": Object {
+ "dataLabel": undefined,
+ "info": undefined,
+ "tooltip": undefined,
+ },
+ },
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2",
+ },
+ Object {
+ "content":
+ hello world
+ ,
+ "key": "W29iamVjdCBPYmplY3Rd-3",
+ },
+ ],
+ "headerSelectProps": Object {},
+ },
+ "isAllSelected": Object {
+ "headerRow": Array [],
+ "headerSelectProps": Object {},
+ },
+ "isRowExpand": Object {
+ "headerRow": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0",
+ },
+ Object {
+ "content": "dolor",
+ "data": Object {},
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "props": Object {
+ "dataLabel": undefined,
+ "info": undefined,
+ "sort": Object {
+ "columnIndex": 2,
+ "onSort": [Function],
+ "sortBy": Object {
+ "direction": "asc",
+ },
+ },
+ "tooltip": undefined,
+ },
+ },
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2",
+ },
+ ],
+ "headerSelectProps": Object {},
+ },
+ "onSelect": Object {
+ "headerRow": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0",
+ },
+ Object {
+ "content": "dolor",
+ "data": Object {},
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "props": Object {
+ "dataLabel": undefined,
+ "info": undefined,
+ "tooltip": undefined,
+ },
+ },
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2",
+ },
+ ],
+ "headerSelectProps": Object {
+ "isSelected": false,
+ "onSelect": [Function],
+ },
+ },
+ "onSort": Object {
+ "headerRow": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0",
+ },
+ Object {
+ "content": "dolor",
+ "data": Object {},
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "props": Object {
+ "dataLabel": undefined,
+ "info": undefined,
+ "sort": Object {
+ "columnIndex": 1,
+ "onSort": [Function],
+ "sortBy": Object {
+ "direction": "asc",
+ },
+ },
+ "tooltip": undefined,
+ },
+ },
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2",
+ },
+ ],
+ "headerSelectProps": Object {},
+ },
+}
+`;
+
+exports[`TableHelpers tableRows should return parsed table body settings, props: tableRows 1`] = `
+Object {
+ "basic": Object {
+ "isAllSelected": true,
+ "isExpandableCell": false,
+ "isExpandableRow": false,
+ "isSelectTable": false,
+ "rows": Array [],
+ },
+ "onExpandCells": Object {
+ "isAllSelected": false,
+ "isExpandableCell": true,
+ "isExpandableRow": false,
+ "isSelectTable": false,
+ "rows": Array [
+ Object {
+ "cells": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-0",
+ "rowIndex": 0,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "dolor",
+ "expandedContent": "sit",
+ "isExpanded": true,
+ "key": "W29iamVjdCBPYmplY3Rd-1-0",
+ "props": Object {
+ "className": "",
+ "compoundExpand": Object {
+ "isExpanded": true,
+ "onToggle": [Function],
+ },
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {},
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "rowIndex": 1,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-2",
+ "rowIndex": 2,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content":
+ hello world
+ ,
+ "key": "W29iamVjdCBPYmplY3Rd-3-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-3",
+ "rowIndex": 3,
+ "select": undefined,
+ },
+ ],
+ },
+ "onExpandRows": Object {
+ "isAllSelected": false,
+ "isExpandableCell": false,
+ "isExpandableRow": true,
+ "isSelectTable": false,
+ "rows": Array [
+ Object {
+ "cells": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0-0",
+ },
+ ],
+ "data": Object {},
+ "expand": Object {
+ "isExpanded": true,
+ "onToggle": [Function],
+ "rowIndex": 0,
+ },
+ "expandedContent": "ipsum",
+ "key": "W29iamVjdCBPYmplY3Rd-0",
+ "rowIndex": 0,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "dolor",
+ "key": "W29iamVjdCBPYmplY3Rd-1-0",
+ "props": Object {
+ "className": "",
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {},
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "rowIndex": 1,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-2",
+ "rowIndex": 2,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content":
+ hello world
+ ,
+ "key": "W29iamVjdCBPYmplY3Rd-3-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-3",
+ "rowIndex": 3,
+ "select": undefined,
+ },
+ ],
+ },
+ "onSelect": Object {
+ "isAllSelected": false,
+ "isExpandableCell": false,
+ "isExpandableRow": false,
+ "isSelectTable": true,
+ "rows": Array [
+ Object {
+ "cells": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-0",
+ "rowIndex": 0,
+ "select": Object {
+ "cells": Array [
+ "lorem",
+ ],
+ "disable": false,
+ "isSelected": true,
+ "onSelect": [Function],
+ "rowIndex": 0,
+ },
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "dolor",
+ "key": "W29iamVjdCBPYmplY3Rd-1-0",
+ "props": Object {
+ "className": "",
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {},
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "rowIndex": 1,
+ "select": Object {
+ "cells": Array [
+ Object {
+ "content": "dolor",
+ },
+ ],
+ "disable": true,
+ "isSelected": false,
+ "onSelect": [Function],
+ "rowIndex": 1,
+ },
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-2",
+ "rowIndex": 2,
+ "select": Object {
+ "cells": Array [
+ [Function],
+ ],
+ "disable": false,
+ "isSelected": false,
+ "onSelect": [Function],
+ "rowIndex": 2,
+ },
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content":
+ hello world
+ ,
+ "key": "W29iamVjdCBPYmplY3Rd-3-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-3",
+ "rowIndex": 3,
+ "select": Object {
+ "cells": Array [
+
+ hello world
+ ,
+ ],
+ "disable": false,
+ "isSelected": false,
+ "onSelect": [Function],
+ "rowIndex": 3,
+ },
+ },
+ ],
+ },
+ "rows": Object {
+ "isAllSelected": false,
+ "isExpandableCell": false,
+ "isExpandableRow": false,
+ "isSelectTable": false,
+ "rows": Array [
+ Object {
+ "cells": Array [
+ Object {
+ "content": "lorem",
+ "key": "bG9yZW0=-0-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-0",
+ "rowIndex": 0,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "dolor",
+ "key": "W29iamVjdCBPYmplY3Rd-1-0",
+ "props": Object {
+ "className": "",
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {},
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "rowIndex": 1,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "hello world",
+ "key": "KCkgPT4gJ2hlbGxvIHdvcmxkJw==-2-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-2",
+ "rowIndex": 2,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content":
+ hello world
+ ,
+ "key": "W29iamVjdCBPYmplY3Rd-3-0",
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-3",
+ "rowIndex": 3,
+ "select": undefined,
+ },
+ ],
+ },
+ "styling": Object {
+ "isAllSelected": false,
+ "isExpandableCell": false,
+ "isExpandableRow": false,
+ "isSelectTable": false,
+ "rows": Array [
+ Object {
+ "cells": Array [
+ Object {
+ "content": "lorem",
+ "key": "W29iamVjdCBPYmplY3Rd-0-0",
+ "props": Object {
+ "className": "",
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {
+ "width": "9px",
+ },
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-0",
+ "rowIndex": 0,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "dolor",
+ "key": "W29iamVjdCBPYmplY3Rd-1-0",
+ "props": Object {
+ "className": "",
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {
+ "backgroundColor": "red",
+ "width": "50em",
+ },
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-1",
+ "rowIndex": 1,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content": "hello world",
+ "key": "W29iamVjdCBPYmplY3Rd-2-0",
+ "props": Object {
+ "className": " pf-m-width-1",
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {},
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-2",
+ "rowIndex": 2,
+ "select": undefined,
+ },
+ Object {
+ "cells": Array [
+ Object {
+ "content":
+ hello world
+ ,
+ "key": "W29iamVjdCBPYmplY3Rd-3-0",
+ "props": Object {
+ "className": "",
+ "dataLabel": undefined,
+ "isActionCell": undefined,
+ "noPadding": undefined,
+ "style": Object {},
+ },
+ },
+ ],
+ "data": Object {},
+ "expand": undefined,
+ "expandedContent": undefined,
+ "key": "W29iamVjdCBPYmplY3Rd-3",
+ "rowIndex": 3,
+ "select": undefined,
+ },
+ ],
+ },
+}
+`;
diff --git a/src/components/table/__tests__/table.test.js b/src/components/table/__tests__/table.test.js
new file mode 100644
index 00000000..98fa290e
--- /dev/null
+++ b/src/components/table/__tests__/table.test.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import { ExpandableRowContent, TableComposable, TableVariant, Th } from '@patternfly/react-table';
+import { Table } from '../table';
+
+describe('Table Component', () => {
+ it('should render a basic component', async () => {
+ const props = {
+ isHeader: true,
+ columnHeaders: ['lorem', 'ipsum', 'dolor', 'sit']
+ };
+
+ const component = await shallowHookComponent();
+ expect(component).toMatchSnapshot('basic');
+ });
+
+ it('should allow variations in table layout', async () => {
+ const props = {
+ isHeader: true,
+ columnHeaders: ['lorem ipsum'],
+ rows: [{ cells: ['dolor'] }, { cells: ['sit'] }]
+ };
+
+ const component = await mountHookComponent();
+ expect(component.find(TableComposable)).toMatchSnapshot('generated rows');
+
+ component.setProps({
+ isBorders: false,
+ isHeader: false
+ });
+ expect(component.find(TableComposable)).toMatchSnapshot('borders and table header removed');
+
+ component.setProps({
+ ariaLabel: 'lorem ipsum aria-label',
+ summary: 'lorem ipsum summary'
+ });
+ expect(component.find(TableComposable).props()).toMatchSnapshot('ariaLabel and summary');
+
+ component.setProps({
+ className: 'lorem-ipsum-class',
+ variant: TableVariant.compact
+ });
+ expect(component.find(TableComposable).props()).toMatchSnapshot('className and variant');
+ });
+
+ it('should allow expandable row content', async () => {
+ const mockOnExpand = jest.fn();
+ const props = {
+ onExpand: mockOnExpand,
+ rows: [
+ { cells: ['dolor'], expandedContent: 'dolor sit expandable content', data: { hello: 'world' } },
+ { cells: ['sit'] }
+ ]
+ };
+
+ const component = await mountHookComponent();
+ expect(component.find(ExpandableRowContent)).toMatchSnapshot('expandable row content');
+
+ component.find('button').first().simulate('click');
+
+ expect(mockOnExpand.mock.calls).toMatchSnapshot('expand row event');
+ expect(component.find(ExpandableRowContent)).toMatchSnapshot('expanded row');
+ });
+
+ it('should allow expandable cell content', async () => {
+ const mockOnExpand = jest.fn();
+ const props = {
+ onExpand: mockOnExpand,
+ rows: [
+ { cells: [{ content: 'dolor', expandedContent: 'dolor sit expandable content' }], data: { hello: 'world' } },
+ { cells: ['sit'] }
+ ]
+ };
+
+ const component = await mountHookComponent();
+ expect(component.find(ExpandableRowContent)).toMatchSnapshot('expandable cell content');
+
+ component.find('button').first().simulate('click', { key: 'Enter' });
+
+ expect(mockOnExpand.mock.calls).toMatchSnapshot('expand cell event');
+ expect(component.find(ExpandableRowContent)).toMatchSnapshot('expanded cell');
+ });
+
+ it('should allow sortable content', async () => {
+ const mockOnSort = jest.fn();
+ const props = {
+ isHeader: true,
+ onSort: mockOnSort,
+ columnHeaders: [{ content: 'lorem ipsum', isSort: true }],
+ rows: [{ cells: ['dolor'] }, { cells: ['sit'] }]
+ };
+
+ const component = await mountHookComponent();
+ expect(component.find(Th).first()).toMatchSnapshot('sortable content');
+
+ component.find('button').first().simulate('click');
+ expect(component.find(Th).first()).toMatchSnapshot('sorted column, asc');
+
+ component.find('button').first().simulate('click');
+ expect(component.find(Th).first()).toMatchSnapshot('sorted column, desc');
+
+ expect(mockOnSort.mock.calls).toMatchSnapshot('sort event');
+ });
+
+ it('should allow selectable row content', async () => {
+ const mockOnSelect = jest.fn();
+ const props = {
+ isHeader: true,
+ columnHeaders: ['lorem ipsum'],
+ onSelect: mockOnSelect,
+ rows: [{ cells: [{ content: 'dolor' }], dataLabel: 'testing' }, { cells: ['sit'] }]
+ };
+
+ const component = await mountHookComponent();
+ expect(component.find('input')).toMatchSnapshot('select row content');
+
+ component.find('input[name="checkrow0"]').simulate('change');
+
+ expect(mockOnSelect.mock.calls).toMatchSnapshot('select row input');
+ expect(component.find('input')).toMatchSnapshot('selected row');
+ });
+
+ it('should pass child components, nodes when there are no rows', async () => {
+ const props = {
+ isHeader: true,
+ columnHeaders: ['lorem ipsum'],
+ rows: []
+ };
+
+ const component = await shallowHookComponent();
+ expect(component).toMatchSnapshot('children');
+ });
+});
diff --git a/src/components/table/__tests__/tableEmpty.test.js b/src/components/table/__tests__/tableEmpty.test.js
new file mode 100644
index 00000000..8ffff92c
--- /dev/null
+++ b/src/components/table/__tests__/tableEmpty.test.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { TableEmpty } from '../tableEmpty';
+
+describe('TableEmpty Component', () => {
+ it('should render a basic component', async () => {
+ const props = {};
+
+ const component = await shallowHookComponent(dolor sit ),
+ null: parseContent(null),
+ obj: parseContent({ hello: 'world' }),
+ undefined: parseContent(undefined)
+ }).toMatchSnapshot('multiple types');
+ });
+
+ it('tableHeader should return parsed table header settings, props', () => {
+ expect({
+ basic: tableHeader(),
+ isAllSelected: tableHeader({ isAllSelected: true }),
+ columnHeaders: tableHeader({
+ columnHeaders: [
+ 'lorem',
+ { content: 'dolor' },
+ () => 'hello world',
+ hello world
+ ]
+ }),
+ onSelect: tableHeader({
+ onSelect: () => {},
+ columnHeaders: ['lorem', { content: 'dolor' }, () => 'hello world']
+ }),
+ onSort: tableHeader({
+ onSort: () => {},
+ columnHeaders: ['lorem', { content: 'dolor', isSort: true }, () => 'hello world']
+ }),
+ isRowExpand: tableHeader({
+ onSort: () => {},
+ isRowExpand: true,
+ columnHeaders: ['lorem', { content: 'dolor', isSort: true }, () => 'hello world']
+ })
+ }).toMatchSnapshot('tableHeader');
+ });
+
+ it('tableRows should return parsed table body settings, props', () => {
+ expect({
+ basic: tableRows(),
+ rows: tableRows({
+ rows: [
+ { cells: ['lorem'] },
+ { cells: [{ content: 'dolor' }] },
+ { cells: [() => 'hello world'] },
+ { cells: [hello world ] }
+ ]
+ }),
+ styling: tableRows({
+ rows: [
+ { cells: [{ content: 'lorem', width: '9px' }] },
+ { cells: [{ content: 'dolor', style: { backgroundColor: 'red' }, width: '50em' }] },
+ { cells: [{ content: () => 'hello world', width: 1 }] },
+ { cells: [{ content: hello world , width: 11 }] }
+ ]
+ }),
+ onExpandCells: tableRows({
+ onExpand: () => {},
+ rows: [
+ { cells: ['lorem'] },
+ { cells: [{ content: 'dolor', expandedContent: 'sit', isExpanded: true }] },
+ { cells: [() => 'hello world'] },
+ { cells: [hello world ] }
+ ]
+ }),
+ onExpandRows: tableRows({
+ onExpand: () => {},
+ rows: [
+ { cells: ['lorem'], expandedContent: 'ipsum', isExpanded: true },
+ { cells: [{ content: 'dolor' }] },
+ { cells: [() => 'hello world'] },
+ { cells: [hello world ] }
+ ]
+ }),
+ onSelect: tableRows({
+ onSelect: () => {},
+ rows: [
+ { cells: ['lorem'], isSelected: true },
+ { cells: [{ content: 'dolor' }], isDisabled: true },
+ { cells: [() => 'hello world'] },
+ { cells: [hello world ] }
+ ]
+ })
+ }).toMatchSnapshot('tableRows');
+ });
+});
diff --git a/src/components/table/table.js b/src/components/table/table.js
new file mode 100644
index 00000000..0108ac4f
--- /dev/null
+++ b/src/components/table/table.js
@@ -0,0 +1,492 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useShallowCompareEffect } from 'react-use';
+import _cloneDeep from 'lodash/cloneDeep';
+import { Grid, GridItem } from '@patternfly/react-core';
+import {
+ ExpandableRowContent,
+ SortByDirection,
+ TableComposable,
+ TableVariant,
+ Tbody,
+ Td,
+ Th,
+ Thead,
+ Tr
+} from '@patternfly/react-table';
+import { TableEmpty } from './tableEmpty';
+import { tableHelpers } from './tableHelpers';
+
+/**
+ * FixMe: PF bug for select column. PF requires a Th used for select field in the primary Thead...
+ * BUT also allows a partially working Td. Any attempt to update the Td selected object props is
+ * met with a partially-functioning field, hair pulling, and the question "is my state working?"
+ * ... it is, PF is the problem, this is a bug. HTML markup does allow the use of both td and th within
+ * thead and tbody, and not every cell in a thead requires the use of th. Solutions include
+ * - minimally updating the documentation to reflect that a Th is ABSOLUTELY required!
+ * - allow Td cells the same functionality as Th in Thead
+ * - completely warn/block the ability to use Td in the Thead component
+ */
+/**
+ * A PF Composable table wrapper
+ *
+ * @param {object} props
+ * @param {string} props.ariaLabel
+ * @param {React.ReactNode} props.children
+ * @param {string} props.className
+ * @param {Array} props.columnHeaders
+ * @param {object} props.componentClassNames
+ * @param {boolean} props.isBorders
+ * @param {boolean} props.isHeader
+ * @param {Function} props.onSelect
+ * @param {Function} props.onSort
+ * @param {Function} props.onExpand
+ * @param {Array} props.rows
+ * @param {string} props.summary
+ * @param {string} props.variant
+ * @returns {React.ReactNode}
+ */
+const Table = ({
+ ariaLabel,
+ children,
+ className,
+ columnHeaders,
+ componentClassNames,
+ isBorders,
+ isHeader,
+ onSelect,
+ onSort,
+ onExpand,
+ rows,
+ summary,
+ variant
+}) => {
+ const [updatedHeaderAndRows, setUpdatedHeaderAndRows] = useState({});
+ const [updatedIsExpandableRow, setUpdatedIsExpandableRow] = useState(false);
+ const [updatedIsExpandableCell, setUpdatedIsExpandableCell] = useState(false);
+ const [updatedIsSelectTable, setUpdatedIsSelectTable] = useState(false);
+
+ /**
+ * Apply an onExpand handler.
+ *
+ * @param {object} params
+ * @param {string} params.type
+ * @param {boolean} params.isExpanded
+ * @param {number} params.rowIndex
+ * @param {number} params.cellIndex
+ * @param {*|object} params.data
+ */
+ const onExpandTable = ({ type, isExpanded, rowIndex, cellIndex, data } = {}) => {
+ if (type === 'compound') {
+ setUpdatedHeaderAndRows(prevState => {
+ const nextBodyRows = [...prevState.bodyRows];
+ const nextBodyRowCells = nextBodyRows?.[rowIndex].cells.map(({ props: cellProps, ...cell }) => {
+ const updatedCompoundExpand = cellProps?.compoundExpand;
+
+ if (updatedCompoundExpand) {
+ updatedCompoundExpand.isExpanded = false;
+ }
+
+ return { ...cell, props: { ...cellProps, compoundExpand: updatedCompoundExpand } };
+ });
+
+ nextBodyRowCells[cellIndex].props.compoundExpand.isExpanded = isExpanded;
+ nextBodyRows[rowIndex].cells = nextBodyRowCells;
+
+ return {
+ ...prevState,
+ bodyRows: nextBodyRows
+ };
+ });
+ } else {
+ setUpdatedHeaderAndRows(prevState => {
+ const nextBodyRows = [...prevState.bodyRows];
+ nextBodyRows[rowIndex].expand.isExpanded = isExpanded;
+
+ return {
+ ...prevState,
+ bodyRows: nextBodyRows
+ };
+ });
+ }
+
+ if (typeof onExpand === 'function') {
+ onExpand({
+ type,
+ rowIndex,
+ cellIndex: (type === 'row' && -1) || cellIndex,
+ isExpanded,
+ data: _cloneDeep(data)
+ });
+ }
+ };
+
+ /**
+ * Apply an onSelect handler.
+ *
+ * @param {object} params
+ * @param {string} params.type
+ * @param {boolean} params.isSelected
+ * @param {number} params.rowIndex
+ * @param {*|object} params.data
+ */
+ const onSelectTable = ({ type, isSelected, rowIndex, data } = {}) => {
+ if (type === 'all') {
+ setUpdatedHeaderAndRows(prevState => {
+ const nextBodyRows = prevState.bodyRows?.map(row => ({
+ ...row,
+ select: { ...row.select, isSelected }
+ }));
+
+ const nextHeaderSelectProps = prevState.headerSelectProps;
+ nextHeaderSelectProps.isSelected = isSelected;
+
+ return {
+ ...prevState,
+ bodyRows: nextBodyRows,
+ headerSelectProps: nextHeaderSelectProps
+ };
+ });
+ } else {
+ setUpdatedHeaderAndRows(prevState => {
+ const nextBodyRows = prevState.bodyRows?.map(row => row);
+ nextBodyRows[rowIndex].select.isSelected = isSelected;
+
+ const nextHeaderSelectProps = prevState.headerSelectProps;
+ nextHeaderSelectProps.isSelected =
+ nextBodyRows.filter(row => row.select.isSelected === true).length === nextBodyRows.length;
+
+ return {
+ ...prevState,
+ bodyRows: nextBodyRows,
+ headerSelectProps: nextHeaderSelectProps
+ };
+ });
+ }
+
+ onSelect({
+ type,
+ rowIndex,
+ isSelected,
+ data: _cloneDeep(data)
+ });
+ };
+
+ /**
+ * Apply an onSort handler.
+ *
+ * @param {object} params
+ * @param {number} params.cellIndex
+ * @param {string} params.direction
+ * @param {number} params.originalIndex
+ * @param {*|object} params.data
+ */
+ const onSortTable = ({ cellIndex, direction, originalIndex, data } = {}) => {
+ setUpdatedHeaderAndRows(prevState => {
+ const nextHeaderRow = prevState.headerRow.map((headerCell, index) => {
+ const updatedHeaderCell = headerCell;
+
+ if (updatedHeaderCell?.props?.sort) {
+ delete updatedHeaderCell.props.sort.sortBy.index;
+
+ if (index === originalIndex) {
+ updatedHeaderCell.props.sort.sortBy.index = cellIndex;
+ updatedHeaderCell.props.sort.sortBy.direction = direction;
+ }
+ }
+
+ return updatedHeaderCell;
+ });
+
+ return {
+ ...prevState,
+ headerRow: nextHeaderRow
+ };
+ });
+
+ onSort({
+ cellIndex: originalIndex,
+ direction,
+ data: _cloneDeep(data)
+ });
+ };
+
+ useShallowCompareEffect(() => {
+ const {
+ isAllSelected: parsedIsAllSelected,
+ isExpandableCell: parsedIsExpandableCell,
+ isExpandableRow: parsedIsExpandableRow,
+ isSelectTable: parsedIsSelectTable,
+ rows: parsedRows
+ } = tableHelpers.tableRows({
+ onExpand: onExpandTable,
+ onSelect: typeof onSelect === 'function' && onSelectTable,
+ rows
+ });
+ const { headerRow: parsedHeaderRow, headerSelectProps: parsedHeaderSelectProps } = tableHelpers.tableHeader({
+ columnHeaders,
+ isAllSelected: parsedIsAllSelected,
+ onSelect: typeof onSelect === 'function' && onSelectTable,
+ onSort: typeof onSort === 'function' && onSortTable,
+ parsedRows
+ });
+
+ setUpdatedIsExpandableRow(parsedIsExpandableRow);
+ setUpdatedIsSelectTable(parsedIsSelectTable);
+ setUpdatedIsExpandableCell(parsedIsExpandableCell);
+ setUpdatedHeaderAndRows({
+ headerRow: parsedHeaderRow,
+ bodyRows: parsedRows,
+ headerSelectProps: parsedHeaderSelectProps
+ });
+ }, [columnHeaders, onExpand, onExpandTable, onSelect, onSelectTable, onSort, onSortTable, rows]);
+
+ /**
+ * Apply settings, return primary thead.
+ *
+ * @returns {React.ReactNode}
+ */
+ const renderHeader = () => (
+
+
+ {updatedIsExpandableRow &&
+ {content}
+
+ ))}
+
+
+ );
+
+ /**
+ * Apply settings, return tbody(s).
+ *
+ * @returns {React.ReactNode}
+ */
+ const renderBody = () => {
+ const BodyWrapper = ((updatedIsExpandableCell || updatedIsExpandableRow) && React.Fragment) || Tbody;
+
+ return (
+
+ {updatedHeaderAndRows?.bodyRows?.map(({ key: rowKey, cells, expand, select, expandedContent }) => {
+ const expandedCell =
+ (updatedIsExpandableCell && cells.find(cell => cell?.props?.compoundExpand?.isExpanded === true)) ||
+ undefined;
+ const expandedRow = (updatedIsExpandableRow && expand?.isExpanded === true) || undefined;
+
+ const CellWrapper = ((updatedIsExpandableCell || updatedIsExpandableRow) && Tbody) || React.Fragment;
+ const cellWrapperProps =
+ (updatedIsExpandableCell && { isExpanded: expandedCell?.props?.compoundExpand?.isExpanded === true }) ||
+ (updatedIsExpandableRow && { isExpanded: expand?.isExpanded === true }) ||
+ undefined;
+
+ return (
+
+
+ {expand && (
+
+ {content}
+
+ );
+ })}
+
+ {updatedIsExpandableRow && expandedRow && (
+
+
+
+ {expandedContent}
+
+
+
+ )}
+ {updatedIsExpandableCell && expandedCell && (
+
+
+
+
+ {(typeof expandedCell.expandedContent === 'function' && expandedCell.expandedContent()) ||
+ expandedCell.expandedContent}
+
+
+
+
+ )}
+
+ );
+ })}
+
+ );
+ };
+
+ /**
+ * Return empty results display.
+ *
+ * @returns {React.ReactNode}
+ */
+ const renderEmpty = () => children ||
+
+ {(updatedHeaderAndRows?.bodyRows?.length && (
+
+ {isHeader && renderHeader()}
+ {renderBody()}
+
+ )) ||
+ renderEmpty()}
+
+
+ );
+};
+
+/**
+ * Prop types
+ *
+ * @type {{componentClassNames: object, summary: string, onSort: Function, onExpand: Function, className: string, rows: Array,
+ * isBorders: boolean, ariaLabel: string, onSelect: Function, columnHeaders: Array, children: React.ReactNode, isHeader: boolean,
+ * variant: string}}
+ */
+Table.propTypes = {
+ ariaLabel: PropTypes.string,
+ children: PropTypes.node,
+ className: PropTypes.string,
+ columnHeaders: PropTypes.arrayOf(
+ PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.node,
+ PropTypes.shape({
+ content: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+ isSort: PropTypes.bool,
+ isSortActive: PropTypes.bool,
+ sortDirection: PropTypes.oneOf([...Object.values(SortByDirection)])
+ })
+ ])
+ ),
+ componentClassNames: PropTypes.shape({
+ table: PropTypes.string,
+ td: PropTypes.string,
+ tdAction: PropTypes.string,
+ tdSelect: PropTypes.string,
+ th: PropTypes.string,
+ tr: PropTypes.string,
+ trExpand: PropTypes.string,
+ trExpanded: PropTypes.string,
+ trExpandedContent: PropTypes.string,
+ tdExpand: PropTypes.string,
+ tdExpanded: PropTypes.string,
+ tdExpandedWrapper: PropTypes.string,
+ tdExpandedContent: PropTypes.string
+ }),
+ isBorders: PropTypes.bool,
+ isHeader: PropTypes.bool,
+ onExpand: PropTypes.func,
+ onSelect: PropTypes.func,
+ onSort: PropTypes.func,
+ rows: PropTypes.arrayOf(
+ PropTypes.shape({
+ cells: PropTypes.arrayOf(
+ PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.node,
+ PropTypes.instanceOf(Date),
+ PropTypes.shape({
+ content: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.instanceOf(Date)]).isRequired,
+ isTHeader: PropTypes.bool,
+ isExpanded: PropTypes.bool,
+ expandedContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+ })
+ ])
+ ),
+ isDisabled: PropTypes.bool,
+ isExpanded: PropTypes.bool,
+ isSelected: PropTypes.bool,
+ expandedContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+ })
+ ),
+ summary: PropTypes.string,
+ variant: PropTypes.oneOf([...Object.values(TableVariant)])
+};
+
+/**
+ * Default props
+ *
+ * @type {{componentClassNames: {td: string, trExpanded: string, tdExpanded: string, th: string, trExpand: string,
+ * trExpandedContent: string, tdExpandedContent: string, table: string, tr: string, tdExpand: string}, summary: null,
+ * onSort: null, onExpand: null, className: string, rows: *[], isBorders: boolean, ariaLabel: null, onSelect: null,
+ * columnHeaders: *[], children: null, isHeader: boolean, variant: TableVariant.compact}}
+ */
+Table.defaultProps = {
+ ariaLabel: null,
+ children: null,
+ className: '',
+ columnHeaders: [],
+ componentClassNames: {
+ table: 'quipucords-table',
+ td: 'quipucords-table__td',
+ tdAction: 'quipucords-table__td-action',
+ tdSelect: 'quipucords-table__td-select',
+ th: 'quipucords-table__th',
+ tr: 'quipucords-table__tr',
+ trExpand: 'quipucords-table__tr-expand',
+ trExpanded: 'quipucords-table__tr-expand-expanded',
+ trExpandedContent: 'quipucords-table__tr-expand-content',
+ tdExpand: 'quipucords-table__td-expand',
+ tdExpanded: 'quipucords-table__td-expand-expanded',
+ tdExpandedWrapper: 'quipucords-table__td-expand-wrapper',
+ tdExpandedContent: 'quipucords-table__td-expand-content'
+ },
+ isBorders: true,
+ isHeader: false,
+ onExpand: null,
+ onSelect: null,
+ onSort: null,
+ rows: [],
+ summary: null,
+ variant: TableVariant.compact
+};
+
+export { Table as default, Table };
diff --git a/src/components/table/tableEmpty.js b/src/components/table/tableEmpty.js
new file mode 100644
index 00000000..f838a886
--- /dev/null
+++ b/src/components/table/tableEmpty.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Bullseye, EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody, Title } from '@patternfly/react-core';
+import { SearchIcon } from '@patternfly/react-icons';
+import { translate } from '../i18n/i18n';
+
+const TableEmpty = ({ t }) => (
+
+
+
+ {t('table.empty-state_title', 'No results found')}
+
+ {t('table.empty-state_description', 'Clear all filters and try again.')}
+
+
+);
+
+TableEmpty.propTypes = {
+ t: PropTypes.func
+};
+
+TableEmpty.defaultProps = {
+ t: translate
+};
+
+export { TableEmpty as default, TableEmpty };
diff --git a/src/components/table/tableHelpers.js b/src/components/table/tableHelpers.js
new file mode 100644
index 00000000..f1944b74
--- /dev/null
+++ b/src/components/table/tableHelpers.js
@@ -0,0 +1,235 @@
+import React from 'react';
+import { SortByDirection } from '@patternfly/react-table';
+
+/**
+ * Allow additional content to display in cells.
+ *
+ * @param {React.ReactNode|Function|object|*} content
+ * @returns {*|string}
+ */
+const parseContent = content =>
+ (React.isValidElement(content) && content) ||
+ (typeof content === 'function' && content()) ||
+ (typeof content === 'object' && `${content}`) ||
+ content ||
+ '';
+
+/**
+ * Parse table header settings, props.
+ *
+ * @param {object} params
+ * @param {Array} params.columnHeaders
+ * @param {boolean} params.isAllSelected
+ * @param {boolean} params.isRowExpand
+ * @param {Array} params.parsedRows
+ * @param {Function} params.onSelect
+ * @param {Function} params.onSort
+ * @returns {{headerRow: *[], headerSelectProps: {}}}
+ */
+const tableHeader = ({
+ columnHeaders = [],
+ isAllSelected = false,
+ isRowExpand,
+ parsedRows = [],
+ onSelect,
+ onSort
+} = {}) => {
+ const updatedColumnHeaders = [];
+ const updatedHeaderSelectProps = {};
+ const isSelectTable = typeof onSelect === 'function';
+
+ if (isSelectTable) {
+ const parsedRowData = parsedRows.map(({ data }) => data || {});
+ updatedHeaderSelectProps.onSelect = (_event, isSelected) =>
+ onSelect({ data: parsedRowData, isSelected, rowIndex: -1, type: 'all' });
+ updatedHeaderSelectProps.isSelected = isAllSelected;
+ }
+
+ columnHeaders.forEach((columnHeader, index) => {
+ const key = `${window.btoa(columnHeader)}-${index}`;
+
+ if (columnHeader?.content !== undefined) {
+ const {
+ isSort,
+ isSortActive,
+ sortDirection = SortByDirection.asc,
+ content,
+ dataLabel,
+ info,
+ tooltip,
+ ...headerCellData
+ } = columnHeader;
+ const tempColumnHeader = {
+ key,
+ content: parseContent(content),
+ props: {
+ dataLabel,
+ info,
+ tooltip
+ },
+ data: headerCellData
+ };
+
+ if (typeof onSort === 'function' && (isSort === true || isSortActive === true)) {
+ let updatedColumnIndex = index;
+
+ if (isRowExpand) {
+ updatedColumnIndex += 1;
+ }
+
+ if (isSelectTable) {
+ updatedColumnIndex += 1;
+ }
+
+ tempColumnHeader.props.sort = {
+ columnIndex: updatedColumnIndex,
+ sortBy: {},
+ onSort: (_event, _colIndex, direction) =>
+ onSort({ cellIndex: updatedColumnIndex, data: headerCellData, direction, originalIndex: index })
+ };
+
+ if (isSortActive) {
+ tempColumnHeader.props.sort.sortBy.index = updatedColumnIndex;
+ }
+
+ tempColumnHeader.props.sort.sortBy.direction = sortDirection;
+ }
+
+ updatedColumnHeaders.push(tempColumnHeader);
+ } else {
+ updatedColumnHeaders.push({
+ key,
+ content: parseContent(columnHeader)
+ });
+ }
+ });
+
+ return {
+ headerRow: updatedColumnHeaders,
+ headerSelectProps: updatedHeaderSelectProps
+ };
+};
+
+/**
+ * Parse table body settings, props.
+ *
+ * @param {object} params
+ * @param {Function} params.onExpand
+ * @param {Function} params.onSelect
+ * @param {Array} params.rows
+ * @returns {{isExpandableCell: boolean, isSelectTable: boolean, isExpandableRow: boolean, isAllSelected: boolean, rows: *[]}}
+ */
+const tableRows = ({ onExpand, onSelect, rows = [] } = {}) => {
+ const updatedRows = [];
+ const isSelectTable = typeof onSelect === 'function';
+ let isExpandableRow = false;
+ let isExpandableCell = false;
+ let selectedRows = 0;
+
+ rows.forEach(({ cells, isDisabled = false, isExpanded = false, isSelected = false, expandedContent, ...rowData }) => {
+ const rowObj = {
+ key: undefined,
+ cells: [],
+ select: undefined,
+ expand: undefined,
+ expandedContent,
+ data: rowData
+ };
+ updatedRows.push(rowObj);
+ rowObj.rowIndex = updatedRows.length - 1;
+ rowObj.key = `${window.btoa(rowObj)}-${rowObj.rowIndex}`;
+
+ if (isSelectTable) {
+ const updatedIsSelected = isSelected ?? false;
+
+ if (updatedIsSelected === true) {
+ selectedRows += 1;
+ }
+
+ rowObj.select = {
+ cells,
+ rowIndex: rowObj.rowIndex,
+ onSelect: (_event, isRowSelected) =>
+ onSelect({ data: rowObj.data, isSelected: isRowSelected, rowIndex: rowObj.rowIndex, type: 'row' }),
+ isSelected: updatedIsSelected,
+ disable: isDisabled || false
+ };
+ }
+
+ if (expandedContent && typeof onExpand === 'function') {
+ isExpandableRow = true;
+
+ rowObj.expand = {
+ rowIndex: rowObj.rowIndex,
+ isExpanded,
+ onToggle: (_event, rowIndex, isRowToggleExpanded) =>
+ onExpand({
+ data: rowObj.data,
+ isExpanded: isRowToggleExpanded,
+ rowIndex: rowObj.rowIndex,
+ type: 'row'
+ })
+ };
+ }
+
+ cells?.forEach((cell, cellIndex) => {
+ const cellKey = `${window.btoa(cell)}-${rowObj.rowIndex}-${cellIndex}`;
+ if (cell?.content !== undefined) {
+ const { className, content, dataLabel, isActionCell, noPadding, width, style, ...remainingProps } = cell;
+ const cellProps = { className: className || '', dataLabel, isActionCell, noPadding, style: style || {} };
+ let updatedWidthClassName;
+
+ // FixMe: PF doesn't appear to apply cell width classNames when less than 10
+ if (width < 10) {
+ updatedWidthClassName = `pf-m-width-${width}`;
+ }
+
+ if (typeof width === 'string' || style) {
+ cellProps.style = { ...cellProps.style, width };
+ } else if (updatedWidthClassName) {
+ cellProps.className = `${cellProps.className || ''} ${updatedWidthClassName}`;
+ }
+
+ if (!isExpandableRow && cell?.expandedContent && typeof onExpand === 'function') {
+ isExpandableCell = true;
+ const updateIsExpanded = cell?.isExpanded ?? false;
+
+ cellProps.compoundExpand = {
+ isExpanded: updateIsExpanded,
+ onToggle: (_event, rowIndex, isRowToggleExpanded, isCellToggleExpanded) =>
+ onExpand({
+ cellIndex,
+ data: rowObj.data,
+ isExpanded: !isCellToggleExpanded,
+ rowIndex: rowObj.rowIndex,
+ type: 'compound'
+ })
+ };
+ }
+
+ rowObj.cells.push({ ...remainingProps, content: parseContent(content), key: cellKey, props: cellProps });
+ } else {
+ rowObj.cells.push({
+ key: cellKey,
+ content: parseContent(cell)
+ });
+ }
+ });
+ });
+
+ return {
+ isAllSelected: selectedRows === rows.length,
+ isExpandableRow,
+ isExpandableCell,
+ isSelectTable,
+ rows: updatedRows
+ };
+};
+
+const tableHelpers = {
+ parseContent,
+ tableHeader,
+ tableRows
+};
+
+export { tableHelpers as default, tableHelpers, parseContent, tableHeader, tableRows };
diff --git a/src/components/toastNotificationsList/__tests__/__snapshots__/toastNotificationsList.test.js.snap b/src/components/toastNotificationsList/__tests__/__snapshots__/toastNotificationsList.test.js.snap
index 6b6757b9..9302aac8 100644
--- a/src/components/toastNotificationsList/__tests__/__snapshots__/toastNotificationsList.test.js.snap
+++ b/src/components/toastNotificationsList/__tests__/__snapshots__/toastNotificationsList.test.js.snap
@@ -1,7 +1,73 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ToastNotificationsList Component should shallow render a basic component 1`] = `
-
+
`;
+
+exports[`ToastNotificationsList Component should shallow render a basic component: basic 1`] = `
-
);
- expect(wrapper.find(ToastNotificationsList)).toMatchSnapshot();
+ expect(component.find(ConnectedToastNotificationsList)).toMatchSnapshot('basic');
+ });
+
+ it('should handle toast variations', () => {
+ const props = {
+ toasts: [
+ {
+ alertType: undefined,
+ header: undefined,
+ message: 'Lorem ipsum',
+ removed: undefined,
+ paused: undefined
+ },
+ {
+ alertType: AlertVariant.success,
+ header: 'Dolor sit',
+ message: undefined,
+ removed: undefined,
+ paused: undefined
+ },
+ {
+ alertType: AlertVariant.danger,
+ header: 'Dolor sit',
+ message: 'Lorem ipsum',
+ removed: undefined,
+ paused: undefined
+ },
+ {
+ alertType: AlertVariant.info,
+ header: 'REMOVED, Dolor sit',
+ message: undefined,
+ removed: true,
+ paused: undefined
+ },
+ {
+ alertType: AlertVariant.info,
+ header: 'PAUSED, Dolor sit',
+ message: undefined,
+ removed: undefined,
+ paused: true
+ }
+ ]
+ };
+ const component = shallow(
- {toasts &&
- toasts.map((toast, index) => {
- if (!toast.removed) {
- return (
- this.onDismiss(toast)}
- onMouseEnter={this.onHover}
- onMouseLeave={this.onLeave}
- >
-
- {toast.header}
- {toast.message}
-
-
- );
- }
-
- return null;
- })}
-
+
+ {toasts?.map(toast => {
+ if (!toast.removed) {
+ return (
+ this.onDismiss(toast)}
+ variant={toast.alertType}
+ actionClose={ this.onDismiss(toast)} />}
+ key={helpers.generateId('key')}
+ onMouseEnter={() => this.onHover(toast)}
+ onMouseLeave={() => this.onLeave(toast)}
+ >
+ {(toast.header && toast.message) || ''}
+
+ );
+ }
+ return null;
+ })}
+
);
}
}
ToastNotificationsList.propTypes = {
- toasts: PropTypes.array,
- paused: PropTypes.bool
+ toasts: PropTypes.arrayOf(
+ PropTypes.shape({
+ alertType: PropTypes.oneOf([...Object.values(AlertVariant)]),
+ header: PropTypes.node,
+ message: PropTypes.node,
+ removed: PropTypes.bool
+ })
+ ),
+ timeout: PropTypes.number
};
ToastNotificationsList.defaultProps = {
toasts: [],
- paused: false
+ timeout: helpers.TOAST_NOTIFICATIONS_TIMEOUT
};
const mapStateToProps = state => ({ ...state.toastNotifications });
diff --git a/src/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap b/src/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
index 2a4fa88a..56e3d91f 100644
--- a/src/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
+++ b/src/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
@@ -2,90 +2,219 @@
exports[`Tooltip Component should render a popover: popover 1`] = `
-
- hello world
-
- }
- placement="top"
- rootClose={true}
- trigger={
- Array [
- "hover",
- ]
- }
+
-
+
+
+ hello world
+
+
+
+ }
+ popperMatchesTriggerWidth={false}
+ positionModifiers={
+ Object {
+ "bottom": "pf-m-bottom",
+ "bottom-end": "pf-m-bottom-right",
+ "bottom-start": "pf-m-bottom-left",
+ "left": "pf-m-left",
+ "left-end": "pf-m-left-bottom",
+ "left-start": "pf-m-left-top",
+ "right": "pf-m-right",
+ "right-end": "pf-m-right-bottom",
+ "right-start": "pf-m-right-top",
+ "top": "pf-m-top",
+ "top-end": "pf-m-top-right",
+ "top-start": "pf-m-top-left",
+ }
+ }
+ trigger={
+
+ Test popover
+
+ }
+ zIndex={9999}
>
- Test popover
-
-
+
+
+ Test popover
+
+
+
+
`;
exports[`Tooltip Component should render a tooltip: tooltip 1`] = `
-
- hello world
-
- }
- placement="top"
- rootClose={true}
- trigger={
- Array [
- "hover",
- ]
- }
+
-
+
+ hello world
+
+
+ }
+ popperMatchesTriggerWidth={false}
+ positionModifiers={
+ Object {
+ "bottom": "pf-m-bottom",
+ "bottom-end": "pf-m-bottom-right",
+ "bottom-start": "pf-m-bottom-left",
+ "left": "pf-m-left",
+ "left-end": "pf-m-left-bottom",
+ "left-start": "pf-m-left-top",
+ "right": "pf-m-right",
+ "right-end": "pf-m-right-bottom",
+ "right-start": "pf-m-right-top",
+ "top": "pf-m-top",
+ "top-end": "pf-m-top-right",
+ "top-start": "pf-m-top-left",
+ }
+ }
+ trigger={
+