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>

diff --git a/src/store/details-panel/details-panel-action.ts b/src/store/details-panel/details-panel-action.ts
index 5d3133caee6e8f84516d689515fc648ec402eee2..69b69d3b490277ae2be794d9dbaa7af83cc2c107 100644 (file)
--- 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 bf6e9a4eba3bbe0b4ff1ccc991033aa5100c581d..fbe9ccc64342fb698d6a719cc94b79f81cbfea18 100644 (file)
--- 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 f6df621284e71fe28e28a4f7eec5d9042ae68738..0799c5cce5eb6984f581889e2e444200deaaed46 100644 (file)
--- 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)} />