[arvados] updated: 2.7.0-5833-g656210fc24
git repository hosting
git at public.arvados.org
Fri Jan 19 15:07:58 UTC 2024
Summary of changes:
.../src/views-components/details-card.tsx | 67 ---------
.../project-details-card/project-details-card.tsx | 155 +++++++++++++++++++++
.../src/views/project-panel/project-panel.tsx | 4 +-
3 files changed, 157 insertions(+), 69 deletions(-)
delete mode 100644 services/workbench2/src/views-components/details-card.tsx
create mode 100644 services/workbench2/src/views-components/project-details-card/project-details-card.tsx
via 656210fc24099fc79365511844fd30c11300c117 (commit)
from 502051ab7d3d721542adb981e3b5f828758ae3f4 (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 656210fc24099fc79365511844fd30c11300c117
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Fri Jan 19 10:07:52 2024 -0500
21224: details attributes up Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/services/workbench2/src/views-components/details-card.tsx b/services/workbench2/src/views-components/details-card.tsx
deleted file mode 100644
index aa70343544..0000000000
--- a/services/workbench2/src/views-components/details-card.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from 'react';
-import { Card, CardHeader, WithStyles, withStyles, Typography, CardContent } from '@material-ui/core';
-import { StyleRulesCallback } 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';
-
-type CssRules = 'root';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- root: {
- width: '100%',
- marginBottom: '1.5rem',
- },
-});
-
-const mapStateToProps = (state: RootState) => {
- const currentRoute = state.router.location?.pathname.split('/') || [];
- const currentItemUuid = currentRoute[currentRoute?.length - 1];
- const currentResource = getResource(currentItemUuid)(state.resources);
- return {
- currentResource,
- };
-};
-
-type DetailsCardProps = {
- currentResource: any;
-};
-
-export const DetailsCard = connect(mapStateToProps)(
- withStyles(styles)((props: DetailsCardProps & WithStyles<CssRules>) => {
- const { classes, currentResource } = props;
- const { name, description, uuid } = currentResource;
- return (
- <Card className={classes.root}>
- {console.log(currentResource)}
- <CardHeader
- title={
- <Typography
- noWrap
- variant='h6'
- >
- {name}
- </Typography>
- }
- subheader={
- <Typography
- noWrap
- variant='body1'
- color='inherit'
- >
- {description ? description.replace(/<[^>]*>/g, '') : '(no-description)'}
- </Typography>
- }
- action={<MultiselectToolbar inputSelectedUuid={uuid} />}
- />
- <CardContent></CardContent>
- </Card>
- );
- })
-);
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
new file mode 100644
index 0000000000..6a140a0345
--- /dev/null
+++ b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
@@ -0,0 +1,155 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { Card, CardHeader, WithStyles, withStyles, Typography, CardContent } from '@material-ui/core';
+import { StyleRulesCallback } 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 { DetailsAttribute } from 'components/details-attribute/details-attribute';
+import { RichTextEditorLink } from 'components/rich-text-editor-link/rich-text-editor-link';
+import { getPropertyChip } from '../resource-properties-form/property-chip';
+import { ProjectResource } from 'models/project';
+import { GroupClass } from 'models/group';
+import { ResourceWithName } from 'views-components/data-explorer/renderers';
+import { formatDate } from 'common/formatters';
+import { resourceLabel } from 'common/labels';
+import { ResourceKind } from 'models/resource';
+
+type CssRules = 'root' | 'fadeout' | 'cardcontent' | 'attribute' | 'tag';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ width: '100%',
+ marginBottom: '1rem',
+ },
+ fadeout: {
+ maxWidth: '45%',
+ minWdidth: '18rem',
+ height: '2.7rem',
+ overflow: 'hidden',
+ WebkitMaskImage: '-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))',
+ },
+ cardcontent: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ attribute: {
+ marginBottom: '0.5rem',
+ marginRight: '1rem',
+ },
+ tag: {},
+});
+
+const mapStateToProps = (state: RootState) => {
+ const currentRoute = state.router.location?.pathname.split('/') || [];
+ const currentItemUuid = currentRoute[currentRoute.length - 1];
+ const currentResource = getResource(currentItemUuid)(state.resources);
+ return {
+ currentResource,
+ };
+};
+
+type DetailsCardProps = {
+ currentResource: ProjectResource;
+};
+
+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}>
+ {console.log(currentResource)}
+ <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>
+ ) : (
+ '---'
+ )
+ }
+ action={<MultiselectToolbar inputSelectedUuid={uuid} />}
+ />
+ <CardContent className={classes.cardcontent}>
+ <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>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ {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>
+ </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 4bb11eaa58..cf79857a71 100644
--- a/services/workbench2/src/views/project-panel/project-panel.tsx
+++ b/services/workbench2/src/views/project-panel/project-panel.tsx
@@ -53,7 +53,7 @@ import { resourceIsFrozen } from 'common/frozen-resources';
import { ProjectResource } from 'models/project';
import { NotFoundView } from 'views/not-found-panel/not-found-panel';
import { deselectAllOthers, toggleOne } from 'store/multiselect/multiselect-actions';
-import { DetailsCard } from 'views-components/details-card';
+import { ProjectDetailsCard } from 'views-components/project-details-card/project-details-card';
type CssRules = 'root' | 'button';
@@ -268,7 +268,7 @@ export const ProjectPanel = withStyles(styles)(
return this.props.project ?
<div data-cy='project-panel' className={classes.root}>
- {currentItemId !== userUuid && <DetailsCard />}
+ {currentItemId !== userUuid && <ProjectDetailsCard />}
<DataExplorer
id={PROJECT_PANEL_ID}
onRowClick={this.handleRowClick}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list