diff --git a/x-pack/plugins/osquery/cypress/e2e/all/ecs_mappings.cy.ts b/x-pack/plugins/osquery/cypress/e2e/all/ecs_mappings.cy.ts index 9471ca8311737..352b47d634104 100644 --- a/x-pack/plugins/osquery/cypress/e2e/all/ecs_mappings.cy.ts +++ b/x-pack/plugins/osquery/cypress/e2e/all/ecs_mappings.cy.ts @@ -19,12 +19,12 @@ import { } from '../../tasks/live_query'; describe('EcsMapping', () => { - before(() => { + beforeEach(() => { login(ROLE.soc_manager); - navigateTo('/app/osquery'); }); it('should properly show static values in form and results', () => { + navigateTo('/app/osquery'); cy.contains('New live query').click(); selectAllAgents(); inputQuery('select * from processes;'); @@ -50,4 +50,22 @@ describe('EcsMapping', () => { cy.contains('[ "test2" ]'); cy.contains('test3'); }); + + it('should hide and show ecs mappings on Advanced accordion click', () => { + navigateTo('/app/osquery'); + cy.contains('New live query').click(); + selectAllAgents(); + cy.getBySel('savedQuerySelect').within(() => { + cy.getBySel('comboBoxInput').type('processes_elastic{downArrow}{enter}'); + }); + cy.react('EuiAccordionClass', { + props: { buttonContent: 'Advanced', forceState: 'open' }, + }).should('exist'); + cy.getBySel('advanced-accordion-content').within(() => { + cy.contains('Advanced').click(); + }); + cy.react('EuiAccordionClass', { + props: { buttonContent: 'Advanced', forceState: 'closed' }, + }).should('exist'); + }); }); 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 05f9e947fe841..7a707d1a4f4c8 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 @@ -8,10 +8,11 @@ import { isEmpty } from 'lodash'; import type { EuiAccordionProps } from '@elastic/eui'; import { EuiCodeBlock, EuiFormRow, EuiAccordion, EuiSpacer } from '@elastic/eui'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import styled from 'styled-components'; import { useController, useFormContext } from 'react-hook-form'; import { i18n } from '@kbn/i18n'; +import type { LiveQueryFormFields } from '.'; import { OsqueryEditor } from '../../editor'; import { useKibana } from '../../common/lib/kibana'; import { ECSMappingEditorField } from '../../packs/queries/lazy_ecs_mapping_editor_field'; @@ -23,6 +24,9 @@ const StyledEuiAccordion = styled(EuiAccordion)` .euiAccordion__button { color: ${({ theme }) => theme.eui.euiColorPrimary}; } + .euiAccordion__childWrapper { + -webkit-transition: none; + } `; const StyledEuiCodeBlock = styled(EuiCodeBlock)` @@ -38,12 +42,12 @@ const LiveQueryQueryFieldComponent: React.FC = ({ disabled, handleSubmitForm, }) => { - const { watch, resetField } = useFormContext(); - const [advancedContentState, setAdvancedContentState] = - useState('closed'); + const { formState, watch, resetField } = useFormContext(); + const [advancedContentState, setAdvancedContentState] = useState( + () => (isEmpty(formState.defaultValues?.ecs_mapping) ? 'closed' : 'open') + ); const permissions = useKibana().services.application.capabilities.osquery; - const [ecsMapping, queryType] = watch(['ecs_mapping', 'queryType']); - + const [queryType] = watch(['queryType']); const { field: { onChange, value }, fieldState: { error }, @@ -60,12 +64,6 @@ const LiveQueryQueryFieldComponent: React.FC = ({ defaultValue: '', }); - useEffect(() => { - if (!isEmpty(ecsMapping) && advancedContentState === 'closed') { - setAdvancedContentState('open'); - } - }, [advancedContentState, ecsMapping]); - const handleSavedQueryChange: SavedQueriesDropdownProps['onChange'] = useCallback( (savedQuery) => { if (savedQuery) { @@ -155,6 +153,7 @@ const LiveQueryQueryFieldComponent: React.FC = ({ forceState={advancedContentState} onToggle={handleToggle} buttonContent="Advanced" + data-test-subj="advanced-accordion-content" >