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>
if (getState().detailsPanel.isOpened) {
switch(extractUuidKind(uuid)) {
case ResourceKind.COLLECTION:
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));
dispatch(detailsPanelActions.LOAD_DETAILS_PANEL(uuid));
};
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: Dispatch) => {
- dispatch<any>(loadDetailsPanel(uuid));
dispatch(detailsPanelActions.OPEN_DETAILS_PANEL(tabNr));
dispatch(detailsPanelActions.OPEN_DETAILS_PANEL(tabNr));
+ if (uuid !== undefined) {
+ dispatch<any>(loadDetailsPanel(uuid));
+ }
};
export const openProjectPropertiesDialog = () =>
};
export const openProjectPropertiesDialog = () =>
includeOldVersions: true,
order: new OrderBuilder<CollectionResource>().addDesc("version").getOrder()
});
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) =>
};
export const deleteProjectProperty = (key: string, value: string) =>
import { DetailsData } from "./details-data";
import { DetailsResource } from "~/models/details";
import { getResource } from '~/store/resources/resources';
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';
import { FileDetails } from '~/views-components/details-panel/file-details';
import { getNode } from '~/models/tree';
const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
return {
isOpened: detailsPanel.isOpened,
const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles);
return {
isOpened: detailsPanel.isOpened,
+ tabNr: detailsPanel.tabNr,
item: getItem(resource || (file && file.value) || EMPTY_RESOURCE),
};
};
item: getItem(resource || (file && file.value) || EMPTY_RESOURCE),
};
};
const mapDispatchToProps = (dispatch: Dispatch) => ({
onCloseDrawer: () => {
dispatch<any>(toggleDetailsPanel());
const mapDispatchToProps = (dispatch: Dispatch) => ({
onCloseDrawer: () => {
dispatch<any>(toggleDetailsPanel());
+ },
+ setActiveTab: (tabNr: number) => {
+ dispatch<any>(openDetailsPanel(undefined, tabNr));
+ },
});
export interface DetailsPanelDataProps {
onCloseDrawer: () => void;
});
export interface DetailsPanelDataProps {
onCloseDrawer: () => void;
+ setActiveTab: (tabNr: number) => void;
export const DetailsPanel = withStyles(styles)(
connect(mapStateToProps, mapDispatchToProps)(
class extends React.Component<DetailsPanelProps> {
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);
- const { classes, onCloseDrawer, item } = this.props;
- const { tabsValue } = this.state;
+ const { classes, onCloseDrawer, item, tabNr } = this.props;
return <Grid
container
direction="column"
return <Grid
container
direction="column"
</Grid>
</Grid>
<Grid item>
</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} >
{ 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)}
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 { 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';
| 'filesCard'
| 'iconHeader'
| 'tag'
| 'filesCard'
| 'iconHeader'
| 'tag'
flexFlow: 'column',
height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
},
flexFlow: 'column',
height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
},
+ button: {
+ cursor: 'pointer'
+ },
filesCard: {
marginBottom: theme.spacing.unit * 2,
flex: 1,
filesCard: {
marginBottom: theme.spacing.unit * 2,
flex: 1,
<Typography variant="caption">
{item.description}
</Typography>
<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' />
{(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' />
-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 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 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}
return <Grid container>
<Grid item xs={12} md={mdSize}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
</Grid>
}
<Grid item xs={12} md={mdSize}>
</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)} />
</Grid>
<Grid item xs={12} md={mdSize}>
<DetailsAttribute label='Created at' value={formatDate(item.createdAt)} />