{this.headerTitle}
@@ -425,7 +433,9 @@ export class ResourceList extends React.Component
{
) : null;
const needsHeader =
- this.selectable || (sortOptions && sortOptions.length > 0);
+ this.selectable ||
+ (sortOptions && sortOptions.length > 0) ||
+ alternateTool;
const headerWrapperOverlay = loading ? (
@@ -440,7 +450,9 @@ export class ResourceList extends React.Component {
styles.HeaderWrapper,
sortOptions &&
sortOptions.length > 0 &&
+ !alternateTool &&
styles['HeaderWrapper-hasSort'],
+ alternateTool && styles['HeaderWrapper-hasAlternateTool'],
this.selectable && styles['HeaderWrapper-hasSelect'],
loading && styles['HeaderWrapper-disabled'],
this.selectable &&
@@ -454,6 +466,7 @@ export class ResourceList extends React.Component {
{headerTitleMarkup}
{checkableButtonMarkup}
+ {alternateToolMarkup}
{sortingSelectMarkup}
{selectButtonMarkup}
diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
index 5eb7903f004..0b8d800b502 100644
--- a/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -32,6 +32,8 @@ const sortOptions = [
},
];
+const alternateTool = Alternate Tool
;
+
describe('', () => {
describe('renderItem', () => {
it('renders list items', () => {
@@ -335,6 +337,19 @@ describe('', () => {
);
});
+ it('renders when an alternateTool is provided', () => {
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ expect(findByTestID(resourceList, 'ResourceList-Header').exists()).toBe(
+ true,
+ );
+ });
+
it('renders when bulkActions are given', () => {
const resourceList = mountWithAppProvider(
', () => {
expect(resourceList.find(Select).exists()).toBe(true);
});
+ it('does not render a sort select if an alternateTool is provided', () => {
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ expect(resourceList.find(Select).exists()).toBe(false);
+ });
+
+ describe('sortOptions', () => {
+ it('passes a sortOptions to the Select options', () => {
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ expect(resourceList.find(Select).props()).toHaveProperty(
+ 'options',
+ sortOptions,
+ );
+ });
+ });
+
+ describe('sortValue', () => {
+ it('passes a sortValue to the Select value', () => {
+ const onSortChange = jest.fn();
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ expect(resourceList.find(Select).props()).toHaveProperty(
+ 'value',
+ 'sortValue',
+ );
+ });
+ });
+
+ describe('onSortChange', () => {
+ it('calls onSortChange when the Sort Select changes', () => {
+ const onSortChange = jest.fn();
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ trigger(resourceList.find(Select), 'onChange', 'PRODUCT_TITLE_DESC');
+ expect(onSortChange).toHaveBeenCalledWith('PRODUCT_TITLE_DESC');
+ });
+ });
+ });
+
+ describe('Alternate Tool', () => {
+ it('does not render if an alternateTool is not provided', () => {
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ expect(resourceList.find('#AlternateTool').exists()).toBe(false);
+ });
+
+ it('renders if an alternateTool is provided', () => {
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ expect(resourceList.find('#AlternateTool').exists()).toBe(true);
+ });
+
+ it('renders even if sortOptions are provided', () => {
+ const resourceList = mountWithAppProvider(
+ ,
+ );
+ expect(resourceList.find('#AlternateTool').exists()).toBe(true);
+ });
+
describe('sortOptions', () => {
it('passes a sortOptions to the Select options', () => {
const resourceList = mountWithAppProvider(