diff --git a/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx b/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx index 9b79a1c2f86..fb2cda5a3ae 100644 --- a/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx +++ b/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx @@ -121,12 +121,9 @@ class UserDefinedFieldsPanel extends React.PureComponent { render() { const { userDefinedFields, classes } = this.props; - /** [true, false, true, false] */ - const hasOnlyOptionalFields = userDefinedFields! - .map(eachUDF => { - return Object.keys(eachUDF).some(eachKey => eachKey === 'default'); - }) - .every(eachValue => eachValue === true); + const [requiredUDFs, optionalUDFs] = seperateUDFsByRequiredStatus( + userDefinedFields! + ); return ( @@ -139,41 +136,36 @@ class UserDefinedFieldsPanel extends React.PureComponent { {/* Required Fields */} - {userDefinedFields! - .filter( - (field: Linode.StackScript.UserDefinedField) => - field.hasOwnProperty('default') !== true - ) - .map((field: Linode.StackScript.UserDefinedField) => { - const error = getError(field, this.props.errors); - return this.renderField(field, error); - })} + {requiredUDFs.map((field: Linode.StackScript.UserDefinedField) => { + const error = getError(field, this.props.errors); + return this.renderField(field, error); + })} {/* Optional Fields */} - - - These fields are additional configuration options and are not - required for creation. - -
- - {userDefinedFields! - .filter( - (field: Linode.StackScript.UserDefinedField) => - field.hasOwnProperty('default') === true - ) - .map((field: Linode.StackScript.UserDefinedField) => { - const error = getError(field, this.props.errors); - return this.renderField(field, error); - })} - -
-
+ + These fields are additional configuration options and are not + required for creation. + +
+ + {optionalUDFs.map( + (field: Linode.StackScript.UserDefinedField) => { + const error = getError(field, this.props.errors); + return this.renderField(field, error); + } + )} + +
+ + )}
); } @@ -202,6 +194,29 @@ const isMultiSelect = (udf: Linode.StackScript.UserDefinedField) => { return !!udf.manyof; // if we have a manyof prop, it's a checkbox }; +/** + * Used to separate required UDFs from non-required ones + * + * @return nested array [[...requiredUDFs], [...nonRequiredUDFs]] + */ +const seperateUDFsByRequiredStatus = ( + udfs: Linode.StackScript.UserDefinedField[] +) => { + return udfs.reduce( + (accum, eachUDF) => { + /** + * if the "default" key exists, it's optional + */ + if (eachUDF.hasOwnProperty('default')) { + return [[...accum[0]], [...accum[1], eachUDF]]; + } else { + return [[...accum[0], eachUDF], [...accum[1]]]; + } + }, + [[], []] + ); +}; + const styled = withStyles(styles); export default styled(RenderGuard(UserDefinedFieldsPanel)); diff --git a/src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx b/src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx index 6f1a661f1ee..902c89e9ece 100644 --- a/src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx +++ b/src/features/linodes/LinodesCreate/LinodeCreateContainer.tsx @@ -101,6 +101,8 @@ const defaultState: State = { selectedDiskSize: undefined, selectedLinodeID: undefined, selectedStackScriptID: undefined, + selectedStackScriptLabel: '', + selectedStackScriptUsername: '', selectedRegionID: undefined, selectedTypeID: undefined, tags: [],