Fix search field visibility on space selector screen (#54115)

elastic · Jan 7, 2020 · 4f9bf11 · 4f9bf11
1 parent dc8ff0d
commit 4f9bf11
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/x-pack/legacy/plugins/spaces/public/views/space_selector/space_selector.test.tsx b/x-pack/legacy/plugins/spaces/public/views/space_selector/space_selector.test.tsx
@@ -5,10 +5,16 @@
  */
 
 import React from 'react';
-import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import {
+  renderWithIntl,
+  shallowWithIntl,
+  mountWithIntl,
+  nextTick,
+} from 'test_utils/enzyme_helpers';
 import { Space } from '../../../common/model/space';
 import { spacesManagerMock } from '../../lib/mocks';
 import { SpaceSelector } from './space_selector';
+import { findTestSubject } from 'test_utils/find_test_subject';
 
 function getSpacesManager(spaces: Space[] = []) {
   const manager = spacesManagerMock.create();
@@ -74,3 +80,41 @@ test('it queries for spaces when not provided on props', () => {
     expect(spacesManager.getSpaces).toHaveBeenCalledTimes(1);
   });
 });
+
+test('it renders the search bar when there are 8 or more spaces', async () => {
+  const spaces = [1, 2, 3, 4, 5, 6, 7, 8].map(num => ({
+    id: `space-${num}`,
+    name: `Space ${num}`,
+    disabledFeatures: [],
+  }));
+
+  const spacesManager = getSpacesManager(spaces);
+
+  const wrapper = mountWithIntl(
+    <SpaceSelector.WrappedComponent spacesManager={spacesManager as any} intl={null as any} />
+  );
+
+  await nextTick();
+  wrapper.update();
+
+  expect(findTestSubject(wrapper, 'spaceSelectorSearchField')).toHaveLength(1);
+});
+
+test('it does not render the search bar when there are fewer than 8 spaces', async () => {
+  const spaces = [1, 2, 3, 4, 5, 6, 7].map(num => ({
+    id: `space-${num}`,
+    name: `Space ${num}`,
+    disabledFeatures: [],
+  }));
+
+  const spacesManager = getSpacesManager(spaces);
+
+  const wrapper = mountWithIntl(
+    <SpaceSelector.WrappedComponent spacesManager={spacesManager as any} intl={null as any} />
+  );
+
+  await nextTick();
+  wrapper.update();
+
+  expect(findTestSubject(wrapper, 'spaceSelectorSearchField')).toHaveLength(0);
+});
diff --git a/x-pack/legacy/plugins/spaces/public/views/space_selector/space_selector.tsx b/x-pack/legacy/plugins/spaces/public/views/space_selector/space_selector.tsx
@@ -155,14 +155,15 @@ class SpaceSelectorUI extends Component<Props, State> {
 
   public getSearchField = () => {
     const { intl } = this.props;
-    if (!this.props.spaces || this.props.spaces.length < SPACE_SEARCH_COUNT_THRESHOLD) {
+    if (!this.state.spaces || this.state.spaces.length < SPACE_SEARCH_COUNT_THRESHOLD) {
       return null;
     }
     return (
       <EuiFlexItem className="spcSpaceSelector__searchHolder">
         {
           // @ts-ignore onSearch doesn't exist on EuiFieldSearch
           <EuiFieldSearch
+            data-test-subj="spaceSelectorSearchField"
             className="spcSpaceSelector__searchField"
             placeholder={intl.formatMessage({
               id: 'xpack.spaces.spaceSelector.findSpacePlaceholder',