Merge pull request #807 from shital-orchestral/transition-tab-issue-f…

…ixes

transition tab display and css issue fixes

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",

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 (
+      <div className="st2-auto-form__select">
+        <div className='st2-auto-form__line'>
+          <Label className={this.props.labelClass || 'st2-auto-form__text-field'}>
+            {options && (
+              <Icon  name={icon} style={{pointerEvents:'initial'}} />
+            )}
+            <Title {...this.props} />
+            <span className="st2-auto-form__field-color-block" style={{backgroundColor: value}}>&nbsp;</span>
+            <input {...inputProps} onClick={() => this.setState({ open: !open })} />
+            { options && open && (
+              <div className="st2-auto-form__field-options" onClick={() => this.setState({open: false})}>
+                <div className="st2-auto-form__field-options-menu">
+                  {options.map(color => (
+                    <div key={`color-${color.replace(/^[A-Z0-9]/ig, '')}`} className="st2-auto-form__field-options-menu-item">
+                      <button
+                        className="st2-auto-form__field-options-menu-item-button"
+                        onClick={(e) => {
+                          this.handleChange(e, color);
+                          this.setState({open: false});
+                        }}
+                      >
+                        <div style={{backgroundColor: color}}>&nbsp;</div>
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            <ErrorMessage>{ this.props.invalid }</ErrorMessage>
+          </Label>
+          <Description {...this.props} />
+        </div>
+      </div>
+    );
+  }
+}

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,
 };

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 (
+      <div className="st2-auto-form__select">
+        <select {...selectProps}>
+          { spec.default ? null : (
+            <option value='' />
+          ) }
+          { _.map(spec.options, (o) => (
+            <option key={o.value} value={o.value}>{ o.text }</option>
+          ) ) }
+        </select>
+      </div>
+    );
+  }
+}

modules/st2-auto-form/style.css

@@ -174,6 +174,44 @@
       &:hover {
         background-color: rgba(117, 117, 117, .7);
       }
+    }
+       &-color-block {
+      width: 1em;
+      position: absolute;
+      left: 5px;
+      top: 9px;
+    }
+
+    &-options {
+      position: absolute;
+      background-color: white;
+      z-index: 1;
+
+      &-menu {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: flex-start;
+        width: 140px;
+
+        &-item {
+          flex-basis: 25%;
+          text-align: center;
+          margin-bottom: 5px;
+          max-width: 35px;
+
+          &-button {
+            width: 25px;
+            height: 25px;
+            border-radius: 0;
+            padding: 5px;
+            border: none;
+
+            &:hover {
+              border: 1px solid gray;
+            }
+          }
+        }
+      }
     }
   }
 
@@ -436,3 +474,13 @@
 .st2-manual-form {
   position: relative;
 }
+.icon-T {
+  &:before {
+    content: 'T';
+    font-family: Garamond, Georgia, Times New Roman, serif !important;;
+  }
+}
+
+
+
+

modules/st2flow-details/orquesta-transition.js

@@ -214,7 +214,7 @@ export default class OrquestaTransition extends Component<TransitionProps, {
               </div>,
             ]);
           })}
-          <div className={this.style.transitionButton}>
+          <div className={`icon-plus-class ${this.style.transitionButton}`}>
             <i className="icon-plus2" />
           </div>
         </div>

modules/st2flow-details/package.json

@@ -44,7 +44,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@stackstorm/module-auto-form": "2.0.0",
+    "@stackstorm/module-auto-form": "2.4.4",
     "@stackstorm/module-forms": "2.0.0",
     "@stackstorm/st2flow-editor": "1.0.0",
     "classnames": "^2.2.6",

modules/st2flow-details/style.css

@@ -16,6 +16,8 @@ limitations under the License.
 
 :root {
   --token-color: #eee;
+  --yellow-lighten-5: #fff5e9;
+  --yellow-base: #FF9E1B;
 }
 
 .component {

style.css

@@ -29,3 +29,6 @@ html, body, .wrapper {
 .palette-chevron-icon:before {
     font-size: 10px;
 }
+.icon-plus-class i{
+  display: none !important;
+}