X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/a080578919155fc6f6d1be2f966951b629ae5b45..dee0cb67a02c25f0f3174681579d0898d880caa3:/src/views-components/details-panel/details-panel.tsx diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx index 20d3843f..8244e15f 100644 --- a/src/views-components/details-panel/details-panel.tsx +++ b/src/views-components/details-panel/details-panel.tsx @@ -3,77 +3,92 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core'; +import { IconButton, Tabs, Tab, Typography, Grid, Tooltip } from '@material-ui/core'; import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; -import { ArvadosTheme } from '../../common/custom-theme'; +import { Transition } from 'react-transition-group'; +import { ArvadosTheme } from '~/common/custom-theme'; import * as classnames from "classnames"; import { connect } from 'react-redux'; -import { RootState } from '../../store/store'; -import { detailsPanelActions } from "../../store/details-panel/details-panel-action"; -import { CloseIcon } from '../../components/icon/icon'; -import { EmptyResource } from '../../models/empty'; +import { RootState } from '~/store/store'; +import { CloseIcon } from '~/components/icon/icon'; +import { EmptyResource } from '~/models/empty'; import { Dispatch } from "redux"; -import { ResourceKind } from "../../models/resource"; +import { ResourceKind } from "~/models/resource"; import { ProjectDetails } from "./project-details"; import { CollectionDetails } from "./collection-details"; import { ProcessDetails } from "./process-details"; import { EmptyDetails } from "./empty-details"; import { DetailsData } from "./details-data"; -import { DetailsResource } from "../../models/details"; +import { DetailsResource } from "~/models/details"; +import { getResource } from '~/store/resources/resources'; +import { toggleDetailsPanel, SLIDE_TIMEOUT } from '~/store/details-panel/details-panel-action'; +import { FileDetails } from '~/views-components/details-panel/file-details'; +import { getNode } from '~/models/tree'; -type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer'; +type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer'; -const drawerWidth = 320; +const DRAWER_WIDTH = 320; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ - container: { + root: { + background: theme.palette.background.paper, + borderLeft: `1px solid ${theme.palette.divider}`, + height: '100%', + overflow: 'hidden', + transition: `width ${SLIDE_TIMEOUT}ms ease`, width: 0, - position: 'relative', - height: 'auto', - transition: 'width 0.5s ease', - '&$opened': { - width: drawerWidth - } }, - opened: {}, - drawerPaper: { - position: 'relative', - width: drawerWidth + opened: { + width: DRAWER_WIDTH, + }, + container: { + maxWidth: 'none', + width: DRAWER_WIDTH, }, headerContainer: { color: theme.palette.grey["600"], margin: `${theme.spacing.unit}px 0`, - textAlign: 'center' + textAlign: 'center', }, headerIcon: { - fontSize: "34px" + fontSize: '2.125rem', }, tabContainer: { - padding: theme.spacing.unit * 3 - } + overflow: 'auto', + padding: theme.spacing.unit * 1, + }, }); -const getItem = (resource: DetailsResource): DetailsData => { - const res = resource || { kind: undefined, name: 'Projects' }; - switch (res.kind) { - case ResourceKind.PROJECT: - return new ProjectDetails(res); - case ResourceKind.COLLECTION: - return new CollectionDetails(res); - case ResourceKind.PROCESS: - return new ProcessDetails(res); - default: - return new EmptyDetails(res as EmptyResource); +const EMPTY_RESOURCE: EmptyResource = { kind: undefined, name: 'Projects' }; + +const getItem = (res: DetailsResource): DetailsData => { + if ('kind' in res) { + switch (res.kind) { + case ResourceKind.PROJECT: + return new ProjectDetails(res); + case ResourceKind.COLLECTION: + return new CollectionDetails(res); + case ResourceKind.PROCESS: + return new ProcessDetails(res); + default: + return new EmptyDetails(res); + } + } else { + return new FileDetails(res); } }; -const mapStateToProps = ({ detailsPanel }: RootState) => ({ - isOpened: detailsPanel.isOpened, - item: getItem(detailsPanel.item as DetailsResource) -}); +const mapStateToProps = ({ detailsPanel, resources, collectionPanelFiles }: RootState) => { + const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource | undefined; + const file = getNode(detailsPanel.resourceUuid)(collectionPanelFiles); + return { + isOpened: detailsPanel.isOpened, + item: getItem(resource || (file && file.value) || EMPTY_RESOURCE), + }; +}; const mapDispatchToProps = (dispatch: Dispatch) => ({ onCloseDrawer: () => { - dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); + dispatch(toggleDetailsPanel()); } }); @@ -96,51 +111,68 @@ export const DetailsPanel = withStyles(styles)( this.setState({ tabsValue: value }); } - renderTabContainer = (children: React.ReactElement) => - - {children} - - render() { - const { classes, onCloseDrawer, isOpened, item } = this.props; - const { tabsValue } = this.state; + const { classes, isOpened } = this.props; return ( - - - - - - {item.getIcon(classes.headerIcon)} - - - - {item.getTitle()} - - - - - {} - - - - - - - - - {tabsValue === 0 && this.renderTabContainer( - - {item.getDetails()} - - )} - {tabsValue === 1 && this.renderTabContainer( - - )} - - + + + {this.renderContent()} + + ); } + + renderContent() { + const { classes, onCloseDrawer, item } = this.props; + const { tabsValue } = this.state; + return + + + {item.getIcon(classes.headerIcon)} + + + + + {item.getTitle()} + + + + + + + + + + + + + + + + + {tabsValue === 0 + ? item.getDetails() + : null} + + ; + } } ) );