diff --git a/packages/instance-steps/src/metadata/index.js b/packages/instance-steps/src/metadata/index.js
index 9a20a39b..bccce92d 100644
--- a/packages/instance-steps/src/metadata/index.js
+++ b/packages/instance-steps/src/metadata/index.js
@@ -1,6 +1,8 @@
import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
+import { withTheme } from 'styled-components';
+
import { compose } from 'react-apollo';
import { Link } from 'react-router-dom';
import ReduxForm from 'declarative-redux-form';
@@ -41,97 +43,105 @@ const Metadata = ({
shouldAsyncValidate,
handleAsyncValidate,
handleChangeAddOpen,
+ theme = {},
...props
-}) => (
-
- }>Metadata
-
- Metadata can be used to pass data to the instance. It can also be used to
- inject a custom boot script. Unlike tags, metadata is only viewable inside
- the instance.
-
-
-
-
-
-
-
- {({ next }) => (
-
- {metadata.length ? (
-
-
-
- ) : null}
-
- {props =>
- addOpen ? (
-
- handleChangeAddOpen(false)}
- editor={Editor}
- expanded
- shadow={false}
- />
-
- ) : (
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-
+}) => {
+ const mobile = theme.screen === 'mobile';
+
+ return (
+
+ }>Metadata
+
+ Metadata can be used to pass data to the instance. It can also be used
+ to inject a custom boot script. Unlike tags, metadata is only viewable
+ inside the instance.
+
+
+
+
- )}
-
-
-);
+
+
+ {({ next }) => (
+
+ {metadata.length ? (
+
+
+
+ ) : null}
+
+ {props =>
+ addOpen ? (
+
+ handleChangeAddOpen(false)}
+ editor={Editor}
+ expanded
+ shadow={false}
+ />
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+
+ )}
+
+
+ );
+};
export default compose(
connect(({ values }, ownProps) => {
@@ -203,4 +213,4 @@ export default compose(
]);
}
}))
-)(Metadata);
+)(withTheme(({ ...rest }) => ));
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 24d2ccf8..60292eb9 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -55,123 +55,121 @@ const Tag = ({ name, value, onRemoveClick }) => (
);
-const TagsContainer = withTheme(
- ({
- handleValidate,
- handleGetValue,
- preview = [],
- tags = [],
- addOpen = true,
- shouldAsyncValidate,
- handleAddTag,
- handleAsyncValidate,
- handleChangeAddOpen,
- handleRemoveTag,
- handleCancelEdit,
- theme = {},
- ...props
- }) => {
- const mobile = theme.screen === 'mobile';
- return (
-
- }>Tags
-
- Tags can be used to identify your instances, group multiple instances
- together, define firewall and affinity rules, and more.
-
-
-
-
-
- {preview.map(({ name, value }, index) => (
-
- ))}
-
-
-
-
- {({ next }) => (
-
- {tags.length ? (
-
-
-
- {tags.map(({ name, value }, index) => (
- handleRemoveTag(index)}
- id={`tag-${index}`}
- />
- ))}
-
+const TagsContainer = ({
+ handleValidate,
+ handleGetValue,
+ preview = [],
+ tags = [],
+ addOpen = true,
+ shouldAsyncValidate,
+ handleAddTag,
+ handleAsyncValidate,
+ handleChangeAddOpen,
+ handleRemoveTag,
+ handleCancelEdit,
+ theme = {},
+ ...props
+}) => {
+ const mobile = theme.screen === 'mobile';
+ return (
+
+ }>Tags
+
+ Tags can be used to identify your instances, group multiple instances
+ together, define firewall and affinity rules, and more.
+
+
+
+
+
+ {preview.map(({ name, value }, index) => (
+
+ ))}
+
+
+
+
+ {({ next }) => (
+
+ {tags.length ? (
+
+
+
+ {tags.map(({ name, value }, index) => (
+ handleRemoveTag(index)}
+ id={`tag-${index}`}
+ />
+ ))}
+
+
+ ) : null}
+ {addOpen ? (
+
+
+
+ {props => (
+
+ handleChangeAddOpen(false)}
+ />
+
+ )}
+
- ) : null}
- {addOpen ? (
-
-
-
- {props => (
-
- handleChangeAddOpen(false)}
- />
-
- )}
-
-
-
- ) : (
-
-
-
-
-
-
-
-
+
+ ) : (
+
+
+
+
-
-
-
- )}
-
- )}
-
-
- );
- }
-);
+
+
+
+
+
+
+
+ )}
+
+ )}
+
+
+ );
+};
export default compose(
connect(({ values }, ownProps) => {
@@ -225,4 +223,4 @@ export default compose(
]);
}
}))
-)(TagsContainer);
+)(withTheme(({ ...rest }) => ));
diff --git a/packages/resource-widgets/src/key-value/index.js b/packages/resource-widgets/src/key-value/index.js
index a8d44b92..29beadf7 100644
--- a/packages/resource-widgets/src/key-value/index.js
+++ b/packages/resource-widgets/src/key-value/index.js
@@ -83,7 +83,8 @@ const TextareaKeyValue = ({
submitting,
onlyName,
onlyValue,
- editor
+ editor,
+ mobile
}) => (
{onlyValue ? null : (
@@ -97,7 +98,12 @@ const TextareaKeyValue = ({
>
{titleCase(type)} key
-
+
@@ -105,6 +111,7 @@ const TextareaKeyValue = ({
+
)}
@@ -133,6 +140,7 @@ const TextareaKeyValue = ({
+
)}
@@ -149,7 +157,7 @@ const InputKeyValue = ({
fluid = false
}) => (
- {!onlyValue ? (
+ {onlyValue ? null : (
- ) : null}
+ )}
{onlyName ? null : (
@@ -198,189 +206,186 @@ const InputKeyValue = ({
);
-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';
+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,
+ theme = {},
+ editor = null,
+ onlyName = false,
+ onlyValue = false,
+ noRemove = false,
+ borderless = false,
+ shadow = true,
+ customHeader,
+ headless = false
+}) => {
+ const handleHeaderClick = method === 'edit' && onToggleExpanded;
+ const mobile = theme.screen === 'mobile';
- return (
-
- {headless ? null : (
-
+ {headless ? null : (
+
+
-
-
-
- {method === 'add' || method === 'create' ? (
- {`${titleCase(method)} ${type}`}
- ) : (
-
- {customHeader ? customHeader : null}
- {initialValues.name ? (
-
- {expanded ? (
- {`${initialValues.name}${': '}`}
- ) : (
- {`${initialValues.name}${': '}`}
- )}
- {initialValues.value}
-
- ) : null}
-
- )}
-
- {handleHeaderClick ? (
-
- ) : null}
-
-
-
- )}
- {expanded ? (
-
-
- {error && !submitting ? (
-
-
-
-
- Ooops!
- {error}
-
-
-
-
- ) : null}
- {input === 'input' ? (
-
+
+ {method === 'add' || method === 'create' ? (
+ {`${titleCase(method)} ${type}`}
+ ) : (
+
+ {customHeader ? customHeader : null}
+ {initialValues.name ? (
+
+ {expanded ? (
+ {`${initialValues.name}${': '}`}
+ ) : (
+ {`${initialValues.name}${': '}`}
+ )}
+ {initialValues.value}
+
+ ) : null}
+
+ )}
+
+ {handleHeaderClick ? (
+
) : null}
- {input === 'textarea' ? (
-
- ) : null}
- {input !== 'textarea' && input !== 'input'
- ? input(submitting)
- : null}
-
-
-
-
-
- Cancel
-
-
-
+ )}
+ {expanded ? (
+
+
+ {error && !submitting ? (
+
+
+
+
+ Ooops!
+ {error}
+
+
+
+
+ ) : null}
+ {input === 'input' ? (
+
+ ) : null}
+ {input === 'textarea' ? (
+
+ ) : null}
+ {input !== 'textarea' && input !== 'input'
+ ? input(submitting)
+ : null}
+
+
+
+
+
- {method === 'add' ? 'Create' : 'Save'}
+ Cancel
+
+
+
+
+ {!noRemove && (
+
+
- {!noRemove && (
-
-
-
- )}
-
-
- )}
-
-
- ) : null}
-
- );
- }
-);
+ )}
+
+
+
+
+ ) : null}
+
+ );
+};
KeyValue.propTypes = {
input: PropTypes.oneOf(['input', 'textarea']).isRequired,
@@ -397,8 +402,8 @@ KeyValue.propTypes = {
onRemove: PropTypes.func
};
-export default ({ handleSubmit, ...rest }) => (
+export default withTheme(({ handleSubmit, ...rest }) => (
-);
+));