X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/69a166d7f4e7768cfa79c133b45b3e6f7601e9b7..eb909803c6fe3c99894ac402a88ea7cbc114f66b:/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 ac4b151faa..f0075558df 100644 --- a/src/views-components/details-panel/details-panel.tsx +++ b/src/views-components/details-panel/details-panel.tsx @@ -3,149 +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 Grid from '@material-ui/core/Grid'; +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, + }, +}); -class DetailsPanel extends React.Component, {}> { - state = { - tabsValue: 0, - }; +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 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({ tabsValue: value }); - } - - render() { - const { classes, toggleDrawer, isOpened } = this.props; - const { tabsValue } = this.state; - return ( -
- toggleDrawer(false)} - classes={{ - paper: classes.drawerPaper - }}> - {/* className={classnames([classes.root, { [classes.active]: isActive }])} */} - - - - Tutorial pipeline - - toggleDrawer(false)}> - - - - - - - - - {tabsValue === 0 && - - -

Type

-

Size

-

Location

-

Owner

- - -

Process

-

---

-

Projects

-

me

- - - } - {tabsValue === 1 && - - -

Type

-

Size

-

Location

-

Owner

- - -

Process

-

---

-

Projects

-

me

- - - } - -
- ); +const mapDispatchToProps = (dispatch: Dispatch) => ({ + onCloseDrawer: () => { + dispatch(detailsPanelActions.TOGGLE_DETAILS_PANEL()); } +}); +export interface DetailsPanelDataProps { + onCloseDrawer: () => void; + isOpened: boolean; + item: DetailsData; } -type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' - | 'tabsIndicator' | 'tabRoot' | 'tabContainer' | 'tabSelected' | 'gridLabel'; +type DetailsPanelProps = DetailsPanelDataProps & WithStyles; -const drawerWidth = 320; -const purple = '#692498'; -const styles: StyleRulesCallback = (theme: Theme) => ({ - container: { - width: 0, - position: 'relative', - height: 'auto', - transition: 'width 0.5s ease', - '&$opened': { - width: drawerWidth - } - }, - opened: {}, - drawerPaper: { - position: 'relative', - width: drawerWidth - }, - headerContainer: { - color: '#A1A1A1', - margin: `${theme.spacing.unit}px 0` - }, - tabsIndicator: { - backgroundColor: purple - }, - tabRoot: { - color: '#333333', - '&$tabSelected': { - fontWeight: 700, - color: purple - } - }, - tabContainer: { - padding: theme.spacing.unit * 3 - }, - tabSelected: {}, - gridLabel: { - color: '#999999', - } -}); +export const DetailsPanel = withStyles(styles)( + connect(mapStateToProps, mapDispatchToProps)( + class extends React.Component { + state = { + tabsValue: 0 + }; + + handleChange = (event: any, value: boolean) => { + this.setState({ tabsValue: value }); + } -export default withStyles(styles)(DetailsPanel); \ No newline at end of file + render() { + const { classes, isOpened } = this.props; + return ( + + + {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} + + ; + } + } + ) +);