[arvados] updated: 2.7.0-5839-g20b3576fb8
git repository hosting
git at public.arvados.org
Tue Jan 23 15:11:18 UTC 2024
Summary of changes:
.../project-details-card/project-details-card.tsx | 265 ++++++++++++++-------
.../src/views/project-panel/project-panel.tsx | 4 +-
2 files changed, 178 insertions(+), 91 deletions(-)
via 20b3576fb84a0e51c7f7789aba453ade163af009 (commit)
from 64885d9192ac6d5d60523dd4f8cd94be137b6578 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 20b3576fb84a0e51c7f7789aba453ade163af009
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Tue Jan 23 10:11:11 2024 -0500
21224: set up user card Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
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 de4376ac4e..8334e71342 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
@@ -19,8 +19,12 @@ import { ResourceWithName } from 'views-components/data-explorer/renderers';
import { formatDate } from 'common/formatters';
import { resourceLabel } from 'common/labels';
import { ResourceKind } from 'models/resource';
+import { UserResource } from 'models/user';
+import { UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
-type CssRules = 'root' | 'cardheader' | 'fadeout' | 'cardcontent' | 'attributesection' | 'attribute' | 'chipsection' | 'tag';
+
+
+type CssRules = 'root' | 'cardheader' | 'fadeout' | 'nameContainer' | 'activeIndicator' | 'cardcontent' | 'attributesection' | 'attribute' | 'chipsection' | 'tag';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -30,17 +34,23 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
fadeout: {
maxWidth: '30rem',
minWdidth: '18rem',
- height: '2.7rem',
+ height: '2.5rem',
overflow: 'hidden',
WebkitMaskImage: '-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))',
},
+ nameContainer: {
+ display: 'flex',
+ },
+ activeIndicator: {
+ margin: '0.3rem auto auto 1rem',
+ },
cardheader: {
paddingTop: '0.4rem',
},
cardcontent: {
display: 'flex',
flexDirection: 'column',
- marginTop: '-1rem'
+ marginTop: '-1rem',
},
attributesection: {
display: 'flex',
@@ -51,7 +61,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
marginRight: '1rem',
border: '1px solid lightgrey',
padding: '0.5rem',
- borderRadius: '5px'
+ borderRadius: '5px',
},
chipsection: {
display: 'flex',
@@ -59,7 +69,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
tag: {
marginRight: '1rem',
- marginTop: '0.5rem'
+ marginTop: '0.5rem',
},
});
@@ -73,104 +83,181 @@ const mapStateToProps = (state: RootState) => {
};
type DetailsCardProps = {
- currentResource: ProjectResource;
+ currentResource: ProjectResource | UserResource;
};
export const ProjectDetailsCard = connect(mapStateToProps)(
withStyles(styles)((props: DetailsCardProps & WithStyles<CssRules>) => {
- const { classes, currentResource } = props;
- const { name, description, uuid } = currentResource;
- return (
- <Card className={classes.root}>
- <CardHeader
+ const { currentResource } = props;
+ return (currentResource.kind as string) === ResourceKind.USER ? <UserCard props={props} /> : <ProjectCard props={props} />;
+ })
+);
+
+const UserCard = ({ props }) => {
+ const { classes, currentResource } = props;
+ const { fullName, uuid, username, email, isAdmin } = currentResource as UserResource & { fullName: string };
+
+ return (
+ <Card className={classes.root}>
+ <CardHeader
className={classes.cardheader}
- title={
+ title={
+ <section className={classes.nameContainer}>
<Typography
noWrap
variant='h6'
- >
- {name}
- </Typography>
- }
- subheader={
- description ? (
- <section>
- <Typography className={classes.fadeout}>{description.replace(/<[^>]*>/g, '')}</Typography>
- <RichTextEditorLink
- title={`Description of ${name}`}
- content={description}
- label='Show full description'
- />
- </section>
- ) : (
- '---'
- )
- }
- action={<MultiselectToolbar inputSelectedUuid={uuid} />}
- />
- <CardContent className={classes.cardcontent}>
- <section className={classes.attributesection}>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Type'
- value={currentResource.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Owner'
- linkToUuid={currentResource.ownerUuid}
- uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Last modified'
- value={formatDate(currentResource.modifiedAt)}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Created at'
- value={formatDate(currentResource.createdAt)}
- />
+ >
+ {fullName}
</Typography>
<Typography
- component='div'
- className={classes.attribute}
+ className={classes.activeIndicator}
>
- <DetailsAttribute
- label='UUID'
- linkToUuid={currentResource.uuid}
- value={currentResource.uuid}
- />
+ <UserResourceAccountStatus uuid={uuid} />
</Typography>
</section>
- <section className={classes.chipsection}>
- <Typography
- component='div'
- >
- {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).map((k) =>
+ }
+ action={
+ <MultiselectToolbar inputSelectedUuid={uuid} />
+ }
+ />
+ <CardContent className={classes.cardcontent}>
+ <section className={classes.attributesection}>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Username'
+ value={username}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Email'
+ value={email}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Admin'
+ value={isAdmin ? 'Yes' : 'No'}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='UUID'
+ linkToUuid={currentResource.uuid}
+ value={currentResource.uuid}
+ />
+ </Typography>
+ </section>
+ </CardContent>
+ </Card>
+ );
+};
+
+const ProjectCard = ({ props }) => {
+ const { classes, currentResource } = props;
+ const { name, uuid, description } = currentResource as ProjectResource;
+ return (
+ <Card className={classes.root}>
+ <CardHeader
+ className={classes.cardheader}
+ title={
+ <Typography
+ noWrap
+ variant='h6'
+ >
+ {name}
+ </Typography>
+ }
+ subheader={
+ description ? (
+ <section>
+ <Typography className={classes.fadeout}>{description.replace(/<[^>]*>/g, '')}</Typography>
+ <RichTextEditorLink
+ title={`Description of ${name}`}
+ content={description}
+ label='Show full description'
+ />
+ </section>
+ ) : (
+ 'no description available'
+ )
+ }
+ action={<MultiselectToolbar inputSelectedUuid={uuid} />}
+
+ />
+ <CardContent className={classes.cardcontent}>
+ <section className={classes.attributesection}>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Type'
+ value={currentResource.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Owner'
+ linkToUuid={currentResource.ownerUuid}
+ uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Last modified'
+ value={formatDate(currentResource.modifiedAt)}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Created at'
+ value={formatDate(currentResource.createdAt)}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='UUID'
+ linkToUuid={currentResource.uuid}
+ value={currentResource.uuid}
+ />
+ </Typography>
+ </section>
+ <section className={classes.chipsection}>
+ <Typography component='div'>
+ {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)
)}
- </Typography>
- </section>
- </CardContent>
- </Card>
- );
- })
-);
+ </Typography>
+ </section>
+ </CardContent>
+ </Card>
+ );
+};
diff --git a/services/workbench2/src/views/project-panel/project-panel.tsx b/services/workbench2/src/views/project-panel/project-panel.tsx
index cf79857a71..159559f2c9 100644
--- a/services/workbench2/src/views/project-panel/project-panel.tsx
+++ b/services/workbench2/src/views/project-panel/project-panel.tsx
@@ -264,11 +264,11 @@ export const ProjectPanel = withStyles(styles)(
connect(mapStateToProps)(
class extends React.Component<ProjectPanelProps> {
render() {
- const { classes, userUuid, currentItemId } = this.props;
+ const { classes } = this.props;
return this.props.project ?
<div data-cy='project-panel' className={classes.root}>
- {currentItemId !== userUuid && <ProjectDetailsCard />}
+ <ProjectDetailsCard />
<DataExplorer
id={PROJECT_PANEL_ID}
onRowClick={this.handleRowClick}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list