Update EngineOverviewHeader to disable button on prop

Author: cee-chen

Diff for: x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx

@@ -25,7 +25,7 @@ export const ErrorState: ReactFC<> = () => {
       <SendTelemetry action="error" metric="cannot_connect" />
 
       <EuiPageBody>
-        <EngineOverviewHeader />
+        <EngineOverviewHeader isButtonDisabled />
         <EuiPageContent>
           <EuiEmptyPrompt
             iconType="alert"

Diff for: x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.test.tsx

@@ -6,7 +6,7 @@
 
 import '../../../__mocks__/shallow_usecontext.mock';
 
-import React, { useContext } from 'react';
+import React from 'react';
 import { shallow } from 'enzyme';
 
 jest.mock('../../../shared/telemetry', () => ({ sendTelemetry: jest.fn() }));
@@ -15,48 +15,27 @@ import { sendTelemetry } from '../../../shared/telemetry';
 import { EngineOverviewHeader } from '../engine_overview_header';
 
 describe('EngineOverviewHeader', () => {
-  describe('when enterpriseSearchUrl is set', () => {
-    let button;
-
-    beforeAll(() => {
-      useContext.mockImplementationOnce(() => ({ enterpriseSearchUrl: 'http://localhost:3002' }));
-      const wrapper = shallow(<EngineOverviewHeader />);
-      button = wrapper.find('[data-test-subj="launchButton"]');
-    });
-
-    describe('the Launch App Search button', () => {
-      it('should not be disabled', () => {
-        expect(button.props().isDisabled).toBeFalsy();
-      });
-
-      it('should use the enterpriseSearchUrl as the base path for its href', () => {
-        expect(button.props().href).toBe('http://localhost:3002/as');
-      });
-
-      it('should send telemetry when clicked', () => {
-        button.simulate('click');
-        expect(sendTelemetry).toHaveBeenCalled();
-      });
-    });
+  it('renders', () => {
+    const wrapper = shallow(<EngineOverviewHeader />);
+    expect(wrapper.find('h1')).toHaveLength(1);
   });
 
-  describe('when enterpriseSearchUrl is not set', () => {
-    let button;
+  it('renders a launch app search button that sends telemetry on click', () => {
+    const wrapper = shallow(<EngineOverviewHeader />);
+    const button = wrapper.find('[data-test-subj="launchButton"]');
 
-    beforeAll(() => {
-      useContext.mockImplementationOnce(() => ({ enterpriseSearchUrl: undefined }));
-      const wrapper = shallow(<EngineOverviewHeader />);
-      button = wrapper.find('[data-test-subj="launchButton"]');
-    });
+    expect(button.props().href).toBe('http://localhost:3002/as');
+    expect(button.props().isDisabled).toBeFalsy();
 
-    describe('the Launch App Search button', () => {
-      it('should be disabled', () => {
-        expect(button.props().isDisabled).toBe(true);
-      });
+    button.simulate('click');
+    expect(sendTelemetry).toHaveBeenCalled();
+  });
+
+  it('renders a disabled button when isButtonDisabled is true', () => {
+    const wrapper = shallow(<EngineOverviewHeader isButtonDisabled />);
+    const button = wrapper.find('[data-test-subj="launchButton"]');
 
-      it('should not have an href', () => {
-        expect(button.props().href).toBeUndefined();
-      });
-    });
+    expect(button.props().isDisabled).toBe(true);
+    expect(button.props().href).toBeUndefined();
   });
 });

Diff for: x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.tsx

@@ -11,15 +11,23 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { sendTelemetry } from '../../../shared/telemetry';
 import { KibanaContext, IKibanaContext } from '../../../index';
 
-export const EngineOverviewHeader: React.FC<> = () => {
+interface IEngineOverviewHeaderProps {
+  isButtonDisabled?: boolean;
+}
+
+export const EngineOverviewHeader: React.FC<IEngineOverviewHeaderProps> = ({
+  isButtonDisabled,
+}) => {
   const { enterpriseSearchUrl, http } = useContext(KibanaContext) as IKibanaContext;
 
   const buttonProps = {
     fill: true,
     iconType: 'popout',
-    ['data-test-subj']: 'launchButton',
+    'data-test-subj': 'launchButton',
   };
-  if (enterpriseSearchUrl) {
+  if (isButtonDisabled) {
+    buttonProps.isDisabled = true;
+  } else {
     buttonProps.href = `${enterpriseSearchUrl}/as`;
     buttonProps.target = '_blank';
     buttonProps.onClick = () =>
@@ -29,8 +37,6 @@ export const EngineOverviewHeader: React.FC<> = () => {
         action: 'clicked',
         metric: 'header_launch_button',
       });
-  } else {
-    buttonProps.isDisabled = true;
   }
 
   return (