feat(content explorer): Content Explorer Search By Created At Date

src/api/Search.js

@@ -211,6 +211,7 @@ class Search extends Base {
                 params: {
                     offset: this.offset,
                     query: this.query,
+                    created_at_range: this.createdAtRange,
                     ancestor_folder_ids: this.id,
                     limit: this.limit,
                     fields: requestFields.toString(),
@@ -240,6 +241,7 @@ class Search extends Base {
     search(
         id: string,
         query: string,
+        createdAtRange: string[],
         limit: number,
         offset: number,
         successCallback: Function,
@@ -254,6 +256,7 @@ class Search extends Base {
         this.limit = limit;
         this.offset = offset;
         this.query = query;
+        this.createdAtRange = createdAtRange;
         this.id = id;
         this.key = this.getCacheKey(id, this.getEncodedQuery(this.query));
         this.successCallback = successCallback;

src/elements/common/header/Header.js

@@ -10,37 +10,104 @@ import Logo from './Logo';
 import messages from '../messages';
 import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants';
 import type { View } from '../../../common/types/core';
+import { Flyout, Overlay } from '../../../components/flyout';
+import { DatePicker } from '../../../components';
+import Button from '../../../components/button';
+
+import IconAdvancedFilters from '../../../icons/general/IconAdvancedFilters';
 
 import './Header.scss';
 
 type Props = {
+    fromDateQuery?: string,
     intl: any,
     isHeaderLogoVisible?: boolean,
     isSmall: boolean,
     logoUrl?: string,
     onSearch: Function,
     searchQuery: string,
+    toDateQuery?: string,
     view: View,
 };
 
 // eslint-disable-next-line react/prop-types
-const Header = ({ isHeaderLogoVisible = true, view, isSmall, searchQuery, onSearch, logoUrl, intl }: Props) => {
-    const search = ({ currentTarget }: { currentTarget: HTMLInputElement }) => onSearch(currentTarget.value);
+const Header = ({ isHeaderLogoVisible = true, view, isSmall, onSearch, logoUrl, intl }: Props) => {
     const isFolder = view === VIEW_FOLDER;
     const isSearch = view === VIEW_SEARCH;
+
+    const [values, setValues] = React.useState({ query: '', fromDate: null, toDate: null });
+    const search = (query, fromDate, toDate) => onSearch(query, fromDate, toDate);
+
+    const MAX_TIME = new Date('3000-01-01T00:00:00.000Z');
+    const MIN_TIME = new Date(0);
+    const TODAY = new Date();
+
     return (
         <div className="be-header">
             {isHeaderLogoVisible && <Logo isSmall={isSmall} url={logoUrl} />}
             <div className="be-search">
                 <input
                     aria-label="search"
                     disabled={!isFolder && !isSearch}
-                    onChange={search}
+                    onChange={e => {
+                        setValues({ ...values, query: e.currentTarget.value });
+                        if (e.currentTarget.value !== '') {
+                            search(e.currentTarget.value, values.fromDate, values.toDate);
+                        } else search(e.currentTarget.value, '', '');
+                    }}
                     placeholder={intl.formatMessage(messages.searchPlaceholder)}
                     type="search"
-                    value={searchQuery}
+                    value={values.query}
                 />
             </div>
+            <Flyout position="bottom-left">
+                <Button>
+                    <IconAdvancedFilters />
+                </Button>
+                <Overlay>
+                    <div className="accessible-overlay-content">
+                        <div>
+                            <DatePicker
+                                className="date-picker-example"
+                                displayFormat={{
+                                    day: 'numeric',
+                                    month: 'long',
+                                    year: 'numeric',
+                                }}
+                                hideOptionalLabel
+                                label="From Date"
+                                maxDate={values.toDate || MAX_TIME}
+                                name="datepicker-from"
+                                onChange={data => {
+                                    setValues({ ...values, fromDate: data });
+                                    search(values.query, data, values.toDate);
+                                }}
+                                placeholder="Choose a Date"
+                                value={values.fromDate}
+                            />
+                            <DatePicker
+                                className="date-picker-example"
+                                displayFormat={{
+                                    day: 'numeric',
+                                    month: 'long',
+                                    year: 'numeric',
+                                }}
+                                hideOptionalLabel
+                                label="To Date"
+                                minDate={values.fromDate || MIN_TIME}
+                                maxDate={TODAY}
+                                name="datepicker-to"
+                                onChange={data => {
+                                    setValues({ ...values, toDate: data });
+                                    search(values.query, values.fromDate, data);
+                                }}
+                                placeholder="Choose a Date"
+                                value={values.toDate}
+                            />
+                        </div>
+                    </div>
+                </Overlay>
+            </Flyout>
         </div>
     );
 };

src/elements/content-explorer/ContentExplorer.js

@@ -49,7 +49,7 @@ import {
     VIEW_ERROR,
     VIEW_RECENTS,
     VIEW_METADATA,
-    VIEW_MODE_LIST,
+    VIEW_MODE_GRID,
     TYPE_FILE,
     TYPE_WEBLINK,
     TYPE_FOLDER,
@@ -147,6 +147,7 @@ type State = {
     currentPageSize: number,
     errorCode: string,
     focusedRow: number,
+    fromDateQuery: string,
     gridColumnCount: number,
     isCreateFolderModalOpen: boolean,
     isDeleteModalOpen: boolean,
@@ -161,6 +162,7 @@ type State = {
     selected?: BoxItem,
     sortBy: SortBy,
     sortDirection: SortDirection,
+    toDateQuery: string,
     view: View,
 };
 
@@ -285,6 +287,8 @@ class ContentExplorer extends Component<Props, State> {
             sortBy,
             sortDirection,
             view: VIEW_FOLDER,
+            fromDateQuery: '',
+            toDateQuery: '',
         };
     }
 
@@ -410,6 +414,8 @@ class ContentExplorer extends Component<Props, State> {
             searchQuery: '',
             currentCollection: this.currentUnloadedCollection(),
             view: VIEW_METADATA,
+            fromDateQuery: '',
+            toDateQuery: '',
         });
         this.metadataQueryAPIHelper = new MetadataQueryAPIHelper(this.api);
         this.metadataQueryAPIHelper.fetchMetadataQueryResults(
@@ -487,13 +493,15 @@ class ContentExplorer extends Component<Props, State> {
             currentCollection: { id },
             view,
             searchQuery,
+            fromDateQuery,
+            toDateQuery,
         }: State = this.state;
         if (view === VIEW_FOLDER && id) {
             this.fetchFolder(id, false);
         } else if (view === VIEW_RECENTS) {
             this.showRecents(false);
         } else if (view === VIEW_SEARCH && searchQuery) {
-            this.search(searchQuery);
+            this.search(searchQuery, fromDateQuery, toDateQuery);
         } else if (view === VIEW_METADATA) {
             this.showMetadataQueryResults();
         } else {
@@ -568,6 +576,8 @@ class ContentExplorer extends Component<Props, State> {
             view: VIEW_FOLDER,
             currentCollection: this.currentUnloadedCollection(),
             currentOffset: offset,
+            fromDateQuery: '',
+            toDateQuery: '',
         });
 
         // Fetch the folder using folder API
@@ -638,15 +648,26 @@ class ContentExplorer extends Component<Props, State> {
      * @param {string} query search string
      * @return {void}
      */
-    debouncedSearch = debounce((id: string, query: string) => {
+    debouncedSearch = debounce((id: string, query: string, fromDate: string, toDate: string) => {
         const { currentOffset, currentPageSize }: State = this.state;
-
+        const searchFromDate = fromDate ? `${fromDate.toISOString().slice(0, 10)}T00:00:00+00:00` : '';
+        const searchToDate = toDate ? `${toDate.toISOString().slice(0, 10)}T23:00:00+00:00` : '';
+        const createdAtRange = [searchFromDate, searchToDate];
         this.api
             .getSearchAPI()
-            .search(id, query, currentPageSize, currentOffset, this.searchSuccessCallback, this.errorCallback, {
-                fields: CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH,
-                forceFetch: true,
-            });
+            .search(
+                id,
+                query,
+                createdAtRange.toString(),
+                currentPageSize,
+                currentOffset,
+                this.searchSuccessCallback,
+                this.errorCallback,
+                {
+                    fields: CONTENT_EXPLORER_FOLDER_FIELDS_TO_FETCH,
+                    forceFetch: true,
+                },
+            );
     }, DEFAULT_SEARCH_DEBOUNCE);
 
     /**
@@ -656,7 +677,7 @@ class ContentExplorer extends Component<Props, State> {
      * @param {string} query search string
      * @return {void}
      */
-    search = (query: string) => {
+    search = (query: string, fromDate: string, toDate: string) => {
         const { rootFolderId }: Props = this.props;
         const {
             currentCollection: { id },
@@ -684,6 +705,8 @@ class ContentExplorer extends Component<Props, State> {
             // do nothing and but update prior state
             this.setState({
                 searchQuery: query,
+                fromDateQuery: fromDate,
+                toDateQuery: toDate,
             });
             return;
         }
@@ -694,9 +717,11 @@ class ContentExplorer extends Component<Props, State> {
             searchQuery: query,
             selected: undefined,
             view: VIEW_SEARCH,
+            fromDateQuery: fromDate,
+            toDateQuery: toDate,
         });
 
-        this.debouncedSearch(folderId, query);
+        this.debouncedSearch(folderId, query, fromDate, toDate);
     };
 
     /**
@@ -731,6 +756,8 @@ class ContentExplorer extends Component<Props, State> {
             view: VIEW_RECENTS,
             currentCollection: this.currentUnloadedCollection(),
             currentOffset: 0,
+            fromDateQuery: '',
+            toDateQuery: '',
         });
 
         // Fetch the folder using folder API
@@ -1444,7 +1471,7 @@ class ContentExplorer extends Component<Props, State> {
      *
      * @return {ViewMode}
      */
-    getViewMode = (): ViewMode => this.store.getItem(localStoreViewMode) || VIEW_MODE_LIST;
+    getViewMode = (): ViewMode => this.store.getItem(localStoreViewMode) || VIEW_MODE_GRID;
 
     /**
      * Get the maximum number of grid view columns based on the current width of the