[8.9] [Enterprise Search] Search application move View API Call butto…

…n to SearchBox split button (#160300) (#160452) # Backport This will backport the following commits from `main` to `8.9`: - [[Enterprise Search] Search application move View API Call button to SearchBox split button (#160300)](#160300)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Jun 23, 2023 · 0682c6b · 0682c6b
1 parent 4a6621b
commit 0682c6b
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 165 deletions.
diff --git a/...lic/applications/applications/components/search_application/search_application_schema.tsx b/...lic/applications/applications/components/search_application/search_application_schema.tsx
@@ -353,22 +353,22 @@ export const SearchApplicationSchema: React.FC = () => {
         {hasSchemaConflicts && (
           <EuiCallOut
             title={i18n.translate(
-              'xpack.enterpriseSearch.content.applications.schema.conflictsCallOut.title',
+              'xpack.enterpriseSearch.searchApplications.searchApplication.schema.conflictsCallOut.title',
               { defaultMessage: 'Potential field mapping issues found' }
             )}
             iconType="error"
             color="danger"
           >
             <p>
               <FormattedMessage
-                id="xpack.enterpriseSearch.content.applications.schema.conflictsCallOut.description"
+                id="xpack.enterpriseSearch.searchApplications.searchApplication.schema.conflictsCallOut.description"
                 defaultMessage="Schema field type conflicts can be resolved by navigating to the source index directly and updating the field type of the conflicting field(s) to match that of the other source indices."
               />
             </p>
             {!onlyShowConflicts && (
               <EuiButton color="danger" fill onClick={toggleOnlyShowConflicts}>
                 <FormattedMessage
-                  id="xpack.enterpriseSearch.content.applications.schema.conflictsCallOut.button"
+                  id="xpack.enterpriseSearch.searchApplications.searchApplication.schema.conflictsCallOut.button"
                   defaultMessage="View conflicts"
                 />
               </EuiButton>

diff --git a/...pplications/applications/components/search_application/search_preview/api_call_flyout.tsx b/...pplications/applications/components/search_application/search_preview/api_call_flyout.tsx
@@ -51,7 +51,7 @@ export const APICallFlyout: React.FC<APICallFlyoutProps> = ({
         <EuiTitle>
           <h2>
             <FormattedMessage
-              id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.apiCallFlyout.title"
+              id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.apiCallFlyout.title"
               defaultMessage="API Call"
             />
           </h2>
@@ -65,13 +65,13 @@ export const APICallFlyout: React.FC<APICallFlyoutProps> = ({
           <EuiTabs bottomBorder={false}>
             <EuiTab isSelected={tab === 'request'} onClick={() => setTab('request')}>
               <FormattedMessage
-                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.apiCallFlyout.requestTab"
+                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.apiCallFlyout.requestTab"
                 defaultMessage="Request"
               />
             </EuiTab>
             <EuiTab isSelected={tab === 'response'} onClick={() => setTab('response')}>
               <FormattedMessage
-                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.apiCallFlyout.responseTab"
+                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.apiCallFlyout.responseTab"
                 defaultMessage="Response"
               />
             </EuiTab>
@@ -85,7 +85,7 @@ export const APICallFlyout: React.FC<APICallFlyoutProps> = ({
             target="_blank"
           >
             <FormattedMessage
-              id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.apiCallFlyout.searchEndpointLink"
+              id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.apiCallFlyout.searchEndpointLink"
               defaultMessage="Search endpoint"
             />
           </EuiLinkTo>

diff --git a/...pplications/applications/components/search_application/search_preview/document_flyout.tsx b/...pplications/applications/components/search_application/search_preview/document_flyout.tsx
@@ -53,7 +53,7 @@ export const DocumentFlyout: React.FC = () => {
   const columns: Array<EuiBasicTableColumn<ConvertedResultWithType>> = [
     {
       name: i18n.translate(
-        'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.documentFlyout.fieldLabel',
+        'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.documentFlyout.fieldLabel',
         { defaultMessage: 'Field' }
       ),
       render: ({ field: key, type }: ConvertedResultWithType) => (
@@ -71,7 +71,7 @@ export const DocumentFlyout: React.FC = () => {
     {
       field: 'value',
       name: i18n.translate(
-        'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.documentFlyout.valueLabel',
+        'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.documentFlyout.valueLabel',
         { defaultMessage: 'Value' }
       ),
       render: (value: FieldValue) => (
@@ -92,15 +92,15 @@ export const DocumentFlyout: React.FC = () => {
           <EuiTitle size="m">
             <h2>
               <FormattedMessage
-                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.documentFlyout.title"
+                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.documentFlyout.title"
                 defaultMessage="Document: {id}"
                 values={{ id }}
               />
             </h2>
           </EuiTitle>
           <EuiTextColor color="subdued">
             <FormattedMessage
-              id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.documentFlyout.fieldCount"
+              id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.documentFlyout.fieldCount"
               defaultMessage="{fieldCount} {fieldCount, plural, one {Field} other {Fields}}"
               values={{ fieldCount: items.length }}
             />

diff --git a/...applications/applications/components/search_application/search_preview/search_preview.tsx b/...applications/applications/components/search_application/search_preview/search_preview.tsx
@@ -63,25 +63,28 @@ import { EnterpriseSearchApplicationsPageTemplate } from '../../layout/page_temp
 import { SearchApplicationIndicesLogic } from '../search_application_indices_logic';
 import { SearchApplicationViewLogic } from '../search_application_view_logic';
 
+import { APICallData, APICallFlyout } from './api_call_flyout';
+
 import { DocumentProvider } from './document_context';
 import { DocumentFlyout } from './document_flyout';
 import { SearchApplicationSearchPreviewLogic } from './search_preview_logic';
 
 import {
-  InputView,
   PagingInfoView,
   RESULTS_PER_PAGE_OPTIONS,
   ResultView,
   ResultsPerPageView,
   ResultsView,
   Sorting,
+  SearchBar,
 } from './search_ui_components';
 import '../search_application_layout.scss';
 
 class InternalSearchApplicationTransporter implements Transporter {
   constructor(
     private http: HttpSetup,
-    private searchApplicationName: string // uncomment and add setLastAPICall to constructor when view this API call is needed // private setLastAPICall?: (apiCallData: APICallData) => void
+    private searchApplicationName: string,
+    private setLastAPICall: (apiCallData: APICallData) => void
   ) {}
 
   async performRequest(request: SearchRequest) {
@@ -91,7 +94,7 @@ class InternalSearchApplicationTransporter implements Transporter {
       body: JSON.stringify(request),
     });
 
-    // this.setLastAPICall({ request, response }); Uncomment when view this API call is needed
+    this.setLastAPICall({ request, response });
 
     const withUniqueIds = {
       ...response,
@@ -198,7 +201,7 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
                 onClick={setCloseConfiguration}
               >
                 {i18n.translate(
-                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.buttonTitle',
+                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.buttonTitle',
                   {
                     defaultMessage: 'Configuration',
                   }
@@ -213,7 +216,7 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
             <EuiTitle size="xxxs">
               <p>
                 {i18n.translate(
-                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.contentTitle',
+                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.contentTitle',
                   {
                     defaultMessage: 'Content',
                   }
@@ -236,7 +239,7 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
             }
           >
             {i18n.translate(
-              'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.content.Indices',
+              'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.content.Indices',
               {
                 defaultMessage: 'Indices',
               }
@@ -256,13 +259,13 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
           >
             <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
               <FormattedMessage
-                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.content.schema"
+                id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.content.schema"
                 defaultMessage="Schema"
               />
               {hasSchemaConflicts && (
                 <EuiText size="s" color="danger">
                   <FormattedMessage
-                    id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.content.schemaConflict"
+                    id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.content.schemaConflict"
                     defaultMessage="Conflict"
                   />
                 </EuiText>
@@ -274,7 +277,7 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
             <EuiTitle size="xxxs">
               <p>
                 {i18n.translate(
-                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.connectTitle',
+                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.connectTitle',
                   {
                     defaultMessage: 'Connect',
                   }
@@ -296,7 +299,7 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
             }
           >
             {i18n.translate(
-              'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.connect.Api',
+              'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.connect.Api',
               {
                 defaultMessage: 'API',
               }
@@ -307,7 +310,7 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
             <EuiTitle size="xxxs">
               <p>
                 {i18n.translate(
-                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.settingsTitle',
+                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.settingsTitle',
                   {
                     defaultMessage: 'Settings',
                   }
@@ -332,7 +335,7 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
             <EuiTextColor color="danger">
               <p>
                 {i18n.translate(
-                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.configuration.settings.delete',
+                  'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.configuration.settings.delete',
                   {
                     defaultMessage: 'Delete this app',
                   }
@@ -347,17 +350,21 @@ const ConfigurationPopover: React.FC<ConfigurationPopOverProps> = ({
 };
 export const SearchApplicationSearchPreview: React.FC = () => {
   const { http } = useValues(HttpLogic);
-  // const [showAPICallFlyout, setShowAPICallFlyout] = useState<boolean>(false);    Uncomment when view this API call is needed
+  const [showAPICallFlyout, setShowAPICallFlyout] = useState<boolean>(false);
   const [showConfigurationPopover, setShowConfigurationPopover] = useState<boolean>(false);
-  // const [lastAPICall, setLastAPICall] = useState<null | APICallData>(null); Uncomment when view this API call is needed
+  const [lastAPICall, setLastAPICall] = useState<null | APICallData>(null);
   const { searchApplicationName, isLoadingSearchApplication, hasSchemaConflicts } = useValues(
     SearchApplicationViewLogic
   );
   const { resultFields, sortableFields } = useValues(SearchApplicationSearchPreviewLogic);
   const { searchApplicationData } = useValues(SearchApplicationIndicesLogic);
 
   const config: SearchDriverOptions = useMemo(() => {
-    const transporter = new InternalSearchApplicationTransporter(http, searchApplicationName);
+    const transporter = new InternalSearchApplicationTransporter(
+      http,
+      searchApplicationName,
+      setLastAPICall
+    );
     const connector = new EnginesAPIConnector(transporter);
 
     return {
@@ -368,7 +375,7 @@ export const SearchApplicationSearchPreview: React.FC = () => {
         result_fields: resultFields,
       },
     };
-  }, [http, searchApplicationName, resultFields]);
+  }, [http, searchApplicationName, setLastAPICall, resultFields]);
 
   if (!searchApplicationData) return null;
 
@@ -377,7 +384,7 @@ export const SearchApplicationSearchPreview: React.FC = () => {
       pageChrome={[
         searchApplicationName,
         i18n.translate(
-          'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.pageChrome',
+          'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.pageChrome',
           {
             defaultMessage: 'Search Preview',
           }
@@ -407,7 +414,31 @@ export const SearchApplicationSearchPreview: React.FC = () => {
         <SearchProvider config={config}>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <SearchBox inputView={InputView} />
+              <SearchBox
+                inputView={({ getInputProps }) => (
+                  <SearchBar
+                    additionalInputProps={getInputProps({
+                      append: (
+                        <EuiButtonEmpty
+                          color="primary"
+                          iconType="eye"
+                          onClick={() => setShowAPICallFlyout(true)}
+                          isLoading={lastAPICall == null}
+                        >
+                          {i18n.translate(
+                            'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.inputView.appendButtonLabel',
+                            { defaultMessage: 'View API call' }
+                          )}
+                        </EuiButtonEmpty>
+                      ),
+                      placeholder: i18n.translate(
+                        'xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.inputView.placeholder',
+                        { defaultMessage: 'Search' }
+                      ),
+                    })}
+                  />
+                )}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiSpacer size="m" />
@@ -419,7 +450,7 @@ export const SearchApplicationSearchPreview: React.FC = () => {
               <EuiSpacer size="m" />
               <EuiLink href={docLinks.searchTemplates} target="_blank">
                 <FormattedMessage
-                  id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreivew.improveResultsLink"
+                  id="xpack.enterpriseSearch.searchApplications.searchApplication.searchPreview.improveResultsLink"
                   defaultMessage="Improve these results"
                 />
               </EuiLink>
@@ -432,17 +463,13 @@ export const SearchApplicationSearchPreview: React.FC = () => {
           </EuiFlexGroup>
         </SearchProvider>
         <DocumentFlyout />
-        {/*
-        Uncomment when view this API call needed
-
         {showAPICallFlyout && lastAPICall && (
           <APICallFlyout
             onClose={() => setShowAPICallFlyout(false)}
             lastAPICall={lastAPICall}
             searchApplicationName={searchApplicationName}
           />
         )}
-        */}
       </DocumentProvider>
     </EnterpriseSearchApplicationsPageTemplate>
   );