Skip to content

Commit 8cf5e9f

Browse files
psatala-boxpsatala-box
authored
feat(content-explorer-modal-container): add breadcrumbIcon prop (#3955)
1 parent 46fc21f commit 8cf5e9f

File tree

10 files changed

+63
-27
lines changed

10 files changed

+63
-27
lines changed

‎src/features/content-explorer/content-explorer-modal-container/ContentExplorerModalContainer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ class ContentExplorerModalContainer extends Component {
1515
additionalColumns: PropTypes.arrayOf(PropTypes.element),
1616
/** Allow users to choose no selections in MULTI_SELECT mode, defaults to false */
1717
isNoSelectionAllowed: PropTypes.bool,
18+
/** Custom icon for the breadcrumb. Overrides the default icon */
19+
breadcrumbIcon: PropTypes.element,
1820
/** Breadcrumb component options */
1921
breadcrumbProps: BreadcrumbPropType,
2022
/** Adds class name. */

‎src/features/content-explorer/content-explorer-modal-container/__tests__/ContentExplorerModalContainer.test.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,25 +66,28 @@ describe('features/content-explorer/content-explorer-modal-container/ContentExpl
6666
expect(wrapper.find('NewFolderModal').prop('parentFolderName')).toEqual(parentFolderName);
6767
});
6868

69-
test('should pass searchInputProps, chooseButtonText, onSelectItem, onSelectedClick and noItemsRenderer to ContentExplorerModal', () => {
69+
test('should pass searchInputProps, chooseButtonText, onSelectItem, onSelectedClick, noItemsRenderer and breadcrumbIcon to ContentExplorerModal', () => {
7070
const searchInputProps = { placeholder: 'test' };
7171
const chooseButtonText = 'test';
7272
const onSelectedClick = () => {};
7373
const onSelectItem = () => {};
7474
const noItemsRenderer = () => <div>No items</div>;
75+
const breadcrumbIcon = <div>Icon</div>;
7576
const wrapper = renderComponent({
7677
searchInputProps,
7778
chooseButtonText,
7879
onSelectedClick,
7980
onSelectItem,
8081
noItemsRenderer,
82+
breadcrumbIcon,
8183
});
8284

8385
expect(wrapper.find('ContentExplorerModal').prop('searchInputProps')).toEqual(searchInputProps);
8486
expect(wrapper.find('ContentExplorerModal').prop('chooseButtonText')).toEqual(chooseButtonText);
8587
expect(wrapper.find('ContentExplorerModal').prop('onSelectedClick')).toEqual(onSelectedClick);
8688
expect(wrapper.find('ContentExplorerModal').prop('onSelectItem')).toEqual(onSelectItem);
8789
expect(wrapper.find('ContentExplorerModal').prop('noItemsRenderer')).toEqual(noItemsRenderer);
90+
expect(wrapper.find('ContentExplorerModal').prop('breadcrumbIcon')).toEqual(breadcrumbIcon);
8891
});
8992

9093
test('should render ContentExplorerModal and NewFolderModal in Portal by default', () => {

‎src/features/content-explorer/content-explorer-modal/ContentExplorerModal.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import './ContentExplorerModal.scss';
1212

1313
type Props = {
1414
additionalColumns?: Array<React.ComponentType<Column>>,
15+
breadcrumbIcon?: React.ComponentType<any>,
1516
breadcrumbProps?: BreadcrumbProps,
1617
className?: string,
1718
controlledSelectedItems?: Object,

‎src/features/content-explorer/content-explorer-modal/__tests__/ContentExplorerModal.test.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,26 @@ describe('features/content-explorer/content-explorer-modal/ContentExplorerModal'
6363
expect(wrapper).toMatchSnapshot();
6464
});
6565

66-
test('should pass onSelectedClick, onSelectItem, infoNoticeText and noItemsRenderer to ContentExplorer', () => {
66+
test('should pass onSelectedClick, onSelectItem, infoNoticeText, noItemsRenderer and breadcrumbIcon to ContentExplorer', () => {
6767
const onSelectedClick = () => {};
6868
const onSelectItem = () => {};
6969
const infoNoticeText = 'info notice text';
7070
const noItemsRenderer = () => <div>No items</div>;
71+
const breadcrumbIcon = <div>Icon</div>;
7172

72-
const wrapper = renderComponent({ onSelectedClick, onSelectItem, infoNoticeText, noItemsRenderer });
73+
const wrapper = renderComponent({
74+
onSelectedClick,
75+
onSelectItem,
76+
infoNoticeText,
77+
noItemsRenderer,
78+
breadcrumbIcon,
79+
});
7380

7481
expect(wrapper.find('ContentExplorer').prop('onSelectedClick')).toEqual(onSelectedClick);
7582
expect(wrapper.find('ContentExplorer').prop('onSelectItem')).toEqual(onSelectItem);
7683
expect(wrapper.find('ContentExplorer').prop('infoNoticeText')).toEqual(infoNoticeText);
7784
expect(wrapper.find('ContentExplorer').prop('noItemsRenderer')).toEqual(noItemsRenderer);
85+
expect(wrapper.find('ContentExplorer').prop('breadcrumbIcon')).toEqual(breadcrumbIcon);
7886
});
7987
});
8088
});

‎src/features/content-explorer/content-explorer/ContentExplorer.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ class ContentExplorer extends Component {
3131
controlledSelectedItems: PropTypes.object,
3232
/** Allow users to choose no selections in MULTI_SELECT mode, defaults to false */
3333
isNoSelectionAllowed: PropTypes.bool,
34+
/** Custom icon for the breadcrumb. Overrides the default icon */
35+
breadcrumbIcon: PropTypes.element,
3436
/** Props for breadcrumbs */
3537
breadcrumbProps: PropTypes.object,
3638
/** Props for the cancel button */
@@ -463,6 +465,7 @@ class ContentExplorer extends Component {
463465
additionalColumns,
464466
controlledSelectedItems,
465467
isNoSelectionAllowed = false,
468+
breadcrumbIcon,
466469
breadcrumbProps,
467470
cancelButtonProps,
468471
chooseButtonProps,
@@ -561,6 +564,7 @@ class ContentExplorer extends Component {
561564
>
562565
{infoNoticeText && <ContentExplorerInfoNotice infoNoticeText={infoNoticeText} />}
563566
<ContentExplorerHeaderActions
567+
breadcrumbIcon={breadcrumbIcon}
564568
breadcrumbProps={breadcrumbProps}
565569
contentExplorerMode={contentExplorerMode}
566570
customInput={customInput}

‎src/features/content-explorer/content-explorer/ContentExplorerBreadcrumbs.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { FoldersPathPropType } from '../prop-types';
1212
import messages from '../messages';
1313

1414
const ContentExplorerBreadcrumbs = ({
15+
breadcrumbIcon,
1516
breadcrumbProps,
1617
foldersPath,
1718
intl: { formatMessage },
@@ -39,7 +40,7 @@ const ContentExplorerBreadcrumbs = ({
3940
onClick={event => onBreadcrumbClick(i, event)}
4041
title={folder.name}
4142
>
42-
{i === 0 && <IconAllFiles />}
43+
{i === 0 && (breadcrumbIcon || <IconAllFiles />)}
4344
<span>{folder.name}</span>
4445
</PlainButton>
4546
</div>

‎src/features/content-explorer/content-explorer/ContentExplorerHeaderActions.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const isSearchResultsFolder = folder => folder && folder.id === SEARCH_RESULTS_F
1616

1717
class ContentExplorerHeaderActions extends Component {
1818
static propTypes = {
19+
breadcrumbIcon: PropTypes.element,
1920
breadcrumbProps: BreadcrumbPropType,
2021
children: PropTypes.node,
2122
contentExplorerMode: ContentExplorerModePropType.isRequired,
@@ -151,6 +152,7 @@ class ContentExplorerHeaderActions extends Component {
151152

152153
render() {
153154
const {
155+
breadcrumbIcon,
154156
breadcrumbProps,
155157
children,
156158
contentExplorerMode,
@@ -200,6 +202,7 @@ class ContentExplorerHeaderActions extends Component {
200202
/>
201203
) : (
202204
<ContentExplorerBreadcrumbs
205+
breadcrumbIcon={breadcrumbIcon}
203206
breadcrumbProps={breadcrumbProps}
204207
foldersPath={foldersPath}
205208
isUpButtonDisabled={isBreadcrumbButtonDisabled}

‎src/features/content-explorer/content-explorer/__tests__/ContentExplorer.test.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,12 @@ describe('features/content-explorer/content-explorer/ContentExplorer', () => {
130130
expect(wrapper).toMatchSnapshot();
131131
});
132132

133+
test('should pass breadcrumbIcon to ContentExplorerHeaderActions', () => {
134+
const breadcrumbIcon = <div>Icon</div>;
135+
const wrapper = renderComponent({ breadcrumbIcon });
136+
expect(wrapper.find('ContentExplorerHeaderActions').prop('breadcrumbIcon')).toEqual(breadcrumbIcon);
137+
});
138+
133139
[
134140
{
135141
contentExplorerMode: ContentExplorerModes.SELECT_FILE,

‎src/features/content-explorer/content-explorer/__tests__/ContentExplorerBreadcrumbs.test.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@ describe('features/content-explorer/content-explorer/ContentExplorerBreadcrumbs'
1313
sandbox.verifyAndRestore();
1414
});
1515

16+
const foldersPath = [
17+
{ id: '0', name: 'folder1' },
18+
{ id: '1', name: 'folder2' },
19+
{ id: '2', name: 'folder3' },
20+
];
21+
1622
describe('render()', () => {
1723
test('should render correct breadcrumbs', () => {
18-
const foldersPath = [
19-
{ id: '0', name: 'folder1' },
20-
{ id: '1', name: 'folder2' },
21-
{ id: '2', name: 'folder3' },
22-
];
2324
const wrapper = renderComponent({
2425
foldersPath,
2526
});
2627

2728
expect(wrapper.find('.content-explorer-breadcrumbs-container').length).toBe(1);
2829
expect(wrapper.find('.content-explorer-breadcrumbs-up-button').length).toBe(1);
2930
expect(wrapper.find('Breadcrumb').length).toBe(1);
30-
expect(wrapper.find('IconAllFiles').length).toBe(1);
3131

3232
const breadcrumbs = wrapper.find('[data-testid="breadcrumb-lnk"]');
3333

@@ -45,6 +45,22 @@ describe('features/content-explorer/content-explorer/ContentExplorerBreadcrumbs'
4545

4646
expect(wrapper.find('.content-explorer-breadcrumbs-up-button').prop('isDisabled')).toBe(true);
4747
});
48+
49+
test('should render custom breadcrumb icon if specified', () => {
50+
const wrapper = renderComponent({
51+
breadcrumbIcon: <div className="test-icon" />,
52+
foldersPath,
53+
});
54+
expect(wrapper.find('.test-icon').length).toBe(1);
55+
expect(wrapper.find('IconAllFiles').length).toBe(0);
56+
});
57+
58+
test('should render IconAllFiles if breadcrumb icon not specified', () => {
59+
const wrapper = renderComponent({
60+
foldersPath,
61+
});
62+
expect(wrapper.find('IconAllFiles').length).toBe(1);
63+
});
4864
});
4965

5066
describe('onUpButtonClick', () => {
@@ -64,21 +80,13 @@ describe('features/content-explorer/content-explorer/ContentExplorerBreadcrumbs'
6480
test('should call onBreadcrumbClick when breadcrumb is clicked', () => {
6581
const breadcrumbIndex = 1;
6682
const event = {};
67-
const foldersPath = [
68-
{ id: '0', name: 'folder1' },
69-
{ id: '1', name: 'folder2' },
70-
{ id: '2', name: 'folder3' },
71-
];
7283
const onBreadcrumbClickSpy = sandbox.spy();
7384
const wrapper = renderComponent({
7485
foldersPath,
7586
onBreadcrumbClick: onBreadcrumbClickSpy,
7687
});
7788

78-
wrapper
79-
.find('[data-testid="breadcrumb-lnk"]')
80-
.at(breadcrumbIndex)
81-
.simulate('click', event);
89+
wrapper.find('[data-testid="breadcrumb-lnk"]').at(breadcrumbIndex).simulate('click', event);
8290

8391
expect(onBreadcrumbClickSpy.calledOnce).toBe(true);
8492
expect(onBreadcrumbClickSpy.calledWithExactly(breadcrumbIndex, event)).toBe(true);

‎src/features/content-explorer/content-explorer/__tests__/ContentExplorerHeaderActions.test.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,12 @@ describe('features/content-explorer/content-explorer/ContentExplorerHeaderAction
100100
expect(wrapper.instance().props.customInput).toEqual(customInput);
101101
expect(wrapper).toMatchSnapshot();
102102
});
103+
104+
test('should pass breadcrumbIcon to ContentExplorerBreadcrumbs', () => {
105+
const breadcrumbIcon = <div>Icon</div>;
106+
const wrapper = renderComponent({ breadcrumbIcon });
107+
expect(wrapper.find('ContentExplorerBreadcrumbs').prop('breadcrumbIcon')).toEqual(breadcrumbIcon);
108+
});
103109
});
104110

105111
describe('onEnterFolder', () => {
@@ -202,10 +208,7 @@ describe('features/content-explorer/content-explorer/ContentExplorerHeaderAction
202208
test('should call onExitSearch when clicking the breadcrumbs up button to exit search', () => {
203209
const wrapper = renderComponent({ foldersPath, onExitSearch: onExitSearchSpy }, true);
204210

205-
wrapper
206-
.find('.content-explorer-breadcrumbs-up-button')
207-
.hostNodes()
208-
.simulate('click');
211+
wrapper.find('.content-explorer-breadcrumbs-up-button').hostNodes().simulate('click');
209212

210213
expect(onExitSearchSpy.calledOnce).toBe(true);
211214
});
@@ -252,10 +255,7 @@ describe('features/content-explorer/content-explorer/ContentExplorerHeaderAction
252255

253256
const wrapper = renderComponent({ foldersPath, onFoldersPathUpdated: onFoldersPathUpdatedSpy }, true);
254257

255-
wrapper
256-
.find('.content-explorer-breadcrumbs-up-button')
257-
.hostNodes()
258-
.simulate('click');
258+
wrapper.find('.content-explorer-breadcrumbs-up-button').hostNodes().simulate('click');
259259

260260
expect(onFoldersPathUpdatedSpy.calledOnce).toBe(true);
261261
});

0 commit comments

Comments
 (0)