From a9ef5f91bad50216c969d403b32e68f216a7a99a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 4 Jan 2018 11:05:22 +0000
Subject: [PATCH] fix(my-joy-beta): revise and fix disabled/loading actions

---
 .../instances/__tests__/summary.spec.js       |  4 +-
 .../src/components/instances/list.js          |  9 ++-
 .../src/components/instances/summary.js       | 60 +++++++++++--------
 .../instances/__tests__/summary.spec.js       |  6 +-
 .../src/containers/instances/list.js          | 13 ++--
 .../src/containers/instances/summary.js       |  6 +-
 6 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/packages/my-joy-beta/src/components/instances/__tests__/summary.spec.js b/packages/my-joy-beta/src/components/instances/__tests__/summary.spec.js
index 7adbdb41..f7d4923f 100644
--- a/packages/my-joy-beta/src/components/instances/__tests__/summary.spec.js
+++ b/packages/my-joy-beta/src/components/instances/__tests__/summary.spec.js
@@ -17,12 +17,12 @@ it('renders <Summary /> without throwing', () => {
   ).toMatchSnapshot();
 });
 
-it('renders <Summary starting stopping rebooting deleting /> without throwing', () => {
+it('renders <Summary starting stopping rebooting removing /> without throwing', () => {
   expect(
     renderer
       .create(
         <Theme>
-          <Summary starting stopping rebooting deleting />
+          <Summary starting stopping rebooting removing />
         </Theme>
       )
       .toJSON()
diff --git a/packages/my-joy-beta/src/components/instances/list.js b/packages/my-joy-beta/src/components/instances/list.js
index 73bfd79f..80c4a9bd 100644
--- a/packages/my-joy-beta/src/components/instances/list.js
+++ b/packages/my-joy-beta/src/components/instances/list.js
@@ -2,6 +2,7 @@ import React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import remcalc from 'remcalc';
 import titleCase from 'title-case';
+import { withTheme } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { Field } from 'redux-form';
 
@@ -91,9 +92,13 @@ export const Item = ({
             <PopoverItem disabled={!allowedActions.stop} onClick={onStop}>
               Stop
             </PopoverItem>
-            <PopoverItem onClick={onReboot}>Reboot</PopoverItem>
+            <PopoverItem disabled={!allowedActions.reboot} onClick={onReboot}>
+              Reboot
+            </PopoverItem>
             <PopoverDivider />
-            <PopoverItem onClick={onRemove}>Remove</PopoverItem>
+            <PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
+              Remove
+            </PopoverItem>
           </Popover>
         </TableTd>
       </PopoverContainer>
diff --git a/packages/my-joy-beta/src/components/instances/summary.js b/packages/my-joy-beta/src/components/instances/summary.js
index 78088bfc..5f9676d7 100644
--- a/packages/my-joy-beta/src/components/instances/summary.js
+++ b/packages/my-joy-beta/src/components/instances/summary.js
@@ -200,7 +200,7 @@ export default withTheme(
     starting = false,
     stopping = false,
     rebooting = false,
-    deleting = false,
+    removing = false,
     onAction,
     theme = {}
   }) => (
@@ -215,26 +215,26 @@ export default withTheme(
                   <Button
                     type="button"
                     loading={starting}
-                    disabled={instance.state === 'RUNNING'}
+                    disabled={instance.state !== 'STOPPED'}
                     onClick={() => onAction('start')}
                     secondary
-                    bold
+                    small
                     icon
                   >
-                    <StartIcon disabled={instance.state === 'RUNNING'} />
+                    <StartIcon disabled={instance.state !== 'STOPPED'} />
                   </Button>
                 </SmallOnly>
                 <Medium>
                   <Button
                     type="button"
                     loading={starting}
-                    disabled={instance.state === 'RUNNING'}
+                    disabled={instance.state !== 'STOPPED'}
                     onClick={() => onAction('start')}
                     secondary
                     bold
                     icon
                   >
-                    <StartIcon disabled={instance.state === 'RUNNING'} />
+                    <StartIcon disabled={instance.state !== 'STOPPED'} />
                     <span>Start</span>
                   </Button>
                 </Medium>
@@ -242,26 +242,26 @@ export default withTheme(
                   <Button
                     type="button"
                     loading={stopping}
-                    disabled={instance.state === 'STOPPED'}
+                    disabled={instance.state !== 'RUNNING'}
                     onClick={() => onAction('stop')}
                     secondary
-                    bold
+                    small
                     icon
                   >
-                    <StopIcon disabled={instance.state === 'STOPPED'} />
+                    <StopIcon disabled={instance.state !== 'RUNNING'} />
                   </Button>
                 </SmallOnly>
                 <Medium>
                   <Button
                     type="button"
                     loading={stopping}
-                    disabled={instance.state === 'STOPPED'}
+                    disabled={instance.state !== 'RUNNING'}
                     onClick={() => onAction('stop')}
                     secondary
                     bold
                     icon
                   >
-                    <StopIcon disabled={instance.state === 'STOPPED'} />
+                    <StopIcon disabled={instance.state !== 'RUNNING'} />
                     <span>Stop</span>
                   </Button>
                 </Medium>
@@ -269,26 +269,26 @@ export default withTheme(
                   <Button
                     type="button"
                     loading={rebooting}
-                    disabled={instance.state === 'PROVISIONING'}
+                    disabled={instance.state !== 'RUNNING'}
                     onClick={() => onAction('reboot')}
                     secondary
-                    bold
+                    small
                     icon
                   >
-                    <ResetIcon disabled={instance.state === 'PROVISIONING'} />
+                    <ResetIcon disabled={instance.state !== 'RUNNING'} />
                   </Button>
                 </SmallOnly>
                 <Medium>
                   <Button
                     type="button"
                     loading={rebooting}
-                    disabled={instance.state === 'PROVISIONING'}
+                    disabled={instance.state !== 'RUNNING'}
                     onClick={() => onAction('reboot')}
                     secondary
                     bold
                     icon
                   >
-                    <ResetIcon disabled={instance.state === 'PROVISIONING'} />
+                    <ResetIcon disabled={instance.state !== 'RUNNING'} />
                     <span>Reboot</span>
                   </Button>
                 </Medium>
@@ -297,26 +297,32 @@ export default withTheme(
                 <SmallOnly>
                   <Button
                     type="button"
-                    loading={deleting}
-                    disabled={instance.state === 'PROVISIONING'}
+                    loading={removing}
+                    disabled={
+                      ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                    }
                     onClick={() => onAction('remove')}
                     secondary
-                    bold
+                    small
                     right
                     icon
                     error
                   >
                     <DeleteIcon
                       fill={theme.red}
-                      disabled={instance.state === 'PROVISIONING'}
+                      disabled={
+                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                      }
                     />
                   </Button>
                 </SmallOnly>
                 <Medium>
                   <Button
                     type="button"
-                    loading={deleting}
-                    disabled={instance.state === 'PROVISIONING'}
+                    loading={removing}
+                    disabled={
+                      ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                    }
                     onClick={() => onAction('remove')}
                     secondary
                     bold
@@ -325,8 +331,14 @@ export default withTheme(
                     error
                   >
                     <DeleteIcon
-                      fill={theme.red}
-                      disabled={instance.state === 'PROVISIONING'}
+                      fill={
+                        ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
+                          ? theme.red
+                          : undefined
+                      }
+                      disabled={
+                        ['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
+                      }
                     />
                     <span>Remove</span>
                   </Button>
diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/summary.spec.js b/packages/my-joy-beta/src/containers/instances/__tests__/summary.spec.js
index 2b113ee9..ac029b56 100644
--- a/packages/my-joy-beta/src/containers/instances/__tests__/summary.spec.js
+++ b/packages/my-joy-beta/src/containers/instances/__tests__/summary.spec.js
@@ -53,19 +53,19 @@ it('renders <Summary mutationError /> without throwing', () => {
   ).toMatchSnapshot();
 });
 
-it('renders <Summary starting stopping rebooting deleting /> without throwing', () => {
+it('renders <Summary starting stopping rebooting removing /> without throwing', () => {
   expect(
     renderer
       .create(
         <Theme>
-          <Summary starting stopping rebooting deleting />
+          <Summary starting stopping rebooting removing />
         </Theme>
       )
       .toJSON()
   ).toMatchSnapshot();
 });
 
-it('renders <Summary starting stopping rebooting deleting /> without throwing', () => {
+it('renders <Summary starting stopping rebooting removing /> without throwing', () => {
   const instance1 = {
     id: '2252839a-e698-ceec-afac-9549ad0c6624',
     // eslint-disable-next-line camelcase
diff --git a/packages/my-joy-beta/src/containers/instances/list.js b/packages/my-joy-beta/src/containers/instances/list.js
index 9f8322d0..7419f1bf 100644
--- a/packages/my-joy-beta/src/containers/instances/list.js
+++ b/packages/my-joy-beta/src/containers/instances/list.js
@@ -165,7 +165,9 @@ export default compose(
         state,
         allowedActions: {
           start: state !== 'RUNNING',
-          stop: state === 'RUNNING'
+          stop: state === 'RUNNING',
+          reboot: state === 'RUNNING',
+          remove: state !== 'PROVISIONING'
         }
       }));
 
@@ -213,9 +215,10 @@ export default compose(
         .filter(Boolean);
 
       const allowedActions = {
-        start: selected.some(({ state }) => state !== 'RUNNING'),
-        stop: selected.some(({ state }) => state === 'RUNNING'),
-        reboot: selected.some(({ state }) => (['RUNNING', 'STOPPED'].indexOf(state) >= 0))
+        start: selected.every(({ state }) => state === 'STOPPED'),
+        stop: selected.every(({ state }) => state === 'RUNNING'),
+        reboot: selected.every(({ state }) => state === 'RUNNING'),
+        remove: selected.every(({ state }) => state !== 'PROVISIONING')
       };
 
       // get mutating statuses
@@ -223,7 +226,7 @@ export default compose(
         starting: get(values, 'instance-list-starting', false),
         stopping: get(values, 'instance-list-stoping', false),
         rebooting: get(values, 'instance-list-rebooting', false),
-        deleting: get(values, 'instance-list-removeing', false)
+        removing: get(values, 'instance-list-removeing', false)
       };
 
       return {
diff --git a/packages/my-joy-beta/src/containers/instances/summary.js b/packages/my-joy-beta/src/containers/instances/summary.js
index fa136826..2507e924 100644
--- a/packages/my-joy-beta/src/containers/instances/summary.js
+++ b/packages/my-joy-beta/src/containers/instances/summary.js
@@ -31,7 +31,7 @@ export const Summary = ({
   starting,
   stopping,
   rebooting,
-  deleting
+  removing
 }) => {
   const { name } = instance || {};
 
@@ -43,7 +43,7 @@ export const Summary = ({
         starting={starting}
         stopping={stopping}
         rebooting={rebooting}
-        deleting={deleting}
+        removing={removing}
         onAction={handleAction}
       />
     );
@@ -108,7 +108,7 @@ export default compose(
         starting: state.values[`${id}-summary-starting`],
         stopping: state.values[`${id}-summary-stoping`],
         rebooting: state.values[`${id}-summary-rebooting`],
-        deleting: state.values[`${id}-summary-removeing`],
+        removing: state.values[`${id}-summary-removeing`],
         mutationError: state.values[`${id}-summary-mutation-error`]
       };
     },