feat(my-joy-beta): use editor on metadata
This commit is contained in:
parent
2291666d81
commit
0da6f30f38
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import { Field } from 'redux-form';
|
||||
|
||||
import {
|
||||
FormGroup,
|
||||
@ -7,12 +8,46 @@ import {
|
||||
Button,
|
||||
BinIcon,
|
||||
QueryBreakpoints,
|
||||
Divider
|
||||
Divider,
|
||||
Editor
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const { SmallOnly, Small } = QueryBreakpoints;
|
||||
|
||||
export default ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
|
||||
const TextareaKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Row>
|
||||
<Col xs={12} sm={10}>
|
||||
<FormGroup name={formName} reduxForm>
|
||||
<Input fluid mono marginless />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs={6} sm={1}>
|
||||
<Button type="button" onClick={() => onRemove(name)} secondary small icon fluid>
|
||||
<BinIcon />
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={6} sm={1}>
|
||||
<Button type="submit" secondary small icon fluid>
|
||||
S
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={12} sm={12}>
|
||||
<FormGroup name={formValue} reduxForm>
|
||||
<Field name={formValue} component={Editor} mode='sh' />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<SmallOnly>
|
||||
<Divider height="4" width="100%" transparent />
|
||||
</SmallOnly>
|
||||
<Small>
|
||||
<Divider height="2" width="100%" transparent />
|
||||
</Small>
|
||||
</Row>
|
||||
</form>
|
||||
);
|
||||
|
||||
const InputKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Row>
|
||||
<Col xs={12} sm={5}>
|
||||
@ -41,3 +76,7 @@ export default ({ name, formName, formValue, handleSubmit, onRemove, textarea })
|
||||
</Row>
|
||||
</form>
|
||||
);
|
||||
|
||||
export default ({ textarea, ...rest }) => textarea
|
||||
? <TextareaKeyValue {...rest} />
|
||||
: <InputKeyValue {...rest} />;
|
||||
|
@ -12,32 +12,35 @@ import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
|
||||
import GetMetadata from '@graphql/list-metadata.gql';
|
||||
import { KeyValue } from '@components/instances';
|
||||
|
||||
const MetadataForms = (metadata = []) => metadata.map(({ key, formName, formValue, value, name }) => {
|
||||
const MetadataForm = reduxForm({
|
||||
form: `instance-metadata-${key}`,
|
||||
initialValues: {
|
||||
[formName]: name,
|
||||
[formValue]: value
|
||||
}
|
||||
})(KeyValue);
|
||||
|
||||
return (
|
||||
<MetadataForm
|
||||
key={key}
|
||||
formName={formName}
|
||||
formValue={formValue}
|
||||
name={key}
|
||||
onSubmit={val => console.log(key, val)}
|
||||
onRemove={key => console.log('remove', key)}
|
||||
textarea
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const Metadata = ({ metadata = [], loading, error }) => {
|
||||
const _title = <Title>Metadata</Title>;
|
||||
const _loading = !(loading && !forceArray(metadata).length) ? null : (
|
||||
<StatusLoader />
|
||||
);
|
||||
|
||||
const metadataNames = Object.keys(metadata).map(name => ({
|
||||
key: paramCase(name),
|
||||
name
|
||||
}));
|
||||
|
||||
const InstanceMetadataForm = reduxForm({
|
||||
form: `instance-tags`,
|
||||
initialValues: metadataNames.reduce(
|
||||
(all, { key, name }) => ({
|
||||
...all,
|
||||
[`${key}-name`]: name,
|
||||
[`${key}-value`]: metadata[name]
|
||||
}),
|
||||
{}
|
||||
)
|
||||
})(KeyValue);
|
||||
|
||||
const _tags = !_loading && (
|
||||
<InstanceMetadataForm keys={metadataNames.map(({ key }) => key)} />
|
||||
);
|
||||
const _metadata = !_loading && MetadataForms(metadata);
|
||||
|
||||
const _error = !(error && !_loading) ? null : (
|
||||
<Message
|
||||
@ -52,7 +55,7 @@ const Metadata = ({ metadata = [], loading, error }) => {
|
||||
{_title}
|
||||
{_loading}
|
||||
{_error}
|
||||
{_tags}
|
||||
{_metadata}
|
||||
</ViewContainer>
|
||||
);
|
||||
};
|
||||
@ -69,14 +72,30 @@ export default compose(
|
||||
name: get(match, 'params.instance')
|
||||
}
|
||||
}),
|
||||
props: ({ data: { loading, error, variables, ...rest } }) => ({
|
||||
metadata: get(
|
||||
props: ({ data: { loading, error, variables, ...rest } }) => {
|
||||
const values = get(
|
||||
find(get(rest, 'machines', []), ['name', variables.name]),
|
||||
'metadata',
|
||||
[]
|
||||
),
|
||||
loading,
|
||||
error
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
const metadata = Object.keys(values).reduce((all, name) => {
|
||||
const key = paramCase(name);
|
||||
|
||||
return {
|
||||
...all,
|
||||
[key]: {
|
||||
key,
|
||||
formName: `${key}-name`,
|
||||
formValue: `${key}-value`,
|
||||
value: values[name],
|
||||
name
|
||||
}
|
||||
};
|
||||
}, {});
|
||||
|
||||
return { metadata: Object.values(metadata), loading, error };
|
||||
}
|
||||
})
|
||||
)(Metadata);
|
||||
|
Loading…
Reference in New Issue
Block a user