import React from 'react'; import { translate as __ } from 'foremanReact/common/I18n'; import { Table, TableHeader, TableBody, TableComposable, } from '@patternfly/react-table'; import { STATUS } from 'foremanReact/constants'; import { isEqual } from 'lodash'; import PropTypes from 'prop-types'; import './MainTable.scss'; import EmptyStateMessage from './EmptyStateMessage'; import Loading from '../../components/Loading'; const MainTable = ({ status, cells, rows, error, emptyContentTitle, emptyContentBody, emptyContentOverride, emptySearchTitle, emptySearchBody, errorSearchTitle, errorSearchBody, happyEmptyContent, searchIsActive, activeFilters, defaultFilters, activeToggleState, unfilteredToggleState, actionButtons, rowsCount, children, showPrimaryAction, showSecondaryAction, showSecondaryActionButton, primaryActionLink, secondaryActionLink, primaryActionTitle, secondaryActionTitle, secondaryActionTextOverride, resetFilters, updateSearchQuery, requestKey, primaryActionButton, secondaryActionTargetBlank, ...extraTableProps }) => { const tableHasNoRows = () => { if (children) return rowsCount === 0; return rows.length === 0; }; const callToActionProps = { showPrimaryAction, showSecondaryAction, showSecondaryActionButton, primaryActionLink, primaryActionTitle, secondaryActionLink, secondaryActionTitle, primaryActionButton, secondaryActionTextOverride, emptyContentOverride, }; const filtersAreActive = activeFilters?.length && !isEqual(new Set(activeFilters), new Set(defaultFilters)); const toggleIsActive = activeToggleState !== unfilteredToggleState; const isSearchingOrFiltering = searchIsActive || filtersAreActive || toggleIsActive; if (status === STATUS.PENDING) return (); const clearSearchProps = { resetFilters, searchIsActive, updateSearchQuery, filtersAreActive, requestKey, defaultFilters, activeFilters, }; const tableWouldBeEmpty = (status === STATUS.RESOLVED && tableHasNoRows()); const emptyContent = emptyContentOverride || (tableWouldBeEmpty && !isSearchingOrFiltering); const emptySearch = (tableWouldBeEmpty && isSearchingOrFiltering); // Can we display the error message? if (status === STATUS.ERROR) return (); // scoped_search errors come back as 200 with an error message, // so they should be passed here as errorSearchBody & errorSearchTitle. if (status === STATUS.RESOLVED && !!errorSearchBody) { return (); } if (emptyContent) { return ( ); } if (emptySearch) { return (); } const tableProps = { cells, rows, ...extraTableProps }; if (children) { return ( {children} ); } return (
); }; MainTable.propTypes = { status: PropTypes.string.isRequired, cells: PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.shape({}), PropTypes.string])), rows: PropTypes.arrayOf(PropTypes.shape({})), error: PropTypes.oneOfType([ PropTypes.shape({}), PropTypes.string, ]), emptyContentTitle: PropTypes.string.isRequired, emptyContentBody: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]).isRequired, emptySearchTitle: PropTypes.string.isRequired, emptySearchBody: PropTypes.string.isRequired, errorSearchTitle: PropTypes.string, errorSearchBody: PropTypes.string, searchIsActive: PropTypes.bool, activeFilters: PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.arrayOf(PropTypes.string), ])), defaultFilters: PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.arrayOf(PropTypes.string), ])), activeToggleState: PropTypes.string, unfilteredToggleState: PropTypes.string, actionButtons: PropTypes.bool, rowsCount: PropTypes.number, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), happyEmptyContent: PropTypes.bool, emptyContentOverride: PropTypes.bool, showPrimaryAction: PropTypes.bool, showSecondaryAction: PropTypes.bool, showSecondaryActionButton: PropTypes.bool, secondaryActionTextOverride: PropTypes.string, primaryActionLink: PropTypes.string, secondaryActionLink: PropTypes.string, secondaryActionTitle: PropTypes.string, primaryActionTitle: PropTypes.string, resetFilters: PropTypes.func, updateSearchQuery: PropTypes.func, requestKey: PropTypes.string, primaryActionButton: PropTypes.element, secondaryActionTargetBlank: PropTypes.bool, }; MainTable.defaultProps = { error: null, searchIsActive: false, activeFilters: [], defaultFilters: [], activeToggleState: '', unfilteredToggleState: '', errorSearchTitle: __('Problem searching'), errorSearchBody: '', actionButtons: false, children: null, cells: undefined, rows: undefined, rowsCount: undefined, happyEmptyContent: false, emptyContentOverride: false, showPrimaryAction: false, showSecondaryAction: false, showSecondaryActionButton: false, secondaryActionTextOverride: '', primaryActionLink: '', secondaryActionLink: '', primaryActionTitle: '', secondaryActionTitle: '', resetFilters: undefined, updateSearchQuery: undefined, requestKey: '', primaryActionButton: undefined, secondaryActionTargetBlank: false, }; export default MainTable;