feat(instances): CI - Responsive behavior for tags #1121
This commit is contained in:
Fábio Moreira
Sérgio Ramos
parent
c268d88a4d
commit
2f9d135319
@ -10,7 +10,7 @@ import { reset } from 'redux-form';
|
||||
import { destroy } from 'redux-form';
|
||||
import get from 'lodash.get';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
|
||||
import Step, {
|
||||
Header as StepHeader,
|
||||
@ -55,114 +55,122 @@ const Tag = ({ name, value, onRemoveClick }) => (
|
||||
</Margin>
|
||||
);
|
||||
|
||||
const TagsContainer = ({
|
||||
handleValidate,
|
||||
handleGetValue,
|
||||
preview = [],
|
||||
tags = [],
|
||||
addOpen = true,
|
||||
shouldAsyncValidate,
|
||||
handleAddTag,
|
||||
handleAsyncValidate,
|
||||
handleChangeAddOpen,
|
||||
handleRemoveTag,
|
||||
handleCancelEdit,
|
||||
...props
|
||||
}) => (
|
||||
<Step name="tags" getValue={handleGetValue} {...props}>
|
||||
<StepHeader icon={<TagsIcon />}>Tags</StepHeader>
|
||||
<StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
|
||||
Tags can be used to identify your instances, group multiple instances
|
||||
together, define firewall and affinity rules, and more.
|
||||
</StepDescription>
|
||||
<StepPreview>
|
||||
<Margin top="3">
|
||||
<TagCount total={preview.length} />
|
||||
<TagList>
|
||||
{preview.map(({ name, value }, index) => (
|
||||
<Tag name={name} value={value} />
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
</StepPreview>
|
||||
<StepOutlet>
|
||||
{({ next }) => (
|
||||
<Fragment>
|
||||
{tags.length ? (
|
||||
<Margin top="5">
|
||||
<TagCount total={tags.length} />
|
||||
<TagList>
|
||||
{tags.map(({ name, value }, index) => (
|
||||
<Tag
|
||||
name={name}
|
||||
value={value}
|
||||
onRemoveClick={() => handleRemoveTag(index)}
|
||||
id={`tag-${index}`}
|
||||
/>
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
) : null}
|
||||
{addOpen ? (
|
||||
const TagsContainer = withTheme(
|
||||
({
|
||||
handleValidate,
|
||||
handleGetValue,
|
||||
preview = [],
|
||||
tags = [],
|
||||
addOpen = true,
|
||||
shouldAsyncValidate,
|
||||
handleAddTag,
|
||||
handleAsyncValidate,
|
||||
handleChangeAddOpen,
|
||||
handleRemoveTag,
|
||||
handleCancelEdit,
|
||||
theme = {},
|
||||
...props
|
||||
}) => {
|
||||
const mobile = theme.screen === 'mobile';
|
||||
return (
|
||||
<Step name="tags" getValue={handleGetValue} {...props}>
|
||||
<StepHeader icon={<TagsIcon />}>Tags</StepHeader>
|
||||
<StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
|
||||
Tags can be used to identify your instances, group multiple instances
|
||||
together, define firewall and affinity rules, and more.
|
||||
</StepDescription>
|
||||
<StepPreview>
|
||||
<Margin top="3">
|
||||
<TagCount total={preview.length} />
|
||||
<TagList>
|
||||
{preview.map(({ name, value }, index) => (
|
||||
<Tag name={name} value={value} />
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
</StepPreview>
|
||||
<StepOutlet>
|
||||
{({ next }) => (
|
||||
<Fragment>
|
||||
<Margin top="2">
|
||||
<ReduxForm
|
||||
form={IR_TAG_F_ADD}
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
shouldAsyncValidate={shouldAsyncValidate}
|
||||
asyncValidate={handleValidate}
|
||||
onSubmit={handleAddTag}
|
||||
>
|
||||
{props => (
|
||||
<Fragment>
|
||||
<KeyValue
|
||||
{...props}
|
||||
method="add"
|
||||
input="input"
|
||||
type="tag"
|
||||
id="tag"
|
||||
expanded
|
||||
borderless
|
||||
onCancel={() => handleChangeAddOpen(false)}
|
||||
{tags.length ? (
|
||||
<Margin top="5">
|
||||
<TagCount total={tags.length} />
|
||||
<TagList>
|
||||
{tags.map(({ name, value }, index) => (
|
||||
<Tag
|
||||
name={name}
|
||||
value={value}
|
||||
onRemoveClick={() => handleRemoveTag(index)}
|
||||
id={`tag-${index}`}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</ReduxForm>
|
||||
</Margin>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Margin top="5">
|
||||
<Flex>
|
||||
<FlexItem>
|
||||
<Margin right="1">
|
||||
<Button
|
||||
id="add-tag-button"
|
||||
type="button"
|
||||
onClick={() => handleChangeAddOpen(true)}
|
||||
secondary
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
) : null}
|
||||
{addOpen ? (
|
||||
<Fragment>
|
||||
<Margin top="2">
|
||||
<ReduxForm
|
||||
form={IR_TAG_F_ADD}
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
shouldAsyncValidate={shouldAsyncValidate}
|
||||
asyncValidate={handleValidate}
|
||||
onSubmit={handleAddTag}
|
||||
>
|
||||
Add Tag
|
||||
</Button>
|
||||
{props => (
|
||||
<Fragment>
|
||||
<KeyValue
|
||||
{...props}
|
||||
method="add"
|
||||
input="input"
|
||||
type="tag"
|
||||
id="tag"
|
||||
expanded
|
||||
borderless
|
||||
onCancel={() => handleChangeAddOpen(false)}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</ReduxForm>
|
||||
</Margin>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Button
|
||||
id="next-button-tags"
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</Margin>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Margin top="5">
|
||||
<Flex column={mobile}>
|
||||
<FlexItem>
|
||||
<Margin right={mobile ? '0' : '1'}>
|
||||
<Button
|
||||
id="add-tag-button"
|
||||
type="button"
|
||||
onClick={() => handleChangeAddOpen(true)}
|
||||
secondary
|
||||
fluid={mobile}
|
||||
>
|
||||
Add Tag
|
||||
</Button>
|
||||
</Margin>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Button
|
||||
id="next-button-tags"
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
fluid={mobile}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</FlexItem>
|
||||
</Flex>
|
||||
</Margin>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</StepOutlet>
|
||||
</Step>
|
||||
</StepOutlet>
|
||||
</Step>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default compose(
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import { Row, Col as BaseCol } from 'joyent-react-styled-flexboxgrid';
|
||||
import { Field } from 'redux-form';
|
||||
import remcalc from 'remcalc';
|
||||
@ -198,169 +198,152 @@ const InputKeyValue = ({
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export const KeyValue = ({
|
||||
id = null,
|
||||
disabled = false,
|
||||
input = 'input',
|
||||
type = 'metadata',
|
||||
typeLabel = 'key',
|
||||
method = 'add',
|
||||
initialValues = {},
|
||||
error = null,
|
||||
expanded = true,
|
||||
submitting = false,
|
||||
pristine = true,
|
||||
invalid = false,
|
||||
removing = false,
|
||||
onToggleExpanded,
|
||||
onCancel = () => null,
|
||||
onRemove = () => null,
|
||||
editor = null,
|
||||
onlyName = false,
|
||||
onlyValue = false,
|
||||
noRemove = false,
|
||||
borderless = false,
|
||||
shadow = true,
|
||||
customHeader,
|
||||
headless = false,
|
||||
noActions = false
|
||||
}) => {
|
||||
const handleHeaderClick = method === 'edit' && onToggleExpanded;
|
||||
const mobile = theme.screen === 'mobile';
|
||||
export const KeyValue = withTheme(
|
||||
({
|
||||
id = null,
|
||||
disabled = false,
|
||||
input = 'input',
|
||||
type = 'metadata',
|
||||
typeLabel = 'key',
|
||||
method = 'add',
|
||||
initialValues = {},
|
||||
error = null,
|
||||
expanded = true,
|
||||
submitting = false,
|
||||
pristine = true,
|
||||
invalid = false,
|
||||
removing = false,
|
||||
onToggleExpanded,
|
||||
onCancel = () => null,
|
||||
onRemove = () => null,
|
||||
editor = null,
|
||||
onlyName = false,
|
||||
onlyValue = false,
|
||||
noRemove = false,
|
||||
borderless = false,
|
||||
shadow = true,
|
||||
customHeader,
|
||||
headless = false,
|
||||
noActions = false,
|
||||
theme = {}
|
||||
}) => {
|
||||
const handleHeaderClick = method === 'edit' && onToggleExpanded;
|
||||
const mobile = theme.screen === 'mobile';
|
||||
|
||||
return (
|
||||
<Card
|
||||
collapsed={!expanded}
|
||||
actionable={Boolean(handleHeaderClick)}
|
||||
borderless={borderless}
|
||||
headless={headless}
|
||||
shadow={shadow}
|
||||
>
|
||||
{headless ? null : (
|
||||
<Header
|
||||
secondary={false}
|
||||
transparent={false}
|
||||
actionable={Boolean(handleHeaderClick)}
|
||||
onClick={handleHeaderClick}
|
||||
>
|
||||
<PaddingMaxWidth
|
||||
left={borderless ? '0' : '3'}
|
||||
right={borderless ? '0' : '3'}
|
||||
return (
|
||||
<Card
|
||||
collapsed={!expanded}
|
||||
actionable={Boolean(handleHeaderClick)}
|
||||
borderless={borderless}
|
||||
headless={headless}
|
||||
shadow={shadow}
|
||||
>
|
||||
{headless ? null : (
|
||||
<Header
|
||||
secondary={false}
|
||||
transparent={false}
|
||||
actionable={Boolean(handleHeaderClick)}
|
||||
onClick={handleHeaderClick}
|
||||
>
|
||||
<Flex alignCenter justifyBetween>
|
||||
<Meta>
|
||||
{method === 'add' || method === 'create' ? (
|
||||
<H4>{`${titleCase(method)} ${type}`}</H4>
|
||||
) : (
|
||||
<CollapsedKeyValue>
|
||||
{customHeader ? customHeader : null}
|
||||
{initialValues.name ? (
|
||||
<Fragment>
|
||||
{expanded ? (
|
||||
<span>{`${initialValues.name}${': '}`}</span>
|
||||
) : (
|
||||
<Bold>{`${initialValues.name}${': '}`}</Bold>
|
||||
)}
|
||||
<span>{initialValues.value}</span>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</CollapsedKeyValue>
|
||||
)}
|
||||
</Meta>
|
||||
{handleHeaderClick ? (
|
||||
<ArrowIcon
|
||||
onClick={onToggleExpanded}
|
||||
direction={expanded ? 'up' : 'down'}
|
||||
<PaddingMaxWidth
|
||||
left={borderless ? '0' : '3'}
|
||||
right={borderless ? '0' : '3'}
|
||||
>
|
||||
<Flex alignCenter justifyBetween>
|
||||
<Meta>
|
||||
{method === 'add' || method === 'create' ? (
|
||||
<H4>{`${titleCase(method)} ${type}`}</H4>
|
||||
) : (
|
||||
<CollapsedKeyValue>
|
||||
{customHeader ? customHeader : null}
|
||||
{initialValues.name ? (
|
||||
<Fragment>
|
||||
{expanded ? (
|
||||
<span>{`${initialValues.name}${': '}`}</span>
|
||||
) : (
|
||||
<Bold>{`${initialValues.name}${': '}`}</Bold>
|
||||
)}
|
||||
<span>{initialValues.value}</span>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</CollapsedKeyValue>
|
||||
)}
|
||||
</Meta>
|
||||
{handleHeaderClick ? (
|
||||
<ArrowIcon
|
||||
onClick={onToggleExpanded}
|
||||
direction={expanded ? 'up' : 'down'}
|
||||
/>
|
||||
) : null}
|
||||
</Flex>
|
||||
</PaddingMaxWidth>
|
||||
</Header>
|
||||
)}
|
||||
{expanded ? (
|
||||
<CardOutlet>
|
||||
<Padding
|
||||
top={headless ? '0' : '3'}
|
||||
bottom={borderless ? '0' : '3'}
|
||||
horizontal={borderless ? '0' : '3'}
|
||||
>
|
||||
{error && !submitting ? (
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<Margin bottom="5">
|
||||
<Message error>
|
||||
<MessageTitle>Ooops!</MessageTitle>
|
||||
<MessageDescription>{error}</MessageDescription>
|
||||
</Message>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
{input === 'input' ? (
|
||||
<InputKeyValue
|
||||
id={id}
|
||||
onBlur={null}
|
||||
type={type}
|
||||
typeLabel={typeLabel}
|
||||
submitting={disabled || submitting}
|
||||
onlyName={onlyName}
|
||||
onlyValue={onlyValue}
|
||||
fluid={mobile}
|
||||
/>
|
||||
) : null}
|
||||
</Flex>
|
||||
</PaddingMaxWidth>
|
||||
</Header>
|
||||
)}
|
||||
{expanded ? (
|
||||
<CardOutlet>
|
||||
<Padding
|
||||
top={headless ? '0' : '3'}
|
||||
bottom={borderless ? '0' : '3'}
|
||||
horizontal={borderless ? '0' : '3'}
|
||||
>
|
||||
{error && !submitting ? (
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<Margin bottom="5">
|
||||
<Message error>
|
||||
<MessageTitle>Ooops!</MessageTitle>
|
||||
<MessageDescription>{error}</MessageDescription>
|
||||
</Message>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
{input === 'input' ? (
|
||||
<InputKeyValue
|
||||
id={id}
|
||||
onBlur={null}
|
||||
type={type}
|
||||
typeLabel={typeLabel}
|
||||
submitting={disabled || submitting}
|
||||
onlyName={onlyName}
|
||||
onlyValue={onlyValue}
|
||||
fluid={mobile}
|
||||
/>
|
||||
) : null}
|
||||
{input === 'textarea' ? (
|
||||
<TextareaKeyValue
|
||||
id={id}
|
||||
type={type}
|
||||
submitting={disabled || submitting}
|
||||
onlyName={onlyName}
|
||||
onlyValue={onlyValue}
|
||||
editor={editor}
|
||||
/>
|
||||
) : null}
|
||||
{input !== 'textarea' && input !== 'input'
|
||||
? input(submitting)
|
||||
: null}
|
||||
<Margin top={mobile ? '3' : '2'}>
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={method === 'add' ? '12' : '7'} mobile={mobile}>
|
||||
<Margin top={mobile ? '1' : '0'} inline>
|
||||
<MarginalButton
|
||||
id={id ? 'kv-cancel-button-' + id : null}
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={disabled || submitting}
|
||||
secondary
|
||||
fluid={mobile}
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</MarginalButton>
|
||||
</Margin>
|
||||
<Button
|
||||
id={id ? 'kv-submit-button-' + id : null}
|
||||
type="submit"
|
||||
disabled={pristine || invalid}
|
||||
loading={submitting && !removing}
|
||||
fluid={mobile}
|
||||
>
|
||||
<span>{method === 'add' ? 'Create' : 'Save'}</span>
|
||||
</Button>
|
||||
</Col>
|
||||
{!noRemove && (
|
||||
<Col xs={method === 'add' ? false : '5'}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={disabled || submitting}
|
||||
secondary
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</MarginalButton>
|
||||
{input === 'textarea' ? (
|
||||
<TextareaKeyValue
|
||||
id={id}
|
||||
type={type}
|
||||
submitting={disabled || submitting}
|
||||
onlyName={onlyName}
|
||||
onlyValue={onlyValue}
|
||||
editor={editor}
|
||||
/>
|
||||
) : null}
|
||||
{input !== 'textarea' && input !== 'input'
|
||||
? input(submitting)
|
||||
: null}
|
||||
<Margin top={mobile ? '3' : '2'}>
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={method === 'add' ? '12' : '7'} mobile={mobile}>
|
||||
<Margin top={mobile ? '1' : '0'} inline>
|
||||
<MarginalButton
|
||||
id={id ? 'kv-cancel-button-' + id : null}
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={disabled || submitting}
|
||||
secondary
|
||||
fluid={mobile}
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</MarginalButton>
|
||||
</Margin>
|
||||
<Button
|
||||
id={id ? 'kv-submit-button-' + id : null}
|
||||
type="submit"
|
||||
disabled={pristine || invalid}
|
||||
loading={submitting && !removing}
|
||||
fluid={mobile}
|
||||
>
|
||||
<span>{method === 'add' ? 'Create' : 'Save'}</span>
|
||||
</Button>
|
||||
@ -378,7 +361,7 @@ export const KeyValue = ({
|
||||
error
|
||||
id={id ? 'kv-remove-button-' + id : null}
|
||||
>
|
||||
<Margin right="2">
|
||||
<Margin right={2}>
|
||||
<DeleteIcon
|
||||
disabled={disabled || submitting}
|
||||
fill={disabled || submitting ? undefined : 'red'}
|
||||
@ -390,13 +373,14 @@ export const KeyValue = ({
|
||||
)}
|
||||
</Row>
|
||||
</Margin>
|
||||
)}
|
||||
</Padding>
|
||||
</CardOutlet>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
)}
|
||||
</Padding>
|
||||
</CardOutlet>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
KeyValue.propTypes = {
|
||||
input: PropTypes.oneOf(['input', 'textarea']).isRequired,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user