Add Refresh ability on the Gallery & Toolbar

client/src/containers/AssetAdmin/AssetAdmin.js

@@ -72,6 +72,7 @@ class AssetAdmin extends Component {
     this.handleOpenFolder = this.handleOpenFolder.bind(this);
     this.handleSort = this.handleSort.bind(this);
     this.handleSetPage = this.handleSetPage.bind(this);
+    this.handleRefreshPage = this.handleRefreshPage.bind(this);
     this.createEndpoint = this.createEndpoint.bind(this);
     this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
     this.handleFolderIcon = this.handleFolderIcon.bind(this);
@@ -186,10 +187,10 @@ class AssetAdmin extends Component {
    * @param {number} [fileId]
    * @param {object|null} [query]
    */
-  handleBrowse(folderId, fileId, query) {
+  handleBrowse(folderId, fileId, query, forceRefresh = false) {
     if (typeof this.props.onBrowse === 'function') {
       // for Higher-order component with a router handler
-      this.props.onBrowse(folderId, fileId, query);
+      this.props.onBrowse(folderId, fileId, query, CONSTANTS.ACTIONS.EDIT_FILE, forceRefresh);
     }
     if (folderId !== this.getFolderId()) {
       this.props.actions.gallery.deselectFiles();
@@ -209,6 +210,18 @@ class AssetAdmin extends Component {
     );
   }
 
+  /**
+   * Passes `true` for `forceReload` so it forces a new request from server
+   */
+  handleRefreshPage() {
+    this.handleBrowse(
+      this.getFolderId(),
+      this.props.fileId,
+      Object.assign({}, this.props.query),
+      true
+    );
+  }
+
   /**
    * Reset to new search results page
    *
@@ -604,6 +617,7 @@ class AssetAdmin extends Component {
         onSort={this.handleSort}
         onSetPage={this.handleSetPage}
         onViewChange={this.handleViewChange}
+        refreshPage={this.handleRefreshPage}
         sort={sort}
         sectionConfig={config}
         loading={this.props.loading}

client/src/containers/AssetAdmin/stateRouter.js

@@ -101,17 +101,26 @@ class AssetAdminStateRouter extends Component {
    * @param {object} query
    * @param {string} action
    */
-  handleBrowse(folderId, fileId, query = {}, action = CONSTANTS.ACTIONS.EDIT_FILE) {
+  handleBrowse(
+    folderId,
+    fileId,
+    query = {},
+    action = CONSTANTS.ACTIONS.EDIT_FILE,
+    forceReload = false
+  ) {
     if (action && Object.values(CONSTANTS.ACTIONS).indexOf(action) === -1) {
       throw new Error(`Invalid action provided: ${action}`);
     }
-
-    this.setState({
+    const newState = {
       folderId,
       fileId,
       query,
       action,
-    });
+    };
+    if (forceReload) {
+      newState.query.cacheBuster = Math.random();
+    }
+    this.setState(newState);
   }
 
   render() {

client/src/containers/AssetAdmin/tests/AssetAdmin-test.js

@@ -213,7 +213,7 @@ describe('AssetAdmin', () => {
       props.onBrowse = jest.genMockFunction();
       component = ReactTestUtils.renderIntoDocument(<AssetAdmin {...props} />);
       return component.handleDelete([id]).then(() => {
-        expect(props.onBrowse).toBeCalledWith(0, null, { ...props.query, view: 'tile' });
+        expect(props.onBrowse).toBeCalledWith(0, null, { ...props.query, view: 'tile' }, 'edit', false);
       });
     });
   });

client/src/containers/Gallery/Gallery.js

@@ -706,6 +706,7 @@ class Gallery extends Component {
       onCreateFolder,
       onOpenFolder,
       onViewChange,
+      refreshPage,
     } = this.props;
 
     const props = {
@@ -714,6 +715,7 @@ class Gallery extends Component {
       onCreateFolder,
       onOpenFolder,
       onViewChange,
+      refreshPage,
       view,
       sort,
       folder,

client/src/state/files/readFilesQuery.js

@@ -5,7 +5,7 @@ import { hasFilters } from 'components/Search/Search';
 
 // GraphQL Query
 const query = gql`
-  query ReadFiles($limit:Int!, $offset:Int!, $rootFilter: FileFilterInput, 
+  query ReadFiles($limit:Int!, $offset:Int!, $rootFilter: FileFilterInput,
     $childrenFilter: FileFilterInput, $sortBy:[ChildrenSortInputType]
   ) {
     readFiles(filter: $rootFilter) {
@@ -77,12 +77,14 @@ const config = {
     // - Display a folder with its direct children and filters (a "search" in the current folder)
     const [sortField, sortDir] = params.sort ? params.sort.split(',') : ['', ''];
     const limit = params.limit || sectionConfig.limit;
+    const cacheBuster = params.cacheBuster || null;
     return {
       variables: {
         rootFilter,
         childrenFilter,
         limit,
         offset: ((params.page || 1) - 1) * limit,
+        cacheBuster,
         sortBy: (sortField && sortDir)
           ? [{ field: sortField, direction: sortDir.toUpperCase() }]
           : undefined,