From 41927d9a63b29836a070fa42b793e828dd60ce0e Mon Sep 17 00:00:00 2001
From: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
Date: Thu, 24 Sep 2020 12:25:08 -0400
Subject: [PATCH] [SECURITY_SOLUTION][ENDPOINT] Trusted App Create Form show
 inline validations errors (#78305)

* Updated structure for `ValidationResult` type
* show errors on the ui if field is invalid
* Support for tracking visited fields
* Remove use of Snapshots in Trusted Apps tests
---
 .../trusted_apps_list.test.tsx.snap           |    7 +
 .../trusted_apps_page.test.tsx.snap           | 1053 -----------------
 .../create_trusted_app_form.test.tsx          |  304 +++++
 .../components/create_trusted_app_form.tsx    |  161 ++-
 .../components/condition_entry.tsx            |   21 +-
 .../components/condition_group.tsx            |    9 +-
 .../logical_condition_builder.tsx             |    3 +-
 .../trusted_apps/view/trusted_apps_list.tsx   |    1 +
 .../view/trusted_apps_page.test.tsx           |   16 +-
 9 files changed, 498 insertions(+), 1077 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap
 create mode 100644 x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx

diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_list.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_list.test.tsx.snap
index 46885bd653dc2..ccd94c63e96c8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_list.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_list.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`TrustedAppsList renders correctly initially 1`] = `
 <div>
   <div
     class="euiBasicTable"
+    data-test-subj="trustedAppsList"
   >
     <div>
       <div
@@ -146,6 +147,7 @@ exports[`TrustedAppsList renders correctly when failed loading data for the firs
 <div>
   <div
     class="euiBasicTable"
+    data-test-subj="trustedAppsList"
   >
     <div>
       <div
@@ -293,6 +295,7 @@ exports[`TrustedAppsList renders correctly when failed loading data for the seco
 <div>
   <div
     class="euiBasicTable"
+    data-test-subj="trustedAppsList"
   >
     <div>
       <div
@@ -440,6 +443,7 @@ exports[`TrustedAppsList renders correctly when loaded data 1`] = `
 <div>
   <div
     class="euiBasicTable"
+    data-test-subj="trustedAppsList"
   >
     <div>
       <div
@@ -2744,6 +2748,7 @@ exports[`TrustedAppsList renders correctly when loading data for the first time
 <div>
   <div
     class="euiBasicTable euiBasicTable-loading"
+    data-test-subj="trustedAppsList"
   >
     <div>
       <div
@@ -2886,6 +2891,7 @@ exports[`TrustedAppsList renders correctly when loading data for the second time
 <div>
   <div
     class="euiBasicTable euiBasicTable-loading"
+    data-test-subj="trustedAppsList"
   >
     <div>
       <div
@@ -5190,6 +5196,7 @@ exports[`TrustedAppsList renders correctly when new page and page size set (not
 <div>
   <div
     class="euiBasicTable"
+    data-test-subj="trustedAppsList"
   >
     <div>
       <div
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap
deleted file mode 100644
index 1fccfe012bfba..0000000000000
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/__snapshots__/trusted_apps_page.test.tsx.snap
+++ /dev/null
@@ -1,1053 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TrustedAppsPage rendering 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": .c0 {
-  padding: 24px;
-}
-
-.c0.siemWrapperPage--restrictWidthDefault,
-.c0.siemWrapperPage--restrictWidthCustom {
-  box-sizing: content-box;
-  margin: 0 auto;
-}
-
-.c0.siemWrapperPage--restrictWidthDefault {
-  max-width: 1000px;
-}
-
-.c0.siemWrapperPage--fullHeight {
-  height: 100%;
-}
-
-.c0.siemWrapperPage--withTimeline {
-  padding-right: 70px;
-}
-
-.c0.siemWrapperPage--noPadding {
-  padding: 0;
-}
-
-.c4 {
-  margin-top: 8px;
-}
-
-.c4 .siemSubtitle__item {
-  color: #6a717d;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.c3 {
-  vertical-align: middle;
-}
-
-.c1 {
-  margin-bottom: 24px;
-}
-
-.c2 {
-  display: block;
-}
-
-.c5 .euiFlyout {
-  z-index: 4001;
-}
-
-@media only screen and (min-width:575px) {
-  .c4 .siemSubtitle__item {
-    display: inline-block;
-    margin-right: 16px;
-  }
-
-  .c4 .siemSubtitle__item:last-child {
-    margin-right: 0;
-  }
-}
-
-<body>
-    <div>
-      <div
-        class="c0 siemWrapperPage"
-      >
-        <header
-          class="c1 siemHeaderPage"
-        >
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-          >
-            <div
-              class="euiFlexItem c2"
-            >
-              <h1
-                class="euiTitle euiTitle--large"
-                data-test-subj="header-page-title"
-              >
-                Trusted Applications
-                 
-                <span
-                  class="euiBetaBadge c3"
-                  title="Beta"
-                >
-                  Beta
-                </span>
-              </h1>
-              <div
-                class="c4 siemSubtitle"
-              >
-                <div
-                  class="siemSubtitle__item siemSubtitle__item--node"
-                  data-test-subj="header-panel-subtitle"
-                >
-                  View and configure trusted applications
-                </div>
-              </div>
-            </div>
-            <div
-              class="euiFlexItem euiFlexItem--flexGrowZero c2"
-              data-test-subj="header-page-supplements"
-            >
-              <button
-                class="euiButton euiButton--primary euiButton--fill"
-                data-test-subj="trustedAppsListAddButton"
-                type="button"
-              >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <div
-                    class="euiButtonContent__icon"
-                    data-euiicon-type="plusInCircle"
-                  />
-                  <span
-                    class="euiButton__text"
-                  >
-                    Add Trusted Application
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-          <span
-            class="euiToolTipAnchor"
-          >
-            <div
-              class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
-            >
-              <div
-                class="euiPopover__anchor"
-              >
-                <button
-                  aria-label="Index patterns"
-                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--large euiButtonEmpty--flushLeft"
-                  data-test-subj="sourcerer-trigger"
-                  title="Index patterns"
-                  type="button"
-                >
-                  <span
-                    class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                  >
-                    <div
-                      class="euiButtonContent__icon"
-                      data-euiicon-type="indexSettings"
-                    />
-                    <span
-                      class="euiButtonEmpty__text"
-                    >
-                      Index patterns
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </span>
-        </header>
-        <div
-          class="euiTabs"
-          role="tablist"
-        >
-          <button
-            aria-selected="false"
-            class="euiTab"
-            data-test-subj="navigation-endpoints"
-            role="tab"
-            type="button"
-          >
-            <span
-              class="euiTab__content"
-            >
-              Endpoints
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiTab"
-            data-test-subj="navigation-trusted_apps"
-            role="tab"
-            type="button"
-          >
-            <span
-              class="euiTab__content"
-            >
-              Trusted applications
-            </span>
-          </button>
-        </div>
-        <div
-          class="euiSpacer euiSpacer--l"
-        />
-        <div
-          class="euiPanel euiPanel--paddingMedium c5"
-        >
-          <div
-            class="euiBasicTable euiBasicTable-loading"
-          >
-            <div>
-              <div
-                class="euiTableHeaderMobile"
-              >
-                <div
-                  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
-                >
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  />
-                  <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
-                  />
-                </div>
-              </div>
-              <table
-                class="euiTable euiTable--responsive"
-                id="mockId"
-                tabindex="-1"
-              >
-                <caption
-                  class="euiScreenReaderOnly euiTableCaption"
-                />
-                <thead>
-                  <tr>
-                    <th
-                      class="euiTableHeaderCell"
-                      data-test-subj="tableHeaderCell_name_0"
-                      role="columnheader"
-                      scope="col"
-                    >
-                      <div
-                        class="euiTableCellContent"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                          title="Name"
-                        >
-                          Name
-                        </span>
-                      </div>
-                    </th>
-                    <th
-                      class="euiTableHeaderCell"
-                      data-test-subj="tableHeaderCell_os_1"
-                      role="columnheader"
-                      scope="col"
-                    >
-                      <div
-                        class="euiTableCellContent"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                          title="OS"
-                        >
-                          OS
-                        </span>
-                      </div>
-                    </th>
-                    <th
-                      class="euiTableHeaderCell"
-                      data-test-subj="tableHeaderCell_created_at_2"
-                      role="columnheader"
-                      scope="col"
-                    >
-                      <div
-                        class="euiTableCellContent"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                          title="Date Created"
-                        >
-                          Date Created
-                        </span>
-                      </div>
-                    </th>
-                    <th
-                      class="euiTableHeaderCell"
-                      data-test-subj="tableHeaderCell_created_by_3"
-                      role="columnheader"
-                      scope="col"
-                    >
-                      <div
-                        class="euiTableCellContent"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                          title="Created By"
-                        >
-                          Created By
-                        </span>
-                      </div>
-                    </th>
-                    <th
-                      class="euiTableHeaderCell"
-                      role="columnheader"
-                      scope="col"
-                    >
-                      <div
-                        class="euiTableCellContent euiTableCellContent--alignRight"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                          title="Actions"
-                        >
-                          Actions
-                        </span>
-                      </div>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    class="euiTableRow"
-                  >
-                    <td
-                      class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                      colspan="5"
-                    >
-                      <div
-                        class="euiTableCellContent euiTableCellContent--alignCenter"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                        >
-                          No items found
-                        </span>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="sc-fzoyAV jWxvlI siemWrapperPage"
-    >
-      <header
-        class="sc-qWSGh guUwJg siemHeaderPage"
-      >
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-        >
-          <div
-            class="euiFlexItem sc-pAMRk dnbbmF"
-          >
-            <h1
-              class="euiTitle euiTitle--large"
-              data-test-subj="header-page-title"
-            >
-              Trusted Applications
-               
-              <span
-                class="euiBetaBadge sc-puFxT fWhqFT"
-                title="Beta"
-              >
-                Beta
-              </span>
-            </h1>
-            <div
-              class="sc-fzoXzr iMKumH siemSubtitle"
-            >
-              <div
-                class="siemSubtitle__item siemSubtitle__item--node"
-                data-test-subj="header-panel-subtitle"
-              >
-                View and configure trusted applications
-              </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero sc-pAMRk dnbbmF"
-            data-test-subj="header-page-supplements"
-          >
-            <button
-              class="euiButton euiButton--primary euiButton--fill"
-              data-test-subj="trustedAppsListAddButton"
-              type="button"
-            >
-              <span
-                class="euiButtonContent euiButton__content"
-              >
-                <div
-                  class="euiButtonContent__icon"
-                  data-euiicon-type="plusInCircle"
-                />
-                <span
-                  class="euiButton__text"
-                >
-                  Add Trusted Application
-                </span>
-              </span>
-            </button>
-          </div>
-        </div>
-        <span
-          class="euiToolTipAnchor"
-        >
-          <div
-            class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock"
-          >
-            <div
-              class="euiPopover__anchor"
-            >
-              <button
-                aria-label="Index patterns"
-                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--large euiButtonEmpty--flushLeft"
-                data-test-subj="sourcerer-trigger"
-                title="Index patterns"
-                type="button"
-              >
-                <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                >
-                  <div
-                    class="euiButtonContent__icon"
-                    data-euiicon-type="indexSettings"
-                  />
-                  <span
-                    class="euiButtonEmpty__text"
-                  >
-                    Index patterns
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </span>
-      </header>
-      <div
-        class="euiTabs"
-        role="tablist"
-      >
-        <button
-          aria-selected="false"
-          class="euiTab"
-          data-test-subj="navigation-endpoints"
-          role="tab"
-          type="button"
-        >
-          <span
-            class="euiTab__content"
-          >
-            Endpoints
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="euiTab"
-          data-test-subj="navigation-trusted_apps"
-          role="tab"
-          type="button"
-        >
-          <span
-            class="euiTab__content"
-          >
-            Trusted applications
-          </span>
-        </button>
-      </div>
-      <div
-        class="euiSpacer euiSpacer--l"
-      />
-      <div
-        class="euiPanel euiPanel--paddingMedium sc-pJVLq cINVeB"
-      >
-        <div
-          class="euiBasicTable euiBasicTable-loading"
-        >
-          <div>
-            <div
-              class="euiTableHeaderMobile"
-            >
-              <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
-              >
-                <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                />
-                <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                />
-              </div>
-            </div>
-            <table
-              class="euiTable euiTable--responsive"
-              id="mockId"
-              tabindex="-1"
-            >
-              <caption
-                class="euiScreenReaderOnly euiTableCaption"
-              />
-              <thead>
-                <tr>
-                  <th
-                    class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_name_0"
-                    role="columnheader"
-                    scope="col"
-                  >
-                    <div
-                      class="euiTableCellContent"
-                    >
-                      <span
-                        class="euiTableCellContent__text"
-                        title="Name"
-                      >
-                        Name
-                      </span>
-                    </div>
-                  </th>
-                  <th
-                    class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_os_1"
-                    role="columnheader"
-                    scope="col"
-                  >
-                    <div
-                      class="euiTableCellContent"
-                    >
-                      <span
-                        class="euiTableCellContent__text"
-                        title="OS"
-                      >
-                        OS
-                      </span>
-                    </div>
-                  </th>
-                  <th
-                    class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_created_at_2"
-                    role="columnheader"
-                    scope="col"
-                  >
-                    <div
-                      class="euiTableCellContent"
-                    >
-                      <span
-                        class="euiTableCellContent__text"
-                        title="Date Created"
-                      >
-                        Date Created
-                      </span>
-                    </div>
-                  </th>
-                  <th
-                    class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_created_by_3"
-                    role="columnheader"
-                    scope="col"
-                  >
-                    <div
-                      class="euiTableCellContent"
-                    >
-                      <span
-                        class="euiTableCellContent__text"
-                        title="Created By"
-                      >
-                        Created By
-                      </span>
-                    </div>
-                  </th>
-                  <th
-                    class="euiTableHeaderCell"
-                    role="columnheader"
-                    scope="col"
-                  >
-                    <div
-                      class="euiTableCellContent euiTableCellContent--alignRight"
-                    >
-                      <span
-                        class="euiTableCellContent__text"
-                        title="Actions"
-                      >
-                        Actions
-                      </span>
-                    </div>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  class="euiTableRow"
-                >
-                  <td
-                    class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
-                    colspan="5"
-                  >
-                    <div
-                      class="euiTableCellContent euiTableCellContent--alignCenter"
-                    >
-                      <span
-                        class="euiTableCellContent__text"
-                      >
-                        No items found
-                      </span>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`TrustedAppsPage when the Add Trusted App button is clicked should display create form 1`] = `
-@media only screen and (min-width:575px) {
-
-}
-
-<div
-  class="euiForm"
-  data-test-subj="addTrustedAppFlyout-createForm"
->
-  <div
-    class="euiFormRow euiFormRow--fullWidth"
-    data-test-subj="addTrustedAppFlyout-createForm-nameRow"
-    id="mockId-row"
-  >
-    <div
-      class="euiFormRow__labelWrapper"
-    >
-      <label
-        class="euiFormLabel euiFormRow__label"
-        for="mockId"
-      >
-        Name your trusted app application
-      </label>
-    </div>
-    <div
-      class="euiFormRow__fieldWrapper"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <input
-            class="euiFieldText euiFieldText--fullWidth"
-            data-test-subj="addTrustedAppFlyout-createForm-nameTextField"
-            id="mockId"
-            name="name"
-            type="text"
-            value=""
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiFormRow euiFormRow--fullWidth"
-    data-test-subj="addTrustedAppFlyout-createForm-OsRow"
-    id="mockId-row"
-  >
-    <div
-      class="euiFormRow__labelWrapper"
-    >
-      <label
-        class="euiFormLabel euiFormRow__label"
-        for="mockId"
-      >
-        Select operating system
-      </label>
-    </div>
-    <div
-      class="euiFormRow__fieldWrapper"
-    >
-      <div
-        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect euiSuperSelect--fullWidth"
-      >
-        <div
-          class="euiPopover__anchor"
-        >
-          <input
-            id="mockId"
-            name="os"
-            type="hidden"
-            value="windows"
-          />
-          <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
-          >
-            <div
-              class="euiFormControlLayout__childrenWrapper"
-            >
-              <span
-                class="euiScreenReaderOnly"
-                id="mockId"
-              >
-                Select an option: Windows, is selected
-              </span>
-              <button
-                aria-haspopup="true"
-                aria-labelledby="mockId mockId"
-                class="euiSuperSelectControl euiSuperSelectControl--fullWidth"
-                data-test-subj="addTrustedAppFlyout-createForm-osSelectField"
-                type="button"
-              >
-                Windows
-              </button>
-              <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  class="euiFormControlLayoutCustomIcon"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="euiFormControlLayoutCustomIcon__icon"
-                    data-euiicon-type="arrowDown"
-                  />
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiFormRow euiFormRow--fullWidth"
-    data-test-subj="addTrustedAppFlyout-createForm-conditionsRow"
-    id="mockId-row"
-  >
-    <div
-      class="euiFormRow__fieldWrapper"
-    >
-      <div
-        data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder"
-      >
-        <div>
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
-            data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1"
-          >
-            <div
-              class="euiFlexItem euiFlexItem--flexGrow1"
-            >
-              <div
-                class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-                data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1-entry0"
-              >
-                <div
-                  class="euiFlexItem euiFlexItem--flexGrow2"
-                >
-                  <div
-                    class="euiFormRow euiFormRow--fullWidth"
-                    id="mockId-row"
-                  >
-                    <div
-                      class="euiFormRow__labelWrapper"
-                    >
-                      <label
-                        class="euiFormLabel euiFormRow__label"
-                        for="mockId"
-                      >
-                        Field
-                      </label>
-                    </div>
-                    <div
-                      class="euiFormRow__fieldWrapper"
-                    >
-                      <div
-                        class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
-                      >
-                        <div
-                          class="euiPopover__anchor"
-                        >
-                          <input
-                            id="mockId"
-                            type="hidden"
-                            value="process.hash.*"
-                          />
-                          <div
-                            class="euiFormControlLayout"
-                          >
-                            <div
-                              class="euiFormControlLayout__childrenWrapper"
-                            >
-                              <span
-                                class="euiScreenReaderOnly"
-                                id="mockId"
-                              >
-                                Select an option: Hash, is selected
-                              </span>
-                              <button
-                                aria-haspopup="true"
-                                aria-labelledby="mockId mockId"
-                                class="euiSuperSelectControl"
-                                data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1-entry0-field"
-                                type="button"
-                              >
-                                Hash
-                              </button>
-                              <div
-                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                              >
-                                <span
-                                  class="euiFormControlLayoutCustomIcon"
-                                >
-                                  <div
-                                    aria-hidden="true"
-                                    class="euiFormControlLayoutCustomIcon__icon"
-                                    data-euiicon-type="arrowDown"
-                                  />
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="euiFlexItem"
-                >
-                  <div
-                    class="euiFormRow euiFormRow--fullWidth"
-                    id="mockId-row"
-                  >
-                    <div
-                      class="euiFormRow__labelWrapper"
-                    >
-                      <label
-                        class="euiFormLabel euiFormRow__label"
-                        for="mockId"
-                      >
-                        Operator
-                      </label>
-                    </div>
-                    <div
-                      class="euiFormRow__fieldWrapper"
-                    >
-                      <div
-                        class="euiFormControlLayout euiFormControlLayout--readOnly"
-                      >
-                        <div
-                          class="euiFormControlLayout__childrenWrapper"
-                        >
-                          <input
-                            class="euiFieldText"
-                            id="mockId"
-                            name="operator"
-                            readonly=""
-                            type="text"
-                            value="is"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="euiFlexItem euiFlexItem--flexGrow3"
-                >
-                  <div
-                    class="euiFormRow euiFormRow--fullWidth"
-                    id="mockId-row"
-                  >
-                    <div
-                      class="euiFormRow__labelWrapper"
-                    >
-                      <label
-                        class="euiFormLabel euiFormRow__label"
-                        for="mockId"
-                      >
-                        Value
-                      </label>
-                    </div>
-                    <div
-                      class="euiFormRow__fieldWrapper"
-                    >
-                      <div
-                        class="euiFormControlLayout"
-                      >
-                        <div
-                          class="euiFormControlLayout__childrenWrapper"
-                        >
-                          <input
-                            class="euiFieldText"
-                            data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-group1-entry0-value"
-                            id="mockId"
-                            name="value"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                >
-                  <div
-                    class="euiFormRow euiFormRow--fullWidth"
-                    id="mockId-row"
-                  >
-                    <div
-                      class="euiFormRow__labelWrapper"
-                    >
-                      <label
-                        class="euiFormLabel euiFormRow__label"
-                        for="mockId"
-                      >
-                         
-                      </label>
-                    </div>
-                    <div
-                      class="euiFormRow__fieldWrapper"
-                    >
-                      <button
-                        aria-label="Remove Entry"
-                        class="euiButtonIcon euiButtonIcon--danger"
-                        disabled=""
-                        id="mockId"
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          class="euiButtonIcon__icon"
-                          data-euiicon-type="trash"
-                        />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="euiSpacer euiSpacer--s"
-        />
-        <button
-          class="euiButton euiButton--primary euiButton--small euiButton--fill"
-          data-test-subj="addTrustedAppFlyout-createForm-conditionsBuilder-AndButton"
-          style="min-width: 95px;"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButton__content"
-          >
-            <div
-              class="euiButtonContent__icon"
-              data-euiicon-type="plusInCircle"
-            />
-            <span
-              class="euiButton__text"
-            >
-              AND
-            </span>
-          </span>
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiFormRow euiFormRow--fullWidth"
-    data-test-subj="addTrustedAppFlyout-createForm-descriptionRow"
-    id="mockId-row"
-  >
-    <div
-      class="euiFormRow__labelWrapper"
-    >
-      <label
-        class="euiFormLabel euiFormRow__label"
-        for="mockId"
-      >
-        Description
-      </label>
-    </div>
-    <div
-      class="euiFormRow__fieldWrapper"
-    >
-      <textarea
-        class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
-        data-test-subj="addTrustedAppFlyout-createForm-descriptionField"
-        id="mockId"
-        name="description"
-        rows="6"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx
new file mode 100644
index 0000000000000..dd4f389f04705
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.test.tsx
@@ -0,0 +1,304 @@
+/*
+ * 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 {
+  AppContextTestRender,
+  createAppRootMockRenderer,
+} from '../../../../../common/mock/endpoint';
+import * as reactTestingLibrary from '@testing-library/react';
+import React from 'react';
+import { CreateTrustedAppForm, CreateTrustedAppFormProps } from './create_trusted_app_form';
+import { fireEvent, getByTestId } from '@testing-library/dom';
+
+describe('When showing the Trusted App Create Form', () => {
+  const dataTestSubjForForm = 'createForm';
+  type RenderResultType = ReturnType<AppContextTestRender['render']>;
+
+  let render: () => RenderResultType;
+  let formProps: jest.Mocked<CreateTrustedAppFormProps>;
+
+  // Some helpers
+  const setTextFieldValue = (textField: HTMLInputElement | HTMLTextAreaElement, value: string) => {
+    reactTestingLibrary.act(() => {
+      fireEvent.change(textField, {
+        target: { value },
+      });
+      fireEvent.blur(textField);
+    });
+  };
+  const getNameField = (
+    renderResult: RenderResultType,
+    dataTestSub: string = dataTestSubjForForm
+  ): HTMLInputElement => {
+    return renderResult.getByTestId(`${dataTestSub}-nameTextField`) as HTMLInputElement;
+  };
+  const getOsField = (
+    renderResult: RenderResultType,
+    dataTestSub: string = dataTestSubjForForm
+  ): HTMLButtonElement => {
+    return renderResult.getByTestId(`${dataTestSub}-osSelectField`) as HTMLButtonElement;
+  };
+  const getDescriptionField = (
+    renderResult: RenderResultType,
+    dataTestSub: string = dataTestSubjForForm
+  ): HTMLTextAreaElement => {
+    return renderResult.getByTestId(`${dataTestSub}-descriptionField`) as HTMLTextAreaElement;
+  };
+  const getCondition = (
+    renderResult: RenderResultType,
+    index: number = 0,
+    dataTestSub: string = dataTestSubjForForm
+  ): HTMLElement => {
+    return renderResult.getByTestId(`${dataTestSub}-conditionsBuilder-group1-entry${index}`);
+  };
+  const getAllConditions = (
+    renderResult: RenderResultType,
+    dataTestSub: string = dataTestSubjForForm
+  ): HTMLElement[] => {
+    return Array.from(
+      renderResult.getByTestId(`${dataTestSub}-conditionsBuilder-group1-entries`).children
+    ) as HTMLElement[];
+  };
+  const getConditionRemoveButton = (condition: HTMLElement): HTMLButtonElement => {
+    return getByTestId(condition, `${condition.dataset.testSubj}-remove`) as HTMLButtonElement;
+  };
+  const getConditionFieldSelect = (condition: HTMLElement): HTMLButtonElement => {
+    return getByTestId(condition, `${condition.dataset.testSubj}-field`) as HTMLButtonElement;
+  };
+  const getConditionValue = (condition: HTMLElement): HTMLInputElement => {
+    return getByTestId(condition, `${condition.dataset.testSubj}-value`) as HTMLInputElement;
+  };
+  const getConditionBuilderAndButton = (
+    renderResult: RenderResultType,
+    dataTestSub: string = dataTestSubjForForm
+  ): HTMLButtonElement => {
+    return renderResult.getByTestId(
+      `${dataTestSub}-conditionsBuilder-AndButton`
+    ) as HTMLButtonElement;
+  };
+  const getConditionBuilderAndConnectorBadge = (
+    renderResult: RenderResultType,
+    dataTestSub: string = dataTestSubjForForm
+  ): HTMLElement => {
+    return renderResult.getByTestId(`${dataTestSub}-conditionsBuilder-group1-andConnector`);
+  };
+  const getAllValidationErrors = (renderResult: RenderResultType): HTMLElement[] => {
+    return Array.from(renderResult.container.querySelectorAll('.euiFormErrorText'));
+  };
+
+  beforeEach(() => {
+    const mockedContext = createAppRootMockRenderer();
+
+    formProps = {
+      'data-test-subj': dataTestSubjForForm,
+      onChange: jest.fn(),
+    };
+    render = () => mockedContext.render(<CreateTrustedAppForm {...formProps} />);
+  });
+
+  it('should show Name as required', () => {
+    expect(getNameField(render()).required).toBe(true);
+  });
+
+  it('should default OS to Windows', () => {
+    expect(getOsField(render()).textContent).toEqual('Windows');
+  });
+
+  it('should allow user to select between 3 OSs', () => {
+    const renderResult = render();
+    const osField = getOsField(renderResult);
+    reactTestingLibrary.act(() => {
+      fireEvent.click(osField, { button: 1 });
+    });
+    const options = Array.from(
+      renderResult.baseElement.querySelectorAll(
+        '.euiSuperSelect__listbox button.euiSuperSelect__item'
+      )
+    ).map((button) => button.textContent);
+    expect(options).toEqual(['Mac OS', 'Windows', 'Linux']);
+  });
+
+  it('should show Description as optional', () => {
+    expect(getDescriptionField(render()).required).toBe(false);
+  });
+
+  it('should NOT initially show any inline validation errors', () => {
+    expect(render().container.querySelectorAll('.euiFormErrorText').length).toBe(0);
+  });
+
+  it('should show top-level Errors', () => {
+    formProps.isInvalid = true;
+    formProps.error = 'a top level error';
+    const { queryByText } = render();
+    expect(queryByText(formProps.error as string)).not.toBeNull();
+  });
+
+  describe('the condition builder component', () => {
+    it('should show an initial condition entry with labels', () => {
+      const defaultCondition = getCondition(render());
+      const labels = Array.from(
+        defaultCondition.querySelectorAll('.euiFormRow__labelWrapper')
+      ).map((label) => (label.textContent || '').trim());
+      expect(labels).toEqual(['Field', 'Operator', 'Value', '']);
+    });
+
+    it('should not allow the entry to be removed if its the only one displayed', () => {
+      const defaultCondition = getCondition(render());
+      expect(getConditionRemoveButton(defaultCondition).disabled).toBe(true);
+    });
+
+    it('should display 2 options for Field', () => {
+      const renderResult = render();
+      const conditionFieldSelect = getConditionFieldSelect(getCondition(renderResult));
+      reactTestingLibrary.act(() => {
+        fireEvent.click(conditionFieldSelect, { button: 1 });
+      });
+      const options = Array.from(
+        renderResult.baseElement.querySelectorAll(
+          '.euiSuperSelect__listbox button.euiSuperSelect__item'
+        )
+      ).map((button) => button.textContent);
+      expect(options).toEqual(['Hash', 'Path']);
+    });
+
+    it('should show the value field as required', () => {
+      expect(getConditionValue(getCondition(render())).required).toEqual(true);
+    });
+
+    it('should display the `AND` button', () => {
+      const andButton = getConditionBuilderAndButton(render());
+      expect(andButton.textContent).toEqual('AND');
+      expect(andButton.disabled).toEqual(false);
+    });
+
+    describe('and when the AND button is clicked', () => {
+      let renderResult: RenderResultType;
+
+      beforeEach(() => {
+        renderResult = render();
+        const andButton = getConditionBuilderAndButton(renderResult);
+        reactTestingLibrary.act(() => {
+          fireEvent.click(andButton, { button: 1 });
+        });
+      });
+
+      it('should add a new condition entry when `AND` is clicked with no labels', () => {
+        const condition2 = getCondition(renderResult, 1);
+        expect(condition2.querySelectorAll('.euiFormRow__labelWrapper')).toHaveLength(0);
+      });
+
+      it('should have remove buttons enabled when multiple conditions are present', () => {
+        getAllConditions(renderResult).forEach((condition) => {
+          expect(getConditionRemoveButton(condition).disabled).toBe(false);
+        });
+      });
+
+      it('should show the AND visual connector when multiple entries are present', () => {
+        expect(getConditionBuilderAndConnectorBadge(renderResult).textContent).toEqual('AND');
+      });
+    });
+  });
+
+  describe('and the user visits required fields but does not fill them out', () => {
+    let renderResult: RenderResultType;
+
+    beforeEach(() => {
+      renderResult = render();
+      reactTestingLibrary.act(() => {
+        fireEvent.blur(getNameField(renderResult));
+      });
+      reactTestingLibrary.act(() => {
+        fireEvent.blur(getConditionValue(getCondition(renderResult)));
+      });
+    });
+
+    it('should show Name validation error', () => {
+      expect(renderResult.getByText('Name is required'));
+    });
+
+    it('should show Condition validation error', () => {
+      expect(renderResult.getByText('[1] Field entry must have a value'));
+    });
+
+    it('should NOT display any other errors', () => {
+      expect(getAllValidationErrors(renderResult)).toHaveLength(2);
+    });
+
+    it('should call change callback with isValid set to false and contain the new item', () => {
+      expect(formProps.onChange).toHaveBeenCalledWith({
+        isValid: false,
+        item: {
+          description: '',
+          entries: [
+            {
+              field: 'process.hash.*',
+              operator: 'included',
+              type: 'match',
+              value: '',
+            },
+          ],
+          name: '',
+          os: 'windows',
+        },
+      });
+    });
+  });
+
+  describe('and invalid data is entered', () => {
+    let renderResult: RenderResultType;
+
+    beforeEach(() => {
+      renderResult = render();
+    });
+
+    it('should validate that Name has a non empty space value', () => {
+      setTextFieldValue(getNameField(renderResult), '  ');
+      expect(renderResult.getByText('Name is required'));
+    });
+
+    it('should validate that a condition value has a non empty space value', () => {
+      setTextFieldValue(getConditionValue(getCondition(renderResult)), '  ');
+      expect(renderResult.getByText('[1] Field entry must have a value'));
+    });
+
+    it('should validate all condition values (when multiples exist) have non empty space value', () => {
+      const andButton = getConditionBuilderAndButton(renderResult);
+      reactTestingLibrary.act(() => {
+        fireEvent.click(andButton, { button: 1 });
+      });
+
+      setTextFieldValue(getConditionValue(getCondition(renderResult)), 'someHASH');
+      expect(renderResult.getByText('[2] Field entry must have a value'));
+    });
+  });
+
+  describe('and all required data passes validation', () => {
+    it('should call change callback with isValid set to true and contain the new item', () => {
+      const renderResult = render();
+      setTextFieldValue(getNameField(renderResult), 'Some Process');
+      setTextFieldValue(getConditionValue(getCondition(renderResult)), 'someHASH');
+      setTextFieldValue(getDescriptionField(renderResult), 'some description');
+
+      expect(getAllValidationErrors(renderResult)).toHaveLength(0);
+      expect(formProps.onChange).toHaveBeenLastCalledWith({
+        isValid: true,
+        item: {
+          description: 'some description',
+          entries: [
+            {
+              field: 'process.hash.*',
+              operator: 'included',
+              type: 'match',
+              value: 'someHASH',
+            },
+          ],
+          name: 'Some Process',
+          os: 'windows',
+        },
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx
index 51d02105bdaac..32170ed6fc4d8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/create_trusted_app_form.tsx
@@ -40,43 +40,114 @@ const generateNewEntry = (): NewTrustedApp['entries'][0] => {
   };
 };
 
+interface FieldValidationState {
+  /** If this fields state is invalid. Drives display of errors on the UI */
+  isInvalid: boolean;
+  errors: string[];
+  warnings: string[];
+}
 interface ValidationResult {
+  /** Overall indicator if form is valid */
   isValid: boolean;
-  errors: Partial<{ [k in keyof NewTrustedApp]: string }>;
+
+  /** Individual form field validations */
+  result: Partial<
+    {
+      [key in keyof NewTrustedApp]: FieldValidationState;
+    }
+  >;
 }
+
+const addResultToValidation = (
+  validation: ValidationResult,
+  field: keyof NewTrustedApp,
+  type: 'warnings' | 'errors',
+  resultValue: string
+) => {
+  if (!validation.result[field]) {
+    validation.result[field] = {
+      isInvalid: false,
+      errors: [],
+      warnings: [],
+    };
+  }
+  validation.result[field]![type].push(resultValue);
+  validation.result[field]!.isInvalid = true;
+};
+
 const validateFormValues = (values: NewTrustedApp): ValidationResult => {
-  const errors: ValidationResult['errors'] = {};
+  let isValid: ValidationResult['isValid'] = true;
+  const validation: ValidationResult = {
+    isValid,
+    result: {},
+  };
 
+  // Name field
   if (!values.name.trim()) {
-    errors.name = 'Name is required';
+    isValid = false;
+    addResultToValidation(
+      validation,
+      'name',
+      'errors',
+      i18n.translate('xpack.securitySolution.trustedapps.create.nameRequiredMsg', {
+        defaultMessage: 'Name is required',
+      })
+    );
   }
 
   if (!values.os) {
-    errors.os = 'OS is required';
+    isValid = false;
+    addResultToValidation(
+      validation,
+      'os',
+      'errors',
+      i18n.translate('xpack.securitySolution.trustedapps.create.osRequiredMsg', {
+        defaultMessage: 'Operating System is required',
+      })
+    );
   }
 
   if (!values.entries.length) {
-    errors.entries = 'At least one Field definition is required';
+    isValid = false;
+    addResultToValidation(
+      validation,
+      'entries',
+      'errors',
+      i18n.translate('xpack.securitySolution.trustedapps.create.conditionRequiredMsg', {
+        defaultMessage: 'At least one Field definition is required',
+      })
+    );
   } else {
     values.entries.some((entry, index) => {
       if (!entry.field || !entry.value.trim()) {
-        errors.entries = `Field entry ${index + 1} must have a value`;
+        isValid = false;
+        addResultToValidation(
+          validation,
+          'entries',
+          'errors',
+          i18n.translate(
+            'xpack.securitySolution.trustedapps.create.conditionFieldValueRequiredMsg',
+            {
+              defaultMessage: '[{row}] Field entry must have a value',
+              values: { row: index + 1 },
+            }
+          )
+        );
         return true;
       }
       return false;
     });
   }
 
-  return {
-    isValid: Object.keys(errors).length === 0,
-    errors,
-  };
+  validation.isValid = isValid;
+  return validation;
 };
 
 export interface TrustedAppFormState {
   isValid: boolean;
   item: NewTrustedApp;
 }
+
 export type CreateTrustedAppFormProps = Pick<
   EuiFormProps,
   'className' | 'data-test-subj' | 'isInvalid' | 'error' | 'invalidCallout'
@@ -88,6 +159,7 @@ export type CreateTrustedAppFormProps = Pick<
 export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
   ({ fullWidth, onChange, ...formProps }) => {
     const dataTestSubj = formProps['data-test-subj'];
+
     const osOptions: Array<EuiSuperSelectOption<string>> = useMemo(() => {
       return TRUSTED_APPS_SUPPORTED_OS_TYPES.map((os) => {
         return {
@@ -96,12 +168,26 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
         };
       });
     }, []);
+
     const [formValues, setFormValues] = useState<NewTrustedApp>({
       name: '',
       os: 'windows',
       entries: [generateNewEntry()],
       description: '',
     });
+
+    const [validationResult, setValidationResult] = useState<ValidationResult>(() =>
+      validateFormValues(formValues)
+    );
+
+    const [wasVisited, setWasVisited] = useState<
+      Partial<
+        {
+          [key in keyof NewTrustedApp]: boolean;
+        }
+      >
+    >({});
+
     const getTestId = useCallback(
       (suffix: string): string | undefined => {
         if (dataTestSubj) {
@@ -110,6 +196,7 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
       },
       [dataTestSubj]
     );
+
     const handleAndClick = useCallback(() => {
       setFormValues(
         (prevState): NewTrustedApp => {
@@ -132,6 +219,7 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
         }
       );
     }, [setFormValues]);
+
     const handleDomChangeEvents = useCallback<
       ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
     >(({ target: { name, value } }) => {
@@ -144,6 +232,19 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
         }
       );
     }, []);
+
+    const handleDomBlurEvents = useCallback<ChangeEventHandler<HTMLInputElement>>(
+      ({ target: { name } }) => {
+        setWasVisited((prevState) => {
+          return {
+            ...prevState,
+            [name]: true,
+          };
+        });
+      },
+      []
+    );
+
     const handleOsChange = useCallback<(v: string) => void>((newOsValue) => {
       setFormValues(
         (prevState): NewTrustedApp => {
@@ -170,7 +271,14 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
           return prevState;
         }
       );
+      setWasVisited((prevState) => {
+        return {
+          ...prevState,
+          os: true,
+        };
+      });
     }, []);
+
     const handleEntryRemove = useCallback((entry: NewTrustedApp['entries'][0]) => {
       setFormValues(
         (prevState): NewTrustedApp => {
@@ -181,6 +289,7 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
         }
       );
     }, []);
+
     const handleEntryChange = useCallback<LogicalConditionBuilderProps['onEntryChange']>(
       (newEntry, oldEntry) => {
         setFormValues(
@@ -212,13 +321,27 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
       []
     );
 
+    const handleConditionBuilderOnVisited: LogicalConditionBuilderProps['onVisited'] = useCallback(() => {
+      setWasVisited((prevState) => {
+        return {
+          ...prevState,
+          entries: true,
+        };
+      });
+    }, []);
+
+    // Anytime the form values change, re-validate
+    useEffect(() => {
+      setValidationResult(validateFormValues(formValues));
+    }, [formValues]);
+
     // Anytime the form values change - validate and notify
     useEffect(() => {
       onChange({
-        isValid: validateFormValues(formValues).isValid,
+        isValid: validationResult.isValid,
         item: formValues,
       });
-    }, [formValues, onChange]);
+    }, [formValues, onChange, validationResult.isValid]);
 
     return (
       <EuiForm {...formProps} component="div">
@@ -228,12 +351,16 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
           })}
           fullWidth={fullWidth}
           data-test-subj={getTestId('nameRow')}
+          isInvalid={wasVisited?.name && validationResult.result.name?.isInvalid}
+          error={validationResult.result.name?.errors}
         >
           <EuiFieldText
             name="name"
             value={formValues.name}
             onChange={handleDomChangeEvents}
+            onBlur={handleDomBlurEvents}
             fullWidth
+            required
             data-test-subj={getTestId('nameTextField')}
           />
         </EuiFormRow>
@@ -243,6 +370,8 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
           })}
           fullWidth={fullWidth}
           data-test-subj={getTestId('OsRow')}
+          isInvalid={wasVisited?.os && validationResult.result.os?.isInvalid}
+          error={validationResult.result.os?.errors}
         >
           <EuiSuperSelect
             name="os"
@@ -253,13 +382,19 @@ export const CreateTrustedAppForm = memo<CreateTrustedAppFormProps>(
             data-test-subj={getTestId('osSelectField')}
           />
         </EuiFormRow>
-        <EuiFormRow fullWidth={fullWidth} data-test-subj={getTestId('conditionsRow')}>
+        <EuiFormRow
+          fullWidth={fullWidth}
+          data-test-subj={getTestId('conditionsRow')}
+          isInvalid={wasVisited?.entries && validationResult.result.entries?.isInvalid}
+          error={validationResult.result.entries?.errors}
+        >
           <LogicalConditionBuilder
             entries={formValues.entries}
             os={formValues.os}
             onAndClicked={handleAndClick}
             onEntryRemove={handleEntryRemove}
             onEntryChange={handleEntryChange}
+            onVisited={handleConditionBuilderOnVisited}
             data-test-subj={getTestId('conditionsBuilder')}
           />
         </EuiFormRow>
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_entry.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_entry.tsx
index 7eeadeb02a385..7f7eae18b0816 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_entry.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_entry.tsx
@@ -34,7 +34,6 @@ const ConditionEntryCell = memo<{
 ConditionEntryCell.displayName = 'ConditionEntryCell';
 
 export interface ConditionEntryProps {
-  // FIXME:PT probably need to adjust below types to match what is done in `TrustedApp` type
   os: TrustedApp['os'];
   entry: TrustedApp['entries'][0];
   /** controls if remove button is enabled/disabled */
@@ -43,6 +42,12 @@ export interface ConditionEntryProps {
   showLabels: boolean;
   onRemove: (entry: TrustedApp['entries'][0]) => void;
   onChange: (newEntry: TrustedApp['entries'][0], oldEntry: TrustedApp['entries'][0]) => void;
+  /**
+   * invoked when at least one field in the entry was visited (triggered when `onBlur` DOM event is dispatched)
+   * For this component, that will be triggered only when the `value` field is visited, since that is the
+   * only one needs user input.
+   */
+  onVisited?: (entry: TrustedApp['entries'][0]) => void;
   'data-test-subj'?: string;
 }
 export const ConditionEntry = memo<ConditionEntryProps>(
@@ -52,6 +57,7 @@ export const ConditionEntry = memo<ConditionEntryProps>(
     onRemove,
     onChange,
     isRemoveDisabled = false,
+    onVisited,
     'data-test-subj': dataTestSubj,
   }) => {
     const getTestId = useCallback(
@@ -62,6 +68,7 @@ export const ConditionEntry = memo<ConditionEntryProps>(
       },
       [dataTestSubj]
     );
+
     const fieldOptions = useMemo<Array<EuiSuperSelectOption<string>>>(() => {
       return [
         {
@@ -80,6 +87,7 @@ export const ConditionEntry = memo<ConditionEntryProps>(
         },
       ];
     }, []);
+
     const handleValueUpdate = useCallback<ChangeEventHandler<HTMLInputElement>>(
       (ev) => {
         onChange(
@@ -92,6 +100,7 @@ export const ConditionEntry = memo<ConditionEntryProps>(
       },
       [entry, onChange]
     );
+
     const handleFieldUpdate = useCallback(
       (newField) => {
         onChange(
@@ -104,10 +113,17 @@ export const ConditionEntry = memo<ConditionEntryProps>(
       },
       [entry, onChange]
     );
+
     const handleRemoveClick = useCallback(() => {
       onRemove(entry);
     }, [entry, onRemove]);
 
+    const handleValueOnBlur = useCallback(() => {
+      if (onVisited) {
+        onVisited(entry);
+      }
+    }, [entry, onVisited]);
+
     return (
       <EuiFlexGroup
         gutterSize="s"
@@ -160,7 +176,9 @@ export const ConditionEntry = memo<ConditionEntryProps>(
             <EuiFieldText
               name="value"
               value={entry.value}
+              required
               onChange={handleValueUpdate}
+              onBlur={handleValueOnBlur}
               data-test-subj={getTestId('value')}
             />
           </ConditionEntryCell>
@@ -177,6 +195,7 @@ export const ConditionEntry = memo<ConditionEntryProps>(
                 'xpack.securitySolution.trustedapps.logicalConditionBuilder.entry.removeLabel',
                 { defaultMessage: 'Remove Entry' }
               )}
+              data-test-subj={getTestId('remove')}
             />
           </ConditionEntryCell>
         </EuiFlexItem>
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_group.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_group.tsx
index 323eddbaf8648..9359011486c45 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_group.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/components/condition_group.tsx
@@ -20,10 +20,12 @@ export interface ConditionGroupProps {
   entries: TrustedApp['entries'];
   onEntryRemove: ConditionEntryProps['onRemove'];
   onEntryChange: ConditionEntryProps['onChange'];
+  /** called when any of the entries is visited (triggered via `onBlur` DOM event) */
+  onVisited?: ConditionEntryProps['onVisited'];
   'data-test-subj'?: string;
 }
 export const ConditionGroup = memo<ConditionGroupProps>(
-  ({ os, entries, onEntryRemove, onEntryChange, 'data-test-subj': dataTestSubj }) => {
+  ({ os, entries, onEntryRemove, onEntryChange, onVisited, 'data-test-subj': dataTestSubj }) => {
     const getTestId = useCallback(
       (suffix: string): string | undefined => {
         if (dataTestSubj) {
@@ -35,11 +37,11 @@ export const ConditionGroup = memo<ConditionGroupProps>(
     return (
       <EuiFlexGroup gutterSize="xs" data-test-subj={dataTestSubj}>
         {entries.length > 1 && (
-          <AndBadgeFlexItem grow={false}>
+          <AndBadgeFlexItem grow={false} data-test-subj={getTestId('andConnector')}>
             <AndOrBadge type={'and'} includeAntennas={true} />
           </AndBadgeFlexItem>
         )}
-        <EuiFlexItem grow={1}>
+        <EuiFlexItem grow={1} data-test-subj={getTestId('entries')}>
           {(entries as (NewTrustedApp & { os: 'windows' })['entries']).map((entry, index) => (
             <ConditionEntry
               key={index}
@@ -49,6 +51,7 @@ export const ConditionGroup = memo<ConditionGroupProps>(
               isRemoveDisabled={index === 0 && entries.length <= 1}
               onRemove={onEntryRemove}
               onChange={onEntryChange}
+              onVisited={onVisited}
               data-test-subj={getTestId(`entry${index}`)}
             />
           ))}
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/logical_condition_builder.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/logical_condition_builder.tsx
index ef799343d96d6..84bfe1c1d2dc9 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/logical_condition_builder.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/logical_condition/logical_condition_builder.tsx
@@ -25,6 +25,7 @@ export const LogicalConditionBuilder = memo<LogicalConditionBuilderProps>(
     onAndClicked,
     onEntryRemove,
     onEntryChange,
+    onVisited,
     'data-test-subj': dataTestSubj,
   }) => {
     const getTestId = useCallback(
@@ -46,6 +47,7 @@ export const LogicalConditionBuilder = memo<LogicalConditionBuilderProps>(
               entries={entries}
               onEntryRemove={onEntryRemove}
               onEntryChange={onEntryChange}
+              onVisited={onVisited}
               data-test-subj={getTestId('group1')}
             />
           )}
@@ -72,7 +74,6 @@ export const LogicalConditionBuilder = memo<LogicalConditionBuilderProps>(
 
 LogicalConditionBuilder.displayName = 'LogicalConditionBuilder';
 
-// FIXME:PT need to style this better.
 const NoEntries = memo(() => {
   return (
     <EuiPanel paddingSize="l">
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx
index c91512d477510..5e5b83ccd8c03 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_list.tsx
@@ -150,6 +150,7 @@ export const TrustedAppsList = memo(() => {
         },
         [history]
       )}
+      data-test-subj="trustedAppsList"
     />
   );
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
index 117d8f25b7039..53fb455e2a070 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx
@@ -16,7 +16,7 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => 'mockId',
 }));
 
-describe('TrustedAppsPage', () => {
+describe('When on the Trusted Apps Page', () => {
   let history: AppContextTestRender['history'];
   let coreStart: AppContextTestRender['coreStart'];
   let waitForAction: MiddlewareActionSpyHelper['waitForAction'];
@@ -44,8 +44,12 @@ describe('TrustedAppsPage', () => {
     window.scrollTo = jest.fn();
   });
 
-  test.skip('rendering', () => {
-    expect(render()).toMatchSnapshot();
+  it('should render expected set of list columns', () => {
+    const { getByTestId } = render();
+    const tableColumns = Array.from(
+      getByTestId('trustedAppsList').querySelectorAll('table th')
+    ).map((th) => (th.textContent || '').trim());
+    expect(tableColumns).toEqual(['Name', 'OS', 'Date Created', 'Created By', 'Actions']);
   });
 
   it('should display a Add Trusted App button', async () => {
@@ -88,9 +92,9 @@ describe('TrustedAppsPage', () => {
       expect(history.location.search).toBe('?page_index=2&page_size=20&show=create');
     });
 
-    it.skip('should display create form', async () => {
-      const { getByTestId } = await renderAndClickAddButton();
-      expect(getByTestId('addTrustedAppFlyout-createForm')).toMatchSnapshot();
+    it('should display create form', async () => {
+      const { queryByTestId } = await renderAndClickAddButton();
+      expect(queryByTestId('addTrustedAppFlyout-createForm')).not.toBeNull();
     });
 
     it('should initially have the flyout Add button disabled', async () => {