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 { StyleRulesCallback, Card, CardHeader, WithStyles, withStyles, Typography, CardContent, Tooltip, Collapse } from '@material-ui/core';
   7 import { ArvadosTheme } from 'common/custom-theme';
   8 import { RootState } from 'store/store';
   9 import { connect } from 'react-redux';
  10 import { getResource } from 'store/resources/resources';
  11 import { getPropertyChip } from '../resource-properties-form/property-chip';
  12 import { ProjectResource } from 'models/project';
  13 import { ResourceKind } from 'models/resource';
  14 import { UserResource } from 'models/user';
  15 import { UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
  16 import { FavoriteStar, PublicFavoriteStar } from 'views-components/favorite-star/favorite-star';
  17 import { MoreVerticalIcon, FreezeIcon } from 'components/icon/icon';
  18 import { Resource } from 'models/resource';
  19 import { IconButton } from '@material-ui/core';
  20 import { ContextMenuResource, openUserContextMenu } from 'store/context-menu/context-menu-actions';
  21 import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
  22 import { CollectionResource } from 'models/collection';
  23 import { ContextMenuKind } from 'views-components/context-menu/context-menu';
  24 import { Dispatch } from 'redux';
  25 import classNames from 'classnames';
  26 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
  27
  28 type CssRules =
  29     | 'root'
  30     | 'selected'
  31     | 'cardHeader'
  32     | 'descriptionLabel'
  33     | 'showMore'
  34     | 'noDescription'
  35     | 'nameContainer'
  36     | 'cardContent'
  37     | 'subHeader'
  38     | 'namePlate'
  39     | 'faveIcon'
  40     | 'frozenIcon'
  41     | 'contextMenuSection'
  42     | 'chipSection'
  43     | 'tag'
  44     | 'description';
  45
  46 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  47     root: {
  48         width: '100%',
  49         marginBottom: '1rem',
  50         flex: '0 0 auto',
  51         paddingTop: '0.2rem',
  52         border: '2px solid transparent',
  53     },
  54     selected: {
  55         border: '2px solid #ccc',
  56     },
  57     showMore: {
  58         color: theme.palette.primary.main,
  59         cursor: 'pointer',
  60     },
  61     noDescription: {
  62         color: theme.palette.grey['600'],
  63         fontStyle: 'italic',
  64     },
  65     nameContainer: {
  66         display: 'flex',
  67     },
  68     cardHeader: {
  69         paddingTop: '0.4rem',
  70     },
  71     descriptionLabel: {
  72         paddingTop: '1rem',
  73         marginBottom: 0,
  74         minHeight: '2.5rem',
  75         marginRight: '0.8rem',
  76     },
  77     cardContent: {
  78         display: 'flex',
  79         flexDirection: 'column',
  80         transition: 'height 0.3s ease',
  81     },
  82     subHeader: {
  83         display: 'flex',
  84         flexDirection: 'row',
  85         justifyContent: 'space-between',
  86         marginTop: '-2rem',
  87     },
  88     namePlate: {
  89         display: 'flex',
  90         flexDirection: 'row',
  91     },
  92     faveIcon: {
  93         fontSize: '0.8rem',
  94         margin: 'auto 0 0.5rem 0.3rem',
  95         color: theme.palette.text.primary,
  96     },
  97     frozenIcon: {
  98         fontSize: '0.5rem',
  99         marginLeft: '0.3rem',
 100         marginTop: '0.57rem',
 101         height: '1rem',
 102         color: theme.palette.text.primary,
 103     },
 104     contextMenuSection: {
 105         display: 'flex',
 106         flexDirection: 'row',
 107         alignItems: 'center',
 108         marginTop: '0.6rem',
 109     },
 110     chipSection: {
 111         display: 'flex',
 112         flexWrap: 'wrap',
 113     },
 114     tag: {
 115         marginRight: '1rem',
 116         marginTop: '0.5rem',
 117     },
 118     description: {
 119         marginTop: '1rem',
 120     },
 121 });
 122
 123 const mapStateToProps = (state: RootState) => {
 124     const currentRoute = state.router.location?.pathname.split('/') || [];
 125     const currentItemUuid = currentRoute[currentRoute.length - 1];
 126     const currentResource = getResource(currentItemUuid)(state.resources);
 127     const frozenByUser = currentResource && getResource((currentResource as ProjectResource).frozenByUuid as string)(state.resources);
 128     const frozenByFullName = frozenByUser && (frozenByUser as Resource & { fullName: string }).fullName;
 129     const isSelected = currentItemUuid === state.detailsPanel.resourceUuid && state.detailsPanel.isOpened === true;
 130
 131     return {
 132         isAdmin: state.auth.user?.isAdmin,
 133         currentResource,
 134         frozenByFullName,
 135         isSelected,
 136     };
 137 };
 138
 139 const mapDispatchToProps = (dispatch: Dispatch) => ({
 140     handleCardClick: (uuid: string) => {
 141         dispatch<any>(loadDetailsPanel(uuid));
 142     },
 143     handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: any, isAdmin: boolean) => {
 144         event.stopPropagation();
 145         // When viewing the contents of a filter group, all contents should be treated as read only.
 146         let readOnly = false;
 147         if (resource.groupClass === 'filter') {
 148             readOnly = true;
 149         }
 150         const menuKind = dispatch<any>(resourceUuidToContextMenuKind(resource.uuid, readOnly));
 151         if (menuKind === ContextMenuKind.ROOT_PROJECT) {
 152             dispatch<any>(openUserContextMenu(event, resource as UserResource));
 153         } else if (menuKind && resource) {
 154             dispatch<any>(
 155                 openContextMenu(event, {
 156                     name: resource.name,
 157                     uuid: resource.uuid,
 158                     ownerUuid: resource.ownerUuid,
 159                     isTrashed: 'isTrashed' in resource ? resource.isTrashed : false,
 160                     kind: resource.kind,
 161                     menuKind,
 162                     isAdmin,
 163                     isFrozen: !!resource.frozenByUuid,
 164                     description: resource.description,
 165                     storageClassesDesired: (resource as CollectionResource).storageClassesDesired,
 166                     properties: 'properties' in resource ? resource.properties : {},
 167                 })
 168             );
 169         }
 170     },
 171 });
 172
 173 type DetailsCardProps = WithStyles<CssRules> & {
 174     currentResource: ProjectResource | UserResource;
 175     frozenByFullName?: string;
 176     isAdmin: boolean;
 177     isSelected: boolean;
 178     handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: ContextMenuResource, isAdmin: boolean) => void;
 179     handleCardClick: (resource: any) => void;
 180 };
 181
 182 type UserCardProps = WithStyles<CssRules> & {
 183     currentResource: UserResource;
 184     isAdmin: boolean;
 185     isSelected: boolean;
 186     handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: ContextMenuResource, isAdmin: boolean) => void;
 187     handleCardClick: (resource: any) => void;
 188 };
 189
 190 type ProjectCardProps = WithStyles<CssRules> & {
 191     currentResource: ProjectResource;
 192     frozenByFullName: string | undefined;
 193     isAdmin: boolean;
 194     isSelected: boolean;
 195     handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: ContextMenuResource, isAdmin: boolean) => void;
 196     handleCardClick: (resource: any) => void;
 197 };
 198
 199 export const ProjectDetailsCard = connect(
 200     mapStateToProps,
 201     mapDispatchToProps
 202 )(
 203     withStyles(styles)((props: DetailsCardProps) => {
 204         const { classes, currentResource, frozenByFullName, handleContextMenu, handleCardClick, isAdmin, isSelected } = props;
 205         switch (currentResource.kind as string) {
 206             case ResourceKind.USER:
 207                 return (
 208                     <UserCard
 209                         classes={classes}
 210                         currentResource={currentResource as UserResource}
 211                         isAdmin={isAdmin}
 212                         isSelected={isSelected}
 213                         handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
 214                         handleCardClick={handleCardClick}
 215                     />
 216                 );
 217             case ResourceKind.PROJECT:
 218                 return (
 219                     <ProjectCard
 220                         classes={classes}
 221                         currentResource={currentResource as ProjectResource}
 222                         frozenByFullName={frozenByFullName}
 223                         isAdmin={isAdmin}
 224                         isSelected={isSelected}
 225                         handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
 226                         handleCardClick={handleCardClick}
 227                     />
 228                 );
 229             default:
 230                 return null;
 231         }
 232     })
 233 );
 234
 235 const UserCard: React.FC<UserCardProps> = ({ classes, currentResource, handleContextMenu, handleCardClick, isAdmin, isSelected }) => {
 236     const { fullName, uuid } = currentResource as UserResource & { fullName: string };
 237
 238     return (
 239         <Card className={classNames(classes.root, isSelected ? classes.selected : '')} onClick={()=>handleCardClick(uuid)}>
 240             <CardHeader
 241                 className={classes.cardHeader}
 242                 title={
 243                     <section className={classes.nameContainer}>
 244                         <Typography
 245                             noWrap
 246                             variant='h6'
 247                         >
 248                             {fullName}
 249                         </Typography>
 250                     </section>
 251                 }
 252                 action={
 253                     <section className={classes.contextMenuSection}>
 254                         {!currentResource.isActive && (
 255                             <Typography>
 256                                 <UserResourceAccountStatus uuid={uuid} />
 257                             </Typography>
 258                         )}
 259                         <Tooltip
 260                             title='More options'
 261                             disableFocusListener
 262                         >
 263                             <IconButton
 264                                 aria-label='More options'
 265                                 onClick={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
 266                             >
 267                                 <MoreVerticalIcon />
 268                             </IconButton>
 269                         </Tooltip>
 270                     </section>
 271                 }
 272             />
 273         </Card>
 274     );
 275 };
 276
 277 const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, frozenByFullName, handleContextMenu, handleCardClick, isAdmin, isSelected }) => {
 278     const { name, description, uuid } = currentResource as ProjectResource;
 279     const [showDescription, setShowDescription] = React.useState(false);
 280
 281     const toggleDescription = () => {
 282         setShowDescription(!showDescription);
 283     };
 284
 285     return (
 286         <Card className={classNames(classes.root, isSelected ? classes.selected : '')} onClick={()=>handleCardClick(uuid)}>
 287             <CardHeader
 288                 className={classes.cardHeader}
 289                 title={
 290                     <section className={classes.namePlate}>
 291                         <Typography
 292                             noWrap
 293                             variant='h6'
 294                             style={{ marginRight: '1rem' }}
 295                         >
 296                             {name}
 297                         </Typography>
 298                         <FavoriteStar
 299                             className={classes.faveIcon}
 300                             resourceUuid={currentResource.uuid}
 301                         />
 302                         <PublicFavoriteStar
 303                             className={classes.faveIcon}
 304                             resourceUuid={currentResource.uuid}
 305                         />
 306                         {!!frozenByFullName && (
 307                             <Tooltip
 308                                 className={classes.frozenIcon}
 309                                 title={<span>Project was frozen by {frozenByFullName}</span>}
 310                             >
 311                                 <FreezeIcon style={{ fontSize: 'inherit' }} />
 312                             </Tooltip>
 313                         )}
 314                     </section>
 315                 }
 316                 action={
 317                     <section className={classes.contextMenuSection}>
 318                         <Tooltip
 319                             title='More options'
 320                             disableFocusListener
 321                         >
 322                             <IconButton
 323                                 aria-label='More options'
 324                                 onClick={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
 325                             >
 326                                 <MoreVerticalIcon />
 327                             </IconButton>
 328                         </Tooltip>
 329                     </section>
 330                 }
 331             />
 332             <CardContent className={classes.cardContent}>
 333                 <section className={classes.subHeader}>
 334                     <section className={classes.chipSection}>
 335                         <Typography component='div'>
 336                             {typeof currentResource.properties === 'object' &&
 337                                 Object.keys(currentResource.properties).map((k) =>
 338                                     Array.isArray(currentResource.properties[k])
 339                                         ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
 340                                         : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
 341                                 )}
 342                         </Typography>
 343                     </section>
 344                     <section className={classes.descriptionLabel} onClick={(ev)=>ev.stopPropagation()}>
 345                         {description ? (
 346                             <Typography
 347                                 className={classes.showMore}
 348                                 onClick={toggleDescription}
 349                             >
 350                                 {!showDescription ? "Show full description" : "Hide full description"}
 351                             </Typography>
 352                         ) : (
 353                             <Typography className={classes.noDescription}>no description available</Typography>
 354                         )}
 355                     </section>
 356                 </section>
 357                 <Collapse in={showDescription} timeout='auto'>
 358                     <section onClick={(ev)=>ev.stopPropagation()}>
 359                         <Typography className={classes.description}>
 360                             {description}
 361                         </Typography>
 362                     </section>
 363                 </Collapse>
 364             </CardContent>
 365         </Card>
 366     );
 367 };