diff --git a/x-pack/plugins/osquery/public/live_queries/form/index.tsx b/x-pack/plugins/osquery/public/live_queries/form/index.tsx index 658280042696ef..8654a74fecfb40 100644 --- a/x-pack/plugins/osquery/public/live_queries/form/index.tsx +++ b/x-pack/plugins/osquery/public/live_queries/form/index.tsx @@ -110,7 +110,7 @@ const LiveQueryFormComponent: React.FC = ({ { agentSelection: { agents: [], - allAgentsSelected: true, + allAgentsSelected: false, platformsSelected: [], policiesSelected: [], }, diff --git a/x-pack/plugins/osquery/public/live_queries/form/live_query_query_field.tsx b/x-pack/plugins/osquery/public/live_queries/form/live_query_query_field.tsx index 9f0b5acd8994a5..070339bb58af22 100644 --- a/x-pack/plugins/osquery/public/live_queries/form/live_query_query_field.tsx +++ b/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 = ({ disabled, field }) => { const { value, setValue, errors } = field; const error = errors[0]?.message; + const savedQueriesDropdownRef = useRef(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 = ({ disa return ( <> - + }> diff --git a/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx b/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx index 073b56bfd1d4c8..30df2267fbfa16 100644 --- a/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx +++ b/x-pack/plugins/osquery/public/saved_queries/saved_queries_dropdown.tsx @@ -7,7 +7,14 @@ 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'; @@ -15,21 +22,27 @@ 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 = ({ - 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 = ({ 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 = ({ [] ); + const clearSelection = useCallback(() => setSelectedOptions([]), []); + useEffect(() => { const savedQueryId = location.state?.form?.savedQueryId; @@ -94,6 +115,14 @@ const SavedQueriesDropdownComponent: React.FC = ({ } }, [handleSavedQueryChange, replace, location.state, queryOptions]); + useImperativeHandle( + ref, + () => ({ + clearSelection, + }), + [clearSelection] + ); + return ( = ({ /> ); -}; +}); export const SavedQueriesDropdown = React.memo(SavedQueriesDropdownComponent); diff --git a/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx b/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx index 32547bc5dd2d08..95a31efeaf135b 100644 --- a/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx +++ b/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx @@ -71,10 +71,14 @@ const QueryFlyoutComponent: React.FC = ({ [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 = ({ setFieldValue('version', [savedQuery.version]); } }, - [isFieldSupported, setFieldValue] + [isFieldSupported, setFieldValue, reset] ); return (