services/workbench2/src/views-components/project-details-card/project-details-card.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 { Card, CardHeader, WithStyles, withStyles, Typography, CardContent } from '@material-ui/core';
   7 import { StyleRulesCallback } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import { RootState } from 'store/store';
  10 import { connect } from 'react-redux';
  11 import { getResource } from 'store/resources/resources';
  12 import { MultiselectToolbar } from 'components/multiselect-toolbar/MultiselectToolbar';
  13 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
  14 import { RichTextEditorLink } from 'components/rich-text-editor-link/rich-text-editor-link';
  15 import { getPropertyChip } from '../resource-properties-form/property-chip';
  16 import { ProjectResource } from 'models/project';
  17 import { GroupClass } from 'models/group';
  18 import { ResourceWithName } from 'views-components/data-explorer/renderers';
  19 import { formatDate } from 'common/formatters';
  20 import { resourceLabel } from 'common/labels';
  21 import { ResourceKind } from 'models/resource';
  22
  23 type CssRules = 'root' | 'fadeout' | 'cardcontent' | 'attribute' | 'tag';
  24
  25 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  26     root: {
  27         width: '100%',
  28         marginBottom: '1rem',
  29     },
  30     fadeout: {
  31         maxWidth: '45%',
  32         minWdidth: '18rem',
  33         height: '2.7rem',
  34         overflow: 'hidden',
  35         WebkitMaskImage: '-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))',
  36     },
  37     cardcontent: {
  38         display: 'flex',
  39         flexWrap: 'wrap',
  40     },
  41     attribute: {
  42         marginBottom: '0.5rem',
  43         marginRight: '1rem',
  44     },
  45     tag: {},
  46 });
  47
  48 const mapStateToProps = (state: RootState) => {
  49     const currentRoute = state.router.location?.pathname.split('/') || [];
  50     const currentItemUuid = currentRoute[currentRoute.length - 1];
  51     const currentResource = getResource(currentItemUuid)(state.resources);
  52     return {
  53         currentResource,
  54     };
  55 };
  56
  57 type DetailsCardProps = {
  58     currentResource: ProjectResource;
  59 };
  60
  61 export const ProjectDetailsCard = connect(mapStateToProps)(
  62     withStyles(styles)((props: DetailsCardProps & WithStyles<CssRules>) => {
  63         const { classes, currentResource } = props;
  64         const { name, description, uuid } = currentResource;
  65         return (
  66             <Card className={classes.root}>
  67                 {console.log(currentResource)}
  68                 <CardHeader
  69                     title={
  70                         <Typography
  71                             noWrap
  72                             variant='h6'
  73                         >
  74                             {name}
  75                         </Typography>
  76                     }
  77                     subheader={
  78                         description ? (
  79                             <section>
  80                                 <Typography className={classes.fadeout}>{description.replace(/<[^>]*>/g, '')}</Typography>
  81                                 <RichTextEditorLink
  82                                     title={`Description of ${name}`}
  83                                     content={description}
  84                                     label='Show full description'
  85                                 />
  86                             </section>
  87                         ) : (
  88                             '---'
  89                         )
  90                     }
  91                     action={<MultiselectToolbar inputSelectedUuid={uuid} />}
  92                 />
  93                 <CardContent className={classes.cardcontent}>
  94                     <Typography
  95                         component='div'
  96                         className={classes.attribute}
  97                     >
  98                         <DetailsAttribute
  99                             label='Type'
 100                             value={currentResource.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)}
 101                         />
 102                     </Typography>
 103                     <Typography
 104                         component='div'
 105                         className={classes.attribute}
 106                     >
 107                         <DetailsAttribute
 108                             label='Owner'
 109                             linkToUuid={currentResource.ownerUuid}
 110                             uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />}
 111                         />
 112                     </Typography>
 113                     <Typography
 114                         component='div'
 115                         className={classes.attribute}
 116                     >
 117                         <DetailsAttribute
 118                             label='Last modified'
 119                             value={formatDate(currentResource.modifiedAt)}
 120                         />
 121                     </Typography>
 122                     <Typography
 123                         component='div'
 124                         className={classes.attribute}
 125                     >
 126                         <DetailsAttribute
 127                             label='Created at'
 128                             value={formatDate(currentResource.createdAt)}
 129                         />
 130                     </Typography>
 131                     <Typography
 132                         component='div'
 133                         className={classes.attribute}
 134                     >
 135                         <DetailsAttribute
 136                             label='UUID'
 137                             linkToUuid={currentResource.uuid}
 138                             value={currentResource.uuid}
 139                         />
 140                     </Typography>
 141                     <Typography
 142                         component='div'
 143                         className={classes.attribute}
 144                     >
 145                         {Object.keys(currentResource.properties).map((k) =>
 146                             Array.isArray(currentResource.properties[k])
 147                                 ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
 148                                 : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
 149                         )}
 150                     </Typography>
 151                 </CardContent>
 152             </Card>
 153         );
 154     })
 155 );