New: Adding option to filter out response (#46)

priyajeet · web-flow · commit 3b5ff5868806 · 2017-08-17T14:27:01.000-07:00
diff --git a/README.md b/README.md
@@ -86,7 +86,8 @@ render(
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 | sharedLinkPassword | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
-| defaultView | string | `files` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
+| defaultView | string | `files` | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
+| responseFilter | function | | *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-options).* |
 
 ### Keyboard Shortcuts
 *See the [developer docs](https://developer.box.com/docs/box-content-explorer#section-keyboard-shortcuts).*
@@ -139,6 +140,7 @@ render(
 | chooseButtonLabel | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | cancelButtonLabel | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 | defaultView | string | `files` | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
+| responseFilter | function | | *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-options).* |
 
 ### Keyboard Shortcuts
 *See the [developer docs](https://developer.box.com/docs/box-content-picker#section-keyboard-shortcuts).*
@@ -179,6 +181,7 @@ render(
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
 | sharedLinkPassword | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
+| responseFilter | function | | *See the [developer docs](https://developer.box.com/docs/box-content-uploader#section-options).* |
 
 
 ## Content Tree ([Documentation](https://developer.box.com/docs/box-content-tree))
@@ -218,6 +221,7 @@ render(
 | logoUrl | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 | sharedLink | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 | sharedLinkPassword | string |  | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
+| responseFilter | function | | *See the [developer docs](https://developer.box.com/docs/box-content-tree#section-options).* |
 
 
 ## Content Preview ([Documentation](https://developer.box.com/docs/box-content-preview))
diff --git a/src/api/Search.js b/src/api/Search.js
@@ -252,9 +252,9 @@ class Search extends Base {
 
         // Save references
         this.offset = 0;
-        this.query = this.getEncodedQuery(query);
+        this.query = query;
         this.id = id;
-        this.key = this.getCacheKey(id, this.query);
+        this.key = this.getCacheKey(id, this.getEncodedQuery(this.query));
         this.successCallback = successCallback;
         this.errorCallback = errorCallback;
         this.sortBy = sortBy;
diff --git a/src/api/__tests__/Search-test.js b/src/api/__tests__/Search-test.js
@@ -86,7 +86,7 @@ describe('api/Search', () => {
             expect(search.sortDirection).to.equal('direction');
             expect(search.key).to.equal('key');
             expect(search.offset).to.equal(0);
-            expect(search.query).to.equal('foo%20query');
+            expect(search.query).to.equal('foo query');
         });
         it('should save args and not make search request when cached', () => {
             search.searchRequest = sandbox.mock().never();
@@ -101,7 +101,7 @@ describe('api/Search', () => {
             expect(search.sortDirection).to.equal('direction');
             expect(search.key).to.equal('key');
             expect(search.offset).to.equal(0);
-            expect(search.query).to.equal('foo%20query');
+            expect(search.query).to.equal('foo query');
         });
         it('should save args and make search request when cached but forced to fetch', () => {
             search.searchRequest = sandbox.mock();
@@ -116,7 +116,7 @@ describe('api/Search', () => {
             expect(search.sortDirection).to.equal('direction');
             expect(search.key).to.equal('key');
             expect(search.offset).to.equal(0);
-            expect(search.query).to.equal('foo%20query');
+            expect(search.query).to.equal('foo query');
         });
     });
 
diff --git a/src/components/Breadcrumbs/Breadcrumb.scss b/src/components/Breadcrumbs/Breadcrumb.scss
@@ -1,12 +1,15 @@
 @import '../variables';
 
 .buik-breadcrumb {
+    display: flex;
+    min-width: 20px;
+
+    &:first-child {
+        min-width: 64px;
+    }
+
     .buik-btn.buik-btn-plain {
         color: $sevens;
-        max-width: 100px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
 
         &:last-child {
             color: $twos;
diff --git a/src/components/Breadcrumbs/BreadcrumbDropdown.scss b/src/components/Breadcrumbs/BreadcrumbDropdown.scss
@@ -6,8 +6,5 @@
 
     &.buik-breadcrumbs-condensed {
         letter-spacing: inherit;
-        line-height: 6px;
-        padding-right: 2px;
-        vertical-align: sub;
     }
 }
diff --git a/src/components/Breadcrumbs/Breadcrumbs.js b/src/components/Breadcrumbs/Breadcrumbs.js
@@ -46,7 +46,7 @@ function getBreadcrumb(crumbs: Crumb | Crumb[], isLast: boolean, onCrumbClick: F
     if (Array.isArray(crumbs)) {
         const condensed = delimiter !== DELIMITER_CARET;
         return (
-            <span>
+            <span className='buik-breadcrumb-more'>
                 <BreadcrumbDropdown
                     onCrumbClick={onCrumbClick}
                     crumbs={crumbs}
@@ -76,14 +76,12 @@ const Breadcrumbs = ({ rootId, crumbs, onCrumbClick, delimiter, isSmall = false
     const lastBreadcrumb = <Breadcrumb name={crumb.name} onClick={onClick} isLast />;
 
     // Always show the second last/parent breadcrumb when there are at least 2 crumbs.
-    const secondLastBreadcrumb = length > 1
-        ? getBreadcrumb(filteredCrumbs[length - 2], false, onCrumbClick, delimiter)
-        : null;
+    const secondLastBreadcrumb =
+        length > 1 ? getBreadcrumb(filteredCrumbs[length - 2], false, onCrumbClick, delimiter) : null;
 
     // Only show the more dropdown when there were at least 4 crumbs.
-    const moreBreadcrumbs = length > 3
-        ? getBreadcrumb(filteredCrumbs.slice(1, length - 2), false, onCrumbClick, delimiter)
-        : null;
+    const moreBreadcrumbs =
+        length > 3 ? getBreadcrumb(filteredCrumbs.slice(1, length - 2), false, onCrumbClick, delimiter) : null;
 
     // Only show the root breadcrumb when there are at least 3 crumbs.
     const firstBreadcrumb = length > 2 ? getBreadcrumb(filteredCrumbs[0], false, onCrumbClick, delimiter) : null;
diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -1,7 +1,12 @@
 @import '../variables';
 
 .buik-breadcrumbs {
-    display: inline-block;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: flex;
+    min-width: 0;
+    padding-right: 20px;
+}
+
+.buik-breadcrumb-more {
+    display: flex;
+    min-width: 35px;
 }
diff --git a/src/components/Breadcrumbs/InlineBreadcrumbs.scss b/src/components/Breadcrumbs/InlineBreadcrumbs.scss
@@ -2,10 +2,26 @@
 
 .buik-inline-breadcrumbs {
     color: $sevens;
+    display: flex;
     font-size: 11px;
+    min-width: 0;
 
-    .buik-breadcrumb .buik-btn.buik-btn-plain {
-        color: inherit;
-        font-size: 11px;
+    .buik-breadcrumbs {
+        padding-right: 0;
+    }
+
+    .buik-breadcrumb {
+        &:first-child {
+            min-width: 43px;
+        }
+
+        .buik-btn.buik-btn-plain {
+            color: inherit;
+            font-size: 11px;
+        }
+    }
+
+    .buik-breadcrumb-more {
+        min-width: 16px;
     }
 }
diff --git a/src/components/ContentExplorer/ContentExplorer.js b/src/components/ContentExplorer/ContentExplorer.js
@@ -91,7 +91,8 @@ type Props = {
     defaultView: DefaultView,
     logoUrl?: string,
     sharedLink?: string,
-    sharedLinkPassword?: string
+    sharedLinkPassword?: string,
+    responseFilter?: Function
 };
 
 type State = {
@@ -193,14 +194,16 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
             apiHost,
             uploadHost,
             sortBy,
-            sortDirection
+            sortDirection,
+            responseFilter
         }: Props = props;
         this.api = new API({
             token,
             sharedLink,
             sharedLinkPassword,
             apiHost,
             uploadHost,
+            responseFilter,
             clientName: CLIENT_NAME_CONTENT_EXPLORER,
             id: `folder_${rootFolderId}`
         });
diff --git a/src/components/ContentPicker/ContentPicker.js b/src/components/ContentPicker/ContentPicker.js
@@ -83,7 +83,8 @@ type Props = {
     cancelButtonLabel?: string,
     logoUrl?: string,
     sharedLink?: string,
-    sharedLinkPassword?: string
+    sharedLinkPassword?: string,
+    responseFilter?: Function
 };
 
 type State = {
@@ -170,7 +171,8 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
             uploadHost,
             sortBy,
             sortDirection,
-            clientName
+            clientName,
+            responseFilter
         } = props;
         this.api = new API({
             token,
@@ -179,6 +181,7 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
             apiHost,
             uploadHost,
             clientName,
+            responseFilter,
             id: `folder_${rootFolderId}`
         });
         this.id = uniqueid('bcp_');
diff --git a/src/components/ContentTree/ContentTree.js b/src/components/ContentTree/ContentTree.js
@@ -44,7 +44,8 @@ type Props = {
     className: string,
     measureRef: Function,
     sharedLink?: string,
-    sharedLinkPassword?: string
+    sharedLinkPassword?: string,
+    responseFilter?: Function
 };
 
 type State = {
@@ -88,14 +89,15 @@ class ContentTree extends Component<DefaultProps, Props, State> {
     constructor(props: Props) {
         super(props);
 
-        const { rootFolderId, token, sharedLink, sharedLinkPassword, apiHost, clientName } = props;
+        const { rootFolderId, token, sharedLink, sharedLinkPassword, apiHost, clientName, responseFilter } = props;
 
         this.api = new API({
             token,
             sharedLink,
             sharedLinkPassword,
             apiHost,
             clientName,
+            responseFilter,
             id: `folder_${rootFolderId}`
         });
 
diff --git a/src/components/ContentUploader/ContentUploader.js b/src/components/ContentUploader/ContentUploader.js
@@ -48,7 +48,8 @@ type Props = {
     isSmall: boolean,
     isLarge: boolean,
     isTouch: boolean,
-    measureRef: Function
+    measureRef: Function,
+    responseFilter?: Function
 };
 
 type DefaultProps = {|
@@ -120,14 +121,24 @@ class ContentUploader extends Component<DefaultProps, Props, State> {
      * @return {API}
      */
     createAPIFactory(): API {
-        const { rootFolderId, token, sharedLink, sharedLinkPassword, apiHost, uploadHost, clientName } = this.props;
+        const {
+            rootFolderId,
+            token,
+            sharedLink,
+            sharedLinkPassword,
+            apiHost,
+            uploadHost,
+            clientName,
+            responseFilter
+        } = this.props;
         return new API({
             token,
             sharedLink,
             sharedLinkPassword,
             apiHost,
             uploadHost,
             clientName,
+            responseFilter,
             id: `folder_${rootFolderId}`
         });
     }
diff --git a/src/components/SubHeader/SubHeaderLeft.js b/src/components/SubHeader/SubHeaderLeft.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { Breadcrumbs } from '../Breadcrumbs';
-import { VIEW_SEARCH, VIEW_FOLDER, DELIMITER_CARET } from '../../constants';
+import { VIEW_SEARCH, VIEW_FOLDER, VIEW_RECENTS, DELIMITER_CARET } from '../../constants';
 import type { View, Collection } from '../../flowTypes';
 
 type Props = {
@@ -44,15 +44,18 @@ const SubHeaderLeft = ({
         }
     } else {
         crumbs = [
-            {
-                id: rootId,
-                name: rootName || getLocalizedMessage('buik.folder.name.root')
-            },
             {
                 id: undefined,
                 name: getLocalizedMessage(`buik.folder.name.${view}`)
             }
         ];
+
+        if (view !== VIEW_RECENTS) {
+            crumbs.unshift({
+                id: rootId,
+                name: rootName || getLocalizedMessage('buik.folder.name.root')
+            });
+        }
     }
 
     return (
diff --git a/src/flowTypes.js b/src/flowTypes.js
@@ -47,6 +47,7 @@ import {
     DEFAULT_VIEW_FILES
 } from './constants';
 
+export type Method = 'DELETE' | 'GET' | 'HEAD' | 'OPTIONS' | 'POST' | 'PUT';
 export type Token = string | Function;
 export type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;
 export type StringMap = { [string]: string };
@@ -208,7 +209,8 @@ export type Options = {
     sharedLinkPassword?: string,
     cache?: Cache,
     apiHost?: string,
-    uploadHost?: string
+    uploadHost?: string,
+    responseFilter?: Function
 };
 
 export type Recent = {
diff --git a/src/util/Xhr.js b/src/util/Xhr.js
diff --git a/test/explorer-no-react.html b/test/explorer-no-react.html
diff --git a/test/pickers-no-react.html b/test/pickers-no-react.html

Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,5 @@`
`6`	`6`
`7`	`7`	`&.buik-breadcrumbs-condensed {`
`8`	`8`	`letter-spacing: inherit;`
`9`		`- line-height: 6px;`
`10`		`- padding-right: 2px;`
`11`		`- vertical-align: sub;`
`12`	`9`	`}`
`13`	`10`	`}`