[App Search] Added a query tester button (#100560)

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/kibana_header_actions.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { setMockValues } from '../../../__mocks__';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiButtonEmpty } from '@elastic/eui';
+
+import { KibanaHeaderActions } from './kibana_header_actions';
+
+describe('KibanaHeaderActions', () => {
+  const values = {
+    engineName: 'foo',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(values);
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<KibanaHeaderActions />);
+    expect(wrapper.find(EuiButtonEmpty).exists()).toBe(true);
+  });
+
+  it('does not render a "Query Tester" button if there is no engine available', () => {
+    setMockValues({
+      engineName: '',
+    });
+    const wrapper = shallow(<KibanaHeaderActions />);
+    expect(wrapper.find(EuiButtonEmpty).exists()).toBe(false);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/layout/kibana_header_actions.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { useValues } from 'kea';
+
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { EngineLogic } from '../engine';
+
+export const KibanaHeaderActions: React.FC = () => {
+  const { engineName } = useValues(EngineLogic);
+
+  return (
+    <EuiFlexGroup gutterSize="s">
+      {engineName && (
+        <EuiFlexItem>
+          <EuiButtonEmpty iconType="beaker" size="s">
+            {i18n.translate('xpack.enterpriseSearch.appSearch.engine.queryTesterButtonLabel', {
+              defaultMessage: 'Query tester',
+            })}
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx

@@ -7,6 +7,7 @@
 
 import { DEFAULT_INITIAL_APP_DATA } from '../../../common/__mocks__';
 import { setMockValues, rerender } from '../__mocks__';
+import '../__mocks__/shallow_useeffect.mock';
 import '../__mocks__/enterprise_search_url.mock';
 import '../__mocks__/react_router_history.mock';
 
@@ -70,9 +71,10 @@ describe('AppSearchUnconfigured', () => {
 
 describe('AppSearchConfigured', () => {
   let wrapper: ShallowWrapper;
+  const renderHeaderActions = jest.fn();
 
   beforeAll(() => {
-    setMockValues({ myRole: {} });
+    setMockValues({ myRole: {}, renderHeaderActions });
     wrapper = shallow(<AppSearchConfigured {...DEFAULT_INITIAL_APP_DATA} />);
   });
 
@@ -83,6 +85,10 @@ describe('AppSearchConfigured', () => {
     expect(wrapper.find(EngineRouter)).toHaveLength(1);
   });
 
+  it('renders header actions', () => {
+    expect(renderHeaderActions).toHaveBeenCalled();
+  });
+
   it('mounts AppLogic with passed initial data props', () => {
     expect(AppLogic).toHaveBeenCalledWith(DEFAULT_INITIAL_APP_DATA);
   });

x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Route, Redirect, Switch, useRouteMatch } from 'react-router-dom';
 
 import { useValues } from 'kea';
@@ -25,6 +25,7 @@ import { EngineNav, EngineRouter } from './components/engine';
 import { EngineCreation } from './components/engine_creation';
 import { EnginesOverview, ENGINES_TITLE } from './components/engines';
 import { ErrorConnecting } from './components/error_connecting';
+import { KibanaHeaderActions } from './components/layout/kibana_header_actions';
 import { Library } from './components/library';
 import { MetaEngineCreation } from './components/meta_engine_creation';
 import { RoleMappingsRouter } from './components/role_mappings';
@@ -77,8 +78,13 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
   const {
     myRole: { canManageEngines, canManageMetaEngines, canViewRoleMappings },
   } = useValues(AppLogic(props));
+  const { renderHeaderActions } = useValues(KibanaLogic);
   const { readOnlyMode } = useValues(HttpLogic);
 
+  useEffect(() => {
+    renderHeaderActions(KibanaHeaderActions);
+  }, []);
+
   return (
     <Switch>
       {process.env.NODE_ENV === 'development' && (

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiButtonEmpty, EuiText, EuiFlexGroup, EuiFlexItem, EuiHeaderLinks } from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiHeaderLinks } from '@elastic/eui';
 
 import { externalUrl, getWorkplaceSearchUrl } from '../../../shared/enterprise_search_url';
 import { EuiButtonEmptyTo } from '../../../shared/react_router_helpers';
@@ -25,8 +25,9 @@ export const WorkplaceSearchHeaderActions: React.FC = () => {
             data-test-subj="PersonalDashboardButton"
             iconType="user"
             to={PERSONAL_SOURCES_PATH}
+            size="s"
           >
-            <EuiText size="s">{NAV.PERSONAL_DASHBOARD}</EuiText>
+            {NAV.PERSONAL_DASHBOARD}
           </EuiButtonEmptyTo>
         </EuiFlexItem>
         <EuiFlexItem>
@@ -35,8 +36,9 @@ export const WorkplaceSearchHeaderActions: React.FC = () => {
             href={getWorkplaceSearchUrl('/search')}
             target="_blank"
             iconType="search"
+            size="s"
           >
-            <EuiText size="s">{NAV.SEARCH}</EuiText>
+            {NAV.SEARCH}
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>