21224: set project card to only display 3 buttons Arvados-DCO-1.1-Signed-off-by:...

[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 7e6d275a6c7728e330993604a6887181f928d855..49884e45dee7eec241bd78ba170c6038d2351acc 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
@@ -16,10 +16,6 @@ import { UserResourceAccountStatus } from 'views-components/data-explorer/render
 import { FavoriteStar, PublicFavoriteStar } from 'views-components/favorite-star/favorite-star';
 import { FreezeIcon } from 'components/icon/icon';
 import { Resource } from 'models/resource';
-import { ContextMenuResource } from 'store/context-menu/context-menu-actions';
-import { openContextMenu, resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
-import { CollectionResource } from 'models/collection';
-import { ContextMenuKind } from 'views-components/context-menu/context-menu';
 import { Dispatch } from 'redux';
 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
 import { ExpandChevronRight } from 'components/expand-chevron-right/expand-chevron-right';
@@ -31,6 +27,7 @@ type CssRules =
     | 'root'
     | 'cardHeaderContainer'
     | 'cardHeader'
+    | 'projectToolbar'
     | 'descriptionToggle'
     | 'showMore'
     | 'noDescription'
@@ -77,6 +74,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         minWidth: '30rem',
         padding: '0.2rem 0.4rem 0.2rem 1rem',
     },
+    projectToolbar: {
+        //shows only the first 3 buttons
+        width: '12rem !important',
+    },
     descriptionToggle: {
         display: 'flex',
         flexDirection: 'row',
@@ -87,7 +88,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         display: 'flex',
         flexDirection: 'column',
         paddingTop: 0,
-        paddingLeft: '0.5rem',
+        paddingLeft: '0.1rem',
     },
     nameSection: {
         display: 'flex',
@@ -151,35 +152,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
         dispatch<any>(setSelectedResourceUuid(uuid));
         dispatch<any>(deselectAllOthers(uuid));
     },
-    handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: any, isAdmin: boolean) => {
-        event.stopPropagation();
-        // When viewing the contents of a filter group, all contents should be treated as read only.
-        let readOnly = false;
-        if (resource.groupClass === 'filter') {
-            readOnly = true;
-        }
-        let menuKind = dispatch<any>(resourceUuidToContextMenuKind(resource.uuid, readOnly));
-        if (menuKind === ContextMenuKind.ROOT_PROJECT) {
-            menuKind = ContextMenuKind.USER_DETAILS;
-        }
-        if (menuKind && resource) {
-            dispatch<any>(
-                openContextMenu(event, {
-                    name: resource.name,
-                    uuid: resource.uuid,
-                    ownerUuid: resource.ownerUuid,
-                    isTrashed: 'isTrashed' in resource ? resource.isTrashed : false,
-                    kind: resource.kind,
-                    menuKind,
-                    isAdmin,
-                    isFrozen: !!resource.frozenByUuid,
-                    description: resource.description,
-                    storageClassesDesired: (resource as CollectionResource).storageClassesDesired,
-                    properties: 'properties' in resource ? resource.properties : {},
-                })
-            );
-        }
-    },
+    
 });
 
 type DetailsCardProps = WithStyles<CssRules> & {
@@ -187,7 +160,6 @@ type DetailsCardProps = WithStyles<CssRules> & {
     frozenByFullName?: string;
     isAdmin: boolean;
     isSelected: boolean;
-    handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: ContextMenuResource, isAdmin: boolean) => void;
     handleCardClick: (resource: any) => void;
 };
 
@@ -195,7 +167,6 @@ type UserCardProps = WithStyles<CssRules> & {
     currentResource: UserResource;
     isAdmin: boolean;
     isSelected: boolean;
-    handleContextMenu: (event: React.MouseEvent<HTMLElement>, resource: ContextMenuResource, isAdmin: boolean) => void;
     handleCardClick: (resource: any) => void;
 };
 
@@ -212,7 +183,7 @@ export const ProjectDetailsCard = connect(
     mapDispatchToProps
 )(
     withStyles(styles)((props: DetailsCardProps) => {
-        const { classes, currentResource, frozenByFullName, handleContextMenu, handleCardClick, isAdmin, isSelected } = props;
+        const { classes, currentResource, frozenByFullName, handleCardClick, isAdmin, isSelected } = props;
         if (!currentResource) {
             return null;
         }
@@ -224,7 +195,6 @@ export const ProjectDetailsCard = connect(
                         currentResource={currentResource as UserResource}
                         isAdmin={isAdmin}
                         isSelected={isSelected}
-                        handleContextMenu={(ev) => handleContextMenu(ev, currentResource as any, isAdmin)}
                         handleCardClick={handleCardClick}
                     />
                 );
@@ -291,7 +261,6 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
     const [showProperties, setShowProperties] = React.useState(false);
 
     const toggleDescription = () => {
-        console.log(showDescription, showProperties);
         setShowDescription(!showDescription);
     };
 
@@ -342,7 +311,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                         </section>
                     }
                 />
-                {isSelected && <MultiselectToolbar />}
+                {isSelected && <MultiselectToolbar injectedStyles={classes.projectToolbar} />}
             </Grid>
             <section onClick={(ev) => ev.stopPropagation()}>
                 {description ? (
@@ -360,9 +329,10 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, fro
                                 <Typography
                                     className={classes.description}
                                     data-cy='project-description'
-                                >
-                                    {description}
-                                </Typography>
+                                    //dangerouslySetInnerHTML is ok here only if description is sanitized,
+                                    //which it is before it is loaded into the redux store
+                                    dangerouslySetInnerHTML={{ __html: description }}
+                                />
                             </Collapse>
                         </section>
                     </section>