[8.7] [Defend Workflows][Bug]Allow collapse on advanced click when adding osquery action (#152811) (#152893)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Defend Workflows][Bug]Allow collapse on advanced click when adding
osquery action (#152811)](https://github.com/elastic/kibana/pull/152811)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Konrad
Szwarc","email":"konrad.szwarc@elastic.co"},"sourceCommit":{"committedDate":"2023-03-08T09:13:41Z","message":"[Defend
Workflows][Bug]Allow collapse on advanced click when adding osquery
action
(#152811)","sha":"6693ddb22fe9db99ce8661312eb7a5b9c0f20f6a","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Defend
Workflows","Feature:Osquery","v8.7.0","v8.8.0"],"number":152811,"url":"https://github.com/elastic/kibana/pull/152811","mergeCommit":{"message":"[Defend
Workflows][Bug]Allow collapse on advanced click when adding osquery
action
(#152811)","sha":"6693ddb22fe9db99ce8661312eb7a5b9c0f20f6a"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/152811","number":152811,"mergeCommit":{"message":"[Defend
Workflows][Bug]Allow collapse on advanced click when adding osquery
action (#152811)","sha":"6693ddb22fe9db99ce8661312eb7a5b9c0f20f6a"}}]}]
BACKPORT-->
This commit is contained in:
Konrad Szwarc 2023-03-08 15:50:38 +01:00 committed by GitHub
parent 9428e82bc6
commit 44300c29db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 14 deletions

View file

@ -20,12 +20,12 @@ import {
} from '../../tasks/live_query';
describe('EcsMapping', () => {
before(() => {
beforeEach(() => {
login(ROLES.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;');
@ -51,4 +51,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');
});
});

View file

@ -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} />