21224: details panel switches display reliably Arvados-DCO-1.1-Signed-off-by: Lisa...

[arvados.git] / services / workbench2 / src / views-components / details-panel / details-panel.tsx

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 e86d1bd477d4cb21592a5acde1d6409e8d4bc6a7..05fe53af6e22a0246069bc66dc098b516573b2e0 100644 (file)
--- a/services/workbench2/src/views-components/details-panel/details-panel.tsx
+++ b/services/workbench2/src/views-components/details-panel/details-panel.tsx
@@ -15,6 +15,7 @@ import { EmptyResource } from 'models/empty';
 import { Dispatch } from "redux";
 import { ResourceKind } from "models/resource";
 import { ProjectDetails } from "./project-details";
+import { RootProjectDetails } from './root-project-details';
 import { CollectionDetails } from "./collection-details";
 import { ProcessDetails } from "./process-details";
 import { EmptyDetails } from "./empty-details";
@@ -28,8 +29,6 @@ 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';
 import { CLOSE_DRAWER } from 'store/details-panel/details-panel-action';
 
 type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
@@ -67,7 +66,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' };
 
-const getItem = (res: DetailsResource): DetailsData => {
+const getItem = (res: DetailsResource, pathName: string): DetailsData => {
     if ('kind' in res) {
         switch (res.kind) {
             case ResourceKind.PROJECT:
@@ -78,36 +77,20 @@ const getItem = (res: DetailsResource): DetailsData => {
                 return new ProcessDetails(res);
             case ResourceKind.WORKFLOW:
                 return new WorkflowDetails(res);
+            case ResourceKind.USER:
+                if(pathName.includes('projects')) {
+                    return new RootProjectDetails(res);
+                }
             default:
-                return new EmptyDetails(res);
+                return new EmptyDetails(res as EmptyResource);
         }
     } else {
         return new FileDetails(res);
     }
 };
 
-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] === true;
-    const currentRoute = router.location ? router.location.pathname : "";
-    const currentRouteSplit = currentRoute.split('/');
-    const currentItemUuid = getCurrentItemUuid(isDetailsResourceChecked, currentRoute, detailsPanel, multiselect, currentRouteSplit);
-    const resource = getResource(currentItemUuid)(resources) as DetailsResource | undefined;
+const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles, selectedResourceUuid, properties, router }: RootState) => {
+    const resource = getResource(selectedResourceUuid ?? properties.currentRouteUuid)(resources) as DetailsResource | undefined;
     const file = resource
         ? undefined
         : getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
@@ -123,12 +106,10 @@ const mapStateToProps = ({ auth, detailsPanel, resources, collectionPanelFiles,
         isOpened: detailsPanel.isOpened,
         tabNr: detailsPanel.tabNr,
         res: resource || (file && file.value) || EMPTY_RESOURCE,
-        currentItemUuid
+        pathname: router.location ? router.location.pathname : "",
     };
 };
 
-// export const CLOSE_DRAWER = 'CLOSE_DRAWER'
-
 const mapDispatchToProps = (dispatch: Dispatch) => ({
     onCloseDrawer: (currentItemId) => {
         dispatch<any>(toggleDetailsPanel(currentItemId));
@@ -146,7 +127,7 @@ export interface DetailsPanelDataProps {
     tabNr: number;
     res: DetailsResource;
     isFrozen: boolean;
-    currentItemUuid: string;
+    pathname: string;
 }
 
 type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
@@ -186,8 +167,7 @@ export const DetailsPanel = withStyles(styles)(
             }
 
             renderContent() {
-                const { classes, onCloseDrawer, res, tabNr, authConfig } = this.props;
-
+                const { classes, onCloseDrawer, res, tabNr, authConfig, pathname } = this.props;
                 let shouldShowInlinePreview = false;
                 if (!('kind' in res)) {
                     shouldShowInlinePreview = isInlineFileUrlSafe(
@@ -197,7 +177,7 @@ export const DetailsPanel = withStyles(styles)(
                     ) || authConfig.clusterConfig.Collections.TrustAllContent;
                 }
 
-                const item = getItem(res);
+                const item = getItem(res, pathname);
                 return <Grid
                     data-cy='details-panel'
                     container