[App Search] Migrate Crawler Status Indicator, Crawler Status Banner, and Crawl Request polling

[byronhulcher]

Summary

Migrates the CrawlerStatusIndicator and CrawlerStatusBanner components from our standalone UX. To support this, I've also migrates our Crawl Request polling.

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[byronhulcher]

Jest is telling me this line is not covered........ I can't figure out why since lines 206-208 are covered!!!

[byronhulcher]

I can't figure out how to write a test that will hit this codepath. See my comment at https://github.com/elastic/kibana/pull/107603/files#diff-d1ef29a662c4e757d0513752525db5973ddeb30c2bd74b8b51e1af3125eac914R35

[orhantoy]

💪 Nice work!

[orhantoy]

I'm seeing this

setMockValues({
  ...MOCK_VALUES,
  key: value
});

repeated a lot. Would it make sense to define a helper function like

function setMockValuesWithDefaults(values) { /* not loving the function name but you get the idea :) */
  setMockValues({
    ...MOCK_VALUES,
    ...values
  });
}

?

[byronhulcher]

Eh, wrapping a single function call in another single function call doesn't feel any DRYer to me.

[orhantoy]

Not repeating ...MOCK_VALUES every time is kind of DRY'er but I'm happy either way 😄

[orhantoy]

This seems to work:

it('can be opened to stop crawls', () => {
  const wrapper = mount(<StopCrawlPopoverContextMenu stopCrawl={stopCrawl} />);

  wrapper.find(EuiButton).simulate('click');

  expect(wrapper.find(EuiPopover).prop('isOpen')).toEqual(true);

  const menuItem = wrapper
    .find(EuiContextMenuPanel)
    .find(EuiResizeObserver)
    .find(EuiContextMenuItem);

  expect(menuItem).toHaveLength(1);

  menuItem.simulate('click');

  expect(stopCrawl).toHaveBeenCalled();
});

But not sure if we are OK with not using shallow in that test.

Diff

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawler_status_indicator/stop_crawl_popover_context_menu.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawler_status_indicator/stop_crawl_popover_context_menu.test.tsx
index 654aa9226cd..a2a30f03047 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawler_status_indicator/stop_crawl_popover_context_menu.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawler_status_indicator/stop_crawl_popover_context_menu.test.tsx
@@ -6,11 +6,15 @@
  */
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
-import { EuiButton, EuiPopover } from '@elastic/eui';
-
-import { rerender } from '../../../../../test_helpers';
+import {
+  EuiButton,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+  EuiResizeObserver,
+} from '@elastic/eui';
 
 import { StopCrawlPopoverContextMenu } from './stop_crawl_popover_context_menu';
 
@@ -25,30 +29,21 @@ describe('StopCrawlsPopoverContextMenu', () => {
   });
 
   it('can be opened to stop crawls', () => {
-    const wrapper = shallow(<StopCrawlPopoverContextMenu stopCrawl={stopCrawl} />);
-
-    wrapper.dive().find(EuiButton).simulate('click');
-    rerender(wrapper);
-
-    expect(wrapper.prop('isOpen')).toEqual(true);
-
-    // TODO I can't figure out how to find the EuiContextMenuItem inside this component's
-    // EuiContextMenuPanel.  It renders inside of an EuiResizeObserver and I figure out how
-    // to get in it
+    const wrapper = mount(<StopCrawlPopoverContextMenu stopCrawl={stopCrawl} />);
 
-    // const menuItem = wrapper
-    //   .find(EuiContextMenuPanel)
-    //   .find(EuiResizeObserver)
-    //   .find(EuiContextMenuItem);
+    wrapper.find(EuiButton).simulate('click');
 
-    // expect(menuItem).toHaveLength(1);
+    expect(wrapper.find(EuiPopover).prop('isOpen')).toEqual(true);
 
-    // menuItem.simulate('click');
+    const menuItem = wrapper
+      .find(EuiContextMenuPanel)
+      .find(EuiResizeObserver)
+      .find(EuiContextMenuItem);
 
-    // expect(stopCrawl).toHaveBeenCalled();
+    expect(menuItem).toHaveLength(1);
 
-    // rerender(wrapper);
+    menuItem.simulate('click');
 
-    // expect(wrapper.dive().find(EuiContextMenuPanel)).toHaveLength(0);
+    expect(stopCrawl).toHaveBeenCalled();
   });
 });

[byronhulcher]

ahhh let me try with mountWithIntl which is a customized mount which handles our i18n

[byronhulcher]

💯 thanks @orhantoy

[orhantoy]

🎸

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: f96d1bd
• Storybooks Preview
• Documentation Changes

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
enterpriseSearch	1462	1465	+3

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
enterpriseSearch	2.1MB	2.1MB	+7.4KB

History

• 💚 Build #143302 succeeded 8793aa4
• 💚 Build #143264 succeeded 5446dbe
• 💛 Build #142991 was flaky b4668d5
• 💚 Build #142826 succeeded aaadbc7ecf0ba434843bf59b59051f3cb256d3aa

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.