X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/4d713ddf012c4097187068f225c0aaa7c6935b86..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 8e3eaa729a..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,71 +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 { User, UserResource } from 'models/user'; +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, openUserContextMenu } 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 { ContextMenuResource } 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' + | 'selected' | 'cardHeader' + | 'descriptionToggle' | 'showMore' - | 'nameContainer' + | 'noDescription' + | 'userNameContainer' | 'cardContent' + | 'nameSection' | 'namePlate' | 'faveIcon' | 'frozenIcon' | 'contextMenuSection' - | 'attribute' - | 'chipSection' - | 'tag'; + | 'tag' + | 'description'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { width: '100%', marginBottom: '1rem', flex: '0 0 auto', - paddingTop: '0.2rem', + padding: 0, + border: '2px solid transparent', + }, + selected: { + border: '2px solid #ccc', }, showMore: { - color: theme.palette.primary.main, 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', }, cardHeader: { - paddingTop: '0.4rem', + padding: '0.2rem 0.4rem 0.1rem 1rem', + }, + descriptionToggle: { + display: 'flex', + flexDirection: 'row', + cursor: 'pointer', + paddingBottom: '0.5rem', }, 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', @@ -77,7 +103,7 @@ 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, }, @@ -85,21 +111,15 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ display: 'flex', flexDirection: 'row', alignItems: 'center', - marginTop: '0.6rem', - }, - attribute: { - marginBottom: '0.5rem', - marginRight: '1rem', - padding: '0.5rem', - borderRadius: '5px', - }, - chipSection: { - display: 'flex', - flexWrap: 'wrap', + paddingTop: '0.25rem', }, tag: { marginRight: '1rem', - marginTop: '0.5rem', + marginTop: '1rem', + }, + description: { + maxWidth: '90%', + marginTop: 0, }, }); @@ -109,15 +129,20 @@ 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: 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. @@ -125,10 +150,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ 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) { - dispatch(openUserContextMenu(event, resource as UserResource)); - } else if (menuKind && resource) { + menuKind = ContextMenuKind.USER_DETAILS; + } + if (menuKind && resource) { dispatch( openContextMenu(event, { name: resource.name, @@ -152,20 +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( @@ -173,7 +205,10 @@ 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 ( @@ -181,7 +216,9 @@ export const ProjectDetailsCard = connect( classes={classes} currentResource={currentResource as UserResource} isAdmin={isAdmin} + isSelected={isSelected} handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)} + handleCardClick={handleCardClick} /> ); case ResourceKind.PROJECT: @@ -191,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: @@ -200,15 +239,19 @@ export const ProjectDetailsCard = connect( }) ); -const UserCard: React.FC = ({ classes, currentResource, handleContextMenu, isAdmin }) => { +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' + > +
= ({ classes, currentResource, handleCon > handleContextMenu(ev, currentResource as any, isAdmin)} > @@ -242,15 +286,29 @@ const UserCard: React.FC = ({ classes, currentResource, handleCon ); }; -const ProjectCard: React.FC = ({ classes, currentResource, frozenByFullName, handleContextMenu, isAdmin }) => { - const { name, 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' + > +
= ({ classes, currentResource, fro {!!frozenByFullName && ( 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) - )} - -
- +
} action={ - - handleContextMenu(ev, currentResource as any, isAdmin)} - > - - - + + //
+ // + // handleContextMenu(ev, currentResource as any, isAdmin)} + // > + // + // + // + //
} /> - - {description && ( -
-
- -
+
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} +
); };