diff --git a/apps/st2-history/package.json b/apps/st2-history/package.json
index 67f7bc5f0..6d288c55c 100644
--- a/apps/st2-history/package.json
+++ b/apps/st2-history/package.json
@@ -47,7 +47,7 @@
"dependencies": {
"@stackstorm/module-action-reporter": "^2.4.3",
"@stackstorm/module-api": "^2.4.3",
- "@stackstorm/module-auto-form": "^2.4.3",
+ "@stackstorm/module-auto-form": "^2.4.4",
"@stackstorm/module-filter": "^2.4.3",
"@stackstorm/module-filter-expandable": "^2.4.3",
"@stackstorm/module-flex-table": "^2.4.3",
diff --git a/modules/st2-auto-form/fields/color-string.js b/modules/st2-auto-form/fields/color-string.js
new file mode 100644
index 000000000..88b1c9886
--- /dev/null
+++ b/modules/st2-auto-form/fields/color-string.js
@@ -0,0 +1,93 @@
+// Copyright 2020 Extreme Networks, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import StringField from './string';
+import { Label, Icon, ErrorMessage, Description, Title } from '../wrappers';
+export default class ColorStringField extends StringField {
+ static icon = 'V';
+
+ static propTypes = {
+ name: PropTypes.string,
+ spec: PropTypes.object,
+ value: PropTypes.any,
+ invalid: PropTypes.string,
+ disabled: PropTypes.bool,
+ icon: PropTypes.string,
+ labelClass: PropTypes.string,
+ options: PropTypes.array,
+ }
+ render() {
+ const { icon } = this.constructor;
+ const { invalid, open, value } = this.state;
+ const { spec={}, options } = this.props;
+
+ const wrapperProps = Object.assign({}, this.props);
+
+ if (invalid) {
+ wrapperProps.invalid = invalid;
+ }
+
+ const inputProps = {
+ className: 'st2-auto-form__field',
+ placeholder: this.toStateValue(spec.default),
+ disabled: this.props.disabled,
+ value: value,
+ onChange: (e) => this.handleChange(e, e.target.value || ''),
+ 'data-test': this.props['data-test'],
+ style: { paddingLeft: 23 }, // extra padding so the color block can show up in the field
+ };
+
+ if (this.state.invalid) {
+ inputProps.className += ' ' + 'st2-auto-form__field--invalid';
+ }
+
+ return (
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/modules/st2-auto-form/fields/index.js b/modules/st2-auto-form/fields/index.js
index 54898bcb9..1829344bd 100644
--- a/modules/st2-auto-form/fields/index.js
+++ b/modules/st2-auto-form/fields/index.js
@@ -20,6 +20,8 @@ import NumberField from './number';
import ObjectField from './object';
import PasswordField from './password';
import StringField from './string';
+import SelectField from './select';
+import ColorStringField from './color-string';
export {
ArrayField,
@@ -30,4 +32,6 @@ export {
ObjectField,
PasswordField,
StringField,
+ SelectField,
+ ColorStringField,
};
diff --git a/modules/st2-auto-form/fields/select.js b/modules/st2-auto-form/fields/select.js
new file mode 100644
index 000000000..30f09ee5d
--- /dev/null
+++ b/modules/st2-auto-form/fields/select.js
@@ -0,0 +1,67 @@
+// Copyright 2020 Extreme Networks, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import _ from 'lodash';
+import React from 'react';
+import { BaseTextField } from './base';
+
+export default class SelectField extends BaseTextField {
+ static icon = 'V'
+
+ fromStateValue(v) {
+ return v !== '' ? v : void 0;
+ }
+
+ toStateValue(v) {
+ return v || '';
+ }
+
+ validate(v, spec={}) {
+ const invalid = super.validate(v, spec);
+ if (invalid !== void 0) {
+ return invalid;
+ }
+
+ return v && !spec.options.find(o => o.value === v) && `'${v}' is not a valid item`;
+ }
+
+ render() {
+ const { spec={} } = this.props;
+ const { value } = this.state;
+
+ const selectProps = {
+ className: 'st2-auto-form__field',
+ disabled: this.props.disabled,
+ value,
+ onChange: (e) => this.handleChange(e, e.target.value),
+ };
+
+ if (this.state.invalid) {
+ selectProps.className += ' ' + 'st2-auto-form__field--invalid';
+ }
+
+ return (
+