Move columns definition out of middleware scope

Feature #13887

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/src/store/data-explorer/data-explorer-middleware-service.ts b/src/store/data-explorer/data-explorer-middleware-service.ts
index e47824c17d3a401b55a91a8c7a0be760962e48b4..14be4ea7b8c074551989d0dde93ae7350ff5154d 100644 (file)
--- a/src/store/data-explorer/data-explorer-middleware-service.ts
+++ b/src/store/data-explorer/data-explorer-middleware-service.ts
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { Dispatch, MiddlewareAPI } from "redux";
-import { DataColumns } from "../../components/data-table/data-table";
 import { RootState } from "../store";
 
 export abstract class DataExplorerMiddlewareService {
@@ -17,6 +16,5 @@ export abstract class DataExplorerMiddlewareService {
         return this.id;
     }
 
-    abstract getColumns(): DataColumns<any>;
     abstract requestItems(api: MiddlewareAPI<Dispatch, RootState>): void;
 }

diff --git a/src/store/data-explorer/data-explorer-middleware.ts b/src/store/data-explorer/data-explorer-middleware.ts
index c4ea4e533cd5869b666844d78d552619d348e35e..146867c3492702d62a9f518daf5449a7b2e3a679 100644 (file)
--- a/src/store/data-explorer/data-explorer-middleware.ts
+++ b/src/store/data-explorer/data-explorer-middleware.ts
@@ -8,17 +8,15 @@ import { dataExplorerActions, bindDataExplorerActions } from "./data-explorer-ac
 import { DataExplorerMiddlewareService } from "./data-explorer-middleware-service";
 
 export const dataExplorerMiddleware = (service: DataExplorerMiddlewareService): Middleware => api => next => {
+    const handleAction = <T extends { id: string }>(handler: (data: T) => void) =>
+        (data: T) => {
+            if (data.id === service.getId()) {
+                handler(data);
+            }
+        };
     const actions = bindDataExplorerActions(service.getId());
-    next(actions.SET_COLUMNS({ columns: service.getColumns() }));
 
     return action => {
-        const handleAction = <T extends { id: string }>(handler: (data: T) => void) =>
-            (data: T) => {
-                next(action);
-                if (data.id === service.getId()) {
-                    handler(data);
-                }
-            };
         dataExplorerActions.match(action, {
             SET_PAGE: handleAction(() => {
                 api.dispatch(actions.REQUEST_ITEMS());

diff --git a/src/store/favorite-panel/favorite-panel-middleware-service.ts b/src/store/favorite-panel/favorite-panel-middleware-service.ts
index 7df86d9b87b24c5caf87f41141fceb4c3cab8cef..8908fff7083edc1d261239d057128a3bb60b2010 100644 (file)
--- a/src/store/favorite-panel/favorite-panel-middleware-service.ts
+++ b/src/store/favorite-panel/favorite-panel-middleware-service.ts
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { DataExplorerMiddlewareService } from "../data-explorer/data-explorer-middleware-service";
-import { columns, FavoritePanelFilter, FavoritePanelColumnNames } from "../../views/favorite-panel/favorite-panel";
+import { FavoritePanelFilter, FavoritePanelColumnNames } from "../../views/favorite-panel/favorite-panel";
 import { RootState } from "../store";
 import { DataColumns } from "../../components/data-table/data-table";
 import { FavoritePanelItem, resourceToDataItem } from "../../views/favorite-panel/favorite-panel-item";
@@ -21,10 +21,6 @@ export class FavoritePanelMiddlewareService extends DataExplorerMiddlewareServic
         super(id);
     }
 
-    getColumns() {
-        return columns;
-    }
-
     requestItems(api: MiddlewareAPI<Dispatch, RootState>) {
         const dataExplorer = api.getState().dataExplorer[this.getId()];
         const columns = dataExplorer.columns as DataColumns<FavoritePanelItem, FavoritePanelFilter>;

diff --git a/src/store/project-panel/project-panel-middleware-service.ts b/src/store/project-panel/project-panel-middleware-service.ts
index 626b92635006805154881d4912a2efdf7db47d74..761ec188bde282019e7421b34654ef732b33806b 100644 (file)
--- a/src/store/project-panel/project-panel-middleware-service.ts
+++ b/src/store/project-panel/project-panel-middleware-service.ts
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { DataExplorerMiddlewareService } from "../data-explorer/data-explorer-middleware-service";
-import { columns, ProjectPanelColumnNames, ProjectPanelFilter } from "../../views/project-panel/project-panel";
+import { ProjectPanelColumnNames, ProjectPanelFilter } from "../../views/project-panel/project-panel";
 import { RootState } from "../store";
 import { DataColumns } from "../../components/data-table/data-table";
 import { groupsService } from "../../services/services";
@@ -22,10 +22,6 @@ export class ProjectPanelMiddlewareService extends DataExplorerMiddlewareService
         super(id);
     }
 
-    getColumns() {
-        return columns;
-    }
-
     requestItems(api: MiddlewareAPI<Dispatch, RootState>) {
         const state = api.getState();
         const dataExplorer = state.dataExplorer[this.getId()];

diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index 2645504c612200b27dd3a2f7b778b85ba8f9174e..6449bf8d5697ac75b1204e3d3e361e4eb95ef86d 100644 (file)
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -10,9 +10,11 @@ import { Dispatch } from "redux";
 import { dataExplorerActions } from "../../store/data-explorer/data-explorer-action";
 import { DataColumn } from "../../components/data-table/data-column";
 import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters";
+import { DataColumns } from "../../components/data-table/data-table";
 
 interface Props {
     id: string;
+    columns: DataColumns<any>;
     onRowClick: (item: any) => void;
     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: any) => void;
     onRowDoubleClick: (item: any) => void;
@@ -22,37 +24,40 @@ interface Props {
 const mapStateToProps = (state: RootState, { id }: Props) =>
     getDataExplorer(state.dataExplorer, id);
 
-const mapDispatchToProps = (dispatch: Dispatch, { id, onRowClick, onRowDoubleClick, onContextMenu }: Props) => ({
-    onSearch: (searchValue: string) => {
-        dispatch(dataExplorerActions.SET_SEARCH_VALUE({ id, searchValue }));
-    },
+const mapDispatchToProps = (dispatch: Dispatch, { id, columns, onRowClick, onRowDoubleClick, onContextMenu }: Props) => {
+    dispatch(dataExplorerActions.SET_COLUMNS({ id, columns }));
+    return {
+        onSearch: (searchValue: string) => {
+            dispatch(dataExplorerActions.SET_SEARCH_VALUE({ id, searchValue }));
+        },
 
-    onColumnToggle: (column: DataColumn<any>) => {
-        dispatch(dataExplorerActions.TOGGLE_COLUMN({ id, columnName: column.name }));
-    },
+        onColumnToggle: (column: DataColumn<any>) => {
+            dispatch(dataExplorerActions.TOGGLE_COLUMN({ id, columnName: column.name }));
+        },
 
-    onSortToggle: (column: DataColumn<any>) => {
-        dispatch(dataExplorerActions.TOGGLE_SORT({ id, columnName: column.name }));
-    },
+        onSortToggle: (column: DataColumn<any>) => {
+            dispatch(dataExplorerActions.TOGGLE_SORT({ id, columnName: column.name }));
+        },
 
-    onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<any>) => {
-        dispatch(dataExplorerActions.SET_FILTERS({ id, columnName: column.name, filters }));
-    },
+        onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<any>) => {
+            dispatch(dataExplorerActions.SET_FILTERS({ id, columnName: column.name, filters }));
+        },
 
-    onChangePage: (page: number) => {
-        dispatch(dataExplorerActions.SET_PAGE({ id, page }));
-    },
+        onChangePage: (page: number) => {
+            dispatch(dataExplorerActions.SET_PAGE({ id, page }));
+        },
 
-    onChangeRowsPerPage: (rowsPerPage: number) => {
-        dispatch(dataExplorerActions.SET_ROWS_PER_PAGE({ id, rowsPerPage }));
-    },
+        onChangeRowsPerPage: (rowsPerPage: number) => {
+            dispatch(dataExplorerActions.SET_ROWS_PER_PAGE({ id, rowsPerPage }));
+        },
 
-    onRowClick,
+        onRowClick,
 
-    onRowDoubleClick,
+        onRowDoubleClick,
 
-    onContextMenu,
-});
+        onContextMenu,
+    };
+};
 
 export const DataExplorer = connect(mapStateToProps, mapDispatchToProps)(DataExplorerComponent);
 

diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx
index 92d8c392819db5767886280569981ab037144a27..f99afecb4cde7823d015d67ee278c14dab870b5b 100644 (file)
--- a/src/views/favorite-panel/favorite-panel.tsx
+++ b/src/views/favorite-panel/favorite-panel.tsx
@@ -146,6 +146,7 @@ export const FavoritePanel = withStyles(styles)(
             render() {
                 return <DataExplorer
                     id={FAVORITE_PANEL_ID}
+                    columns={columns}
                     onRowClick={this.props.onItemClick}
                     onRowDoubleClick={this.props.onItemDoubleClick}
                     onContextMenu={this.props.onContextMenu}

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index d48890b7254f20cbbc385c5cbe3f61e5728805e1..b6985a935e85b332b65d3df01175abaac9857a84 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -159,6 +159,7 @@ export const ProjectPanel = withStyles(styles)(
                     </div>
                     <DataExplorer
                         id={PROJECT_PANEL_ID}
+                        columns={columns}
                         onRowClick={this.props.onItemClick}
                         onRowDoubleClick={this.props.onItemDoubleClick}
                         onContextMenu={this.props.onContextMenu}