X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/2337113e2deb23fdcd40e7a87f7ecf02fadcee80..92a147d8e4fd5b02264c06ec432255777cb942c7:/services/workbench2/src/views-components/project-details-card/project-details-card.tsx diff --git a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx index 0093d86b83..0988d7c168 100644 --- a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx +++ b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx @@ -3,79 +3,97 @@ // SPDX-License-Identifier: AGPL-3.0 import React from 'react'; -import { Card, CardHeader, WithStyles, withStyles, Typography, CardContent, Tooltip } from '@material-ui/core'; -import { StyleRulesCallback } from '@material-ui/core'; +import { StyleRulesCallback, Card, CardHeader, WithStyles, withStyles, Typography, CardContent, Tooltip, Collapse } from '@material-ui/core'; import { ArvadosTheme } from 'common/custom-theme'; import { RootState } from 'store/store'; import { connect } from 'react-redux'; import { getResource } from 'store/resources/resources'; -import { MultiselectToolbar } from 'components/multiselect-toolbar/MultiselectToolbar'; import { getPropertyChip } from '../resource-properties-form/property-chip'; import { ProjectResource } from 'models/project'; import { ResourceKind } from 'models/resource'; import { UserResource } from 'models/user'; import { UserResourceAccountStatus } from 'views-components/data-explorer/renderers'; import { FavoriteStar, PublicFavoriteStar } from 'views-components/favorite-star/favorite-star'; -import { FreezeIcon } from 'components/icon/icon'; +import { MoreVerticalIcon, FreezeIcon } from 'components/icon/icon'; import { Resource } from 'models/resource'; -import { MoreVerticalIcon } from 'components/icon/icon'; import { IconButton } from '@material-ui/core'; import { ContextMenuResource } from 'store/context-menu/context-menu-actions'; -import { resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions'; -import { openContextMenu } from 'store/context-menu/context-menu-actions'; +import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions'; import { CollectionResource } from 'models/collection'; -import { RichTextEditorLink } from 'components/rich-text-editor-link/rich-text-editor-link'; +import { ContextMenuKind } from 'views-components/context-menu/context-menu'; +import { Dispatch } from 'redux'; +import classNames from 'classnames'; +import { loadDetailsPanel } from 'store/details-panel/details-panel-action'; +import { ExpandChevronRight } from 'components/expand-chevron-right/expand-chevron-right'; +import { MultiselectToolbar } from 'components/multiselect-toolbar/MultiselectToolbar'; type CssRules = | 'root' - | 'cardheader' - | 'fadeout' - | 'showmore' - | 'nameContainer' - | 'activeIndicator' - | 'cardcontent' + | 'selected' + | 'cardHeader' + | 'descriptionToggle' + | 'showMore' + | 'noDescription' + | 'userNameContainer' + | 'cardContent' + | 'nameSection' | 'namePlate' | 'faveIcon' | 'frozenIcon' - | 'attributesection' - | 'attribute' - | 'chipsection' - | 'tag'; + | 'contextMenuSection' + | 'tag' + | 'description'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { width: '100%', marginBottom: '1rem', + flex: '0 0 auto', + padding: 0, + border: '2px solid transparent', }, - fadeout: { - maxWidth: '25rem', - minWdidth: '18rem', - height: '1.5rem', - overflow: 'hidden', - WebkitMaskImage: '-webkit-gradient(linear, left bottom, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))', + selected: { + border: '2px solid #ccc', }, - showmore: { - color: theme.palette.primary.main, + showMore: { cursor: 'pointer', - maxWidth: '10rem', + background: 'linear-gradient(to right, black, transparent)', + backgroundClip: 'text', + color: 'transparent', }, - nameContainer: { + noDescription: { + color: theme.palette.grey['600'], + fontStyle: 'italic', + }, + userNameContainer: { display: 'flex', }, - activeIndicator: { - margin: '0.3rem auto auto 1rem', + cardHeader: { + padding: '0.2rem 0.4rem 0.1rem 1rem', }, - cardheader: { - paddingTop: '0.4rem', + descriptionToggle: { + display: 'flex', + flexDirection: 'row', + cursor: 'pointer', + paddingBottom: '0.5rem', }, - cardcontent: { + cardContent: { display: 'flex', flexDirection: 'column', - marginTop: '-1rem', + marginTop: '-1.75rem', + }, + nameSection: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', }, namePlate: { display: 'flex', flexDirection: 'row', + alignItems: 'center', + margin: 0, + paddingBottom: '0.5rem', }, faveIcon: { fontSize: '0.8rem', @@ -85,27 +103,23 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ frozenIcon: { fontSize: '0.5rem', marginLeft: '0.3rem', - marginTop: '0.57rem', + marginTop: '0.1rem', height: '1rem', color: theme.palette.text.primary, }, - attributesection: { + contextMenuSection: { display: 'flex', - flexWrap: 'wrap', - }, - attribute: { - marginBottom: '0.5rem', - marginRight: '1rem', - padding: '0.5rem', - borderRadius: '5px', - }, - chipsection: { - display: 'flex', - flexWrap: 'wrap', + flexDirection: 'row', + alignItems: 'center', + paddingTop: '0.25rem', }, tag: { marginRight: '1rem', - marginTop: '0.5rem', + marginTop: '1rem', + }, + description: { + maxWidth: '90%', + marginTop: 0, }, }); @@ -115,25 +129,33 @@ const mapStateToProps = (state: RootState) => { const currentResource = getResource(currentItemUuid)(state.resources); const frozenByUser = currentResource && getResource((currentResource as ProjectResource).frozenByUuid as string)(state.resources); const frozenByFullName = frozenByUser && (frozenByUser as Resource & { fullName: string }).fullName; + const isSelected = currentItemUuid === state.detailsPanel.resourceUuid && state.detailsPanel.isOpened === true; return { isAdmin: state.auth.user?.isAdmin, currentResource, frozenByFullName, + isSelected, }; }; -const mapDispatchToProps = (dispatch: any) => ({ +const mapDispatchToProps = (dispatch: Dispatch) => ({ + handleCardClick: (uuid: string) => { + dispatch(loadDetailsPanel(uuid)); + }, handleContextMenu: (event: React.MouseEvent, resource: any, isAdmin: boolean) => { + event.stopPropagation(); // When viewing the contents of a filter group, all contents should be treated as read only. let readOnly = false; if (resource.groupClass === 'filter') { readOnly = true; } - - const menuKind = dispatch(resourceUuidToContextMenuKind(resource.uuid, readOnly)); + let menuKind = dispatch(resourceUuidToContextMenuKind(resource.uuid, readOnly)); + if (menuKind === ContextMenuKind.ROOT_PROJECT) { + menuKind = ContextMenuKind.USER_DETAILS; + } if (menuKind && resource) { - dispatch( + dispatch( openContextMenu(event, { name: resource.name, uuid: resource.uuid, @@ -142,14 +164,13 @@ const mapDispatchToProps = (dispatch: any) => ({ kind: resource.kind, menuKind, isAdmin, - isFrozen: !!resource.frozenById, + isFrozen: !!resource.frozenByUuid, description: resource.description, storageClassesDesired: (resource as CollectionResource).storageClassesDesired, properties: 'properties' in resource ? resource.properties : {}, }) ); } - }, }); @@ -157,18 +178,26 @@ type DetailsCardProps = WithStyles & { currentResource: ProjectResource | UserResource; frozenByFullName?: string; isAdmin: boolean; + isSelected: boolean; handleContextMenu: (event: React.MouseEvent, resource: ContextMenuResource, isAdmin: boolean) => void; + handleCardClick: (resource: any) => void; }; type UserCardProps = WithStyles & { currentResource: UserResource; + isAdmin: boolean; + isSelected: boolean; + handleContextMenu: (event: React.MouseEvent, resource: ContextMenuResource, isAdmin: boolean) => void; + handleCardClick: (resource: any) => void; }; type ProjectCardProps = WithStyles & { currentResource: ProjectResource; frozenByFullName: string | undefined; isAdmin: boolean; + isSelected: boolean; handleContextMenu: (event: React.MouseEvent, resource: ContextMenuResource, isAdmin: boolean) => void; + handleCardClick: (resource: any) => void; }; export const ProjectDetailsCard = connect( @@ -176,13 +205,20 @@ export const ProjectDetailsCard = connect( mapDispatchToProps )( withStyles(styles)((props: DetailsCardProps) => { - const { classes, currentResource, frozenByFullName, handleContextMenu, isAdmin } = props; + const { classes, currentResource, frozenByFullName, handleContextMenu, handleCardClick, isAdmin, isSelected } = props; + if (!currentResource) { + return null; + } switch (currentResource.kind as string) { case ResourceKind.USER: return ( handleContextMenu(ev, currentResource as any, isAdmin)} + handleCardClick={handleCardClick} /> ); case ResourceKind.PROJECT: @@ -192,7 +228,9 @@ export const ProjectDetailsCard = connect( currentResource={currentResource as ProjectResource} frozenByFullName={frozenByFullName} isAdmin={isAdmin} + isSelected={isSelected} handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)} + handleCardClick={handleCardClick} /> ); default: @@ -201,106 +239,182 @@ export const ProjectDetailsCard = connect( }) ); -const UserCard: React.FC = ({ classes, currentResource }) => { +const UserCard: React.FC = ({ classes, currentResource, handleContextMenu, handleCardClick, isAdmin, isSelected }) => { const { fullName, uuid } = currentResource as UserResource & { fullName: string }; return ( - + handleCardClick(uuid)} + data-cy='user-details-card' + > +
{fullName} +
+ } + action={ +
{!currentResource.isActive && ( - + )} + + handleContextMenu(ev, currentResource as any, isAdmin)} + > + + +
} - action={} /> ); }; -const ProjectCard: React.FC = ({ classes, currentResource, frozenByFullName, handleContextMenu, isAdmin }) => { - const { name, uuid, description } = currentResource as ProjectResource; +const ProjectCard: React.FC = ({ classes, currentResource, frozenByFullName, handleContextMenu, handleCardClick, isAdmin, isSelected }) => { + const { name, description, uuid } = currentResource as ProjectResource; + const [showDescription, setShowDescription] = React.useState(false); + const [showProperties, setShowProperties] = React.useState(false); + + const toggleDescription = () => { + setShowDescription(!showDescription); + }; + + const toggleProperties = () => { + setShowProperties(!showProperties); + }; return ( - + handleCardClick(uuid)} + data-cy='project-details-card' + > -
- - {name} - - - - Project was frozen by {frozenByFullName}} - > - - -
-
- - {typeof currentResource.properties === 'object' && - Object.keys(currentResource.properties).map((k) => - Array.isArray(currentResource.properties[k]) - ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag)) - : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag) +
+
+ + {name} + + + + {!!frozenByFullName && ( + Project was frozen by {frozenByFullName}} + > + + )} - -
- +
+
+ } + action={ + + //
+ // + // handleContextMenu(ev, currentResource as any, isAdmin)} + // > + // + // + // + //
} - - - action={ - handleContextMenu(ev, currentResource as any, isAdmin)} - > - - - } /> - - {description && ( -
- {description.replace(/<[^>]*>/g, '').slice(0, 45)}... -
- -
+
ev.stopPropagation()}> + {description ? ( +
+ +
+ + + {description} + +
- )} - +
+ ) : ( + + no description available + + )} + {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 ? ( +
+ +
+ + + + + {Object.keys(currentResource.properties).map((k) => + Array.isArray(currentResource.properties[k]) + ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag)) + : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag) + )} + + + + +
+
+ ) : null} +
); };