21224: created global current uuid property in store state Arvados-DCO-1.1-Signed...

[arvados.git] / 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 141d5d7ceb0ca340ee6ae40633812b5371e75968..0988d7c1681bf7b38ad15b91b7ca38f959fb4ba4 100644 (file)
--- 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
@@ -25,6 +25,7 @@ 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'
@@ -288,11 +289,16 @@ const UserCard: React.FC<UserCardProps> = ({ classes, currentResource, handleCon
 const ProjectCard: React.FC<ProjectCardProps> = ({ 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 (
         <Card
             className={classNames(classes.root, isSelected ? classes.selected : '')}
@@ -329,35 +335,23 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                                 </Tooltip>
                             )}
                         </section>
-                        <section onClick={(ev) => ev.stopPropagation()}>
-                            {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 && (
-                                <CardContent className={classes.cardContent}>
-                                    <Typography component='div'>
-                                        {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>
-                            )}
-                        </section>
                     </section>
                 }
                 action={
-                    <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>
+                    <MultiselectToolbar />
+                    // <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>
                 }
             />
             <section onClick={(ev) => ev.stopPropagation()}>
@@ -368,18 +362,18 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                     >
                         <ExpandChevronRight expanded={showDescription} />
                         <section className={classes.showMore}>
-                        <Collapse
-                            in={showDescription}
-                            timeout='auto'
-                            collapsedHeight='1.25rem'
-                        >
-                            <Typography
-                                className={classes.description}
-                                data-cy='project-description'
+                            <Collapse
+                                in={showDescription}
+                                timeout='auto'
+                                collapsedHeight='1.25rem'
                             >
-                                {description}
-                            </Typography>
-                        </Collapse>
+                                <Typography
+                                    className={classes.description}
+                                    data-cy='project-description'
+                                >
+                                    {description}
+                                </Typography>
+                            </Collapse>
                         </section>
                     </section>
                 ) : (
@@ -390,6 +384,36 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                         no description available
                     </Typography>
                 )}
+                {typeof currentResource.properties === 'object' && Object.keys(currentResource.properties).length > 0 ? (
+                    <section
+                        onClick={toggleProperties}
+                        className={classes.descriptionToggle}
+                    >
+                        <ExpandChevronRight expanded={showProperties} />
+                        <section className={classes.showMore}>
+                            <Collapse
+                                in={showProperties}
+                                timeout='auto'
+                                collapsedHeight='35px'
+                            >
+                                <Typography
+                                    className={classes.description}
+                                    data-cy='project-description'
+                                >
+                                    <CardContent className={classes.cardContent}>
+                                        <Typography component='div'>
+                                            {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>
+                                </Typography>
+                            </Collapse>
+                        </section>
+                    </section>
+                ) : null}
             </section>
         </Card>
     );