Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(my-joy-beta): revise and fix disabled/loading actions

Browse Source
This commit is contained in:
Sérgio Ramos 2018-01-04 11:05:22 +00:00 committed by Sérgio Ramos
parent 0bccbc1988
commit a9ef5f91ba
6 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/my-joy-beta/src/components/instances/__tests__/summary.spec.js
View File

@ -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()

9
packages/my-joy-beta/src/components/instances/list.js
View File

@ -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>

60
packages/my-joy-beta/src/components/instances/summary.js
View File

@ -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>

6
packages/my-joy-beta/src/containers/instances/__tests__/summary.spec.js
View File

@ -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

13
packages/my-joy-beta/src/containers/instances/list.js
View File

@ -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 {

6
packages/my-joy-beta/src/containers/instances/summary.js
View File

@ -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`]
};
},