M3-2570 Fix: Only disable Linode Boot if there are no configs

src/components/ActionMenu/ActionMenu.test.tsx

@@ -8,7 +8,8 @@ const classes = {
   button: '',
   hidden: '',
   item: '',
-  root: ''
+  root: '',
+  menu: ''
 };
 
 describe('ActionMenu', () => {

src/components/ActionMenu/ActionMenu.tsx

@@ -13,10 +13,17 @@ export interface Action {
   title: string;
   disabled?: boolean;
   tooltip?: string;
+  isLoading?: boolean;
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
-type CSSClasses = 'root' | 'item' | 'button' | 'actionSingleLink' | 'hidden';
+type CSSClasses =
+  | 'root'
+  | 'item'
+  | 'button'
+  | 'actionSingleLink'
+  | 'hidden'
+  | 'menu';
 
 const styles: StyleRulesCallback<CSSClasses> = theme => ({
   root: {
@@ -60,6 +67,9 @@ const styles: StyleRulesCallback<CSSClasses> = theme => ({
   hidden: {
     height: 0,
     padding: 0
+  },
+  menu: {
+    maxWidth: theme.spacing.unit * 25
   }
 });
 
@@ -130,6 +140,7 @@ export class ActionMenu extends React.Component<CombinedProps, State> {
         </IconButton>
         <Menu
           id="action-menu"
+          className={classes.menu}
           anchorEl={anchorEl}
           getContentAnchorEl={undefined}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
@@ -146,6 +157,7 @@ export class ActionMenu extends React.Component<CombinedProps, State> {
               data-qa-action-menu-item={a.title}
               disabled={a.disabled}
               tooltip={a.tooltip}
+              isLoading={a.isLoading}
             >
               {a.title}
             </MenuItem>

src/components/MenuItem/MenuItem.tsx

@@ -1,5 +1,6 @@
 import HelpOutline from '@material-ui/icons/HelpOutline';
 import * as React from 'react';
+import CircularProgress from 'src/components/core/CircularProgress';
 import IconButton from 'src/components/core/IconButton';
 import MenuItem, { MenuItemProps } from 'src/components/core/MenuItem';
 import {
@@ -14,11 +15,13 @@ type CSSClasses =
   | 'labelWrapper'
   | 'label'
   | 'helpButton'
-  | 'helpIcon';
+  | 'helpIcon'
+  | 'circleProgress';
 
 interface Props {
   tooltip?: string;
   className?: string;
+  isLoading?: boolean;
 }
 
 const styles: StyleRulesCallback<CSSClasses> = theme => ({
@@ -59,6 +62,7 @@ const styles: StyleRulesCallback<CSSClasses> = theme => ({
   helpButton: {
     width: 28,
     height: 28,
+    padding: 0,
     color: theme.palette.primary.main,
     pointerEvents: 'initial',
     '&:hover, &:focus': {
@@ -68,26 +72,38 @@ const styles: StyleRulesCallback<CSSClasses> = theme => ({
   helpIcon: {
     width: 20,
     height: 20
+  },
+  circleProgress: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    margin: '0 auto'
   }
 });
 
 const handleClick = (e: any) => {
   e.stopPropagation();
 };
-
 type CombinedProps = MenuItemProps & Props & WithStyles<CSSClasses>;
 
 const WrapperMenuItem: React.StatelessComponent<CombinedProps> = props => {
-  const { tooltip, classes, className, ...rest } = props;
+  const { tooltip, classes, className, isLoading, ...rest } = props;
+
+  const shouldWrapLabel = isLoading || tooltip;
 
   return (
     <MenuItem
       {...rest}
       className={`${classes.root} ${className} ${tooltip && 'hasTooltip'}`}
     >
-      <span className={tooltip && classes.labelWrapper}>
-        <span className={tooltip && classes.label}>{props.children}</span>
-        {tooltip && (
+      {isLoading && (
+        <CircularProgress size={20} className={classes.circleProgress} />
+      )}
+      <span className={shouldWrapLabel && classes.labelWrapper}>
+        <span className={shouldWrapLabel && classes.label}>
+          {props.children}
+        </span>
+        {tooltip && !isLoading && (
           <IconButton
             className={classes.helpButton}
             onClick={handleClick}

src/features/linodes/LinodesDetail/LinodePowerControl/LinodePowerControl.test.tsx

@@ -22,7 +22,7 @@ describe('Linode Power Control Dialogs', () => {
       label="Test Linode"
       status="running"
       openConfigDrawer={jest.fn()}
-      noImage={false}
+      noConfigs={false}
     />
   );
 

src/features/linodes/LinodesDetail/LinodePowerControl/LinodePowerControl.tsx

@@ -114,7 +114,7 @@ interface Props {
   id: number;
   label: string;
   status: Linode.LinodeStatus;
-  noImage: boolean;
+  noConfigs: boolean;
   recentEvent?: Linode.Event;
   openConfigDrawer: (
     config: Linode.Config[],
@@ -178,7 +178,7 @@ export class LinodePowerButton extends React.Component<CombinedProps, State> {
   };
 
   render() {
-    const { status, classes, recentEvent, noImage } = this.props;
+    const { status, classes, recentEvent, noConfigs } = this.props;
     const {
       menu: { anchorEl },
       bootOption,
@@ -286,10 +286,10 @@ export class LinodePowerButton extends React.Component<CombinedProps, State> {
               onClick={this.powerOn}
               className={classes.menuItem}
               data-qa-set-power="powerOn"
-              disabled={noImage}
+              disabled={noConfigs}
               tooltip={
-                noImage
-                  ? 'An image needs to be added before powering on a Linode'
+                noConfigs
+                  ? 'A config needs to be added before powering on a Linode'
                   : undefined
               }
             >

src/features/linodes/LinodesDetail/LinodesDetailHeader/LinodeControls.tsx

@@ -89,7 +89,7 @@ const LinodeControls: React.StatelessComponent<CombinedProps> = props => {
       .catch(err => {
         const errors: Linode.ApiFieldError[] = getAPIErrorOrDefault(
           err,
-          'An error occured while updating label',
+          'An error occurred while updating label',
           'label'
         );
         const errorStrings: string[] = errors.map(e => e.reason);
@@ -135,7 +135,7 @@ const LinodeControls: React.StatelessComponent<CombinedProps> = props => {
           recentEvent={linode.recentEvent}
           id={linode.id}
           label={linode.label}
-          noImage={!linode.image}
+          noConfigs={linode._configs.length === 0}
           openConfigDrawer={openConfigDrawer}
         />
       </Grid>
@@ -159,7 +159,8 @@ const enhanced = compose<CombinedProps, {}>(
   withEditableLabelState,
   withLinodeDetailContext(({ linode, updateLinode }) => ({
     linode,
-    updateLinode
+    updateLinode,
+    configs: linode._configs
   })),
   styled
 );

src/features/linodes/LinodesLanding/LinodeActionMenu.tsx

@@ -9,6 +9,8 @@ import { powerOnLinode } from './powerActions';
 
 import { sendEvent } from 'src/utilities/analytics';
 
+import { getLinodeConfigs } from 'src/services/linodes';
+
 interface Props {
   linodeId: number;
   linodeLabel: string;
@@ -28,7 +30,38 @@ interface Props {
 
 type CombinedProps = Props & RouteComponentProps<{}>;
 
-class LinodeActionMenu extends React.Component<CombinedProps> {
+interface State {
+  configs: Linode.Config[];
+  hasMadeConfigsRequest: boolean;
+  configsError?: Linode.ApiFieldError[];
+}
+
+class LinodeActionMenu extends React.Component<CombinedProps, State> {
+  state: State = {
+    configs: [],
+    hasMadeConfigsRequest: false,
+    configsError: undefined
+  };
+
+  toggleOpenActionMenu = () => {
+    getLinodeConfigs(this.props.linodeId)
+      .then(configs => {
+        this.setState({
+          configs: configs.data,
+          hasMadeConfigsRequest: true,
+          configsError: undefined
+        });
+      })
+      .catch(err => {
+        this.setState({ hasMadeConfigsRequest: true, configsError: err });
+      });
+
+    sendEvent({
+      category: 'Linode Action Menu',
+      action: 'Open Action Menu'
+    });
+  };
+
   createLinodeActions = () => {
     const {
       linodeId,
@@ -37,9 +70,12 @@ class LinodeActionMenu extends React.Component<CombinedProps> {
       linodeStatus,
       openConfigDrawer,
       toggleConfirmation,
-      noImage,
       history: { push }
     } = this.props;
+    const { configs, hasMadeConfigsRequest } = this.state;
+
+    const noConfigs = hasMadeConfigsRequest && configs.length === 0;
+
     return (closeMenu: Function): Action[] => {
       const actions: Action[] = [
         {
@@ -120,9 +156,12 @@ class LinodeActionMenu extends React.Component<CombinedProps> {
       if (linodeStatus === 'offline') {
         actions.unshift({
           title: 'Power On',
-          disabled: noImage,
-          tooltip: noImage
-            ? 'An image needs to be added before powering on a Linode'
+          disabled: !hasMadeConfigsRequest || noConfigs,
+          isLoading: !hasMadeConfigsRequest,
+          tooltip: this.state.configsError
+            ? 'Could not load configs for this Linode'
+            : noConfigs
+            ? 'A config needs to be added before powering on a Linode'
             : undefined,
           onClick: e => {
             sendEvent({
@@ -191,18 +230,11 @@ class LinodeActionMenu extends React.Component<CombinedProps> {
   render() {
     return (
       <ActionMenu
-        toggleOpenCallback={toggleOpenActionMenu}
+        toggleOpenCallback={this.toggleOpenActionMenu}
         createActions={this.createLinodeActions()}
       />
     );
   }
 }
 
-const toggleOpenActionMenu = () => {
-  sendEvent({
-    category: 'Linode Action Menu',
-    action: 'Open Action Menu'
-  });
-};
-
 export default withRouter(LinodeActionMenu);