21386: fixed loading display in search results Arvados-DCO-1.1-Signed-off-by: Lisa...

diff --git a/services/workbench2/src/store/search-bar/search-bar-actions.ts b/services/workbench2/src/store/search-bar/search-bar-actions.ts
index af40e86ade09bfc30698eded0bb1b8802dfac577..a34ab02d6e433ed2c5c709f305ad543622f97579 100644 (file)
--- a/services/workbench2/src/store/search-bar/search-bar-actions.ts
+++ b/services/workbench2/src/store/search-bar/search-bar-actions.ts
@@ -38,7 +38,8 @@ export const searchBarActions = unionize({
     SET_SELECTED_ITEM: ofType<string>(),
     MOVE_UP: ofType<{}>(),
     MOVE_DOWN: ofType<{}>(),
-    SELECT_FIRST_ITEM: ofType<{}>()
+    SELECT_FIRST_ITEM: ofType<{}>(),
+    SET_IS_SEARCHING: ofType<boolean>(),
 });
 
 export type SearchBarActions = UnionOf<typeof searchBarActions>;

diff --git a/services/workbench2/src/store/search-bar/search-bar-reducer.ts b/services/workbench2/src/store/search-bar/search-bar-reducer.ts
index 5e16c9a0855b24f89014e55551f144e455970476..5f32e794cc0e055ce927bb2ae432d03b7d644674 100644 (file)
--- a/services/workbench2/src/store/search-bar/search-bar-reducer.ts
+++ b/services/workbench2/src/store/search-bar/search-bar-reducer.ts
@@ -24,6 +24,7 @@ interface SearchBar {
     savedQueries: SearchBarAdvancedFormData[];
     recentQueries: string[];
     selectedItem: SearchBarSelectedItem;
+    isSearching: boolean;
 }
 
 export enum SearchView {
@@ -42,7 +43,8 @@ const initialState: SearchBar = {
     selectedItem: {
         id: '',
         query: ''
-    }
+    },
+    isSearching: false,
 };
 
 const makeSelectedItem = (id: string, query?: string): SearchBarSelectedItem => ({ id, query: query ? query : id });
@@ -143,5 +145,6 @@ export const searchBarReducer = (state = initialState, action: SearchBarActions)
                 selectedItem
             };
         },
+        SET_IS_SEARCHING: isSearching => ({ ...state, isSearching }),
         default: () => state
     });

diff --git a/services/workbench2/src/store/search-results-panel/search-results-middleware-service.ts b/services/workbench2/src/store/search-results-panel/search-results-middleware-service.ts
index 00a69cd2e308f733b617ec5a5b35dadebe42c01c..2f64d76fb5ed5d0776d94c0f48352c2cb24e6ab1 100644 (file)
--- a/services/workbench2/src/store/search-results-panel/search-results-middleware-service.ts
+++ b/services/workbench2/src/store/search-results-panel/search-results-middleware-service.ts
@@ -17,7 +17,8 @@ import { searchResultsPanelActions } from 'store/search-results-panel/search-res
 import {
     getSearchSessions,
     queryToFilters,
-    getAdvancedDataFromQuery
+    getAdvancedDataFromQuery,
+    searchBarActions
 } from 'store/search-bar/search-bar-actions';
 import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { FilterBuilder, joinFilters } from 'services/api/filter-builder';
@@ -55,12 +56,20 @@ export class SearchResultsMiddlewareService extends DataExplorerMiddlewareServic
             api.dispatch(setItems(initial));
         }
 
+        const numberOfSessions = sessions.length;
+        let numberOfResolvedResponses = 0;
+        api.dispatch(searchBarActions.SET_IS_SEARCHING(true));
+
         sessions.forEach(session => {
             const params = getParams(dataExplorer, searchValue, session.apiRevision);
             this.services.groupsService.contents('', params, session)
                 .then((response) => {
                     api.dispatch(updateResources(response.items));
                     api.dispatch(appendItems(response));
+                    numberOfResolvedResponses++;
+                        if (numberOfResolvedResponses === numberOfSessions) {
+                            api.dispatch(searchBarActions.SET_IS_SEARCHING(false));
+                        }
                     // Request all containers for process status to be available
                     const containerRequests = response.items.filter((item) => item.kind === ResourceKind.CONTAINER_REQUEST) as ContainerRequestResource[];
                     const containerUuids = containerRequests.map(container => container.containerUuid).filter(uuid => uuid !== null) as string[];
@@ -73,10 +82,11 @@ export class SearchResultsMiddlewareService extends DataExplorerMiddlewareServic
                         .then((containers) => {
                             api.dispatch(updateResources(containers.items));
                         });
-                }).catch(() => {
-                    api.dispatch(couldNotFetchSearchResults(session.clusterId));
-                });
-        }
+                    }).catch(() => {
+                        api.dispatch(couldNotFetchSearchResults(session.clusterId));
+                        api.dispatch(searchBarActions.SET_IS_SEARCHING(false));
+                    });
+            }
         );
     }
 }

diff --git a/services/workbench2/src/views/search-results-panel/search-results-panel-view.tsx b/services/workbench2/src/views/search-results-panel/search-results-panel-view.tsx
index e9693b50e5917ddfb8542ec26e42fc7cbb004c21..bd32d997c20308cc2bbaded43f79a2d01a2b0d76 100644 (file)
--- a/services/workbench2/src/views/search-results-panel/search-results-panel-view.tsx
+++ b/services/workbench2/src/views/search-results-panel/search-results-panel-view.tsx
@@ -30,6 +30,7 @@ import { ArvadosTheme } from 'common/custom-theme';
 import { getSearchSessions } from 'store/search-bar/search-bar-actions';
 import { camelCase } from 'lodash';
 import { GroupContentsResource } from 'services/groups-service/groups-service';
+import { PendingIcon } from 'components/icon/icon';
 
 export enum SearchResultsPanelColumnNames {
     CLUSTER = "Cluster",
@@ -153,6 +154,21 @@ export const SearchResultsPanelView = withStyles(styles, { withTheme: true })(
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [selectedItem]);
 
+        const prevIsSearching = React.useRef<boolean>(props.isSearching);
+        const [isLoaded, setIsLoaded] = React.useState<boolean>(false);
+
+        useEffect(() => {
+            if(prevIsSearching.current === true && props.isSearching === false) {
+                setIsLoaded(true);
+                props.stopSpinner();
+            }
+            if(props.isSearching === true) {
+                setIsLoaded(false);
+                props.startSpinner();
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.isSearching]);
+
         const onItemClick = useCallback((uuid) => {
             setSelectedItem(uuid);
             props.onItemClick(uuid);
@@ -168,6 +184,8 @@ export const SearchResultsPanelView = withStyles(styles, { withTheme: true })(
                 contextMenuColumn={false}
                 elementPath={`/ ${itemPath.reverse().join(' / ')}`}
                 hideSearchInput
+                defaultViewIcon={isLoaded && props.numberOfItems === 0 ? undefined : PendingIcon}
+                defaultViewMessages={isLoaded && props.numberOfItems === 0 ? ['No items found'] : ['Loading data, please wait']}
                 title={
                     <div>
                         {loggedIn.length === 1 ?

diff --git a/services/workbench2/src/views/search-results-panel/search-results-panel.tsx b/services/workbench2/src/views/search-results-panel/search-results-panel.tsx
index 0b69ff246add938a4be74251c7893fd2441701cf..60d70204a689be93ca2766235e183e97f3dc92a4 100644 (file)
--- a/services/workbench2/src/views/search-results-panel/search-results-panel.tsx
+++ b/services/workbench2/src/views/search-results-panel/search-results-panel.tsx
@@ -14,6 +14,8 @@ import { User } from "models/user";
 import { Config } from 'common/config';
 import { Session } from "models/session";
 import { toggleOne, deselectAllOthers } from "store/multiselect/multiselect-actions";
+import { progressIndicatorActions } from 'store/progress-indicator/progress-indicator-actions';
+import { SEARCH_RESULTS_PANEL_ID } from 'store/search-results-panel/search-results-panel-actions';
 
 export interface SearchResultsPanelDataProps {
     data: SearchBarAdvancedFormData;
@@ -21,6 +23,8 @@ export interface SearchResultsPanelDataProps {
     sessions: Session[];
     remoteHostsConfig: { [key: string]: Config };
     localCluster: string;
+    numberOfItems: number;
+    isSearching: boolean;
 }
 
 export interface SearchResultsPanelActionProps {
@@ -28,16 +32,22 @@ export interface SearchResultsPanelActionProps {
     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
     onDialogOpen: (ownerUuid: string) => void;
     onItemDoubleClick: (item: string) => void;
+    startSpinner: () => void;
+    stopSpinner: () => void;
 }
 
 export type SearchResultsPanelProps = SearchResultsPanelDataProps & SearchResultsPanelActionProps;
 
 const mapStateToProps = (rootState: RootState) => {
+    const { dataExplorer, searchBar } = rootState;
+    const numberOfItems = dataExplorer[SEARCH_RESULTS_PANEL_ID].items.length;
     return {
         user: rootState.auth.user,
         sessions: rootState.auth.sessions,
         remoteHostsConfig: rootState.auth.remoteHostsConfig,
         localCluster: rootState.auth.localCluster,
+        numberOfItems,
+        isSearching: searchBar.isSearching,
     };
 };
 
@@ -53,7 +63,13 @@ const mapDispatchToProps = (dispatch: Dispatch): SearchResultsPanelActionProps =
     },
     onItemDoubleClick: uuid => {
         dispatch<any>(navigateTo(uuid));
-    }
+    },
+    startSpinner: () => {
+        dispatch<any>(progressIndicatorActions.START_WORKING(SEARCH_RESULTS_PANEL_ID));
+    },
+    stopSpinner: () => {
+        dispatch<any>(progressIndicatorActions.STOP_WORKING(SEARCH_RESULTS_PANEL_ID));
+    },
 });
 
 export const SearchResultsPanel = connect(mapStateToProps, mapDispatchToProps)(SearchResultsPanelView);