(query assist) prevent generating query with non-exist indices

(cherry picked from commit 57a722f)

Signed-off-by: Joshua Li <[email protected]>

public/components/common/search/query_area.tsx

@@ -37,7 +37,7 @@ export function QueryArea({
   const memoizedGetAvailableFields = useMemo(() => getAvailableFields, []);
   const memoizedHandleQueryChange = useMemo(() => handleQueryChange, []);
   useEffect(() => {
-    const indexQuery = `source = ${selectedIndex[0].label}`;
+    const indexQuery = `source = ${selectedIndex[0]?.label || ''}`;
     memoizedHandleQueryChange(indexQuery);
     memoizedGetAvailableFields(indexQuery);
   }, [selectedIndex, memoizedGetAvailableFields, memoizedHandleQueryChange]);

public/components/common/search/search.tsx

@@ -282,19 +282,30 @@ export const Search = (props: any) => {
   };
 
   //  STATE FOR LANG PICKER AND INDEX PICKER
-  const [selectedIndex, setSelectedIndex] = useState<EuiComboBoxOptionOption[]>([
-    { label: 'opensearch_dashboards_sample_data_logs' },
-  ]);
+  const [selectedIndex, setSelectedIndex] = useState<EuiComboBoxOptionOption[]>([]);
   const { data: indices, loading: indicesLoading } = useCatIndices();
   const { data: indexPatterns, loading: indexPatternsLoading } = useGetIndexPatterns();
   const indicesAndIndexPatterns =
     indexPatterns && indices
       ? [...indexPatterns, ...indices].filter(
           (v1, index, array) => array.findIndex((v2) => v1.label === v2.label) === index
         )
-      : undefined;
+      : [];
   const loading = indicesLoading || indexPatternsLoading;
 
+  useEffect(() => {
+    if (selectedIndex.length || !indicesAndIndexPatterns.length) return;
+    // pre-fill selected index with sample logs or other sample data index
+    const sampleLogOption = indicesAndIndexPatterns.find(
+      (option) => option.label === 'opensearch_dashboards_sample_data_logs'
+    );
+    if (sampleLogOption) setSelectedIndex([sampleLogOption]);
+    const sampleDataOption = indicesAndIndexPatterns.find((option) =>
+      option.label.startsWith('opensearch_dashboards_sample_data_')
+    );
+    if (sampleDataOption) setSelectedIndex([sampleDataOption]);
+  }, [indicesAndIndexPatterns]);
+
   const onLanguagePopoverClick = () => {
     setLanguagePopoverOpen(!_isLanguagePopoverOpen);
   };
@@ -352,7 +363,7 @@ export const Search = (props: any) => {
                   <EuiFlexItem>
                     <EuiComboBox
                       placeholder="Select an index"
-                      isClearable={true}
+                      isClearable={false}
                       prepend={<EuiText>Index</EuiText>}
                       singleSelection={{ asPlainText: true }}
                       isLoading={loading}

public/components/event_analytics/explorer/query_assist/__tests__/__snapshots__/callouts.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Callouts spec EmptyQueryCallOut should match snapshot 1`] = `
 <div>
   <div
     class="euiCallOut euiCallOut--warning euiCallOut--small"
-    data-test-subj="query-assist-empty-callout"
+    data-test-subj="query-assist-empty-query-callout"
   >
     <div
       class="euiCallOutHeader"

public/components/event_analytics/explorer/query_assist/callouts.tsx

@@ -20,9 +20,21 @@ export const ProhibitedQueryCallOut: React.FC<QueryAssistCallOutProps> = (props)
   />
 );
 
+export const EmptyIndexCallOut: React.FC<QueryAssistCallOutProps> = (props) => (
+  <EuiCallOut
+    data-test-subj="query-assist-empty-index-callout"
+    title="Select a data source or index to ask a question."
+    size="s"
+    color="warning"
+    iconType="iInCircle"
+    dismissible
+    onDismiss={props.onDismiss}
+  />
+);
+
 export const EmptyQueryCallOut: React.FC<QueryAssistCallOutProps> = (props) => (
   <EuiCallOut
-    data-test-subj="query-assist-empty-callout"
+    data-test-subj="query-assist-empty-query-callout"
     title="Enter a natural language question to automatically generate a query to view results."
     size="s"
     color="warning"

public/components/event_analytics/explorer/query_assist/input.tsx

@@ -35,7 +35,7 @@ import {
 } from '../../redux/slices/query_assistant_summarization_slice';
 import { reset, selectQueryResult } from '../../redux/slices/query_result_slice';
 import { changeQuery, selectQueries } from '../../redux/slices/query_slice';
-import { EmptyQueryCallOut, PPLGeneratedCallOut, ProhibitedQueryCallOut } from './callouts';
+import { EmptyIndexCallOut, EmptyQueryCallOut, PPLGeneratedCallOut, ProhibitedQueryCallOut } from './callouts';
 
 class ProhibitedQueryError extends Error {
   constructor(message?: string) {
@@ -116,6 +116,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
   const summaryData = useSelector(selectQueryAssistantSummarization)[props.tabId];
   const loading = summaryData.loading;
   const inputRef = useRef<HTMLInputElement>(null);
+  const selectedIndex = props.selectedIndex[0]?.label || '';
 
   useEffect(() => {
     if (
@@ -162,7 +163,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
     const generatedPPL = await getOSDHttp().post(QUERY_ASSIST_API.GENERATE_PPL, {
       body: JSON.stringify({
         question: props.nlqInput,
-        index: props.selectedIndex[0].label,
+        index: selectedIndex,
       }),
     });
     await props.handleQueryChange(generatedPPL);
@@ -182,7 +183,10 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
   const generatePPL = async () => {
     dispatch(reset({ tabId: props.tabId }));
     dispatch(resetSummary({ tabId: props.tabId }));
-    if (!props.selectedIndex.length) return;
+    if (!selectedIndex) {
+      props.setCallOut(<EmptyIndexCallOut onDismiss={dismissCallOut} />);
+      return;
+    }
     if (props.nlqInput.trim().length === 0) {
       props.setCallOut(<EmptyQueryCallOut onDismiss={dismissCallOut} />);
       return;
@@ -208,7 +212,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
       const isError = summaryData.responseForSummaryStatus === 'failure';
       const summarizationContext: SummarizationContext = {
         question: props.nlqInput,
-        index: props.selectedIndex[0].label,
+        index: selectedIndex,
         isError,
         query: queryRedux.rawQuery,
         response: isError
@@ -273,7 +277,10 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
   const runAndSummarize = async () => {
     dispatch(reset({ tabId: props.tabId }));
     dispatch(resetSummary({ tabId: props.tabId }));
-    if (!props.selectedIndex.length) return;
+    if (!selectedIndex) {
+      props.setCallOut(<EmptyIndexCallOut onDismiss={dismissCallOut} />);
+      return;
+    }
     if (props.nlqInput.trim().length === 0) {
       props.setCallOut(<EmptyQueryCallOut onDismiss={dismissCallOut} />);
       return;
@@ -309,8 +316,8 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
               <EuiFieldText
                 inputRef={inputRef}
                 placeholder={
-                  props.selectedIndex[0]?.label
-                    ? `Ask a natural language question about ${props.selectedIndex[0].label} to generate a query`
+                  selectedIndex
+                    ? `Ask a natural language question about ${selectedIndex} to generate a query`
                     : 'Select a data source or index to ask a question.'
                 }
                 disabled={loading}
@@ -340,7 +347,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
             }}
           >
             <EuiListGroup flush={true} bordered={false} wrapText={true} maxWidth={false}>
-              {HARDCODED_SUGGESTIONS[props.selectedIndex[0]?.label]?.map((question) => (
+              {HARDCODED_SUGGESTIONS[selectedIndex]?.map((question) => (
                 <EuiListGroupItem
                   onClick={() => {
                     props.setNlqInput(question);