[Defend Workflows][Bug]Allow collapse on advanced click when adding o…

…squery action (#152811)
elastic · Mar 8, 2023 · 6693ddb · 6693ddb
1 parent 586f9a1
commit 6693ddb
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
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
@@ -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
@@ -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<LiveQueryQueryFieldProps> = ({
   disabled,
   handleSubmitForm,
 }) => {
-  const { watch, resetField } = useFormContext();
-  const [advancedContentState, setAdvancedContentState] =
-    useState<EuiAccordionProps['forceState']>('closed');
+  const { formState, watch, resetField } = useFormContext<LiveQueryFormFields>();
+  const [advancedContentState, setAdvancedContentState] = useState<EuiAccordionProps['forceState']>(
+    () => (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<LiveQueryQueryFieldProps> = ({
     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<LiveQueryQueryFieldProps> = ({
           forceState={advancedContentState}
           onToggle={handleToggle}
           buttonContent="Advanced"
+          data-test-subj="advanced-accordion-content"
         >
           <EuiSpacer size="xs" />
           <ECSMappingEditorField euiFieldProps={ecsFieldProps} />