feat(Walk): Add Up Folder navigation

ui/app/components/List/tests/index.test.jsx

@@ -15,7 +15,7 @@ describe('<List />', () => {
   test('should pass all items props to rendered component', () => {
     const items = [{ id: 1, name: 'Hello' }, { id: 2, name: 'World' }];
 
-    const component = ({ item, key }) => <li title={key}>{item.name}</li>;
+    const component = ({ item }) => <li>{item.name}</li>;
 
     const { container, getByText } = render(
       <List items={items} component={component} />,

ui/app/containers/Walk/ListFolders.jsx → ui/app/containers/Walk/ListFile.jsx

@@ -7,7 +7,7 @@ import walkUtils from './util';
 
 const { isImage } = walkUtils;
 
-function Contents({ item: file }) {
+function ListFile({ item: file }) {
   if (isImage(file)) {
     return null;
   }
@@ -27,4 +27,4 @@ function Contents({ item: file }) {
   );
 }
 
-export default Contents;
+export default ListFile;

ui/app/containers/Walk/index.jsx

@@ -13,7 +13,7 @@ import { useInjectReducer } from '../../utils/injectReducer';
 import walkUtils from './util';
 
 import GenericList from '../../components/GenericList';
-import ListFolders from './ListFolders';
+import ListFile from './ListFile';
 import Menu from './Menu';
 import OrganizePreviews from '../../components/OrganizePreviews';
 
@@ -24,6 +24,31 @@ function parseQueryString(find, from) {
   return RegExp(`[?&]${find}(=([^&#]*)|&|#|$)`).exec(from)[2];
 }
 
+export function addUpFolderPath(itemFiles, path) {
+  const file = {
+    filename: '..',
+    mediumType: 'folder',
+  };
+
+  if (path) {
+    if (path.lastIndexOf('/') > -1) {
+      const splitPath = path.split('/');
+      splitPath.pop();
+      itemFiles.unshift({
+        path: splitPath.join('/'),
+        ...file,
+      });
+    } else {
+      itemFiles.unshift({
+        path: '',
+        ...file,
+      });
+    }
+  }
+
+  return itemFiles;
+}
+
 function Walk({
   doListDirectory,
   files,
@@ -46,6 +71,8 @@ function Walk({
     content: file.filename,
     ...file,
   }));
+  addUpFolderPath(itemFiles, path);
+
   const itemImages = itemFiles.filter((file) => isImage(file));
   const hasImages = !loading && itemImages.length > 0;
 
@@ -62,7 +89,7 @@ function Walk({
     />,
     <GenericList
       key="walk-GenericList"
-      component={ListFolders}
+      component={ListFile}
       items={itemFiles}
       loading={loading}
       error={false}

ui/app/containers/Walk/tests/ListFile.test.jsx

@@ -0,0 +1,18 @@
+/* global describe, expect, test */
+import React from 'react';
+import { render } from 'react-testing-library';
+
+import ListFile from '../ListFile';
+
+describe('<ListFile />', () => {
+  test('should render a folder', () => {
+    const path = 'testPath';
+    const { container } = render(<ListFile item={{ mediumType: 'folder', path }} />);
+    expect(container.querySelector('a').href).toEqual(`http://localhost/?path=${path}`);
+  });
+
+  test('should avoid an image', () => {
+    const { container } = render(<ListFile item={{ mediumType: 'image', ext: 'JPEG' }} />);
+    expect(container.querySelector('li')).toEqual(null);
+  });
+});

ui/app/containers/Walk/tests/index.test.jsx

@@ -0,0 +1,35 @@
+/* global beforeEach, describe, expect, test */
+import { addUpFolderPath } from '..';
+
+describe('Walk - addUpFolderPath', () => {
+  const file = {
+    filename: '..',
+    mediumType: 'folder',
+  };
+  let dummyFile;
+
+  beforeEach(() => {
+    dummyFile = { id: 'testid.js', ext: 'js' };
+  });
+
+  test('hide when at root folder', () => {
+    expect(addUpFolderPath([dummyFile], null)).toEqual([dummyFile]);
+    expect(addUpFolderPath([dummyFile])).toEqual([dummyFile]);
+    expect(addUpFolderPath([dummyFile], '')).toEqual([dummyFile]);
+  });
+
+  test('one level deep', () => {
+    const expectedFile = { ...file, path: '' };
+    expect(addUpFolderPath([dummyFile], 'galleries')).toEqual([expectedFile, dummyFile]);
+  });
+
+  test('two levels deep', () => {
+    const expectedFile = { ...file, path: 'galleries' };
+    expect(addUpFolderPath([dummyFile], 'galleries/gallery-demo')).toEqual([expectedFile, dummyFile]);
+  });
+
+  test('three levels deep', () => {
+    const expectedFile = { ...file, path: 'galleries/gallery-demo' };
+    expect(addUpFolderPath([dummyFile], 'galleries/gallery-demo/thumbs')).toEqual([expectedFile, dummyFile]);
+  });
+});