move remove button + remove sugestions

Author: cded

CHANGELOG.rst

@@ -16,6 +16,10 @@ Added
 
   Contributed by @Jappzy and @cded from @Bitovi
 
+* Added the search rule criteria in the UI with the possibility of multiple patterns. #992
+
+  Contributed by @Jappzy and @cded from @Bitovi
+
 Changed
 ~~~~~~~
 * Updated nodejs from `14.16.1` to `14.20.1`, fixing the local build under ARM processor architecture. #880

modules/st2-criteria/criteria.component.js

@@ -274,14 +274,19 @@ export default class Criteria extends React.Component {
         <div>
           { _.map(data, ({ type, pattern, condition }, key) => (
             <div className={style.line} key={key}>
-              <AutoFormCombobox
-                name='Key'
-                className={style.entity}
-                disabled={disabled}
-                data={key}
-                spec={spec}
-                onChange={(value) => this.handleChangeKey(key, value)}
-              />
+              <div className={style.criteriaLabel}>
+                <AutoFormCombobox
+                  name='Key'
+                  className={style.entity}
+                  disabled={disabled}
+                  data={key}
+                  spec={spec}
+                  onChange={(value) => this.handleChangeKey(key, value)}
+                />
+                { disabled ? null :
+                  <i className={cx('icon-cross', style.remove)} onClick={() => this.handleRemove(key)} />
+                }
+              </div>
               <AutoFormSelect
                 name='Type'
                 className={style.entity}
@@ -316,7 +321,10 @@ export default class Criteria extends React.Component {
                         className={style.entity}
                         disabled={disabled}
                         data={itemKey}
-                        spec={spec}
+                        spec={{
+                          required: true,
+                          enum: [],
+                        }}
                         onChange={(value) => this.handleChangeSearchItemKey(key, itemKey, value)}
                       />
                       <AutoFormSelect
@@ -340,7 +348,9 @@ export default class Criteria extends React.Component {
                         }}
                         onChange={(value) => this.handleChangeSearchPattern(key, itemKey, value)}
                       />
-                      <i className={cx('icon-cross', style.remove)} onClick={() => this.handleRemoveSearchPatternItem(key, itemKey)} />
+                      <i
+                        className={cx('icon-cross', style.remove, style.subPatternRemove)} onClick={() => this.handleRemoveSearchPatternItem(key, itemKey)}
+                      />
                     </div>
                   ))}
                 </>
@@ -355,11 +365,7 @@ export default class Criteria extends React.Component {
                   }}
                   onChange={(value) => this.handleChangePattern(key, value)}
                 />
-              )}
-              <div className={style.break} />
-              { disabled ? null :
-                <i className={cx('icon-cross', style.remove)} onClick={() => this.handleRemove(key)} />
-              }
+              )}              
             </div>
           )) }
         </div>

modules/st2-criteria/style.css

@@ -68,3 +68,18 @@
   flex-basis: 100%;
   height: 0;
 }
+
+.criteriaLabel {
+  position: relative;
+
+  i {
+    position: absolute;
+    top: 2px;
+    left: -25px;
+  }
+}
+
+.subPatternRemove {
+  margin-top: 20px;
+  margin-left: 5px;
+}