Fix lack of icon styling applied to context menu item

Feature #13784

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/context-menu/context-menu.tsx b/src/components/context-menu/context-menu.tsx
index f519e301f6337fb540fcd96e02536aa7239bfc6b..95bbeafb4f23774c4a358b19282a60120375f751 100644 (file)
--- a/src/components/context-menu/context-menu.tsx
+++ b/src/components/context-menu/context-menu.tsx
@@ -7,8 +7,9 @@ import { DefaultTransformOrigin } from "../popover/helpers";
 import { IconType } from "../icon/icon";
 
 export interface ContextMenuItem {
-    name: string | React.ComponentType;
-    icon: React.ComponentType<any>;
+    name?: string | React.ComponentType;
+    icon?: IconType;
+    component?: React.ComponentType<any>;
 }
 
 export type ContextMenuItemGroup = ContextMenuItem[];
@@ -39,14 +40,16 @@ export class ContextMenu extends React.PureComponent<ContextMenuProps> {
                                 button
                                 key={actionIndex}
                                 onClick={() => onItemClick(item)}>
-                                <ListItemIcon>
-                                    <item.icon />
-                                </ListItemIcon>
-                                <ListItemText>
-                                    {typeof item.name === "string"
-                                        ? item.name
-                                        : <item.name />}
-                                </ListItemText>
+                                {item.icon &&
+                                    <ListItemIcon>
+                                        <item.icon />
+                                    </ListItemIcon>}
+                                {item.name &&
+                                    <ListItemText>
+                                        {item.name}
+                                    </ListItemText>}
+                                {item.component &&
+                                    <item.component />}
                             </ListItem>)}
                         {groupIndex < items.length - 1 && <Divider />}
                     </React.Fragment>)}

diff --git a/src/views-components/context-menu/action-sets/favorite-action.tsx b/src/views-components/context-menu/action-sets/favorite-action.tsx
index 7976eb536b24d809814791aea47231262d375d4e..a4cf4e3bba646a439ba307ea5783466149e91973 100644 (file)
--- a/src/views-components/context-menu/action-sets/favorite-action.tsx
+++ b/src/views-components/context-menu/action-sets/favorite-action.tsx
@@ -12,12 +12,16 @@ const mapStateToProps = (state: RootState) => ({
     isFavorite: state.contextMenu.resource && state.favorites[state.contextMenu.resource.uuid] === true
 });
 
-export const FavoriteActionText = connect(mapStateToProps)((props: { isFavorite: boolean }) =>
-    props.isFavorite
-        ? <>Remove from favorites</>
-        : <>Add to favorites</>);
-
-export const FavoriteActionIcon = connect(mapStateToProps)((props: { isFavorite: boolean }) =>
-    props.isFavorite
-        ? <RemoveFavoriteIcon />
-        : <AddFavoriteIcon />);
+export const ToggleFavoriteAction = connect(mapStateToProps)((props: { isFavorite: boolean }) =>
+    <>
+        <ListItemIcon>
+            {props.isFavorite
+                ? <RemoveFavoriteIcon />
+                : <AddFavoriteIcon />}
+        </ListItemIcon>
+        <ListItemText>
+            {props.isFavorite
+                ? <>Remove from favorites</>
+                : <>Add to favorites</>}
+        </ListItemText>
+    </>);

diff --git a/src/views-components/context-menu/action-sets/project-action-set.ts b/src/views-components/context-menu/action-sets/project-action-set.ts
index e0284e85ef670293b63271948909bd0041d899f5..dd257b7fcd0ac670c7393f9735d50a4356c31c51 100644 (file)
--- a/src/views-components/context-menu/action-sets/project-action-set.ts
+++ b/src/views-components/context-menu/action-sets/project-action-set.ts
@@ -4,9 +4,9 @@
 
 import { ContextMenuActionSet } from "../context-menu-action-set";
 import { projectActions } from "../../../store/project/project-action";
-import { ShareIcon, NewProjectIcon } from "../../../components/icon/icon";
-import { FavoriteActionText, FavoriteActionIcon } from "./favorite-action";
-import { favoritesActions, toggleFavorite } from "../../../store/favorites/favorites-actions";
+import { NewProjectIcon } from "../../../components/icon/icon";
+import { ToggleFavoriteAction } from "./favorite-action";
+import { toggleFavorite } from "../../../store/favorites/favorites-actions";
 
 export const projectActionSet: ContextMenuActionSet = [[{
     icon: NewProjectIcon,
@@ -15,8 +15,7 @@ export const projectActionSet: ContextMenuActionSet = [[{
         dispatch(projectActions.OPEN_PROJECT_CREATOR({ ownerUuid: resource.uuid }));
     }
 }, {
-    name: FavoriteActionText,
-    icon: FavoriteActionIcon,
+    component: ToggleFavoriteAction,
     execute: (dispatch, resource) => {
         dispatch<any>(toggleFavorite(resource.uuid));
     }

diff --git a/src/views-components/context-menu/action-sets/root-project-action-set.ts b/src/views-components/context-menu/action-sets/root-project-action-set.ts
index 8d3d0350e70c5c602de68ff824fb04f3c94a5eec..139bd26f90195e549a78ab0df12e6f72a89eb89a 100644 (file)
--- a/src/views-components/context-menu/action-sets/root-project-action-set.ts
+++ b/src/views-components/context-menu/action-sets/root-project-action-set.ts
@@ -5,7 +5,6 @@
 import { ContextMenuActionSet } from "../context-menu-action-set";
 import { projectActions } from "../../../store/project/project-action";
 import { NewProjectIcon } from "../../../components/icon/icon";
-import { FavoriteActionText, FavoriteActionIcon } from "./favorite-action";
 
 export const rootProjectActionSet: ContextMenuActionSet =  [[{
     icon: NewProjectIcon,