From fa03027f1954dfdd98c3d3d4f74ea3a016cf57c0 Mon Sep 17 00:00:00 2001
From: Peter Amstutz <peter.amstutz@curii.com>
Date: Sat, 27 Feb 2021 17:40:37 -0500
Subject: [PATCH] 17426: Pass through menu styling.  Make example a card.

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>
---
 src/common/plugintypes.ts                     |  2 +-
 src/plugins.tsx                               |  4 +--
 src/plugins/example/index.tsx                 | 25 +++++++++++--------
 .../side-panel-button/side-panel-button.tsx   |  4 +--
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/common/plugintypes.ts b/src/common/plugintypes.ts
index bda92b67..00cc1e36 100644
--- a/src/common/plugintypes.ts
+++ b/src/common/plugintypes.ts
@@ -8,7 +8,7 @@ import { RootStore, RootState } from '~/store/store';
 import { ResourcesState } from '~/store/resources/resources';
 import { Location } from 'history';
 
-export type ElementListReducer = (startingList: React.ReactElement[]) => React.ReactElement[];
+export type ElementListReducer = (startingList: React.ReactElement[], itemClass?: string) => React.ReactElement[];
 export type CategoriesListReducer = (startingList: string[]) => string[];
 export type NavigateMatcher = (dispatch: Dispatch, getState: () => RootState, uuid: string) => boolean;
 export type LocationChangeMatcher = (store: RootStore, pathname: string) => boolean;
diff --git a/src/plugins.tsx b/src/plugins.tsx
index 3a58a8c2..a7d033dd 100644
--- a/src/plugins.tsx
+++ b/src/plugins.tsx
@@ -20,10 +20,10 @@ export const pluginConfig: PluginConfig = {
 
 // Starting here, import and register your Workbench 2 plugins. //
 
-import { register as blankUIPluginRegister } from '~/plugins/blank/index';
+// import { register as blankUIPluginRegister } from '~/plugins/blank/index';
 import { register as examplePluginRegister, routePath as exampleRoutePath } from '~/plugins/example/index';
 import { register as rootRedirectRegister } from '~/plugins/root-redirect/index';
 
-blankUIPluginRegister(pluginConfig);
+// blankUIPluginRegister(pluginConfig);
 examplePluginRegister(pluginConfig);
 rootRedirectRegister(pluginConfig, exampleRoutePath);
diff --git a/src/plugins/example/index.tsx b/src/plugins/example/index.tsx
index 6e2b1dee..36647fac 100644
--- a/src/plugins/example/index.tsx
+++ b/src/plugins/example/index.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 import { Dispatch } from 'redux';
 import { RootState } from '~/store/store';
 import { push } from "react-router-redux";
-import { Typography } from "@material-ui/core";
+import { Card, CardContent, Typography } from "@material-ui/core";
 import { Route, matchPath } from "react-router";
 import { RootStore } from '~/store/store';
 import { activateSidePanelTreeItem } from '~/store/side-panel-tree/side-panel-tree-actions';
@@ -26,6 +26,7 @@ const propertyKey = "Example_menu_item_pressed_count";
 
 interface ExampleProps {
     pressedCount: number;
+    className?: string;
 }
 
 const exampleMapStateToProps = (state: RootState) => ({ pressedCount: state.properties[propertyKey] || 0 });
@@ -35,15 +36,19 @@ const incrementPressedCount = (dispatch: Dispatch, pressedCount: number) => {
 };
 
 const ExampleMenuComponent = connect(exampleMapStateToProps)(
-    ({ pressedCount, dispatch }: ExampleProps & DispatchProp<any>) =>
-        <MenuItem onClick={() => incrementPressedCount(dispatch, pressedCount)}>Example menu item</MenuItem >
+    ({ pressedCount, dispatch, className }: ExampleProps & DispatchProp<any>) =>
+        <MenuItem className={className} onClick={() => incrementPressedCount(dispatch, pressedCount)}>Example menu item</MenuItem >
 );
 
 const ExamplePluginMainPanel = connect(exampleMapStateToProps)(
     ({ pressedCount }: ExampleProps) =>
-        <Typography>
-            This is a example main panel plugin.  The example menu item has been pressed {pressedCount} times.
-	</Typography>);
+        <Card>
+            <CardContent>
+                <Typography>
+                    This is a example main panel plugin.  The example menu item has been pressed {pressedCount} times.
+		</Typography>
+            </CardContent>
+        </Card>);
 
 export const register = (pluginConfig: PluginConfig) => {
 
@@ -52,13 +57,13 @@ export const register = (pluginConfig: PluginConfig) => {
         return elms;
     });
 
-    pluginConfig.accountMenuList.push((elms) => {
-        elms.push(<ExampleMenuComponent />);
+    pluginConfig.accountMenuList.push((elms, menuItemClass) => {
+        elms.push(<ExampleMenuComponent className={menuItemClass} />);
         return elms;
     });
 
-    pluginConfig.newButtonMenuList.push((elms) => {
-        elms.push(<ExampleMenuComponent />);
+    pluginConfig.newButtonMenuList.push((elms, menuItemClass) => {
+        elms.push(<ExampleMenuComponent className={menuItemClass} />);
         return elms;
     });
 
diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
index 4c25bcfe..151cfb68 100644
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -113,8 +113,8 @@ export const SidePanelButton = withStyles(styles)(
                     </MenuItem>
                 </>;
 
-                const reduceItemsFn: (a: React.ReactElement[],
-                    b: ElementListReducer) => React.ReactElement[] = (a, b) => b(a);
+                const reduceItemsFn: (a: React.ReactElement[], b: ElementListReducer) => React.ReactElement[] =
+                    (a, b) => b(a, classes.menuItem);
 
                 menuItems = React.createElement(React.Fragment, null,
                     pluginConfig.newButtonMenuList.reduce(reduceItemsFn, React.Children.toArray(menuItems.props.children)));
-- 
2.30.2