[App Search] Added Sample Response section to Result Settings

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

@@ -17,6 +17,8 @@ import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chro
 import { RESULT_SETTINGS_TITLE } from './constants';
 import { ResultSettingsTable } from './result_settings_table';
 
+import { SampleResponse } from './sample_response';
+
 import { ResultSettingsLogic } from '.';
 
 interface Props {
@@ -40,7 +42,7 @@ export const ResultSettings: React.FC<Props> = ({ engineBreadcrumb }) => {
           <ResultSettingsTable />
         </EuiFlexItem>
         <EuiFlexItem grow={3}>
-          <div>TODO</div>
+          <SampleResponse />
         </EuiFlexItem>
       </EuiFlexGroup>
     </>

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/non_text_fields_body.tsx

@@ -10,6 +10,7 @@ import React, { useMemo } from 'react';
 import { useValues, useActions } from 'kea';
 
 import { EuiTableRow, EuiTableRowCell, EuiCheckbox, EuiTableRowCellCheckbox } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 import { ResultSettingsLogic } from '..';
 import { FieldResultSetting } from '../types';
@@ -33,6 +34,10 @@ export const NonTextFieldsBody: React.FC = () => {
           </EuiTableRowCell>
           <EuiTableRowCellCheckbox>
             <EuiCheckbox
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.rawAriaLabel',
+                { defaultMessage: 'Toggle raw field' }
+              )}
               data-test-subj="ResultSettingRawCheckBox"
               id={`${fieldName}-raw}`}
               checked={!!fieldSettings.raw}

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/result_settings_table/text_fields_body.tsx

@@ -10,6 +10,7 @@ import React, { useMemo } from 'react';
 import { useValues, useActions } from 'kea';
 
 import { EuiTableRow, EuiTableRowCell, EuiTableRowCellCheckbox, EuiCheckbox } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 import { ResultSettingsLogic } from '../result_settings_logic';
 import { FieldResultSetting } from '../types';
@@ -43,6 +44,10 @@ export const TextFieldsBody: React.FC = () => {
           </EuiTableRowCell>
           <EuiTableRowCellCheckbox>
             <EuiCheckbox
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.rawAriaLabel',
+                { defaultMessage: 'Toggle raw field' }
+              )}
               data-test-subj="ResultSettingRawCheckBox"
               id={`${fieldName}-raw}`}
               checked={!!fieldSettings.raw}
@@ -63,6 +68,10 @@ export const TextFieldsBody: React.FC = () => {
           </EuiTableRowCell>
           <EuiTableRowCellCheckbox>
             <EuiCheckbox
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.snippetAriaLabel',
+                { defaultMessage: 'Toggle text snippet' }
+              )}
               data-test-subj="ResultSettingSnippetTextBox"
               id={`${fieldName}-snippet}`}
               checked={!!fieldSettings.snippet}
@@ -73,6 +82,10 @@ export const TextFieldsBody: React.FC = () => {
           </EuiTableRowCellCheckbox>
           <EuiTableRowCellCheckbox>
             <EuiCheckbox
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.resultSettings.table.snippetFallbackAriaLabel',
+                { defaultMessage: 'Toggle snippet fallback' }
+              )}
               data-test-subj="ResultSettingFallbackTextBox"
               id={`${fieldName}-snippetFallback}`}
               checked={fieldSettings.snippetFallback}

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { SampleResponse } from './sample_response';

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.test.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 '../../../../__mocks__/shallow_useeffect.mock';
+import { setMockActions, setMockValues } from '../../../../__mocks__';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiCodeBlock, EuiFieldSearch } from '@elastic/eui';
+
+import { SampleResponse } from './sample_response';
+
+describe('SampleResponse', () => {
+  const actions = {
+    queryChanged: jest.fn(),
+    getSearchResults: jest.fn(),
+  };
+
+  const values = {
+    reducedServerResultFields: {},
+    query: 'foo',
+    response: {
+      bar: 'baz',
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockActions(actions);
+    setMockValues(values);
+  });
+
+  it('renders a text box with the current user "query" value from state', () => {
+    const wrapper = shallow(<SampleResponse />);
+    expect(wrapper.find(EuiFieldSearch).prop('value')).toEqual('foo');
+  });
+
+  it('updates the "query" value in state when a user updates the text in the text box', () => {
+    const wrapper = shallow(<SampleResponse />);
+    wrapper.find(EuiFieldSearch).simulate('change', { target: { value: 'bar' } });
+    expect(actions.queryChanged).toHaveBeenCalledWith('bar');
+  });
+
+  it('will call getSearchResults with the current value of query and reducedServerResultFields in a useEffect, which updates the displayed response', () => {
+    const wrapper = shallow(<SampleResponse />);
+    expect(wrapper.find(EuiFieldSearch).prop('value')).toEqual('foo');
+  });
+
+  it('renders the response from the given user "query" in a code block', () => {
+    const wrapper = shallow(<SampleResponse />);
+    expect(wrapper.find(EuiCodeBlock).prop('children')).toEqual('{\n  "bar": "baz"\n}');
+  });
+
+  it('renders a plain old string in the code block if the response is a string', () => {
+    setMockValues({
+      response: 'No results.',
+    });
+    const wrapper = shallow(<SampleResponse />);
+    expect(wrapper.find(EuiCodeBlock).prop('children')).toEqual('No results.');
+  });
+
+  it('will not render a code block at all if there is no response yet', () => {
+    setMockValues({
+      response: null,
+    });
+    const wrapper = shallow(<SampleResponse />);
+    expect(wrapper.find(EuiCodeBlock).exists()).toEqual(false);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/result_settings/sample_response/sample_response.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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, { useEffect } from 'react';
+
+import { useActions, useValues } from 'kea';
+
+import {
+  EuiCodeBlock,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { ResultSettingsLogic } from '../result_settings_logic';
+
+import { SampleResponseLogic } from './sample_response_logic';
+
+export const SampleResponse: React.FC = () => {
+  const { reducedServerResultFields } = useValues(ResultSettingsLogic);
+
+  const { query, response } = useValues(SampleResponseLogic);
+  const { queryChanged, getSearchResults } = useActions(SampleResponseLogic);
+
+  useEffect(() => {
+    getSearchResults(query, reducedServerResultFields);
+  }, [query, reducedServerResultFields]);
+
+  return (
+    <EuiPanel hasBorder>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h2>
+              {i18n.translate(
+                'xpack.enterpriseSearch.appSearch.engine.resultSettings.sampleResponseTitle',
+                { defaultMessage: 'Sample response' }
+              )}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {/* TODO <QueryPerformance queryPerformanceRating={queryPerformanceRating} /> */}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiFieldSearch
+        value={query}
+        onChange={(e) => queryChanged(e.target.value)}
+        placeholder={i18n.translate(
+          'xpack.enterpriseSearch.appSearch.engine.resultSettings.sampleResponse.inputPlaceholder',
+          { defaultMessage: 'Type a search query to test a response...' }
+        )}
+        data-test-subj="ResultSettingsQuerySampleResponse"
+      />
+      <EuiSpacer />
+      {!!response && (
+        <EuiCodeBlock language="json" whiteSpace="pre-wrap">
+          {typeof response === 'string' ? response : JSON.stringify(response, null, 2)}
+        </EuiCodeBlock>
+      )}
+    </EuiPanel>
+  );
+};