[8.10] [Security Solution] UI collapse on rule Preview under create rule (#164973) (#165443)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution] UI collapse on rule Preview under create rule
(#164973)](https://github.com/elastic/kibana/pull/164973)

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

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

<!--BACKPORT [{"author":{"name":"Ievgen
Sorokopud","email":"ievgen.sorokopud@elastic.co"},"sourceCommit":{"committedDate":"2023-09-01T09:50:03Z","message":"[Security
Solution] UI collapse on rule Preview under create rule (#164973)\n\n##
Summary\r\n\r\nOriginal ticket:
https://github.com/elastic/kibana/issues/163472\r\n\r\nThis PR fixes
Rule Preview UI which is broken when user closes the\r\npreview
component.\r\n\r\n**Broken State:**\r\n\r\n<img width=\"1724\"
alt=\"Screenshot 2023-08-28 at 14 56
42\"\r\nsrc=\"ec123a06-fef1-47c2-8b29-3567b8037cff\">\r\n\r\n\r\n**Fixed
UI:**\r\n\r\n<img width=\"1723\" alt=\"Screenshot 2023-08-28 at 14 55
23\"\r\nsrc=\"fb4955fc-77af-4f02-b326-cec01f09f4ed\">","sha":"9de752d73b66ebcfea257442738c485e78ba241e","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:
SecuritySolution","ci:cloud-deploy","Team:Detection
Engine","v8.10.0","v8.11.0"],"number":164973,"url":"https://github.com/elastic/kibana/pull/164973","mergeCommit":{"message":"[Security
Solution] UI collapse on rule Preview under create rule (#164973)\n\n##
Summary\r\n\r\nOriginal ticket:
https://github.com/elastic/kibana/issues/163472\r\n\r\nThis PR fixes
Rule Preview UI which is broken when user closes the\r\npreview
component.\r\n\r\n**Broken State:**\r\n\r\n<img width=\"1724\"
alt=\"Screenshot 2023-08-28 at 14 56
42\"\r\nsrc=\"ec123a06-fef1-47c2-8b29-3567b8037cff\">\r\n\r\n\r\n**Fixed
UI:**\r\n\r\n<img width=\"1723\" alt=\"Screenshot 2023-08-28 at 14 55
23\"\r\nsrc=\"fb4955fc-77af-4f02-b326-cec01f09f4ed\">","sha":"9de752d73b66ebcfea257442738c485e78ba241e"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164973","number":164973,"mergeCommit":{"message":"[Security
Solution] UI collapse on rule Preview under create rule (#164973)\n\n##
Summary\r\n\r\nOriginal ticket:
https://github.com/elastic/kibana/issues/163472\r\n\r\nThis PR fixes
Rule Preview UI which is broken when user closes the\r\npreview
component.\r\n\r\n**Broken State:**\r\n\r\n<img width=\"1724\"
alt=\"Screenshot 2023-08-28 at 14 56
42\"\r\nsrc=\"ec123a06-fef1-47c2-8b29-3567b8037cff\">\r\n\r\n\r\n**Fixed
UI:**\r\n\r\n<img width=\"1723\" alt=\"Screenshot 2023-08-28 at 14 55
23\"\r\nsrc=\"fb4955fc-77af-4f02-b326-cec01f09f4ed\">","sha":"9de752d73b66ebcfea257442738c485e78ba241e"}}]}]
BACKPORT-->

---------

Co-authored-by: Ievgen Sorokopud <ievgen.sorokopud@elastic.co>
This commit is contained in:
Kibana Machine 2023-09-03 09:11:26 -04:00 committed by GitHub
parent 23e36284c3
commit a14ebeab32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -12,7 +12,6 @@ import {
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiSpacer,
EuiSuperDatePicker,
EuiSuperUpdateButton,
@ -232,36 +231,32 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
<EuiSpacer />
</>
)}
<EuiFormRow
label={i18n.QUERY_PREVIEW_LABEL}
error={undefined}
isInvalid={false}
data-test-subj="rule-preview"
describedByIds={['rule-preview']}
>
<EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
<EuiSuperDatePicker
start={startDate}
end={endDate}
isDisabled={isDisabled}
onTimeChange={onTimeChange}
showUpdateButton={false}
commonlyUsedRanges={timeRanges}
onRefresh={onTimeframeRefresh}
data-test-subj="preview-time-frame"
<EuiText size="xs" data-test-subj="rule-preview">
<h4>{i18n.QUERY_PREVIEW_LABEL}</h4>
</EuiText>
<EuiSpacer size="xs" />
<EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
<EuiSuperDatePicker
start={startDate}
end={endDate}
isDisabled={isDisabled}
onTimeChange={onTimeChange}
showUpdateButton={false}
commonlyUsedRanges={timeRanges}
onRefresh={onTimeframeRefresh}
data-test-subj="preview-time-frame"
/>
<EuiFlexItem grow={false}>
<EuiSuperUpdateButton
isDisabled={isDateRangeInvalid || isDisabled}
iconType={isDirty ? 'kqlFunction' : 'refresh'}
onClick={onTimeframeRefresh}
color={isDirty ? 'success' : 'primary'}
fill={true}
data-test-subj="previewSubmitButton"
/>
<EuiFlexItem grow={false}>
<EuiSuperUpdateButton
isDisabled={isDateRangeInvalid || isDisabled}
iconType={isDirty ? 'kqlFunction' : 'refresh'}
onClick={onTimeframeRefresh}
color={isDirty ? 'success' : 'primary'}
fill={true}
data-test-subj="previewSubmitButton"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="l" />
{isPreviewRequestInProgress && <LoadingHistogram />}
{!isPreviewRequestInProgress && previewId && spaceId && (