[Query Rules UI] Query rules flyout document selector.

src/platform/packages/shared/kbn-try-in-console/components/try_in_console_button.tsx

@@ -9,7 +9,13 @@
 
 import React from 'react';
 
-import { EuiLink, EuiButton, EuiButtonEmpty, EuiContextMenuItem } from '@elastic/eui';
+import {
+  EuiLink,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiContextMenuItem,
+  EuiButtonColor,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { ApplicationStart } from '@kbn/core-application-browser';
 import type { SharePluginStart } from '@kbn/share-plugin/public';
@@ -28,6 +34,7 @@ export interface TryInConsoleButtonProps {
   consolePlugin?: ConsolePluginStart;
   sharePlugin?: SharePluginStart;
   content?: string | React.ReactElement;
+  color?: EuiButtonColor;
   showIcon?: boolean;
   iconType?: string;
   type?: 'link' | 'button' | 'emptyButton' | 'contextMenuItem';
@@ -41,6 +48,7 @@ export const TryInConsoleButton = ({
   consolePlugin,
   sharePlugin,
   content = RUN_IN_CONSOLE,
+  color,
   showIcon = true,
   iconType = 'console',
   type = 'emptyButton',
@@ -127,7 +135,7 @@ export const TryInConsoleButton = ({
     case 'emptyButton':
     default:
       return (
-        <EuiButtonEmpty iconType={btnIconType} size="s" {...commonProps}>
+        <EuiButtonEmpty iconType={btnIconType} color={color} size="s" {...commonProps}>
           {content}
         </EuiButtonEmpty>
       );

x-pack/platform/packages/shared/kbn-search-index-documents/components/result/editable_result.tsx

@@ -0,0 +1,177 @@
+/*
+ * 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 {
+  EuiButtonIcon,
+  EuiComboBox,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiLoadingSpinner,
+  EuiSplitPanel,
+  EuiText,
+} from '@elastic/eui';
+import { debounce } from 'lodash';
+import { i18n } from '@kbn/i18n';
+import { ResultFieldProps } from './result_types';
+import { ResultFields } from './results_fields';
+
+export interface EditableResultProps {
+  leftSideItem?: React.ReactNode;
+  hasIndexSelector?: boolean;
+  onDeleteDocument: () => void;
+  onIndexSelectorChange?: (index: string) => void;
+  onIdSelectorChange?: (id: string) => void;
+  onExpand?: () => void;
+  fields?: ResultFieldProps[];
+  indices?: string[];
+  initialDocId?: string;
+  initialIndex?: string;
+  error?: string;
+  isLoading?: boolean;
+}
+
+export const EditableResult: React.FC<EditableResultProps> = ({
+  leftSideItem,
+  hasIndexSelector,
+  onIndexSelectorChange,
+  onIdSelectorChange,
+  onDeleteDocument,
+  onExpand,
+  indices = [],
+  fields = [],
+  initialDocId = '',
+  initialIndex = '',
+  error,
+  isLoading = false,
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [documentId, setDocumentId] = React.useState(initialDocId);
+  const [index, setIndex] = React.useState(initialIndex);
+  return (
+    <EuiSplitPanel.Outer hasBorder={true}>
+      <EuiSplitPanel.Inner paddingSize="s" color="plain">
+        <EuiFlexGroup gutterSize="s" alignItems="center">
+          {leftSideItem && <EuiFlexItem grow={false}>{leftSideItem}</EuiFlexItem>}
+          <EuiFlexItem>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiFieldText
+                  data-test-subj="editableResultDocumentId"
+                  value={documentId}
+                  onChange={(e) => setDocumentId(e.target.value)}
+                  onBlur={(e) => {
+                    if (onIdSelectorChange) {
+                      onIdSelectorChange(e.target.value);
+                    }
+                  }}
+                  fullWidth
+                  placeholder={i18n.translate(
+                    'xpack.sharedKbnSearchIndexDocuments.editableResult.documentIdPlaceholder',
+                    {
+                      defaultMessage: 'Document ID',
+                    }
+                  )}
+                />
+              </EuiFlexItem>
+              {hasIndexSelector && (
+                <EuiFlexItem grow={false}>
+                  <EuiComboBox
+                    data-test-subj="editableResultIndexSelector"
+                    placeholder={i18n.translate(
+                      'xpack.sharedKbnSearchIndexDocuments.editableResult.selectIndexPlaceholder',
+                      {
+                        defaultMessage: 'Select index',
+                      }
+                    )}
+                    singleSelection={{ asPlainText: true }}
+                    options={indices.map((i) => ({ label: i, value: 'index' }))}
+                    isClearable={false}
+                    selectedOptions={index ? [{ label: index, value: 'index' }] : []}
+                    onChange={(selected) => {
+                      const selectedIndex = selected[0]?.label || '';
+                      setIndex(selectedIndex);
+                      if (onIndexSelectorChange) {
+                        debounce(() => {
+                          onIndexSelectorChange(selectedIndex);
+                        }, 300)();
+                      }
+                    }}
+                  />
+                </EuiFlexItem>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup
+              gutterSize="s"
+              alignItems="center"
+              justifyContent="flexEnd"
+              responsive={false}
+            >
+              <EuiFlexItem grow={false}>
+                {error && <EuiIcon type="warning" color="danger" />}
+                {!error &&
+                  hasIndexSelector &&
+                  (isLoading ? (
+                    <EuiLoadingSpinner />
+                  ) : (
+                    <EuiButtonIcon
+                      size="xs"
+                      iconType={isExpanded ? 'fold' : 'unfold'}
+                      color="primary"
+                      aria-label={isExpanded ? 'Collapse fields' : 'Expand fields'}
+                      onClick={() => {
+                        if (onExpand && !isExpanded) {
+                          onExpand();
+                        }
+                        setIsExpanded(!isExpanded);
+                      }}
+                    />
+                  ))}
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonIcon
+                  iconType="trash"
+                  color="danger"
+                  onClick={onDeleteDocument}
+                  aria-label="Delete document"
+                  data-test-subj="editableResultDeleteButton"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiSplitPanel.Inner>
+      {!error && fields?.length > 0 && isExpanded && (
+        <>
+          <EuiHorizontalRule margin="none" />
+          <EuiSplitPanel.Inner paddingSize="s" color="plain">
+            <ResultFields documentId="12345" isExpanded={false} fields={fields} />
+          </EuiSplitPanel.Inner>
+        </>
+      )}
+      {error && (
+        <EuiSplitPanel.Inner paddingSize="s" color="danger">
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiText color="danger" size="xs">
+                <EuiIcon type="warning" />
+                &nbsp;
+                {error}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiSplitPanel.Inner>
+      )}
+    </EuiSplitPanel.Outer>
+  );
+};

x-pack/platform/packages/shared/kbn-search-index-documents/components/result/index.ts

@@ -12,3 +12,4 @@ export {
   resultToFieldFromMappings as resultToField,
   reorderFieldsInImportance,
 } from './result_metadata';
+export { EditableResult } from './editable_result';

x-pack/solutions/search/plugins/search_query_rules/common/api_routes.ts

@@ -11,5 +11,8 @@ export enum APIRoutes {
   QUERY_RULES_SETS = '/internal/search_query_rules/query_rules_sets',
   QUERY_RULES_QUERY_RULE_FETCH = '/internal/search_query_rules/ruleset/{ruleset_id}/rule/{rule_id}',
   QUERY_RULES_RULESET_ID = '/internal/search_query_rules/ruleset/{ruleset_id}',
+  FETCH_INDICES = '/internal/search_query_rules/indices',
+  FETCH_DOCUMENT = '/internal/search_query_rules/document/{indexName}/{documentId}',
+  GENERATE_RULE_ID = '/internal/search_query_rules/ruleset/{rulesetId}/generate_rule_id',
   QUERY_RULES_RULESET_RULE = '/internal/search_query_rules/ruleset/{ruleset_id}/rule/{rule_id}',
 }

x-pack/solutions/search/plugins/search_query_rules/common/types.ts

@@ -6,6 +6,8 @@
  */
 
 import {
+  GetResponse,
+  IndicesGetMappingResponse,
   QueryRulesQueryRule,
   QueryRulesQueryRuleCriteria,
   QueryRulesQueryRuleset,
@@ -33,6 +35,11 @@ export type SearchQueryRulesQueryRuleset = Omit<QueryRulesQueryRuleset, 'rules'>
   rules: SearchQueryRulesQueryRule[];
 };
 
+export interface SearchQueryDocumentResponse {
+  document: GetResponse<unknown>;
+  mappings: IndicesGetMappingResponse;
+}
+
 export type QueryRuleEditorForm = Pick<
   SearchQueryRulesQueryRule,
   'criteria' | 'type' | 'actions'

x-pack/solutions/search/plugins/search_query_rules/public/components/empty_prompt/empty_prompt.tsx

@@ -79,7 +79,7 @@ export const EmptyPrompt: React.FC<EmptyPromptProps> = ({ getStartedAction }) =>
                 <h2>
                   <FormattedMessage
                     id="xpack.queryRules.emptyPrompt.title"
-                    defaultMessage="Improve your search experience with targeted business logic"
+                    defaultMessage="Add custom business logic with query rules"
                   />
                 </h2>
               </EuiTitle>
@@ -88,7 +88,7 @@ export const EmptyPrompt: React.FC<EmptyPromptProps> = ({ getStartedAction }) =>
                 <p>
                   <FormattedMessage
                     id="xpack.queryRules.emptyPrompt.subtitle"
-                    defaultMessage="Add business logic to your queries to get customized results under different conditions."
+                    defaultMessage="Enhance search experiences with custom rules to filter and prioritize results based on your business logic."
                   />
                 </p>
               </EuiText>
@@ -248,7 +248,7 @@ export const EmptyPrompt: React.FC<EmptyPromptProps> = ({ getStartedAction }) =>
               >
                 <FormattedMessage
                   id="xpack.queryRules.emptyPrompt.footerLink"
-                  defaultMessage="Query Rules API documentation"
+                  defaultMessage="API reference"
                 />
               </EuiLink>
             </EuiFlexItem>

x-pack/solutions/search/plugins/search_query_rules/public/components/overview/overview.tsx

@@ -5,19 +5,20 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLink,
   EuiLoadingSpinner,
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
 import { docLinks } from '../../../common/doc_links';
 import { useFetchQueryRulesSets } from '../../hooks/use_fetch_query_rules_sets';
 import { EmptyPrompt } from '../empty_prompt/empty_prompt';
@@ -30,7 +31,20 @@ import { CreateRulesetModal } from '../query_rules_sets/create_ruleset_modal';
 import { QueryRulesPageTemplate } from '../../layout/query_rules_page_template';
 
 export const QueryRulesOverview = () => {
-  const { data: queryRulesData, isInitialLoading, isError, error } = useFetchQueryRulesSets();
+  const {
+    data: queryRulesData,
+    isInitialLoading,
+    isError,
+    error,
+    refetch,
+  } = useFetchQueryRulesSets();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      refetch();
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [refetch]);
   const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
   const backgroundProps = css({
     backgroundImage: `url(${queryRulesBackground})`,
@@ -52,17 +66,23 @@ export const QueryRulesOverview = () => {
           rightSideItems={[
             <EuiFlexGroup alignItems="center" key="queryRulesOverviewHeaderButtons">
               <EuiFlexItem grow={false}>
-                <EuiLink
-                  data-test-subj="queryRulesOverviewApiDocumentationLink"
-                  external
-                  target="_blank"
+                <EuiButtonEmpty
+                  data-test-subj="queryRulesetDetailApiReferenceButton"
+                  iconType="documentation"
+                  color="text"
+                  aria-label={i18n.translate(
+                    'xpack.queryRules.queryRulesetDetail.apiReferenceButton',
+                    {
+                      defaultMessage: 'API reference',
+                    }
+                  )}
                   href={docLinks.queryRulesApi}
+                  target="_blank"
                 >
-                  <FormattedMessage
-                    id="xpack.queryRules.queryRulesSetDetail.documentationLink"
-                    defaultMessage="API Documentation"
-                  />
-                </EuiLink>
+                  {i18n.translate('xpack.queryRules.queryRulesetDetail.apiReferenceButton', {
+                    defaultMessage: 'API reference',
+                  })}
+                </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButton