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 React from 'react';
|
||||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||||
|
import { Field } from 'redux-form';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
FormGroup,
|
FormGroup,
|
||||||
@ -7,12 +8,46 @@ import {
|
|||||||
Button,
|
Button,
|
||||||
BinIcon,
|
BinIcon,
|
||||||
QueryBreakpoints,
|
QueryBreakpoints,
|
||||||
Divider
|
Divider,
|
||||||
|
Editor
|
||||||
} from 'joyent-ui-toolkit';
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
const { SmallOnly, Small } = QueryBreakpoints;
|
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}>
|
<form onSubmit={handleSubmit}>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs={12} sm={5}>
|
<Col xs={12} sm={5}>
|
||||||
@ -41,3 +76,7 @@ export default ({ name, formName, formValue, handleSubmit, onRemove, textarea })
|
|||||||
</Row>
|
</Row>
|
||||||
</form>
|
</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 GetMetadata from '@graphql/list-metadata.gql';
|
||||||
import { KeyValue } from '@components/instances';
|
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 Metadata = ({ metadata = [], loading, error }) => {
|
||||||
const _title = <Title>Metadata</Title>;
|
const _title = <Title>Metadata</Title>;
|
||||||
const _loading = !(loading && !forceArray(metadata).length) ? null : (
|
const _loading = !(loading && !forceArray(metadata).length) ? null : (
|
||||||
<StatusLoader />
|
<StatusLoader />
|
||||||
);
|
);
|
||||||
|
|
||||||
const metadataNames = Object.keys(metadata).map(name => ({
|
const _metadata = !_loading && MetadataForms(metadata);
|
||||||
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 _error = !(error && !_loading) ? null : (
|
const _error = !(error && !_loading) ? null : (
|
||||||
<Message
|
<Message
|
||||||
@ -52,7 +55,7 @@ const Metadata = ({ metadata = [], loading, error }) => {
|
|||||||
{_title}
|
{_title}
|
||||||
{_loading}
|
{_loading}
|
||||||
{_error}
|
{_error}
|
||||||
{_tags}
|
{_metadata}
|
||||||
</ViewContainer>
|
</ViewContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@ -69,14 +72,30 @@ export default compose(
|
|||||||
name: get(match, 'params.instance')
|
name: get(match, 'params.instance')
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
props: ({ data: { loading, error, variables, ...rest } }) => ({
|
props: ({ data: { loading, error, variables, ...rest } }) => {
|
||||||
metadata: get(
|
const values = get(
|
||||||
find(get(rest, 'machines', []), ['name', variables.name]),
|
find(get(rest, 'machines', []), ['name', variables.name]),
|
||||||
'metadata',
|
'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);
|
)(Metadata);
|
||||||
|
Loading…
Reference in New Issue
Block a user