update the elasticsearch query on indices change and edit query flyout

packages/kbn-ai-playground/components/sources_panel/sources_panel_sidebar.tsx

@@ -1,23 +1,43 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { IndicesList } from './indices_list';
-import { AddIndicesField } from './add_indices_field';
 import { IndexName } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import { useController } from 'react-hook-form';
+import { useIndicesFields } from '../../hooks/useIndicesFields';
+import { createQuery, getDefaultQueryFields } from '../../lib/create_query';
 import { ChatFormFields } from '../../types';
+import { AddIndicesField } from './add_indices_field';
+import { IndicesList } from './indices_list';
 
 export const SourcesPanelSidebar: React.FC = () => {
   const {
     field: { value: selectedIndices, onChange },
   } = useController({ name: ChatFormFields.indices, defaultValue: [] });
+
+  const { fields } = useIndicesFields(selectedIndices || []);
+
+  const {
+    field: { onChange: elasticsearchQueryOnChange },
+  } = useController({
+    name: ChatFormFields.elasticsearchQuery,
+    defaultValue: {},
+  });
+
+  useEffect(() => {
+    if (fields) {
+      const defaultFields = getDefaultQueryFields(fields);
+      elasticsearchQueryOnChange(createQuery(defaultFields, fields));
+    }
+  }, [selectedIndices, fields, elasticsearchQueryOnChange]);
+
   const addIndex = (newIndex: IndexName) => {
     onChange([...selectedIndices, newIndex]);
   };

packages/kbn-ai-playground/components/view_query/view_query_action.tsx

@@ -17,7 +17,7 @@ import {
   EuiFlexGroup,
   EuiButtonEmpty,
   EuiLink,
-  EuiButton
+  EuiButton,
 } from '@elastic/eui';
 import { useController, useFormContext } from 'react-hook-form';
 import { ChatForm, ChatFormFields } from '../../types';
@@ -31,14 +31,15 @@ export const ViewQueryAction: React.FC<ViewQueryActionProps> = () => {
   const [showFlyout, setShowFlyout] = useState(false);
   const selectedIndices: string[] = getValues('indices');
   const { fields } = useIndicesFields(selectedIndices || []);
+  const defaultFields = useMemo(() => getDefaultQueryFields(fields), [fields]);
+  const [queryFields, setQueryFields] = useState(defaultFields);
 
   const {
     field: { onChange },
-  } = useController({ name: ChatFormFields.elasticsearchQuery, defaultValue: {} });
-
-  const defaultFields = useMemo(() => getDefaultQueryFields(fields), [fields]);
-
-  const [queryFields, setQueryFields] = useState(defaultFields);
+  } = useController({
+    name: ChatFormFields.elasticsearchQuery,
+    defaultValue: {},
+  });
 
   useEffect(() => {
     if (selectedIndices?.length > 0) {