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 db8271acd2e957cbc6d630b66d6a68bb2e30fe05..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
@@ -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'
@@ -40,6 +41,7 @@ type CssRules =
     | 'faveIcon'
     | 'frozenIcon'
     | 'contextMenuSection'
+    | 'toolbarSection'
     | 'tag'
     | 'description';
 
@@ -49,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',
@@ -112,6 +114,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         alignItems: 'center',
         paddingTop: '0.25rem',
     },
+    toolbarSection: {
+        marginTop: '-1rem',
+    },
     tag: {
         marginRight: '1rem',
         marginTop: '1rem',
@@ -122,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,
@@ -195,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;
 };
 
@@ -228,7 +230,6 @@ export const ProjectDetailsCard = connect(
                         frozenByFullName={frozenByFullName}
                         isAdmin={isAdmin}
                         isSelected={isSelected}
-                        handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
                         handleCardClick={handleCardClick}
                     />
                 );
@@ -285,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);
@@ -337,18 +338,8 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                     </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 className={classes.toolbarSection}>
+                        {isSelected && <MultiselectToolbar />}
                     </section>
                 }
             />
@@ -394,7 +385,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                                 timeout='auto'
                                 collapsedHeight='35px'
                             >
-                                <Typography
+                                <div
                                     className={classes.description}
                                     data-cy='project-description'
                                 >
@@ -407,7 +398,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                                             )}
                                         </Typography>
                                     </CardContent>
-                                </Typography>
+                                </div>
                             </Collapse>
                         </section>
                     </section>