From 01fc46fa9ce753fa1cde5a9307c9ddcef2f3a6b8 Mon Sep 17 00:00:00 2001
From: Esteban Beltran <academo@users.noreply.github.com>
Date: Fri, 28 May 2021 15:19:15 +0200
Subject: [PATCH] [Security Solution][Endpoint] Do not display searchbar in
 security-trusted apps if there are no items (#100853)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../components/search_bar/index.tsx           |  2 +-
 .../view/trusted_apps_page.test.tsx           | 17 +++++-
 .../trusted_apps/view/trusted_apps_page.tsx   | 54 ++++++++++---------
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/management/components/search_bar/index.tsx b/x-pack/plugins/security_solution/public/management/components/search_bar/index.tsx
index 3c92ab31680c2..5ace2b901da11 100644
--- a/x-pack/plugins/security_solution/public/management/components/search_bar/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/search_bar/index.tsx
@@ -25,7 +25,7 @@ export const SearchBar = memo<SearchBarProps>(({ defaultValue = '', onSearch, pl
   const handleOnSearch = useCallback(() => onSearch(query), [query, onSearch]);
 
   return (
-    <EuiFlexGroup direction="row" alignItems="center" gutterSize="l">
+    <EuiFlexGroup data-test-subj="searchBar" direction="row" alignItems="center" gutterSize="l">
       <EuiFlexItem>
         <EuiFieldSearch
           defaultValue={defaultValue}
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 874d1a4a969c4..3f02d505daea1 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
@@ -169,10 +169,15 @@ describe('When on the Trusted Apps Page', () => {
 
     it('should display a Add Trusted App button', async () => {
       const { getByTestId } = await renderWithListData();
-      const addButton = await getByTestId('trustedAppsListAddButton');
+      const addButton = getByTestId('trustedAppsListAddButton');
       expect(addButton.textContent).toBe('Add Trusted Application');
     });
 
+    it('should display the searchbar', async () => {
+      const renderResult = await renderWithListData();
+      expect(await renderResult.findByTestId('searchBar')).not.toBeNull();
+    });
+
     describe('and the Grid view is being displayed', () => {
       describe('and the edit trusted app button is clicked', () => {
         let renderResult: ReturnType<AppContextTestRender['render']>;
@@ -555,7 +560,7 @@ describe('When on the Trusted Apps Page', () => {
           // to test the UI behaviours while the API call is in flight
           coreStart.http.post.mockImplementation(
             // @ts-ignore
-            async (path: string, options: HttpFetchOptions) => {
+            async (_, options: HttpFetchOptions) => {
               return new Promise((resolve, reject) => {
                 httpPostBody = options.body as string;
                 resolveHttpPost = resolve;
@@ -861,6 +866,14 @@ describe('When on the Trusted Apps Page', () => {
 
       expect(await renderResult.findByTestId('trustedAppEmptyState')).not.toBeNull();
     });
+
+    it('should not display the searchbar', async () => {
+      const renderResult = render();
+      await act(async () => {
+        await waitForAction('trustedAppsExistStateChanged');
+      });
+      expect(renderResult.queryByTestId('searchBar')).toBeNull();
+    });
   });
 
   describe('and the search is dispatched', () => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
index ac06254a53100..5603b8e2d61c9 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
@@ -96,34 +96,36 @@ export const TrustedAppsPage = memo(() => {
         />
       )}
 
-      <SearchBar
-        defaultValue={location.filter}
-        onSearch={handleOnSearch}
-        placeholder={SEARCH_TRUSTED_APP_PLACEHOLDER}
-      />
       {doEntriesExist ? (
-        <EuiFlexGroup
-          direction="column"
-          gutterSize="none"
-          data-test-subj="trustedAppsListPageContent"
-        >
-          <EuiSpacer size="m" />
-          <EuiFlexItem grow={false}>
-            <ControlPanel
-              totalItemCount={totalItemsCount}
-              currentViewType={location.view_type}
-              onViewTypeChange={handleViewTypeChange}
-            />
-
+        <>
+          <SearchBar
+            defaultValue={location.filter}
+            onSearch={handleOnSearch}
+            placeholder={SEARCH_TRUSTED_APP_PLACEHOLDER}
+          />
+          <EuiFlexGroup
+            direction="column"
+            gutterSize="none"
+            data-test-subj="trustedAppsListPageContent"
+          >
             <EuiSpacer size="m" />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiHorizontalRule margin="none" />
-
-            {location.view_type === 'grid' && <TrustedAppsGrid />}
-            {location.view_type === 'list' && <TrustedAppsList />}
-          </EuiFlexItem>
-        </EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <ControlPanel
+                totalItemCount={totalItemsCount}
+                currentViewType={location.view_type}
+                onViewTypeChange={handleViewTypeChange}
+              />
+
+              <EuiSpacer size="m" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiHorizontalRule margin="none" />
+
+              {location.view_type === 'grid' && <TrustedAppsGrid />}
+              {location.view_type === 'list' && <TrustedAppsList />}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
       ) : (
         <EmptyState onAdd={handleAddButtonClick} isAddDisabled={showCreateFlyout} />
       )}