merge changes

Feature #13765

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --cc src/views-components/details-panel/details-panel.tsx
index 13498f331776a43bf99d8b290f14255b5684fd05,6bf04c4f3263681050bc91defdbcbeda2216642c..b29e19027fb7a6bcaff3fe517f092a98683d426f
--- 1/src/views-components/details-panel/details-panel.tsx
--- 2/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@@ -13,15 -13,8 +13,15 @@@ import Tab from '@material-ui/core/Tab'
  import Typography from '@material-ui/core/Typography';
  import Grid from '@material-ui/core/Grid';
  import * as classnames from "classnames";
 +import { connect, Dispatch } from 'react-redux';
  import EmptyState from '../../components/empty-state/empty-state';
- import IconBase from '../../components/icon/icon';
 +import { RootState } from '../../store/store';
 +import actions from "../../store/details-panel/details-panel-action";
 +import { Resource } from '../../common/api/common-resource-service';
 +import { ResourceKind } from '../../models/kinds';
 +import { ProjectResource } from '../../models/project';
 +import { CollectionResource } from '../../models/collection';
+ import IconBase, { IconTypes } from '../../components/icon/icon';
  
  export interface DetailsPanelDataProps {
      onCloseDrawer: () => void;
@@@ -53,18 -46,24 +53,18 @@@ class DetailsPanel extends React.Compon
          return (
              <Typography component="div" className={classnames([classes.container, { [classes.opened]: isOpened }])}>
                  <Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
 -                                      <Typography component="div" className={classes.headerContainer}>
 -                                              <Grid container alignItems='center' justify='space-around'>
 -                            {renderHeader}
 -                            {/* TODO: renderHeader */}
 -                            <IconBase icon={IconTypes.PROCESS} />
 -                                                      <Typography variant="title">
 -                                                              Tutorial pipeline
 -                                                      </Typography>
 -                            {/* End */}
 +                    <Typography component="div" className={classes.headerContainer}>
 +                        <Grid container alignItems='center' justify='space-around'>
 +                            {header}
                              <IconButton color="inherit" onClick={onCloseDrawer}>
-                                 <IconBase icon='close' />
+                                 <IconBase icon={IconTypes.CLOSE} />
 -                                                      </IconButton>
 -                                              </Grid>
 -                                      </Typography>
 -                                      <Tabs value={tabsValue} onChange={this.handleChange}>
 -                                              <Tab disableRipple label="Details" />
 -                                              <Tab disableRipple label="Activity" />
 -                                      </Tabs>
 +                            </IconButton>
 +                        </Grid>
 +                    </Typography>
 +                    <Tabs value={tabsValue} onChange={this.handleChange}>
 +                        <Tab disableRipple label="Details" />
 +                        <Tab disableRipple label="Activity" />
 +                    </Tabs>
                      {tabsValue === 0 && this.renderTabContainer(
                          <Grid container direction="column">
                              {renderDetails}
@@@ -83,9 -82,9 +83,9 @@@
                      {tabsValue === 1 && this.renderTabContainer(
                          <Grid container direction="column">
                              {renderActivity}
-                             <EmptyState icon='announcement' message='Select a file or folder to view its details.' />
+                             <EmptyState icon={IconTypes.ANNOUNCEMENT} message='Select a file or folder to view its details.' />
                          </Grid>
 -                                      )}
 +                    )}
                  </Drawer>
              </Typography>
          );
@@@ -118,50 -117,10 +118,50 @@@ const styles: StyleRulesCallback<CssRul
              fontSize: "24px",
              color: theme.customs.colors.green700
          }
 -      },
 -      tabContainer: {
 -              padding: theme.spacing.unit * 3
 -      }
 +    },
 +    tabContainer: {
 +        padding: theme.spacing.unit * 3
 +    }
  });
  
 -export default withStyles(styles)(DetailsPanel);
 +const renderCollectionHeader = (collection: CollectionResource) =>
 +    <>
-         <IconBase icon="collection" />
++        <IconBase icon={IconTypes.COLLECTION} />
 +        <Typography variant="title">
 +            {collection.name}
 +        </Typography>
 +    </>;
 +
 +const renderProjectHeader = (project: ProjectResource) =>
 +    <>
-         <IconBase icon="project" />
++        <IconBase icon={IconTypes.FOLDER} />
 +        <Typography variant="title">
 +            {project.name}
 +        </Typography>
 +    </>;
 +
 +const renderHeader = (resource: Resource) => {
 +    switch(resource.kind) {
 +        case ResourceKind.Project:
 +            return renderProjectHeader(resource as ProjectResource);
 +        case ResourceKind.Collection:
 +            return renderCollectionHeader(resource as CollectionResource);
 +        default: 
 +            return null;
 +    }
 +};
 +
 +const mapStateToProps = ({detailsPanel}: RootState) => ({
 +    isOpened: detailsPanel.isOpened,
 +    header: detailsPanel.item ? renderHeader(detailsPanel.item) : null
 +});
 +
 +const mapDispatchToProps = (dispatch: Dispatch) => ({
 +    onCloseDrawer: () => {
 +        dispatch(actions.TOGGLE_DETAILS_PANEL());
 +    }
 +});
 +
 +const DetailsPanelContainer = connect(mapStateToProps, mapDispatchToProps)(DetailsPanel);
 +
 +export default withStyles(styles)(DetailsPanelContainer);