[Security Solution][Endpoint] Do not display searchbar in security-tr…

…usted apps if there are no items (#100853) Co-authored-by: Kibana Machine <[email protected]>
elastic · May 28, 2021 · 4b486d3 · 4b486d3
1 parent 90e4343
commit 4b486d3
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 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
@@ -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/...ns/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.test.tsx b/...ns/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/...plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx b/...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} />
       )}