X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/3127f7c6b7c0a68981598ffb83efa7ae0b41ae7c..0b8ff9b1183bcbee9672058c851fa4265f98afab:/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 16c1f92f..f0075558 100644 --- a/src/views-components/details-panel/details-panel.tsx +++ b/src/views-components/details-panel/details-panel.tsx @@ -3,107 +3,169 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import Drawer from '@material-ui/core/Drawer'; -import IconButton from "@material-ui/core/IconButton"; -import CloseIcon from '@material-ui/icons/Close'; -import { StyleRulesCallback, WithStyles, withStyles, Theme } from "@material-ui/core/styles"; -import Tabs from '@material-ui/core/Tabs'; -import Tab from '@material-ui/core/Tab'; -import Typography from '@material-ui/core/Typography'; +import { IconButton, Tabs, Tab, Typography, Grid, Tooltip } from '@material-ui/core'; +import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; +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 { Dispatch } from "redux"; +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 { getResource } from '~/store/resources/resources'; -function TabContainer(props: any) { - return ( - - {props.children} - - ); -} +type CssRules = 'root' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer'; -export interface DetailsPanelProps { - toggleDrawer: (isOpened: boolean) => void; - isOpened: boolean; -} +const DRAWER_WIDTH = 320; +const SLIDE_TIMEOUT = 500; +const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ + root: { + background: theme.palette.background.paper, + borderLeft: `1px solid ${theme.palette.divider}`, + height: '100%', + overflow: 'hidden', + transition: `width ${SLIDE_TIMEOUT}ms ease`, + width: 0, + }, + opened: { + width: DRAWER_WIDTH, + }, + container: { + maxWidth: 'none', + width: DRAWER_WIDTH, + }, + headerContainer: { + color: theme.palette.grey["600"], + margin: `${theme.spacing.unit}px 0`, + textAlign: 'center', + }, + headerIcon: { + fontSize: '2.125rem', + }, + tabContainer: { + overflow: 'auto', + padding: theme.spacing.unit * 3, + }, +}); + +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); + } +}; -class DetailsPanel extends React.Component, {}> { - state = { - value: 0, - }; +const mapStateToProps = ({ detailsPanel, resources }: RootState) => { + const resource = getResource(detailsPanel.resourceUuid)(resources) as DetailsResource; + return { + isOpened: detailsPanel.isOpened, + item: getItem(resource) + }; +}; - handleChange = (event: any, value: boolean) => { - this.setState({ value }); - } - - render() { - const { classes, toggleDrawer, isOpened } = this.props; - const { value } = this.state; - return ( -
- toggleDrawer(false)} - classes={{ - paper: classes.drawerPaper - }}> -

Tutorial pipeline

- toggleDrawer(false)}> - - - - - - - {value === 0 && - Item One - } - {value === 1 && - Item Two - } - -
- ); +const mapDispatchToProps = (dispatch: Dispatch) => ({ + onCloseDrawer: () => { + dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); } +}); +export interface DetailsPanelDataProps { + onCloseDrawer: () => void; + isOpened: boolean; + item: DetailsData; } -type CssRules = 'drawerPaper' | 'container' | 'title' | 'tabsRoot' | 'tabsIndicator' | 'tabRoot' | 'tabSelected'; +type DetailsPanelProps = DetailsPanelDataProps & WithStyles; -const drawerWidth = 320; -const styles: StyleRulesCallback = (theme: Theme) => ({ - container: { - position: 'relative', - height: 'auto' - }, - drawerPaper: { - position: 'relative', - width: drawerWidth - }, - title: { - padding: '10px 0px', - fontSize: '20px', - fontWeight: 400, - fontStyle: 'normal' - }, - tabsRoot: { - borderBottom: '1px solid transparent', - }, - tabsIndicator: { - backgroundColor: 'rgb(106, 27, 154)', - }, - tabRoot: { - fontSize: '13px', - fontWeight: 400, - color: '#333333', - '&$tabSelected': { - fontWeight: 700, - color: 'rgb(106, 27, 154)' - }, - }, - tabSelected: {} -}); +export const DetailsPanel = withStyles(styles)( + connect(mapStateToProps, mapDispatchToProps)( + class extends React.Component { + state = { + tabsValue: 0 + }; + + handleChange = (event: any, value: boolean) => { + this.setState({ tabsValue: value }); + } + + render() { + const { classes, isOpened } = this.props; + return ( + + + {this.renderContent()} + + + ); + } -export default withStyles(styles)(DetailsPanel); \ No newline at end of file + renderContent() { + const { classes, onCloseDrawer, item } = this.props; + const { tabsValue } = this.state; + return + + + {item.getIcon(classes.headerIcon)} + + + + + {item.getTitle()} + + + + + + + + + + + + + + + + + {tabsValue === 0 + ? item.getDetails() + : null} + + ; + } + } + ) +);