[Osquery] Fix live query form saved queries picker bug (#105308) (#10…

…5364)

Co-authored-by: Patryk Kopyciński <patryk.kopycinski@elastic.co>

x-pack/plugins/osquery/public/live_queries/form/index.tsx

@@ -110,7 +110,7 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
       {
         agentSelection: {
           agents: [],
-          allAgentsSelected: true,
+          allAgentsSelected: false,
           platformsSelected: [],
           policiesSelected: [],
         },

x-pack/plugins/osquery/public/live_queries/form/live_query_query_field.tsx

@@ -6,12 +6,15 @@
  */
 
 import { EuiFormRow, EuiSpacer } from '@elastic/eui';
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { OsquerySchemaLink } from '../../components/osquery_schema_link';
 import { FieldHook } from '../../shared_imports';
 import { OsqueryEditor } from '../../editor';
-import { SavedQueriesDropdown } from '../../saved_queries/saved_queries_dropdown';
+import {
+  SavedQueriesDropdown,
+  SavedQueriesDropdownRef,
+} from '../../saved_queries/saved_queries_dropdown';
 
 interface LiveQueryQueryFieldProps {
   disabled?: boolean;
@@ -21,16 +24,18 @@ interface LiveQueryQueryFieldProps {
 const LiveQueryQueryFieldComponent: React.FC<LiveQueryQueryFieldProps> = ({ disabled, field }) => {
   const { value, setValue, errors } = field;
   const error = errors[0]?.message;
+  const savedQueriesDropdownRef = useRef<SavedQueriesDropdownRef>(null);
 
   const handleSavedQueryChange = useCallback(
     (savedQuery) => {
-      setValue(savedQuery.query);
+      setValue(savedQuery?.query ?? '');
     },
     [setValue]
   );
 
   const handleEditorChange = useCallback(
     (newValue) => {
+      savedQueriesDropdownRef.current?.clearSelection();
       setValue(newValue);
     },
     [setValue]
@@ -39,7 +44,11 @@ const LiveQueryQueryFieldComponent: React.FC<LiveQueryQueryFieldProps> = ({ disa
   return (
     <EuiFormRow isInvalid={typeof error === 'string'} error={error} fullWidth>
       <>
-        <SavedQueriesDropdown disabled={disabled} onChange={handleSavedQueryChange} />
+        <SavedQueriesDropdown
+          ref={savedQueriesDropdownRef}
+          disabled={disabled}
+          onChange={handleSavedQueryChange}
+        />
         <EuiSpacer />
         <EuiFormRow fullWidth labelAppend={<OsquerySchemaLink />}>
           <OsqueryEditor defaultValue={value} disabled={disabled} onChange={handleEditorChange} />

x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx

@@ -7,29 +7,42 @@
 
 import { find } from 'lodash/fp';
 import { EuiCodeBlock, EuiFormRow, EuiComboBox, EuiText } from '@elastic/eui';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { SimpleSavedObject } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useHistory, useLocation } from 'react-router-dom';
 
 import { useSavedQueries } from './use_saved_queries';
 
+export interface SavedQueriesDropdownRef {
+  clearSelection: () => void;
+}
+
 interface SavedQueriesDropdownProps {
   disabled?: boolean;
   onChange: (
-    value: SimpleSavedObject<{
-      id: string;
-      description?: string | undefined;
-      query: string;
-    }>['attributes']
+    value:
+      | SimpleSavedObject<{
+          id: string;
+          description?: string | undefined;
+          query: string;
+        }>['attributes']
+      | null
   ) => void;
 }
 
-const SavedQueriesDropdownComponent: React.FC<SavedQueriesDropdownProps> = ({
-  disabled,
-  onChange,
-}) => {
+const SavedQueriesDropdownComponent = forwardRef<
+  SavedQueriesDropdownRef,
+  SavedQueriesDropdownProps
+>(({ disabled, onChange }, ref) => {
   const { replace } = useHistory();
   const location = useLocation();
   const [selectedOptions, setSelectedOptions] = useState([]);
@@ -52,6 +65,12 @@ const SavedQueriesDropdownComponent: React.FC<SavedQueriesDropdownProps> = ({
 
   const handleSavedQueryChange = useCallback(
     (newSelectedOptions) => {
+      if (!newSelectedOptions.length) {
+        onChange(null);
+        setSelectedOptions(newSelectedOptions);
+        return;
+      }
+
       const selectedSavedQuery = find(
         ['attributes.id', newSelectedOptions[0].value.id],
         data?.savedObjects
@@ -80,6 +99,8 @@ const SavedQueriesDropdownComponent: React.FC<SavedQueriesDropdownProps> = ({
     []
   );
 
+  const clearSelection = useCallback(() => setSelectedOptions([]), []);
+
   useEffect(() => {
     const savedQueryId = location.state?.form?.savedQueryId;
 
@@ -94,6 +115,14 @@ const SavedQueriesDropdownComponent: React.FC<SavedQueriesDropdownProps> = ({
     }
   }, [handleSavedQueryChange, replace, location.state, queryOptions]);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      clearSelection,
+    }),
+    [clearSelection]
+  );
+
   return (
     <EuiFormRow
       label={
@@ -120,6 +149,6 @@ const SavedQueriesDropdownComponent: React.FC<SavedQueriesDropdownProps> = ({
       />
     </EuiFormRow>
   );
-};
+});
 
 export const SavedQueriesDropdown = React.memo(SavedQueriesDropdownComponent);

x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx

@@ -71,10 +71,14 @@ const QueryFlyoutComponent: React.FC<QueryFlyoutProps> = ({
     [integrationPackageVersion]
   );
 
-  const { submit, setFieldValue } = form;
+  const { submit, setFieldValue, reset } = form;
 
   const handleSetQueryValue = useCallback(
     (savedQuery) => {
+      if (!savedQuery) {
+        return reset();
+      }
+
       setFieldValue('id', savedQuery.id);
       setFieldValue('query', savedQuery.query);
 
@@ -94,7 +98,7 @@ const QueryFlyoutComponent: React.FC<QueryFlyoutProps> = ({
         setFieldValue('version', [savedQuery.version]);
       }
     },
-    [isFieldSupported, setFieldValue]
+    [isFieldSupported, setFieldValue, reset]
   );
 
   return (