feat(archive-viewer): address comments

box · Dec 16, 2019 · e13a762 · e13a762
1 parent 497a979
commit e13a762
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 31 deletions.
diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js
@@ -138,7 +138,7 @@ class ArchiveExplorer extends React.Component {
 
         return (
             <Internationalize language="en-us" messages={{}}>
-                <div className="bp-archive-explorer">
+                <div className="bp-ArchiveExplorer">
                     <Breadcrumbs fullPath={fullPath} onClick={this.handleClickFullPath} view={view} />
                     <VirtualizedTable
                         className="ArchiveFilesTable"

diff --git a/src/lib/viewers/archive/ArchiveExplorer.scss b/src/lib/viewers/archive/ArchiveExplorer.scss
@@ -1,4 +1,4 @@
-.bp-archive-explorer {
+.bp-ArchiveExplorer {
     display: flex;
     flex-direction: column;
     width: 100%;

diff --git a/src/lib/viewers/archive/Breadcrumbs.js b/src/lib/viewers/archive/Breadcrumbs.js
@@ -19,21 +19,13 @@ class Breadcrumbs extends React.PureComponent {
      * @return {Array<Object>} path items including name and path string
      */
     getPathItems = fullPath => {
-        const { view } = this.props;
-
-        if (view === VIEWS.VIEW_SEARCH) {
-            return [
-                {
-                    name: __('search_results'),
-                },
-            ];
-        }
-
         const pathNames = fullPath.split('/').slice(0, -1);
+        // join path names from root to current index to get absolute path
+        const getAbsolutePath = index => pathNames.slice(0, index + 1).join('/');
 
         return pathNames.map((name, index) => ({
             name,
-            path: `${pathNames.slice(0, index + 1).join('/')}/`,
+            path: `${getAbsolutePath(index)}/`,
         }));
     };
 
@@ -44,19 +36,18 @@ class Breadcrumbs extends React.PureComponent {
      */
     render() {
         const { fullPath, onClick, view } = this.props;
-        const pathItems = this.getPathItems(fullPath);
 
         return (
             <div className="bp-header-breadcrumbs">
                 <Breadcrumb>
-                    {pathItems.map(pathItem =>
-                        view === VIEWS.VIEW_SEARCH ? (
-                            <span key={pathItem.name}>{pathItem.name}</span>
-                        ) : (
+                    {view === VIEWS.VIEW_SEARCH ? (
+                        <span>{__('search_results')}</span>
+                    ) : (
+                        this.getPathItems(fullPath).map(pathItem => (
                             <PlainButton key={pathItem.path} onClick={() => onClick(pathItem.path)} type="button">
                                 {pathItem.name}
                             </PlainButton>
-                        ),
+                        ))
                     )}
                 </Breadcrumb>
             </div>

diff --git a/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js b/src/lib/viewers/archive/__tests__/ArchiveExplorer-test-react.js
@@ -71,7 +71,7 @@ describe('lib/viewers/archive/ArchiveExplorer', () => {
         it('should render correct components', () => {
             const component = shallow(<ArchiveExplorer itemCollection={data} />);
 
-            expect(component.find('.bp-archive-explorer').length).to.equal(1);
+            expect(component.find('.bp-ArchiveExplorer').length).to.equal(1);
             expect(component.find('Breadcrumbs').length).to.equal(1);
             expect(component.find('Internationalize').length).to.equal(1);
             expect(component.find('InjectIntl(VirtualizedTable)').length).to.equal(1);

diff --git a/src/lib/viewers/archive/__tests__/Breadcrumbs-test-react.js b/src/lib/viewers/archive/__tests__/Breadcrumbs-test-react.js
@@ -28,6 +28,12 @@ describe('lib/viewers/archive/Breadcrumbs', () => {
             expect(component.find('InjectIntl(Breadcrumb)').length).to.equal(1);
             expect(component.find('PlainButton').length).to.equal(2);
         });
+
+        it('should render search result if view is search', () => {
+            const component = shallow(<Breadcrumbs fullPath={fullPath} onClick={onClick} view={VIEWS.VIEW_SEARCH} />);
+
+            expect(component.find('span').text()).to.equal(__('search_results'));
+        });
     });
 
     describe('getPathItems()', () => {
@@ -47,16 +53,5 @@ describe('lib/viewers/archive/Breadcrumbs', () => {
                 },
             ]);
         });
-
-        it('should return search results if view is search', () => {
-            const component = shallow(<Breadcrumbs fullPath={fullPath} onClick={onClick} view={VIEWS.VIEW_SEARCH} />);
-            const pathItems = component.instance().getPathItems(fullPath);
-
-            expect(pathItems).to.eql([
-                {
-                    name: __('search_results'),
-                },
-            ]);
-        });
     });
 });