Fixed regression with AppButton

Author: seizadi

cmdb-ui/.eslintcache

@@ -1,8 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -14,38 +12,18 @@ const useStyles = makeStyles((theme) => ({
 
 export default function AppButton(props) {
   const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState(null);
 
-  const handleClick = (event) => {
-      setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleSelect = (showValues) => {
-    setAnchorEl(null);
+  const handleClick = () => {
     if (props.onClick) {
-      props.onClick(showValues, props.app);
+      return props.onClick(props.app);
     }
   };
 
   return (
     <span className={classes.root}>
-      <Button aria-controls="simple-menu" aria-haspopup="true" color="primary" onClick={handleClick}>
+      <Button variant="contained" color="primary" onClick={handleClick}>
         {props.app.name}
       </Button>
-      <Menu
-        id="simple-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-      >
-        <MenuItem onClick={() => handleSelect(false) }>Manifest</MenuItem>
-        <MenuItem onClick={() => handleSelect(true) }>Values</MenuItem>
-      </Menu>
     </span>
   );
 }

cmdb-ui/src/cmdb/applications/AppButton.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  paper: {
+    border: '1px solid #d3d4d5',
+  },
+}));
+
+export default function AppInstanceButton(props) {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+      setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSelect = (showValues) => {
+    setAnchorEl(null);
+    if (props.onClick) {
+      props.onClick(showValues, props.app);
+    }
+  };
+
+  return (
+    <span className={classes.root}>
+      <Button
+        aria-controls="customized-menu"
+        aria-haspopup="true"
+        variant="contained"
+        color="primary"
+        onClick={handleClick}>
+        {props.app.name}
+      </Button>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={() => handleSelect(false) }>Manifest</MenuItem>
+        <MenuItem onClick={() => handleSelect(true) }>Values</MenuItem>
+      </Menu>
+    </span>
+  );
+}

cmdb-ui/src/cmdb/applications/AppInstanceButton.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 // from core components
 import EnvironmentSelects from "../environments/EnvironmentSelects";
-import AppButton from "./AppButton";
+import AppInstanceButton from "./AppInstanceButton";
 
 // from Redux
 import IconButton from "@material-ui/core/IconButton";
@@ -41,7 +41,7 @@ class ApplicationInstances extends React.Component {
       <>
         <h3>{enabledAppInstances.length} Application Instances</h3>
         { enabledAppInstances.map( (applicationInstance) => {
-          return <AppButton key={applicationInstance.id} app={applicationInstance} onClick={(showValues) => {this.showAppView(showValues, applicationInstance)}}/>;
+          return <AppInstanceButton key={applicationInstance.id} app={applicationInstance} onClick={(showValues) => {this.showAppView(showValues, applicationInstance)}}/>;
         })}
       </>
     );

cmdb-ui/src/cmdb/applications/ApplicationInstances.js

@@ -93,8 +93,8 @@ class Applications extends React.Component {
         return (application.name && application.name.length);
       }).map( (application) => {
         return < AppButton key={application.id}
-                           app={application}
-                           onClick={() => {this.handleAppClick(application)}} />
+                                   app={application}
+                                   onClick={() => {this.handleAppClick(application)}} />
       }));
   };