21224: card toolbar tooggles correctly Arvados-DCO-1.1-Signed-off-by: Lisa Knox ...

[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 063ea77cd985ca881638db03c8c06fa0df4b7103..ba2e43d0710c73afb421241372883105757232e4 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
@@ -41,6 +41,7 @@ type CssRules =
     | 'faveIcon'
     | 'frozenIcon'
     | 'contextMenuSection'
+    | 'toolbarSection'
     | 'tag'
     | 'description';
 
@@ -50,10 +51,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         marginBottom: '1rem',
         flex: '0 0 auto',
         padding: 0,
-        border: '2px solid transparent',
+        borderLeft: '2px solid transparent',
     },
     selected: {
-        border: '2px solid #ccc',
+        border: '2pcx solid #ccc',
     },
     showMore: {
         cursor: 'pointer',
@@ -113,6 +114,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         alignItems: 'center',
         paddingTop: '0.25rem',
     },
+    toolbarSection: {
+        marginTop: '-1rem',
+    },
     tag: {
         marginRight: '1rem',
         marginTop: '1rem',
@@ -123,16 +127,14 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
 });
 
-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,
@@ -196,7 +198,6 @@ type ProjectCardProps = WithStyles<CssRules> & {
     frozenByFullName: string | undefined;
     isAdmin: boolean;
     isSelected: boolean;
-    handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: ContextMenuResource, isAdmin: boolean) => void;
     handleCardClick: (resource: any) => void;
 };
 
@@ -229,7 +230,6 @@ export const ProjectDetailsCard = connect(
                         frozenByFullName={frozenByFullName}
                         isAdmin={isAdmin}
                         isSelected={isSelected}
-                        handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
                         handleCardClick={handleCardClick}
                     />
                 );
@@ -286,7 +286,7 @@ const UserCard: React.FC<UserCardProps> = ({ classes, currentResource, handleCon
     );
 };
 
-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);
@@ -338,20 +338,9 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                     </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>
+                    <section className={classes.toolbarSection}>
+                        {isSelected && <MultiselectToolbar />}
+                    </section>
                 }
             />
             <section onClick={(ev) => ev.stopPropagation()}>
@@ -396,7 +385,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                                 timeout='auto'
                                 collapsedHeight='35px'
                             >
-                                <Typography
+                                <div
                                     className={classes.description}
                                     data-cy='project-description'
                                 >
@@ -409,7 +398,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                                             )}
                                         </Typography>
                                     </CardContent>
-                                </Typography>
+                                </div>
                             </Collapse>
                         </section>
                     </section>