katello 4.5.0 → 4.6.0.rc1

data/webpack/components/EditableTextInput/EditableTextInput.js

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import {
-  TextInput, TextArea, Text, Button, Split, SplitItem, Tooltip, TooltipPosition,
+  TextInput, TextArea, Text, Button, Split, SplitItem,
 } from '@patternfly/react-core';
 import {
   EyeIcon,
   EyeSlashIcon,
   TimesIcon,
   CheckIcon,
-  PencilAltIcon,
 } from '@patternfly/react-icons';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PropTypes from 'prop-types';
 import './editableTextInput.scss';
+import PencilEditButton from './PencilEditButton';
 
 const PASSWORD_MASK = '••••••••';
 
@@ -129,20 +129,7 @@ const EditableTextInput = ({
       </SplitItem >
       {!disabled &&
         <SplitItem>
-          <Tooltip
-            position={TooltipPosition.top}
-            content={__('Edit')}
-          >
-            <Button
-              className="foreman-edit-icon"
-              ouiaId={`edit-button-${attribute}`}
-              aria-label={`edit ${attribute}`}
-              variant="plain"
-              onClick={onEditClick}
-            >
-              <PencilAltIcon />
-            </Button>
-          </Tooltip>
+          <PencilEditButton {...{ attribute, onEditClick }} />
         </SplitItem>
       }
     </Split >

data/webpack/components/EditableTextInput/PencilEditButton.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button, Tooltip, TooltipPosition,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  PencilAltIcon,
+} from '@patternfly/react-icons';
+
+const PencilEditButton = ({ attribute, onEditClick }) => (
+  <Tooltip
+    position={TooltipPosition.top}
+    content={__('Edit')}
+  >
+    <Button
+      className="foreman-edit-icon"
+      ouiaId={`edit-button-${attribute}`}
+      aria-label={`edit ${attribute}`}
+      variant="plain"
+      onClick={onEditClick}
+    >
+      <PencilAltIcon />
+    </Button>
+  </Tooltip>
+);
+
+export default PencilEditButton;
+
+PencilEditButton.propTypes = {
+  attribute: PropTypes.string.isRequired,
+  onEditClick: PropTypes.func.isRequired,
+};

data/webpack/components/Errata/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TableText } from '@patternfly/react-table';
+import { Tooltip } from '@patternfly/react-core';
 import {
   chart_color_black_500 as pfBlack,
   chart_color_gold_400 as pfGold,
@@ -86,7 +87,9 @@ export const ErrataSummary = ({ type, count }) => {
       <TableText>
         <SquareIcon size="sm" color={color} />
         <span style={{ marginLeft: '8px' }}>
-          <ErrataIcon title={label} />
+          <Tooltip content={label} >
+            <ErrataIcon />
+          </Tooltip>
           {url}
         </span>
       </TableText>
@@ -124,7 +127,10 @@ export const ErrataType = ({ type }) => {
 
   return (
     <TableText wrapModifier="nowrap">
-      <ErrataIcon title={label} /> {label}
+      <Tooltip content={label} >
+        <ErrataIcon style={{ marginRight: '4px' }} />
+      </Tooltip>
+      {label}
     </TableText>
   );
 };
@@ -157,7 +163,16 @@ export const ErrataSeverity = ({ severity }) => {
   default:
     label = __('N/A');
   }
-  return <TableText wrapModifier="nowrap">{color && <SecurityIcon color={color} title={label} />} {label} </TableText>;
+  return (
+    <TableText wrapModifier="nowrap">
+      {color &&
+        <Tooltip content={label} >
+          <SecurityIcon color={color} />
+        </Tooltip>
+      }
+      {label}
+    </TableText>
+  );
 };
 
 ErrataSeverity.propTypes = {

data/webpack/components/Loading.js

@@ -14,7 +14,7 @@ const Loading = ({ size, showText, loadingText }) => (
     <EmptyState>
       <EmptyStateIcon size={size} variant="container" component={Spinner} />
       {showText && (
-        <Title size={size} headingLevel="h4">
+        <Title size={size} headingLevel="h4" ouiaId="loading-title">
           {loadingText || __('Loading')}
         </Title>)}
     </EmptyState>

data/webpack/components/RoutedTabs/index.js

@@ -1,33 +1,18 @@
 import React from 'react';
 import { shape, string, number, element, arrayOf } from 'prop-types';
 import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
-import { Switch, Route, Redirect, useHistory, useLocation, withRouter, HashRouter } from 'react-router-dom';
+import { Switch, Route, Redirect, useLocation, withRouter, HashRouter } from 'react-router-dom';
 import { head, last } from 'lodash';
 
 const RoutedTabs = ({
   tabs, defaultTabIndex,
 }) => {
-  const { push } = useHistory();
   const {
     hash, key: locationKey,
   } = useLocation();
 
   // The below transforms #/history/6 to history
   const currentTabFromUrl = head(last(hash.split('#/')).split('/'));
-  // Allows navigation back to mainTab
-  const onSubTab = currentTabFromUrl !== last(last(hash.split('#/')).split('/'));
-
-  const onSelect = (e, key) => {
-    e.preventDefault();
-    // See the below links for understanding of this mouseEvent
-    // https://www.w3schools.com/jsref/event_which.asp
-    // https://www.w3schools.com/jsref/event_button.asp
-    const middleMouseButtonNotUsed = !(e.button === 1 || e.buttons === 4 || e.which === 2);
-    const notCurrentTab = currentTabFromUrl !== key;
-    if (middleMouseButtonNotUsed && (notCurrentTab || !!onSubTab)) {
-      push(`#/${key}`);
-    }
-  };
 
   return (
     <>
@@ -39,7 +24,6 @@ const RoutedTabs = ({
           <a
             key={key}
             href={`#/${key}`}
-            onMouseUp={e => onSelect(e, key)}
             style={{ textDecoration: 'none' }}
           >
             <Tab

data/webpack/components/Search/Search.js

@@ -30,7 +30,6 @@ const Search = ({
   const [items, setItems] = useState([]);
   const dispatch = useDispatch();
   const mountedRef = useRef(true);
-
   const onInputUpdate = async (searchTerm = '') => {
     const newItems = items.filter(({ text }) => stringIncludes(text, searchTerm));
 

data/webpack/components/Search/__tests__/search.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
-import nock, {
+import {
   nockInstance, assertNockRequest, mockAutocomplete, mockSetting,
 } from '../../../test-utils/nockWrapper';
 import { AUTOSEARCH_WHILE_TYPING, AUTOSEARCH_DELAY } from '../../../scenes/Settings/SettingsConstants.js';
@@ -24,7 +24,6 @@ beforeEach(() => {
 
 afterEach(() => {
   assertNockRequest(searchDelayScope);
-  nock.cleanAll();
 });
 
 jest.mock('../../../utils/useDebounce', () => ({

data/webpack/components/SelectAllCheckbox/index.js

@@ -68,16 +68,16 @@ const SelectAllCheckbox = ({
   }, [selectedCount, areAllRowsSelected]);
 
   const selectAllDropdownItems = [
-    <DropdownItem key="select-none" component="button" isDisabled={selectedCount === 0} onClick={handleSelectNone} >
+    <DropdownItem key="select-none" ouiaId="select-none" component="button" isDisabled={selectedCount === 0} onClick={handleSelectNone} >
       {`${__('Select none')} (0)`}
     </DropdownItem>,
-    <DropdownItem key="select-page" component="button" isDisabled={pageRowCount === 0 || areAllRowsOnPageSelected} onClick={handleSelectPage}>
+    <DropdownItem key="select-page" ouiaId="select-page" component="button" isDisabled={pageRowCount === 0 || areAllRowsOnPageSelected} onClick={handleSelectPage}>
       {`${__('Select page')} (${pageRowCount})`}
     </DropdownItem>,
   ];
   if (canSelectAll) {
     selectAllDropdownItems.push((
-      <DropdownItem key="select-all" id="all" component="button" isDisabled={totalCount === 0 || areAllRowsSelected} onClick={handleSelectAll}>
+      <DropdownItem key="select-all" id="all" ouiaId="select-all" component="button" isDisabled={totalCount === 0 || areAllRowsSelected} onClick={handleSelectAll}>
         {`${__('Select all')} (${totalCount})`}
       </DropdownItem>));
   }
@@ -87,11 +87,13 @@ const SelectAllCheckbox = ({
       toggle={
         <DropdownToggle
           onToggle={onSelectAllDropdownToggle}
-          id="toggle-id-8"
+          id="select-all-checkbox-dropdown-toggle"
+          ouiaId="select-all-checkbox-dropdown-toggle"
           splitButtonItems={[
             <DropdownToggleCheckbox
               className="tablewrapper-select-all-checkbox"
               key="tablewrapper-select-all-checkbox"
+              ouiaId="select-all-checkbox-dropdown-toggle-checkbox"
               aria-label="Select all"
               onChange={checked => onSelectAllCheckboxChange(checked)}
               isChecked={selectionToggle}
@@ -105,6 +107,7 @@ const SelectAllCheckbox = ({
       isOpen={isSelectAllDropdownOpen}
       dropdownItems={selectAllDropdownItems}
       id="selection-checkbox"
+      ouiaId="selection-checkbox"
     />
   );
 };

data/webpack/components/SelectableDropdown/SelectableDropdown.js

@@ -33,6 +33,7 @@ const SelectableDropdown = ({
       <LevelItem aria-label={`select ${title} container`}>
         <Select
           id={`select ${title}`}
+          ouiaId={`select ${title}`}
           aria-label={`select ${title}`}
           key="type-dropdown"
           variant={SelectVariant.single}

data/webpack/components/Table/EmptyStateMessage.js

@@ -4,13 +4,17 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
+  EmptyStateSecondaryActions,
   Bullseye,
   Title,
+  Button,
 } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { CubeIcon, ExclamationCircleIcon, SearchIcon, CheckCircleIcon } from '@patternfly/react-icons';
 import { global_danger_color_200 as dangerColor, global_success_color_100 as successColor } from '@patternfly/react-tokens';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectHostDetailsClearSearch } from '../extensions/HostDetails/HostDetailsSelectors';
 
 const KatelloEmptyStateIcon = ({
   error, search, customIcon, happyIcon,
@@ -23,10 +27,16 @@ const KatelloEmptyStateIcon = ({
 };
 
 const EmptyStateMessage = ({
-  title, body, error, search, customIcon, happy,
+  title, body, error, search,
+  customIcon, happy, ...extraTableProps
 }) => {
   let emptyStateTitle = title;
   let emptyStateBody = body;
+  const {
+    primaryActionTitle, showPrimaryAction, showSecondaryAction,
+    secondaryActionTitle, primaryActionLink, secondaryActionLink, searchIsActive, resetFilters,
+    filtersAreActive, requestKey, primaryActionButton,
+  } = extraTableProps;
   if (error) {
     if (error?.response?.data?.error) {
       const { response: { data: { error: { message, details } } } } = error;
@@ -38,6 +48,27 @@ const EmptyStateMessage = ({
       emptyStateBody = error?.response?.data?.displayMessage || __('Something went wrong! Please check server logs!');
     }
   }
+  const secondaryActionText = searchIsActive ? __('Clear search') : __('Clear filters');
+  const dispatch = useDispatch();
+  const clearSearch = useSelector(selectHostDetailsClearSearch);
+  const handleClick = () => {
+    if (searchIsActive) {
+      clearSearch();
+    }
+    if (filtersAreActive) {
+      resetFilters();
+    }
+    dispatch({
+      type: `${requestKey}_REQUEST`,
+      key: requestKey,
+    });
+  };
+
+  const actionButton = primaryActionButton ?? (
+    <Button>
+      <a href={primaryActionLink} style={{ color: 'white', textDecoration: 'none' }}>{primaryActionTitle}</a>
+    </Button>
+  );
   return (
     <Bullseye>
       <EmptyState
@@ -49,17 +80,34 @@ const EmptyStateMessage = ({
           customIcon={customIcon}
           happyIcon={happy}
         />
-        <Title headingLevel="h2" size="lg">
+        <Title headingLevel="h2" size="lg" ouiaId="empty-state-title">
           {emptyStateTitle}
         </Title>
         <EmptyStateBody>
           {emptyStateBody}
         </EmptyStateBody>
+        {showPrimaryAction ? actionButton : null}
+        {showSecondaryAction &&
+          <EmptyStateSecondaryActions>
+            <Button variant="link">
+              <a href={secondaryActionLink} style={{ textDecoration: 'none' }}>{secondaryActionTitle}</a>
+            </Button>
+          </EmptyStateSecondaryActions>
+        }
+
+        {(searchIsActive || !!filtersAreActive) &&
+          <EmptyStateSecondaryActions>
+            <Button variant="link" onClick={handleClick}>
+              {secondaryActionText}
+            </Button>
+          </EmptyStateSecondaryActions>
+        }
       </EmptyState>
     </Bullseye>
   );
 };
 
+
 KatelloEmptyStateIcon.propTypes = {
   error: PropTypes.bool,
   search: PropTypes.bool,
@@ -84,6 +132,27 @@ EmptyStateMessage.propTypes = {
   search: PropTypes.bool,
   customIcon: PropTypes.elementType,
   happy: PropTypes.bool,
+  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),
+  ])),
+  // eslint-disable-next-line react/require-default-props
+  resetFilters: (props, propName) => {
+    if (props.defaultFilters?.length || props.activeFilters?.length) {
+      if (typeof props[propName] !== 'function') {
+        return new Error(`A ${propName} function is required when using activeFilters or defaultFilters`);
+      }
+    }
+    return null;
+  },
+  showPrimaryAction: PropTypes.bool,
+  showSecondaryAction: PropTypes.bool,
+  primaryActionButton: PropTypes.element,
 };
 
 EmptyStateMessage.defaultProps = {
@@ -93,6 +162,12 @@ EmptyStateMessage.defaultProps = {
   search: false,
   customIcon: undefined,
   happy: false,
+  searchIsActive: false,
+  activeFilters: [],
+  defaultFilters: [],
+  showPrimaryAction: false,
+  showSecondaryAction: false,
+  primaryActionButton: undefined,
 };
 
 export default EmptyStateMessage;

data/webpack/components/Table/MainTable.js

@@ -18,16 +18,36 @@ const MainTable = ({
   status, cells, rows, error, emptyContentTitle, emptyContentBody,
   emptySearchTitle, emptySearchBody, errorSearchTitle, errorSearchBody,
   happyEmptyContent, searchIsActive, activeFilters, defaultFilters, actionButtons, rowsCount,
-  children, ...extraTableProps
+  children, showPrimaryAction, showSecondaryAction, primaryActionLink,
+  secondaryActionLink, primaryActionTitle, secondaryActionTitle, resetFilters,
+  updateSearchQuery, requestKey, primaryActionButton, ...extraTableProps
 }) => {
   const tableHasNoRows = () => {
     if (children) return rowsCount === 0;
     return rows.length === 0;
   };
+  const callToActionProps = {
+    showPrimaryAction,
+    showSecondaryAction,
+    primaryActionLink,
+    primaryActionTitle,
+    secondaryActionLink,
+    secondaryActionTitle,
+    primaryActionButton,
+  };
   const filtersAreActive = activeFilters?.length &&
     !isEqual(new Set(activeFilters), new Set(defaultFilters));
   const isFiltering = searchIsActive || filtersAreActive;
   if (status === STATUS.PENDING) return (<Loading />);
+  const clearSearchProps = {
+    resetFilters,
+    searchIsActive,
+    updateSearchQuery,
+    filtersAreActive,
+    requestKey,
+    defaultFilters,
+    activeFilters,
+  };
   // Can we display the error message?
   if (status === STATUS.ERROR) return (<EmptyStateMessage error={error} />);
 
@@ -45,6 +65,7 @@ const MainTable = ({
       title={emptySearchTitle}
       body={emptySearchBody}
       search
+      {...clearSearchProps}
     />);
   }
   if (status === STATUS.RESOLVED && tableHasNoRows()) {
@@ -54,6 +75,7 @@ const MainTable = ({
         body={emptyContentBody}
         happy={happyEmptyContent}
         search={!happyEmptyContent}
+        {...callToActionProps}
       />
     );
   }
@@ -85,11 +107,11 @@ const MainTable = ({
 MainTable.propTypes = {
   status: PropTypes.string.isRequired,
   cells: PropTypes.arrayOf(PropTypes.oneOfType([
-    PropTypes.shape({ }),
+    PropTypes.shape({}),
     PropTypes.string])),
-  rows: PropTypes.arrayOf(PropTypes.shape({ })),
+  rows: PropTypes.arrayOf(PropTypes.shape({})),
   error: PropTypes.oneOfType([
-    PropTypes.shape({ }),
+    PropTypes.shape({}),
     PropTypes.string,
   ]),
   emptyContentTitle: PropTypes.string.isRequired,
@@ -114,6 +136,16 @@ MainTable.propTypes = {
     PropTypes.node,
   ]),
   happyEmptyContent: PropTypes.bool,
+  showPrimaryAction: PropTypes.bool,
+  showSecondaryAction: PropTypes.bool,
+  primaryActionLink: PropTypes.string,
+  secondaryActionLink: PropTypes.string,
+  secondaryActionTitle: PropTypes.string,
+  primaryActionTitle: PropTypes.string,
+  resetFilters: PropTypes.func,
+  updateSearchQuery: PropTypes.func,
+  requestKey: PropTypes.string,
+  primaryActionButton: PropTypes.element,
 };
 
 MainTable.defaultProps = {
@@ -129,6 +161,16 @@ MainTable.defaultProps = {
   rows: undefined,
   rowsCount: undefined,
   happyEmptyContent: false,
+  showPrimaryAction: false,
+  showSecondaryAction: false,
+  primaryActionLink: '',
+  secondaryActionLink: '',
+  primaryActionTitle: '',
+  secondaryActionTitle: '',
+  resetFilters: undefined,
+  updateSearchQuery: undefined,
+  requestKey: '',
+  primaryActionButton: undefined,
 };
 
 export default MainTable;

data/webpack/components/Table/TableHooks.js

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 import { useLocation } from 'react-router-dom';
+import { translate as __ } from 'foremanReact/common/I18n';
 import { friendlySearchParam } from '../../utils/helpers';
 
 class ReactConnectedSet extends Set {
@@ -268,12 +269,15 @@ export const useUrlParams = () => {
 export const useTableSort = ({
   allColumns,
   columnsToSortParams,
-  initialSortColumnName = allColumns[0],
+  initialSortColumnName,
 }) => {
-  if (!Object.keys(columnsToSortParams).includes(initialSortColumnName)) {
-    throw new Error(`initialSortColumnName '${initialSortColumnName}' must also be defined in columnsToSortParams`);
+  const translatedInitialSortColumnName = initialSortColumnName
+    ? __(initialSortColumnName)
+    : allColumns[0];
+  if (!Object.keys(columnsToSortParams).includes(translatedInitialSortColumnName)) {
+    throw new Error(`translatedInitialSortColumnName '${translatedInitialSortColumnName}' must also be defined in columnsToSortParams`);
   }
-  const [activeSortColumn, setActiveSortColumn] = useState(initialSortColumnName);
+  const [activeSortColumn, setActiveSortColumn] = useState(translatedInitialSortColumnName);
   const [activeSortDirection, setActiveSortDirection] = useState('asc');
 
   // Patternfly sort function

data/webpack/components/Table/TableWrapper.js

@@ -18,6 +18,7 @@ import { orgId } from '../../services/api';
 /* Patternfly 4 table wrapper */
 const TableWrapper = ({
   actionButtons,
+  alwaysShowActionButtons,
   toggleGroup,
   children,
   metadata,
@@ -55,11 +56,13 @@ const TableWrapper = ({
   const { pageRowCount } = getPageStats({ total, page, perPage });
   const unresolvedStatus = !!allTableProps?.status && allTableProps.status !== STATUS.RESOLVED;
   const unresolvedStatusOrNoRows = unresolvedStatus || pageRowCount === 0;
-  const resolvedStatusNoContent =
-    !searchQuery && allTableProps.status === STATUS.RESOLVED && pageRowCount === 0;
   const showPagination = !unresolvedStatusOrNoRows;
-  const showActionButtons = actionButtons && !unresolvedStatus;
-  const showToggleGroup = toggleGroup && !unresolvedStatus;
+  const filtersAreActive = activeFilters?.length &&
+    !isEqual(new Set(activeFilters), new Set(allTableProps.defaultFilters));
+  const hideToolbar = !searchQuery && !filtersAreActive &&
+    allTableProps.status === STATUS.RESOLVED && total === 0;
+  const showActionButtons = actionButtons && (alwaysShowActionButtons || !hideToolbar);
+  const showToggleGroup = toggleGroup && !hideToolbar;
   const paginationParams = useCallback(() =>
     ({ per_page: perPage, page }), [perPage, page]);
   const prevRequest = useRef({});
@@ -67,7 +70,6 @@ const TableWrapper = ({
   const prevAdditionalListeners = useRef([]);
   const prevActiveFilters = useRef([]);
   const paginationChangePending = useRef(null);
-
   const hasChanged = (oldValue, newValue) => !isEqual(oldValue, newValue);
 
   const spawnFetch = useCallback((paginationData) => {
@@ -161,11 +163,10 @@ const TableWrapper = ({
     spawnFetch(pagData);
     paginationChangePending.current = pagData;
   };
-
   return (
     <>
       <Flex style={{ alignItems: 'center' }} className="margin-16-24">
-        {displaySelectAllCheckbox &&
+        {displaySelectAllCheckbox && !hideToolbar &&
           <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
             <SelectAllCheckbox
               {...{
@@ -182,7 +183,7 @@ const TableWrapper = ({
             />
           </FlexItem>
         }
-        {!disableSearch && !resolvedStatusNoContent &&
+        {!disableSearch && !hideToolbar &&
           <FlexItem>
             <Search
               isDisabled={unresolvedStatusOrNoRows && !searchQuery}
@@ -226,6 +227,7 @@ const TableWrapper = ({
         activeFilters={activeFilters}
         rowsCount={pageRowCount}
         emptySearchBody={emptySearchBody}
+        updateSearchQuery={updateSearchQuery}
         {...allTableProps}
       >
         {children}
@@ -272,6 +274,7 @@ TableWrapper.propTypes = {
   foremanApiAutoComplete: PropTypes.bool,
   searchPlaceholderText: PropTypes.string,
   actionButtons: PropTypes.node,
+  alwaysShowActionButtons: PropTypes.bool,
   toggleGroup: PropTypes.node,
   children: PropTypes.node,
   // additionalListeners are anything that should trigger another API call, e.g. a filter
@@ -303,6 +306,7 @@ TableWrapper.propTypes = {
   nodesBelowSearch: PropTypes.node,
   bookmarkController: PropTypes.string,
   readOnlyBookmarks: PropTypes.bool,
+  resetFilters: PropTypes.func,
 };
 
 TableWrapper.defaultProps = {
@@ -314,6 +318,7 @@ TableWrapper.defaultProps = {
   foremanApiAutoComplete: false,
   searchPlaceholderText: undefined,
   actionButtons: null,
+  alwaysShowActionButtons: true,
   toggleGroup: null,
   displaySelectAllCheckbox: false,
   selectedCount: 0,
@@ -330,6 +335,7 @@ TableWrapper.defaultProps = {
   nodesBelowSearch: null,
   bookmarkController: undefined,
   readOnlyBookmarks: false,
+  resetFilters: undefined,
 };
 
 export default TableWrapper;