services/workbench2/src/views-components/details-panel/root-project-details.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { connect } from 'react-redux';
   7 import { ProjectsIcon } from 'components/icon/icon';
   8 import { formatDate } from 'common/formatters';
   9 import { DetailsData } from "./details-data";
  10 import { DetailsAttribute } from "components/details-attribute/details-attribute";
  11 import { CustomStyleRulesCallback } from 'common/custom-theme';
  12 import { withStyles, WithStyles } from '@material-ui/core';
  13 import { ArvadosTheme } from 'common/custom-theme';
  14 import { Dispatch } from 'redux';
  15 import { openProjectUpdateDialog, ProjectUpdateFormDialogData } from 'store/projects/project-update-actions';
  16 import { RootState } from 'store/store';
  17 import { ResourcesState } from 'store/resources/resources';
  18 import { UserResource } from 'models/user';
  19 import { UserResourceFullName } from 'views-components/data-explorer/renderers';
  20
  21 export class RootProjectDetails extends DetailsData<UserResource> {
  22     getIcon(className?: string) {
  23         return <ProjectsIcon className={className} />;
  24     }
  25
  26     getDetails() {
  27         return <RootProjectDetailsComponent rootProject={this.item} />;
  28     }
  29 }
  30
  31 type CssRules = 'tag' | 'editIcon' | 'editButton';
  32
  33 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  34     tag: {
  35         marginRight: theme.spacing.unit / 2,
  36         marginBottom: theme.spacing.unit / 2,
  37     },
  38     editIcon: {
  39         paddingRight: theme.spacing.unit / 2,
  40         fontSize: '1.125rem',
  41     },
  42     editButton: {
  43         boxShadow: 'none',
  44         padding: '2px 10px 2px 5px',
  45         fontSize: '0.75rem'
  46     },
  47 });
  48
  49 interface RootProjectDetailsComponentDataProps {
  50     rootProject: any;
  51 }
  52
  53 const mapStateToProps = (state: RootState): { resources: ResourcesState } => {
  54     return {
  55         resources: state.resources
  56     };
  57 };
  58
  59 const mapDispatchToProps = (dispatch: Dispatch) => ({
  60     onClick: (prj: ProjectUpdateFormDialogData) =>
  61         () => dispatch<any>(openProjectUpdateDialog(prj)),
  62 });
  63
  64 type RootProjectDetailsComponentProps = RootProjectDetailsComponentDataProps & WithStyles<CssRules>;
  65
  66 const RootProjectDetailsComponent = connect(mapStateToProps, mapDispatchToProps)(
  67     withStyles(styles)(
  68         ({ rootProject}: RootProjectDetailsComponentProps & { resources: ResourcesState }) => <div>
  69             <DetailsAttribute label='Type' value="Root Project" />
  70             <DetailsAttribute label='User' />
  71             <UserResourceFullName uuid={rootProject.uuid} link={true} />
  72             <DetailsAttribute label='Created at' value={formatDate(rootProject.createdAt)} />
  73             <DetailsAttribute label='UUID' linkToUuid={rootProject.uuid} value={rootProject.uuid} />
  74         </div>
  75     ));