// SPDX-License-Identifier: AGPL-3.0
import React from 'react';
-import { StyleRulesCallback, Card, CardHeader, WithStyles, withStyles, Typography, CardContent, Tooltip, Collapse } from '@material-ui/core';
+import { StyleRulesCallback, Card, CardHeader, WithStyles, withStyles, Typography, CardContent, Tooltip, Collapse, Grid } from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
import { RootState } from 'store/store';
import { connect } from 'react-redux';
import { UserResource } from 'models/user';
import { UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
import { FavoriteStar, PublicFavoriteStar } from 'views-components/favorite-star/favorite-star';
-import { MoreVerticalIcon, FreezeIcon } from 'components/icon/icon';
+import { FreezeIcon } from 'components/icon/icon';
import { Resource } from 'models/resource';
-import { IconButton } from '@material-ui/core';
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 { 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';
+import { setSelectedResourceUuid } from 'store/selected-resource/selected-resource-actions';
+import { deselectAllOthers } from 'store/multiselect/multiselect-actions';
type CssRules =
| 'root'
- | 'selected'
+ | 'cardHeaderContainer'
| 'cardHeader'
| 'descriptionToggle'
| 'showMore'
| 'namePlate'
| 'faveIcon'
| 'frozenIcon'
- | 'contextMenuSection'
+ | 'accountStatusSection'
| 'tag'
| 'description';
marginBottom: '1rem',
flex: '0 0 auto',
padding: 0,
- border: '2px solid transparent',
- },
- selected: {
- border: '2px solid #ccc',
+ minHeight: '3rem',
},
showMore: {
cursor: 'pointer',
- background: 'linear-gradient(to right, black, transparent)',
- backgroundClip: 'text',
- color: 'transparent',
},
noDescription: {
color: theme.palette.grey['600'],
},
userNameContainer: {
display: 'flex',
+ alignItems: 'center',
+ minHeight: '2.7rem',
+ },
+ cardHeaderContainer: {
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
},
cardHeader: {
- padding: '0.2rem 0.4rem 0.1rem 1rem',
+ minWidth: '30rem',
+ padding: '0.2rem 0.4rem 0.2rem 1rem',
},
descriptionToggle: {
display: 'flex',
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',
height: '1rem',
color: theme.palette.text.primary,
},
- contextMenuSection: {
+ accountStatusSection: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
- paddingTop: '0.25rem',
+ paddingLeft: '1rem',
},
tag: {
marginRight: '1rem',
marginTop: '1rem',
},
description: {
- maxWidth: '90%',
+ maxWidth: '95%',
marginTop: 0,
},
});
-const mapStateToProps = (state: RootState) => {
- const currentRoute = state.router.location?.pathname.split('/') || [];
- const currentItemUuid = currentRoute[currentRoute.length - 1];
- const currentResource = getResource(currentItemUuid)(state.resources);
- const frozenByUser = currentResource && getResource((currentResource as ProjectResource).frozenByUuid as string)(state.resources);
+const mapStateToProps = ({ auth, selectedResourceUuid, resources, properties }: RootState) => {
+ const currentResource = getResource(properties.currentRouteUuid)(resources);
+ const frozenByUser = currentResource && getResource((currentResource as ProjectResource).frozenByUuid as string)(resources);
const frozenByFullName = frozenByUser && (frozenByUser as Resource & { fullName: string }).fullName;
- const isSelected = currentItemUuid === state.detailsPanel.resourceUuid && state.detailsPanel.isOpened === true;
+ const isSelected = selectedResourceUuid === properties.currentRouteUuid;
return {
- isAdmin: state.auth.user?.isAdmin,
+ isAdmin: auth.user?.isAdmin,
currentResource,
frozenByFullName,
isSelected,
const mapDispatchToProps = (dispatch: Dispatch) => ({
handleCardClick: (uuid: string) => {
dispatch<any>(loadDetailsPanel(uuid));
+ dispatch<any>(setSelectedResourceUuid(uuid));
+ dispatch<any>(deselectAllOthers(uuid));
},
handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: any, isAdmin: boolean) => {
event.stopPropagation();
frozenByFullName: string | undefined;
isAdmin: boolean;
isSelected: boolean;
- handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: ContextMenuResource, isAdmin: boolean) => void;
handleCardClick: (resource: any) => void;
};
frozenByFullName={frozenByFullName}
isAdmin={isAdmin}
isSelected={isSelected}
- handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
handleCardClick={handleCardClick}
/>
);
})
);
-const UserCard: React.FC<UserCardProps> = ({ classes, currentResource, handleContextMenu, handleCardClick, isAdmin, isSelected }) => {
+const UserCard: React.FC<UserCardProps> = ({ classes, currentResource, handleCardClick, isSelected }) => {
const { fullName, uuid } = currentResource as UserResource & { fullName: string };
return (
<Card
- className={classNames(classes.root, isSelected ? classes.selected : '')}
+ className={classes.root}
onClick={() => handleCardClick(uuid)}
data-cy='user-details-card'
>
- <CardHeader
- className={classes.cardHeader}
- title={
- <section className={classes.userNameContainer}>
- <Typography
- noWrap
- variant='h6'
- >
- {fullName}
- </Typography>
- </section>
- }
- action={
- <section className={classes.contextMenuSection}>
- {!currentResource.isActive && (
- <Typography>
- <UserResourceAccountStatus uuid={uuid} />
- </Typography>
- )}
- <Tooltip
- title='More options'
- disableFocusListener
- >
- <IconButton
- aria-label='More options'
- data-cy='kebab-icon'
- onClick={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
+ <Grid
+ container
+ wrap='nowrap'
+ className={classes.cardHeaderContainer}
+ >
+ <CardHeader
+ className={classes.cardHeader}
+ title={
+ <section className={classes.userNameContainer}>
+ <Typography
+ noWrap
+ variant='h6'
>
- <MoreVerticalIcon />
- </IconButton>
- </Tooltip>
- </section>
- }
- />
+ {fullName}
+ </Typography>
+ <section className={classes.accountStatusSection}>
+ {!currentResource.isActive && (
+ <Typography>
+ <UserResourceAccountStatus uuid={uuid} />
+ </Typography>
+ )}
+ </section>
+ </section>
+ }
+ />
+ {isSelected && <MultiselectToolbar />}
+ </Grid>
</Card>
);
};
-const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, frozenByFullName, handleContextMenu, handleCardClick, isAdmin, isSelected }) => {
+const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, frozenByFullName, handleCardClick, isSelected }) => {
const { name, description, uuid } = currentResource as ProjectResource;
const [showDescription, setShowDescription] = React.useState(false);
const [showProperties, setShowProperties] = React.useState(false);
return (
<Card
- className={classNames(classes.root, isSelected ? classes.selected : '')}
+ className={classes.root}
onClick={() => handleCardClick(uuid)}
data-cy='project-details-card'
>
- <CardHeader
- className={classes.cardHeader}
- title={
- <section className={classes.nameSection}>
- <section className={classes.namePlate}>
- <Typography
- noWrap
- variant='h6'
- style={{ marginRight: '1rem' }}
- >
- {name}
- </Typography>
- <FavoriteStar
- className={classes.faveIcon}
- resourceUuid={currentResource.uuid}
- />
- <PublicFavoriteStar
- className={classes.faveIcon}
- resourceUuid={currentResource.uuid}
- />
- {!!frozenByFullName && (
- <Tooltip
- className={classes.frozenIcon}
- disableFocusListener
- title={<span>Project was frozen by {frozenByFullName}</span>}
+ <Grid
+ container
+ wrap='nowrap'
+ className={classes.cardHeaderContainer}
+ >
+ <CardHeader
+ className={classes.cardHeader}
+ title={
+ <section className={classes.nameSection}>
+ <section className={classes.namePlate}>
+ <Typography
+ variant='h6'
+ style={{ marginRight: '1rem' }}
>
- <FreezeIcon style={{ fontSize: 'inherit' }} />
- </Tooltip>
- )}
+ {name}
+ </Typography>
+ <FavoriteStar
+ className={classes.faveIcon}
+ resourceUuid={currentResource.uuid}
+ />
+ <PublicFavoriteStar
+ className={classes.faveIcon}
+ resourceUuid={currentResource.uuid}
+ />
+ {!!frozenByFullName && (
+ <Tooltip
+ className={classes.frozenIcon}
+ disableFocusListener
+ title={<span>Project was frozen by {frozenByFullName}</span>}
+ >
+ <FreezeIcon style={{ fontSize: 'inherit' }} />
+ </Tooltip>
+ )}
+ </section>
</section>
- </section>
- }
- action={
- <MultiselectToolbar inputSelectedUuid={currentResource.uuid} />
- // <section className={classes.contextMenuSection}>
- // <Tooltip
- // title='More options'
- // disableFocusListener
- // >
- // <IconButton
- // aria-label='More options'
- // onClick={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
- // >
- // <MoreVerticalIcon data-cy='kebab-icon' />
- // </IconButton>
- // </Tooltip>
- // </section>
- }
- />
+ }
+ />
+ {isSelected && <MultiselectToolbar />}
+ </Grid>
<section onClick={(ev) => ev.stopPropagation()}>
{description ? (
<section
timeout='auto'
collapsedHeight='35px'
>
- <Typography
+ <div
className={classes.description}
data-cy='project-description'
>
)}
</Typography>
</CardContent>
- </Typography>
+ </div>
</Collapse>
</section>
</section>
projects / arvados.git / blobdiff