21224: details panel now displays correct item Arvados-DCO-1.1-Signed-off-by: Lisa...

diff --git a/services/workbench2/src/components/data-explorer/data-explorer.tsx b/services/workbench2/src/components/data-explorer/data-explorer.tsx
index 22c53460e522633e90954059c08127794ad0bec9..c1b2fbe5875feca330ca2b05c323b69edfbf25e2 100644 (file)
--- a/services/workbench2/src/components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/components/data-explorer/data-explorer.tsx
@@ -116,6 +116,7 @@ interface DataExplorerActionProps<T> {
     extractKey?: (item: T) => React.Key;
     toggleMSToolbar: (isVisible: boolean) => void;
     setCheckedListOnStore: (checkedList: TCheckedList) => void;
+    setSelectedUuid: (checkedList: TCheckedList) => void;
 }
 
 type DataExplorerProps<T> = DataExplorerDataProps<T> & DataExplorerActionProps<T> & WithStyles<CssRules> & MPVPanelProps;
@@ -324,6 +325,7 @@ export const DataExplorer = withStyles(styles)(
                                 toggleMSToolbar={toggleMSToolbar}
                                 setCheckedListOnStore={setCheckedListOnStore}
                                 checkedList={checkedList}
+                                setSelectedUuid={this.props.setSelectedUuid}
                             />
                         </Grid>
                         <Grid

diff --git a/services/workbench2/src/components/data-table/data-table.tsx b/services/workbench2/src/components/data-table/data-table.tsx
index 9c1641dc879b7735644cdbfc1326c87e97e88f8d..2edd736b78565143a8144e7bcfd1892b96ce0170 100644 (file)
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -29,6 +29,7 @@ import { SvgIconProps } from "@material-ui/core/SvgIcon";
 import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import { createTree } from "models/tree";
 import { DataTableMultiselectOption } from "../data-table-multiselect-popover/data-table-multiselect-popover";
+import { isExactlyOneSelected } from "store/multiselect/multiselect-actions";
 
 export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
@@ -54,6 +55,7 @@ export interface DataTableDataProps<I> {
     toggleMSToolbar: (isVisible: boolean) => void;
     setCheckedListOnStore: (checkedList: TCheckedList) => void;
     checkedList: TCheckedList;
+    setSelectedUuid: (checkedList: TCheckedList) => void;
 }
 
 type CssRules =
@@ -171,6 +173,9 @@ export const DataTable = withStyles(styles)(
             if (prevProps.currentRoute !== this.props.currentRoute) {
                 this.initializeCheckedList([])
             }
+            if (isExactlyOneSelected(prevProps.checkedList) !== isExactlyOneSelected(this.props.checkedList)) {
+                this.props.setSelectedUuid(this.props.checkedList)
+            }
         }
 
         componentWillUnmount(): void {

diff --git a/services/workbench2/src/store/details-panel/details-panel-action.ts b/services/workbench2/src/store/details-panel/details-panel-action.ts
index 1367d44613b8b785ca79eb16ba67ca3abc509557..28347e828e7d2093991a02d2c2297a0189d37a1f 100644 (file)
--- a/services/workbench2/src/store/details-panel/details-panel-action.ts
+++ b/services/workbench2/src/store/details-panel/details-panel-action.ts
@@ -13,6 +13,7 @@ import { FilterBuilder } from 'services/api/filter-builder';
 import { OrderBuilder } from 'services/api/order-builder';
 import { CollectionResource } from 'models/collection';
 import { extractUuidKind, ResourceKind } from 'models/resource';
+import { CLOSE_DRAWER } from 'views-components/details-panel/details-panel';
 
 export const SLIDE_TIMEOUT = 500;
 
@@ -67,19 +68,20 @@ export const refreshCollectionVersionsList = (uuid: string) =>
     };
 
 export const toggleDetailsPanel = (uuid: string = '') => (dispatch: Dispatch, getState: () => RootState) => {
-    const { detailsPanel, router }= getState()
-    // because of material-ui issue resizing details panel breaks tabs.
-    // triggering window resize event fixes that.
-    if(uuid !== detailsPanel.resourceUuid  && detailsPanel.isOpened){
+    const { detailsPanel }= getState()
+    const isTargetUuidNew = uuid !== detailsPanel.resourceUuid
+    if(isTargetUuidNew && uuid !== CLOSE_DRAWER && detailsPanel.isOpened){
         dispatch<any>(loadDetailsPanel(uuid));
     } else {
+        // because of material-ui issue resizing details panel breaks tabs.
+        // triggering window resize event fixes that.
         setTimeout(() => {
             window.dispatchEvent(new Event('resize'));
         }, SLIDE_TIMEOUT);
         startDetailsPanelTransition(dispatch)
         dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL());
         if (getState().detailsPanel.isOpened) {
-            dispatch<any>(loadDetailsPanel(getState().detailsPanel.resourceUuid));
+            dispatch<any>(loadDetailsPanel(isTargetUuidNew ? uuid : detailsPanel.resourceUuid));
         }
     }
     };

diff --git a/services/workbench2/src/store/multiselect/multiselect-reducer.tsx b/services/workbench2/src/store/multiselect/multiselect-reducer.tsx
index 9bcb46d018d0dea2a20071464719eb79322ea4e9..750d859d100f777fb5ad3bccb8730a0f8a649a63 100644 (file)
--- a/services/workbench2/src/store/multiselect/multiselect-reducer.tsx
+++ b/services/workbench2/src/store/multiselect/multiselect-reducer.tsx
@@ -5,7 +5,7 @@
 import { multiselectActionConstants } from "./multiselect-actions";
 import { TCheckedList } from "components/data-table/data-table";
 
-type MultiselectToolbarState = {
+export type MultiselectToolbarState = {
     isVisible: boolean;
     checkedList: TCheckedList;
     selectedUuid: string;

diff --git a/services/workbench2/src/views-components/data-explorer/data-explorer.tsx b/services/workbench2/src/views-components/data-explorer/data-explorer.tsx
index 9b11f2ad3a703d83c22f6eb53bc7b702b5ac6ad3..3de19481794cdf328c1cfda00f7108f41f403219 100644 (file)
--- a/services/workbench2/src/views-components/data-explorer/data-explorer.tsx
+++ b/services/workbench2/src/views-components/data-explorer/data-explorer.tsx
@@ -12,7 +12,8 @@ import { DataColumn } from "components/data-table/data-column";
 import { DataColumns, TCheckedList } from "components/data-table/data-table";
 import { DataTableFilters } from "components/data-table-filters/data-table-filters-tree";
 import { LAST_REFRESH_TIMESTAMP } from "components/refresh-button/refresh-button";
-import { toggleMSToolbar, setCheckedListOnStore } from "store/multiselect/multiselect-actions";
+import { toggleMSToolbar, setCheckedListOnStore, setSelectedUuid, isExactlyOneSelected } from "store/multiselect/multiselect-actions";
+import { DetailsPanelState } from "store/details-panel/details-panel-reducer";
 
 interface Props {
     id: string;
@@ -22,6 +23,26 @@ interface Props {
     extractKey?: (item: any) => React.Key;
 }
 
+const getCurrentItemUuid = (
+    currentRoute: string,
+    workflowPanelDetailsUuid: string,
+    isDetailsResourceChecked: boolean,
+    isOnlyOneSelected: boolean,
+    detailsPanel: DetailsPanelState,
+    multiselectSelectedUuid: string
+) => {
+    if(currentRoute === '/workflows') {
+        return workflowPanelDetailsUuid;
+    }
+    if(isDetailsResourceChecked && isOnlyOneSelected) {
+        return detailsPanel.resourceUuid;
+    }
+    if(!detailsPanel.isOpened){
+        return multiselectSelectedUuid;
+    }
+    return detailsPanel.resourceUuid;
+};
+
 const mapStateToProps = ({ progressIndicator, dataExplorer, router, multiselect, detailsPanel, properties}: RootState, { id }: Props) => {
     const progress = progressIndicator.find(p => p.id === id);
     const dataExplorerState = getDataExplorer(dataExplorer, id);
@@ -29,8 +50,7 @@ const mapStateToProps = ({ progressIndicator, dataExplorer, router, multiselect,
     const currentRefresh = localStorage.getItem(LAST_REFRESH_TIMESTAMP) || "";
     const isDetailsResourceChecked = multiselect.checkedList[detailsPanel.resourceUuid]
     const isOnlyOneSelected = Object.values(multiselect.checkedList).filter(x => x === true).length === 1;
-    const currentItemUuid =
-        currentRoute === '/workflows' ? properties.workflowPanelDetailsUuid : isDetailsResourceChecked && isOnlyOneSelected ? detailsPanel.resourceUuid : multiselect.selectedUuid;
+    const currentItemUuid = getCurrentItemUuid(currentRoute, properties.workflowPanelDetailsUuid, isDetailsResourceChecked, isOnlyOneSelected, detailsPanel, multiselect.selectedUuid);
     const isMSToolbarVisible = multiselect.isVisible;
     return {
         ...dataExplorerState,
@@ -86,6 +106,11 @@ const mapDispatchToProps = () => {
             dispatch<any>(setCheckedListOnStore(checkedList));
         },
 
+        setSelectedUuid: (checkedList: TCheckedList) => {
+            dispatch<any>(setSelectedUuid(isExactlyOneSelected(checkedList)))
+        },
+        
+
         onRowClick,
 
         onRowDoubleClick,

diff --git a/services/workbench2/src/views-components/details-panel/details-panel.tsx b/services/workbench2/src/views-components/details-panel/details-panel.tsx
index f4e0766d87014ff6d785d611f7aeb2e6d1b92936..c48f784638fca69427a645b2300d4fcae8e003bb 100644 (file)
--- a/services/workbench2/src/views-components/details-panel/details-panel.tsx
+++ b/services/workbench2/src/views-components/details-panel/details-panel.tsx
@@ -28,6 +28,8 @@ import { toggleDetailsPanel, SLIDE_TIMEOUT, openDetailsPanel } from 'store/detai
 import { FileDetails } from 'views-components/details-panel/file-details';
 import { getNode } from 'models/tree';
 import { resourceIsFrozen } from 'common/frozen-resources';
+import { DetailsPanelState } from 'store/details-panel/details-panel-reducer';
+import { MultiselectToolbarState } from 'store/multiselect/multiselect-reducer';
 
 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
 
@@ -83,10 +85,27 @@ const getItem = (res: DetailsResource): DetailsData => {
     }
 };
 
+const getCurrentItemUuid = (
+    isDetailsResourceChecked: boolean,
+    currentRoute: string,
+    detailsPanel: DetailsPanelState,
+    multiselect: MultiselectToolbarState,
+    currentRouteSplit: string[]
+) => {
+    if (isDetailsResourceChecked || currentRoute.includes('collections') || detailsPanel.isOpened) {
+        return detailsPanel.resourceUuid;
+    }
+    if (!!multiselect.selectedUuid) {
+        return multiselect.selectedUuid;
+    }
+    return currentRouteSplit[currentRouteSplit.length - 1];
+};
+
 const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, multiselect, router }: RootState) => {
-    const isDetailsResourceChecked = multiselect.checkedList[detailsPanel.resourceUuid]
+    const isDetailsResourceChecked = multiselect.checkedList[detailsPanel.resourceUuid] === true;
     const currentRoute = router.location ? router.location.pathname : "";
-    const currentItemUuid = isDetailsResourceChecked || currentRoute.includes('collections') ? detailsPanel.resourceUuid : multiselect.selectedUuid ? multiselect.selectedUuid : currentRoute.split('/')[2];
+    const currentRouteSplit = currentRoute.split('/');
+    const currentItemUuid = getCurrentItemUuid(isDetailsResourceChecked, currentRoute, detailsPanel, multiselect, currentRouteSplit);
     const resource = getResource(currentItemUuid)(resources) as DetailsResource | undefined;
     const file = resource
         ? undefined
@@ -107,6 +126,8 @@ const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles,
     };
 };
 
+export const CLOSE_DRAWER = 'CLOSE_DRAWER'
+
 const mapDispatchToProps = (dispatch: Dispatch) => ({
     onCloseDrawer: (currentItemId) => {
         dispatch<any>(toggleDetailsPanel(currentItemId));
@@ -164,7 +185,7 @@ export const DetailsPanel = withStyles(styles)(
             }
 
             renderContent() {
-                const { classes, onCloseDrawer, res, tabNr, authConfig, currentItemUuid } = this.props;
+                const { classes, onCloseDrawer, res, tabNr, authConfig } = this.props;
 
                 let shouldShowInlinePreview = false;
                 if (!('kind' in res)) {
@@ -201,7 +222,7 @@ export const DetailsPanel = withStyles(styles)(
                             </Tooltip>
                         </Grid>
                         <Grid item>
-                            <IconButton color="inherit" onClick={()=>onCloseDrawer(currentItemUuid)}>
+                            <IconButton color="inherit" onClick={()=>onCloseDrawer(CLOSE_DRAWER)}>
                                 <CloseIcon />
                             </IconButton>
                         </Grid>