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(); ).toMatchSnapshot();
}); });
it('renders <Summary starting stopping rebooting deleting /> without throwing', () => { it('renders <Summary starting stopping rebooting removing /> without throwing', () => {
expect( expect(
renderer renderer
.create( .create(
<Theme> <Theme>
<Summary starting stopping rebooting deleting /> <Summary starting stopping rebooting removing />
</Theme> </Theme>
) )
.toJSON() .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 distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import titleCase from 'title-case'; import titleCase from 'title-case';
import { withTheme } from 'styled-components';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
@ -91,9 +92,13 @@ export const Item = ({
<PopoverItem disabled={!allowedActions.stop} onClick={onStop}> <PopoverItem disabled={!allowedActions.stop} onClick={onStop}>
Stop Stop
</PopoverItem> </PopoverItem>
<PopoverItem onClick={onReboot}>Reboot</PopoverItem> <PopoverItem disabled={!allowedActions.reboot} onClick={onReboot}>
Reboot
</PopoverItem>
<PopoverDivider /> <PopoverDivider />
<PopoverItem onClick={onRemove}>Remove</PopoverItem> <PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
Remove
</PopoverItem>
</Popover> </Popover>
</TableTd> </TableTd>
</PopoverContainer> </PopoverContainer>

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

@ -200,7 +200,7 @@ export default withTheme(
starting = false, starting = false,
stopping = false, stopping = false,
rebooting = false, rebooting = false,
deleting = false, removing = false,
onAction, onAction,
theme = {} theme = {}
}) => ( }) => (
@ -215,26 +215,26 @@ export default withTheme(
<Button <Button
type="button" type="button"
loading={starting} loading={starting}
disabled={instance.state === 'RUNNING'} disabled={instance.state !== 'STOPPED'}
onClick={() => onAction('start')} onClick={() => onAction('start')}
secondary secondary
bold small
icon icon
> >
<StartIcon disabled={instance.state === 'RUNNING'} /> <StartIcon disabled={instance.state !== 'STOPPED'} />
</Button> </Button>
</SmallOnly> </SmallOnly>
<Medium> <Medium>
<Button <Button
type="button" type="button"
loading={starting} loading={starting}
disabled={instance.state === 'RUNNING'} disabled={instance.state !== 'STOPPED'}
onClick={() => onAction('start')} onClick={() => onAction('start')}
secondary secondary
bold bold
icon icon
> >
<StartIcon disabled={instance.state === 'RUNNING'} /> <StartIcon disabled={instance.state !== 'STOPPED'} />
<span>Start</span> <span>Start</span>
</Button> </Button>
</Medium> </Medium>
@ -242,26 +242,26 @@ export default withTheme(
<Button <Button
type="button" type="button"
loading={stopping} loading={stopping}
disabled={instance.state === 'STOPPED'} disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('stop')} onClick={() => onAction('stop')}
secondary secondary
bold small
icon icon
> >
<StopIcon disabled={instance.state === 'STOPPED'} /> <StopIcon disabled={instance.state !== 'RUNNING'} />
</Button> </Button>
</SmallOnly> </SmallOnly>
<Medium> <Medium>
<Button <Button
type="button" type="button"
loading={stopping} loading={stopping}
disabled={instance.state === 'STOPPED'} disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('stop')} onClick={() => onAction('stop')}
secondary secondary
bold bold
icon icon
> >
<StopIcon disabled={instance.state === 'STOPPED'} /> <StopIcon disabled={instance.state !== 'RUNNING'} />
<span>Stop</span> <span>Stop</span>
</Button> </Button>
</Medium> </Medium>
@ -269,26 +269,26 @@ export default withTheme(
<Button <Button
type="button" type="button"
loading={rebooting} loading={rebooting}
disabled={instance.state === 'PROVISIONING'} disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('reboot')} onClick={() => onAction('reboot')}
secondary secondary
bold small
icon icon
> >
<ResetIcon disabled={instance.state === 'PROVISIONING'} /> <ResetIcon disabled={instance.state !== 'RUNNING'} />
</Button> </Button>
</SmallOnly> </SmallOnly>
<Medium> <Medium>
<Button <Button
type="button" type="button"
loading={rebooting} loading={rebooting}
disabled={instance.state === 'PROVISIONING'} disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('reboot')} onClick={() => onAction('reboot')}
secondary secondary
bold bold
icon icon
> >
<ResetIcon disabled={instance.state === 'PROVISIONING'} /> <ResetIcon disabled={instance.state !== 'RUNNING'} />
<span>Reboot</span> <span>Reboot</span>
</Button> </Button>
</Medium> </Medium>
@ -297,26 +297,32 @@ export default withTheme(
<SmallOnly> <SmallOnly>
<Button <Button
type="button" type="button"
loading={deleting} loading={removing}
disabled={instance.state === 'PROVISIONING'} disabled={
['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
}
onClick={() => onAction('remove')} onClick={() => onAction('remove')}
secondary secondary
bold small
right right
icon icon
error error
> >
<DeleteIcon <DeleteIcon
fill={theme.red} fill={theme.red}
disabled={instance.state === 'PROVISIONING'} disabled={
['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
}
/> />
</Button> </Button>
</SmallOnly> </SmallOnly>
<Medium> <Medium>
<Button <Button
type="button" type="button"
loading={deleting} loading={removing}
disabled={instance.state === 'PROVISIONING'} disabled={
['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
}
onClick={() => onAction('remove')} onClick={() => onAction('remove')}
secondary secondary
bold bold
@ -325,8 +331,14 @@ export default withTheme(
error error
> >
<DeleteIcon <DeleteIcon
fill={theme.red} fill={
disabled={instance.state === 'PROVISIONING'} ['RUNNING', 'STOPPED'].indexOf(instance.state) >= 0
? theme.red
: undefined
}
disabled={
['RUNNING', 'STOPPED'].indexOf(instance.state) < 0
}
/> />
<span>Remove</span> <span>Remove</span>
</Button> </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(); ).toMatchSnapshot();
}); });
it('renders <Summary starting stopping rebooting deleting /> without throwing', () => { it('renders <Summary starting stopping rebooting removing /> without throwing', () => {
expect( expect(
renderer renderer
.create( .create(
<Theme> <Theme>
<Summary starting stopping rebooting deleting /> <Summary starting stopping rebooting removing />
</Theme> </Theme>
) )
.toJSON() .toJSON()
).toMatchSnapshot(); ).toMatchSnapshot();
}); });
it('renders <Summary starting stopping rebooting deleting /> without throwing', () => { it('renders <Summary starting stopping rebooting removing /> without throwing', () => {
const instance1 = { const instance1 = {
id: '2252839a-e698-ceec-afac-9549ad0c6624', id: '2252839a-e698-ceec-afac-9549ad0c6624',
// eslint-disable-next-line camelcase // 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, state,
allowedActions: { allowedActions: {
start: state !== 'RUNNING', start: state !== 'RUNNING',
stop: state === 'RUNNING' stop: state === 'RUNNING',
reboot: state === 'RUNNING',
remove: state !== 'PROVISIONING'
} }
})); }));
@ -213,9 +215,10 @@ export default compose(
.filter(Boolean); .filter(Boolean);
const allowedActions = { const allowedActions = {
start: selected.some(({ state }) => state !== 'RUNNING'), start: selected.every(({ state }) => state === 'STOPPED'),
stop: selected.some(({ state }) => state === 'RUNNING'), stop: selected.every(({ state }) => state === 'RUNNING'),
reboot: selected.some(({ state }) => (['RUNNING', 'STOPPED'].indexOf(state) >= 0)) reboot: selected.every(({ state }) => state === 'RUNNING'),
remove: selected.every(({ state }) => state !== 'PROVISIONING')
}; };
// get mutating statuses // get mutating statuses
@ -223,7 +226,7 @@ export default compose(
starting: get(values, 'instance-list-starting', false), starting: get(values, 'instance-list-starting', false),
stopping: get(values, 'instance-list-stoping', false), stopping: get(values, 'instance-list-stoping', false),
rebooting: get(values, 'instance-list-rebooting', false), rebooting: get(values, 'instance-list-rebooting', false),
deleting: get(values, 'instance-list-removeing', false) removing: get(values, 'instance-list-removeing', false)
}; };
return { return {

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

@ -31,7 +31,7 @@ export const Summary = ({
starting, starting,
stopping, stopping,
rebooting, rebooting,
deleting removing
}) => { }) => {
const { name } = instance || {}; const { name } = instance || {};
@ -43,7 +43,7 @@ export const Summary = ({
starting={starting} starting={starting}
stopping={stopping} stopping={stopping}
rebooting={rebooting} rebooting={rebooting}
deleting={deleting} removing={removing}
onAction={handleAction} onAction={handleAction}
/> />
); );
@ -108,7 +108,7 @@ export default compose(
starting: state.values[`${id}-summary-starting`], starting: state.values[`${id}-summary-starting`],
stopping: state.values[`${id}-summary-stoping`], stopping: state.values[`${id}-summary-stoping`],
rebooting: state.values[`${id}-summary-rebooting`], 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`] mutationError: state.values[`${id}-summary-mutation-error`]
}; };
}, },