[SIEM] [Detection Engine] Add edit on rule creation

x-pack/legacy/plugins/siem/public/pages/detection_engine/create_rule/components/add_item_form/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonEmpty, EuiButtonIcon, EuiFormRow, EuiFieldText, EuiSpacer } from '@elastic/eui';
-import { isEmpty, isEqual } from 'lodash/fp';
+import { isEmpty } from 'lodash/fp';
 import React, { ChangeEvent, useCallback, useEffect, useState, useRef } from 'react';
 
 import { FieldHook, getFieldValidityAndErrorMessage } from '../shared_imports';
@@ -21,15 +21,22 @@ interface AddItemProps {
 
 export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: AddItemProps) => {
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
-  const [items, setItems] = useState(['']);
-  const [haveBeenKeyboardDeleted, setHaveBeenKeyboardDeleted] = useState(false);
+  // const [items, setItems] = useState(['']);
+  const [haveBeenKeyboardDeleted, setHaveBeenKeyboardDeleted] = useState(-1);
 
-  const lastInputRef = useRef<HTMLInputElement | null>(null);
+  const inputsRef = useRef<HTMLInputElement[]>([]);
 
   const removeItem = useCallback(
     (index: number) => {
       const values = field.value as string[];
       field.setValue([...values.slice(0, index), ...values.slice(index + 1)]);
+      inputsRef.current = [
+        ...inputsRef.current.slice(0, index),
+        ...inputsRef.current.slice(index + 1),
+      ];
+      if (inputsRef.current[index] != null) {
+        inputsRef.current[index].value = 're-render';
+      }
     },
     [field]
   );
@@ -38,16 +45,26 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
     const values = field.value as string[];
     if (!isEmpty(values[values.length - 1])) {
       field.setValue([...values, '']);
+    } else {
+      field.setValue(['']);
     }
   }, [field]);
 
   const updateItem = useCallback(
     (event: ChangeEvent<HTMLInputElement>, index: number) => {
+      event.persist();
       const values = field.value as string[];
       const value = event.target.value;
       if (isEmpty(value)) {
-        setHaveBeenKeyboardDeleted(true);
         field.setValue([...values.slice(0, index), ...values.slice(index + 1)]);
+        inputsRef.current = [
+          ...inputsRef.current.slice(0, index),
+          ...inputsRef.current.slice(index + 1),
+        ];
+        setHaveBeenKeyboardDeleted(inputsRef.current.length - 1);
+        if (inputsRef.current[index] != null) {
+          inputsRef.current[index].value = 're-render';
+        }
       } else {
         field.setValue([...values.slice(0, index), value, ...values.slice(index + 1)]);
       }
@@ -56,31 +73,30 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
   );
 
   const handleLastInputRef = useCallback(
-    (element: HTMLInputElement | null) => {
-      lastInputRef.current = element;
+    (index: number, element: HTMLInputElement | null) => {
+      if (element != null) {
+        inputsRef.current = [
+          ...inputsRef.current.slice(0, index),
+          element,
+          ...inputsRef.current.slice(index + 1),
+        ];
+      }
     },
-    [lastInputRef]
+    [inputsRef]
   );
 
   useEffect(() => {
-    if (!isEqual(field.value, items)) {
-      setItems(
-        isEmpty(field.value)
-          ? ['']
-          : haveBeenKeyboardDeleted
-          ? [...(field.value as string[]), '']
-          : (field.value as string[])
-      );
-      setHaveBeenKeyboardDeleted(false);
-    }
-  }, [field.value]);
-
-  useEffect(() => {
-    if (!haveBeenKeyboardDeleted && lastInputRef != null && lastInputRef.current != null) {
-      lastInputRef.current.focus();
+    if (
+      haveBeenKeyboardDeleted !== -1 &&
+      !isEmpty(inputsRef.current) &&
+      inputsRef.current[haveBeenKeyboardDeleted] != null
+    ) {
+      inputsRef.current[haveBeenKeyboardDeleted].focus();
+      setHaveBeenKeyboardDeleted(-1);
     }
-  }, [haveBeenKeyboardDeleted, lastInputRef]);
+  }, [haveBeenKeyboardDeleted, inputsRef.current]);
 
+  const values = field.value as string[];
   return (
     <EuiFormRow
       label={field.label}
@@ -92,10 +108,15 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
       describedByIds={idAria ? [idAria] : undefined}
     >
       <>
-        {items.map((item, index) => {
+        {values.map((item, index) => {
           const euiFieldProps = {
             disabled: isDisabled,
-            ...(index === items.length - 1 ? { inputRef: handleLastInputRef } : {}),
+            ...(index === values.length - 1
+              ? { inputRef: handleLastInputRef.bind(null, index) }
+              : {}),
+            ...(inputsRef.current[index] != null && inputsRef.current[index].value !== item
+              ? { value: item }
+              : {}),
           };
           return (
             <div key={index}>
@@ -109,13 +130,12 @@ export const AddItem = ({ addText, dataTestSubj, field, idAria, isDisabled }: Ad
                     aria-label={I18n.DELETE}
                   />
                 }
-                value={item}
                 onChange={e => updateItem(e, index)}
                 compressed
                 fullWidth
                 {...euiFieldProps}
               />
-              {items.length - 1 !== index && <EuiSpacer size="s" />}
+              {values.length - 1 !== index && <EuiSpacer size="s" />}
             </div>
           );
         })}

x-pack/legacy/plugins/siem/public/pages/detection_engine/create_rule/components/description_step/filter_label.tsx

@@ -0,0 +1,93 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { memo } from 'react';
+import { EuiTextColor } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { esFilters } from '../../../../../../../../../../src/plugins/data/public';
+import { existsOperator, isOneOfOperator } from './filter_operator';
+
+interface Props {
+  filter: esFilters.Filter;
+  valueLabel?: string;
+}
+
+export const FilterLabel = memo<Props>(({ filter, valueLabel }) => {
+  const prefixText = filter.meta.negate
+    ? ` ${i18n.translate('xpack.siem.detectionEngine.createRule.filterLabel.negatedFilterPrefix', {
+        defaultMessage: 'NOT ',
+      })}`
+    : '';
+  const prefix =
+    filter.meta.negate && !filter.meta.disabled ? (
+      <EuiTextColor color="danger">{prefixText}</EuiTextColor>
+    ) : (
+      prefixText
+    );
+
+  if (filter.meta.alias !== null) {
+    return (
+      <>
+        {prefix}
+        {filter.meta.alias}
+      </>
+    );
+  }
+
+  switch (filter.meta.type) {
+    case esFilters.FILTERS.EXISTS:
+      return (
+        <>
+          {prefix}
+          {`${filter.meta.key}: ${existsOperator.message}`}
+        </>
+      );
+    case esFilters.FILTERS.GEO_BOUNDING_BOX:
+      return (
+        <>
+          {prefix}
+          {`${filter.meta.key}: ${valueLabel}`}
+        </>
+      );
+    case esFilters.FILTERS.GEO_POLYGON:
+      return (
+        <>
+          {prefix}
+          {`${filter.meta.key}: ${valueLabel}`}
+        </>
+      );
+    case esFilters.FILTERS.PHRASES:
+      return (
+        <>
+          {prefix}
+          {filter.meta.key} {isOneOfOperator.message} {valueLabel}
+        </>
+      );
+    case esFilters.FILTERS.QUERY_STRING:
+      return (
+        <>
+          {prefix}
+          {valueLabel}
+        </>
+      );
+    case esFilters.FILTERS.PHRASE:
+    case esFilters.FILTERS.RANGE:
+      return (
+        <>
+          {prefix}
+          {`${filter.meta.key}: ${valueLabel}`}
+        </>
+      );
+    default:
+      return (
+        <>
+          {prefix}
+          {JSON.stringify(filter.query)}
+        </>
+      );
+  }
+});

x-pack/legacy/plugins/siem/public/pages/detection_engine/create_rule/components/description_step/filter_operator.tsx

@@ -0,0 +1,119 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+import { esFilters } from '../../../../../../../../../../src/plugins/data/public';
+
+export interface Operator {
+  message: string;
+  type: esFilters.FILTERS;
+  negate: boolean;
+  fieldTypes?: string[];
+}
+
+export const isOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.isOperatorOptionLabel',
+    {
+      defaultMessage: 'is',
+    }
+  ),
+  type: esFilters.FILTERS.PHRASE,
+  negate: false,
+};
+
+export const isNotOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.isNotOperatorOptionLabel',
+    {
+      defaultMessage: 'is not',
+    }
+  ),
+  type: esFilters.FILTERS.PHRASE,
+  negate: true,
+};
+
+export const isOneOfOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.isOneOfOperatorOptionLabel',
+    {
+      defaultMessage: 'is one of',
+    }
+  ),
+  type: esFilters.FILTERS.PHRASES,
+  negate: false,
+  fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'],
+};
+
+export const isNotOneOfOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.isNotOneOfOperatorOptionLabel',
+    {
+      defaultMessage: 'is not one of',
+    }
+  ),
+  type: esFilters.FILTERS.PHRASES,
+  negate: true,
+  fieldTypes: ['string', 'number', 'date', 'ip', 'geo_point', 'geo_shape'],
+};
+
+export const isBetweenOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.isBetweenOperatorOptionLabel',
+    {
+      defaultMessage: 'is between',
+    }
+  ),
+  type: esFilters.FILTERS.RANGE,
+  negate: false,
+  fieldTypes: ['number', 'date', 'ip'],
+};
+
+export const isNotBetweenOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.isNotBetweenOperatorOptionLabel',
+    {
+      defaultMessage: 'is not between',
+    }
+  ),
+  type: esFilters.FILTERS.RANGE,
+  negate: true,
+  fieldTypes: ['number', 'date', 'ip'],
+};
+
+export const existsOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.existsOperatorOptionLabel',
+    {
+      defaultMessage: 'exists',
+    }
+  ),
+  type: esFilters.FILTERS.EXISTS,
+  negate: false,
+};
+
+export const doesNotExistOperator = {
+  message: i18n.translate(
+    'xpack.siem.detectionEngine.createRule.filterLabel.doesNotExistOperatorOptionLabel',
+    {
+      defaultMessage: 'does not exist',
+    }
+  ),
+  type: esFilters.FILTERS.EXISTS,
+  negate: true,
+};
+
+export const FILTER_OPERATORS: Operator[] = [
+  isOperator,
+  isNotOperator,
+  isOneOfOperator,
+  isNotOneOfOperator,
+  isBetweenOperator,
+  isNotBetweenOperator,
+  existsOperator,
+  doesNotExistOperator,
+];