From b7f96fb678f9b48c3762e0c1ab29157b11bda869 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas@di-pentima.com.ar>
Date: Fri, 13 Nov 2020 19:50:04 -0300
Subject: [PATCH] 13494: Allows the user to open the versions tab by clicking
 on the version nr.

This is done by syncing the details panel component state with the general app
state where we currently store the active tab number.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>
---
 .../details-panel/details-panel-action.ts     | 11 +++++---
 .../details-panel/details-panel.tsx           | 28 +++++++++----------
 .../collection-panel/collection-panel.tsx     | 24 ++++++++++++----
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/store/details-panel/details-panel-action.ts b/src/store/details-panel/details-panel-action.ts
index 5d3133ca..69b69d3b 100644
--- a/src/store/details-panel/details-panel-action.ts
+++ b/src/store/details-panel/details-panel-action.ts
@@ -37,7 +37,8 @@ export const loadDetailsPanel = (uuid: string) =>
         if (getState().detailsPanel.isOpened) {
             switch(extractUuidKind(uuid)) {
                 case ResourceKind.COLLECTION:
-                    dispatch<any>(refreshCollectionVersionsList(uuid));
+                    const c = getResource<CollectionResource>(uuid)(getState().resources);
+                    dispatch<any>(refreshCollectionVersionsList(c!.currentVersionUuid));
                     break;
                 default:
                     break;
@@ -46,10 +47,12 @@ export const loadDetailsPanel = (uuid: string) =>
         dispatch(detailsPanelActions.LOAD_DETAILS_PANEL(uuid));
     };
 
-export const openDetailsPanel = (uuid: string, tabNr: number = 0) =>
+export const openDetailsPanel = (uuid?: string, tabNr: number = 0) =>
     (dispatch: Dispatch) => {
-        dispatch<any>(loadDetailsPanel(uuid));
         dispatch(detailsPanelActions.OPEN_DETAILS_PANEL(tabNr));
+        if (uuid !== undefined) {
+            dispatch<any>(loadDetailsPanel(uuid));
+        }
     };
 
 export const openProjectPropertiesDialog = () =>
@@ -66,7 +69,7 @@ export const refreshCollectionVersionsList = (uuid: string) =>
             includeOldVersions: true,
             order: new OrderBuilder<CollectionResource>().addDesc("version").getOrder()
         });
-        dispatch(resourcesActions.SET_RESOURCES(versions.items.slice(1)));
+        dispatch(resourcesActions.SET_RESOURCES(versions.items));
     };
 
 export const deleteProjectProperty = (key: string, value: string) =>
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index bf6e9a4e..fbe9ccc6 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -21,7 +21,7 @@ import { EmptyDetails } from "./empty-details";
 import { DetailsData } from "./details-data";
 import { DetailsResource } from "~/models/details";
 import { getResource } from '~/store/resources/resources';
-import { toggleDetailsPanel, SLIDE_TIMEOUT } from '~/store/details-panel/details-panel-action';
+import { toggleDetailsPanel, SLIDE_TIMEOUT, openDetailsPanel } from '~/store/details-panel/details-panel-action';
 import { FileDetails } from '~/views-components/details-panel/file-details';
 import { getNode } from '~/models/tree';
 
@@ -82,6 +82,7 @@ const mapStateToProps = ({ detailsPanel, resources, collectionPanelFiles }: Root
     const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
     return {
         isOpened: detailsPanel.isOpened,
+        tabNr: detailsPanel.tabNr,
         item: getItem(resource || (file && file.value) || EMPTY_RESOURCE),
     };
 };
@@ -89,12 +90,17 @@ const mapStateToProps = ({ detailsPanel, resources, collectionPanelFiles }: Root
 const mapDispatchToProps = (dispatch: Dispatch) => ({
     onCloseDrawer: () => {
         dispatch<any>(toggleDetailsPanel());
-    }
+    },
+    setActiveTab: (tabNr: number) => {
+        dispatch<any>(openDetailsPanel(undefined, tabNr));
+    },
 });
 
 export interface DetailsPanelDataProps {
     onCloseDrawer: () => void;
+    setActiveTab: (tabNr: number) => void;
     isOpened: boolean;
+    tabNr: number;
     item: DetailsData;
 }
 
@@ -103,12 +109,8 @@ type DetailsPanelProps = DetailsPanelDataProps & WithStyles<CssRules>;
 export const DetailsPanel = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
         class extends React.Component<DetailsPanelProps> {
-            state = {
-                tabsValue: 0
-            };
-
-            handleChange = (event: any, value: boolean) => {
-                this.setState({ tabsValue: value });
+            handleChange = (event: any, value: number) => {
+                this.props.setActiveTab(value);
             }
 
             render() {
@@ -129,8 +131,7 @@ export const DetailsPanel = withStyles(styles)(
             }
 
             renderContent() {
-                const { classes, onCloseDrawer, item } = this.props;
-                const { tabsValue } = this.state;
+                const { classes, onCloseDrawer, item, tabNr } = this.props;
                 return <Grid
                     container
                     direction="column"
@@ -161,16 +162,15 @@ export const DetailsPanel = withStyles(styles)(
                         </Grid>
                     </Grid>
                     <Grid item>
-                        <Tabs value={tabsValue} onChange={this.handleChange}>
+                        <Tabs onChange={this.handleChange}
+                            value={(item.getTabLabels().length >= tabNr+1) ? tabNr : 0}>
                             { item.getTabLabels().map((tabLabel, idx) =>
                                 <Tab key={`tab-label-${idx}`} disableRipple label={tabLabel} />)
                             }
                         </Tabs>
                     </Grid>
                     <Grid item xs className={this.props.classes.tabContainer} >
-                    {tabsValue !== undefined
-                        ? item.getDetails(tabsValue)
-                        : null}
+                        {item.getDetails(tabNr)}
                     </Grid>
                 </Grid >;
             }
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index f6df6212..0799c5cc 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -32,8 +32,10 @@ import { getUserUuid } from '~/common/getuser';
 import { getProgressIndicator } from '~/store/progress-indicator/progress-indicator-reducer';
 import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
 import { Link } from 'react-router-dom';
+import { Link as ButtonLink } from '@material-ui/core';
 
 type CssRules = 'root'
+    | 'button'
     | 'filesCard'
     | 'iconHeader'
     | 'tag'
@@ -51,6 +53,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         flexFlow: 'column',
         height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
     },
+    button: {
+        cursor: 'pointer'
+    },
     filesCard: {
         marginBottom: theme.spacing.unit * 2,
         flex: 1,
@@ -167,7 +172,7 @@ export const CollectionPanel = withStyles(styles)(
                                         <Typography variant="caption">
                                             {item.description}
                                         </Typography>
-                                        <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} />
+                                        <CollectionDetailsAttributes item={item} classes={classes} twoCol={true} showVersionBrowser={() => dispatch<any>(openDetailsPanel(item.uuid, 1))} />
                                         {(item.properties.container_request || item.properties.containerRequest) &&
                                             <span onClick={() => dispatch<any>(navigateToProcess(item.properties.container_request || item.properties.containerRequest))}>
                                                 <DetailsAttribute classLabel={classes.link} label='Link to process' />
@@ -278,11 +283,12 @@ export const CollectionPanel = withStyles(styles)(
     )
 );
 
-export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string> }) => {
+export const CollectionDetailsAttributes = (props: { item: CollectionResource, twoCol: boolean, classes?: Record<CssRules, string>, showVersionBrowser?: () => void }) => {
     const item = props.item;
-    const classes = props.classes || { label: '', value: '' };
+    const classes = props.classes || { label: '', value: '', button: '' };
     const isOldVersion = item && item.currentVersionUuid !== item.uuid;
     const mdSize = props.twoCol ? 6 : 12;
+    const showVersionBrowser = props.showVersionBrowser;
     return <Grid container>
         <Grid item xs={12} md={mdSize}>
             <DetailsAttribute classLabel={classes.label} classValue={classes.value}
@@ -307,8 +313,16 @@ export const CollectionDetailsAttributes = (props: { item: CollectionResource, t
             </Grid>
         }
         <Grid item xs={12} md={mdSize}>
-            <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                label='Version number' value={item.version} />
+            <DetailsAttribute
+                classLabel={classes.label} classValue={classes.value}
+                label='Version number'
+                value={ showVersionBrowser !== undefined
+                    ? <ButtonLink underline='none' className={classes.button} onClick={() => showVersionBrowser()}>
+                        {item.version}
+                    </ButtonLink>
+                    : item.version
+                }
+            />
         </Grid>
         <Grid item xs={12} md={mdSize}>
             <DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />
-- 
2.30.2