18207: Makes 'working' status work in 'Shared with me' & 'Groups' DataExplorers

Also, replaces the 'folder' icon that we usually use in projects with a more
generic one because DataTable is used on other object types listings.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 3646fc8fa2a1aef00e6903c28ee8088651e9bcf2..2119e53d7df603a91de2da7dfa4f9772403963e4 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -10,7 +10,7 @@ import { DataTableDefaultView } from '../data-table-default-view/data-table-defa
 import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
 import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
 import { countNodes } from 'models/tree';
-import { ProjectIcon } from 'components/icon/icon';
+import { PendingIcon } from 'components/icon/icon';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
@@ -100,7 +100,7 @@ export const DataTable = withStyles(styles)(
                                 this.props.working ?
                                 <div className={classes.loader}>
                                     <DataTableDefaultView
-                                        icon={ProjectIcon}
+                                        icon={PendingIcon}
                                         messages={['Loading data, please wait.']} />
                                 </div> : items.map(this.renderBodyRow)
                             }

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 15a9f02d7339ab9c05411135d00d8190f06a0a92..4f7305f740e524b87745c1c0b82ef84e4f28305a 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -68,14 +68,20 @@ import Computer from '@material-ui/icons/Computer';
 
 // Import FontAwesome icons
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPencilAlt, faSlash, faUsers } from '@fortawesome/free-solid-svg-icons';
+import { faPencilAlt, faSlash, faUsers, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { CropFreeSharp } from '@material-ui/icons';
 library.add(
     faPencilAlt,
     faSlash,
     faUsers,
+    faEllipsisH,
 );
 
+export const PendingIcon = (props: any) =>
+    <span {...props}>
+        <span className='fas fa-ellipsis-h' />
+    </span>
+
 export const ReadOnlyIcon = (props: any) =>
     <span {...props}>
         <div className="fa-layers fa-1x fa-fw">

diff --git a/src/store/groups-panel/groups-panel-middleware-service.ts b/src/store/groups-panel/groups-panel-middleware-service.ts
index 2841550686d61dc9d1f7e7652e05334cdbbff4f3..3997e33cef015547bd27ac74435833198248414a 100644 (file)
--- a/src/store/groups-panel/groups-panel-middleware-service.ts
+++ b/src/store/groups-panel/groups-panel-middleware-service.ts
@@ -15,6 +15,7 @@ import { OrderBuilder, OrderDirection } from 'services/api/order-builder';
 import { GroupResource, GroupClass } from 'models/group';
 import { SortDirection } from 'components/data-table/data-column';
 import { GroupsPanelColumnNames } from 'views/groups-panel/groups-panel';
+import { progressIndicatorActions } from "store/progress-indicator/progress-indicator-actions";
 
 export class GroupsPanelMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -26,6 +27,7 @@ export class GroupsPanelMiddlewareService extends DataExplorerMiddlewareService
             api.dispatch(groupsPanelDataExplorerIsNotSet());
         } else {
             try {
+                api.dispatch(progressIndicatorActions.START_WORKING(this.getId()));
                 const order = new OrderBuilder<GroupResource>();
                 const sortColumn = getSortColumn(dataExplorer);
                 if (sortColumn) {
@@ -58,6 +60,8 @@ export class GroupsPanelMiddlewareService extends DataExplorerMiddlewareService
                 api.dispatch(updateResources(permissions.items));
             } catch (e) {
                 api.dispatch(couldNotFetchFavoritesContents());
+            } finally {
+                api.dispatch(progressIndicatorActions.STOP_WORKING(this.getId()));
             }
         }
     }

diff --git a/src/store/project-panel/project-panel-middleware-service.ts b/src/store/project-panel/project-panel-middleware-service.ts
index 659cd957a1bbaaac41b32e214927200ab0be89d9..456508437c9beb10bee2c04fa9cfebc6cdaba6d6 100644 (file)
--- a/src/store/project-panel/project-panel-middleware-service.ts
+++ b/src/store/project-panel/project-panel-middleware-service.ts
@@ -58,7 +58,6 @@ export class ProjectPanelMiddlewareService extends DataExplorerMiddlewareService
                 await api.dispatch<any>(loadMissingProcessesInformation(response.items));
                 api.dispatch(setItems(response));
             } catch (e) {
-                api.dispatch(progressIndicatorActions.PERSIST_STOP_WORKING(this.getId()));
                 api.dispatch(projectPanelActions.SET_ITEMS({
                     items: [],
                     itemsAvailable: 0,
@@ -66,6 +65,8 @@ export class ProjectPanelMiddlewareService extends DataExplorerMiddlewareService
                     rowsPerPage: dataExplorer.rowsPerPage
                 }));
                 api.dispatch(couldNotFetchProjectContents());
+            } finally {
+                api.dispatch(progressIndicatorActions.PERSIST_STOP_WORKING(this.getId()));
             }
         }
     }

diff --git a/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts b/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts
index c55a893de13a4baacf6d9190f79085a9625c447d..5f92637cbb3b7951874fe06218dac34acb7f9b2b 100644 (file)
--- a/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts
+++ b/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts
@@ -21,6 +21,7 @@ import { ProjectPanelColumnNames } from 'views/project-panel/project-panel';
 import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { updatePublicFavorites } from 'store/public-favorites/public-favorites-actions';
 import { FilterBuilder } from 'services/api/filter-builder';
+import { progressIndicatorActions } from 'store/progress-indicator/progress-indicator-actions';
 
 export class SharedWithMeMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -31,6 +32,7 @@ export class SharedWithMeMiddlewareService extends DataExplorerMiddlewareService
         const state = api.getState();
         const dataExplorer = getDataExplorer(state.dataExplorer, this.getId());
         try {
+            api.dispatch(progressIndicatorActions.START_WORKING(this.getId()));
             const response = await this.services.groupsService
                 .contents('', {
                     ...getParams(dataExplorer),
@@ -44,6 +46,8 @@ export class SharedWithMeMiddlewareService extends DataExplorerMiddlewareService
             api.dispatch(setItems(response));
         } catch (e) {
             api.dispatch(couldNotFetchSharedItems());
+        } finally {
+            api.dispatch(progressIndicatorActions.PERSIST_STOP_WORKING(this.getId()));
         }
     }
 }

diff --git a/src/store/shared-with-me-panel/shared-with-me-panel-actions.ts b/src/store/shared-with-me-panel/shared-with-me-panel-actions.ts
index 1210edbbdf6406c653cb6f416b3a884a13af91b7..c8731ae68e55e9455eb00cbbd13915d464022eb3 100644 (file)
--- a/src/store/shared-with-me-panel/shared-with-me-panel-actions.ts
+++ b/src/store/shared-with-me-panel/shared-with-me-panel-actions.ts
@@ -3,16 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { bindDataExplorerActions } from "../data-explorer/data-explorer-action";
-import { Dispatch } from 'redux';
-import { ServiceRepository } from "services/services";
-import { RootState } from 'store/store';
 
 export const SHARED_WITH_ME_PANEL_ID = "sharedWithMePanel";
 export const sharedWithMePanelActions = bindDataExplorerActions(SHARED_WITH_ME_PANEL_ID);
-
-export const loadSharedWithMePanel = () =>
-    (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
-        dispatch(sharedWithMePanelActions.REQUEST_ITEMS());
-    };
-
-
+export const loadSharedWithMePanel = () => sharedWithMePanelActions.REQUEST_ITEMS();

diff --git a/src/views/shared-with-me-panel/shared-with-me-panel.tsx b/src/views/shared-with-me-panel/shared-with-me-panel.tsx
index 219410c54e3583655e90ca7f2e82e9a05ccfdf63..7ba9077cac8ec28e7e0bd839552844491ec63538 100644 (file)
--- a/src/views/shared-with-me-panel/shared-with-me-panel.tsx
+++ b/src/views/shared-with-me-panel/shared-with-me-panel.tsx
@@ -55,7 +55,11 @@ export const SharedWithMePanel = withStyles(styles)(
                     onRowDoubleClick={this.handleRowDoubleClick}
                     onContextMenu={this.handleContextMenu}
                     contextMenuColumn={false}
-                    dataTableDefaultView={<DataTableDefaultView icon={ShareMeIcon} />} /></div>;
+                    dataTableDefaultView={
+                        <DataTableDefaultView
+                            icon={ShareMeIcon}
+                            messages={['No shared items']} />
+                    } /></div>;
             }
 
             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {