[Security Solution][Endpoint][Trusted Apps] Show warning for invalid hash when editing a Trusted App (#140647)

* Re-evaluate TrustedApp conditions on field change during editing
* small refactor regarding getElement test helper
* improve visited state handler function naming

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/condition_entry_input/index.test.tsx

@@ -32,11 +32,19 @@ describe('Condition entry input', () => {
     onVisitedMock = jest.fn();
   });
 
+  interface GetElementProps {
+    os?: OperatingSystem;
+    isRemoveDisabled?: boolean;
+    entry?: TrustedAppConditionEntry;
+  }
+
   const getElement = (
     subject: string,
-    os: OperatingSystem = OperatingSystem.WINDOWS,
+    {
-    isRemoveDisabled: boolean = false,
+      os = OperatingSystem.WINDOWS,
-    entry: TrustedAppConditionEntry = baseEntry
+      isRemoveDisabled = false,
+      entry = baseEntry,
+    }: GetElementProps = {}
   ) => (
     <ConditionEntryInput
       os={os}
@@ -80,7 +88,7 @@ describe('Condition entry input', () => {
   });
 
   it('should not be able to call on remove for field input because disabled', () => {
-    const element = mount(getElement('testOnRemove', OperatingSystem.WINDOWS, true));
+    const element = mount(getElement('testOnRemove', { isRemoveDisabled: true }));
     expect(onRemoveMock).toHaveBeenCalledTimes(0);
     element.find('[data-test-subj="testOnRemove-remove"]').first().simulate('click');
     expect(onRemoveMock).toHaveBeenCalledTimes(0);
@@ -94,6 +102,21 @@ describe('Condition entry input', () => {
     expect(onVisitedMock).toHaveBeenCalledWith(baseEntry);
   });
 
+  it('should not call on visited for field change if value is empty', () => {
+    const emptyEntry = { ...baseEntry, value: '' };
+    const element = shallow(getElement('testOnVisited', { entry: emptyEntry }));
+    expect(onVisitedMock).toHaveBeenCalledTimes(0);
+    element.find('[data-test-subj="testOnVisited-field"]').first().simulate('change');
+    expect(onVisitedMock).toHaveBeenCalledTimes(0);
+  });
+
+  it('should call on visited for field change if value is not empty', () => {
+    const element = shallow(getElement('testOnVisited'));
+    expect(onVisitedMock).toHaveBeenCalledTimes(0);
+    element.find('[data-test-subj="testOnVisited-field"]').first().simulate('change');
+    expect(onVisitedMock).toHaveBeenCalledTimes(1);
+  });
+
   it('should change value for field input', () => {
     const element = shallow(getElement('testOnChange'));
     expect(onChangeMock).toHaveBeenCalledTimes(0);
@@ -121,7 +144,7 @@ describe('Condition entry input', () => {
   });
 
   it('should be able to select two options when LINUX OS', () => {
-    const element = mount(getElement('testCheckSignatureOption', OperatingSystem.LINUX));
+    const element = mount(getElement('testCheckSignatureOption', { os: OperatingSystem.LINUX }));
     const superSelectProps = element
       .find('[data-test-subj="testCheckSignatureOption-field"]')
       .first()
@@ -130,7 +153,7 @@ describe('Condition entry input', () => {
   });
 
   it('should be able to select two options when MAC OS', () => {
-    const element = mount(getElement('testCheckSignatureOption', OperatingSystem.MAC));
+    const element = mount(getElement('testCheckSignatureOption', { os: OperatingSystem.MAC }));
     const superSelectProps = element
       .find('[data-test-subj="testCheckSignatureOption-field"]')
       .first()
@@ -144,11 +167,10 @@ describe('Condition entry input', () => {
     expect(inputField.contains('is'));
   });
 
-  it('should show operator dorpdown with two values when field is PATH', () => {
+  it('should show operator dropdown with two values when field is PATH', () => {
     const element = shallow(
-      getElement('testOperatorOptions', undefined, undefined, {
+      getElement('testOperatorOptions', {
-        ...baseEntry,
+        entry: { ...baseEntry, field: ConditionEntryField.PATH },
-        field: ConditionEntryField.PATH,
       })
     );
     const superSelectProps = element

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/condition_entry_input/index.tsx

@@ -93,6 +93,14 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
     const getTestId = useTestIdGenerator(dataTestSubj);
     const [isVisited, setIsVisited] = useState(false);
 
+    const handleVisited = useCallback(() => {
+      onVisited?.(entry);
+
+      if (!isVisited) {
+        setIsVisited(true);
+      }
+    }, [entry, isVisited, onVisited]);
+
     const fieldOptions = useMemo<Array<EuiSuperSelectOption<string>>>(() => {
       const getDropdownDisplay = (field: ConditionEntryField) => (
         <>
@@ -132,8 +140,14 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
     );
 
     const handleFieldUpdate = useCallback(
-      (newField) => onChange({ ...entry, field: newField }, entry),
+      (newField) => {
-      [entry, onChange]
+        onChange({ ...entry, field: newField }, entry);
+
+        if (entry.value) {
+          handleVisited();
+        }
+      },
+      [handleVisited, entry, onChange]
     );
 
     const handleOperatorUpdate = useCallback(
@@ -144,13 +158,8 @@ export const ConditionEntryInput = memo<ConditionEntryInputProps>(
     const handleRemoveClick = useCallback(() => onRemove(entry), [entry, onRemove]);
 
     const handleValueOnBlur = useCallback(() => {
-      if (onVisited) {
+      handleVisited();
-        onVisited(entry);
+    }, [handleVisited]);
-      }
-      if (!isVisited) {
-        setIsVisited(true);
-      }
-    }, [entry, onVisited, isVisited]);
 
     return (
       <InputGroup data-test-subj={dataTestSubj}>