mirror of
https://github.com/elastic/kibana.git
synced 2025-04-25 02:09:32 -04:00
[Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges (#213666)
### [Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges This PR fixes an overflow styling issue when markdown contains badges that exceed the width of the container, as reported in <https://github.com/elastic/kibana/issues/213228>. It also hides the `Load query` and `Save query` menu items from the filter popup menu in the settings flyout.  #### Details - The overflow issue is fixed by enabling horizontal scrolling when badges exceed the width of the markdown container, as illustrated by the before and after screenshots below: **Before**  **After**  - The`Load query` and `Save query` menu items in the filter popup menu are now hidden, as illustrated by the before and after screenshots of the settings flyout below: **Before**  **After** 
This commit is contained in:
parent
cf06906ab1
commit
ecdea5abaa
3 changed files with 39 additions and 8 deletions
|
@ -173,4 +173,24 @@ The user Administrator opened a malicious Microsoft Word document (C:\\Program F
|
|||
expect(detailsMarkdown.textContent).toEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe('horizontal overflow for content', () => {
|
||||
it.each([['summaryContent'], ['detailsContent']])(
|
||||
'enables horizontal scrolling for the %s content',
|
||||
(contentTestId) => {
|
||||
render(
|
||||
<TestProviders>
|
||||
<AttackDiscoveryTab
|
||||
attackDiscovery={mockAttackDiscovery}
|
||||
replacements={mockReplacements}
|
||||
/>
|
||||
</TestProviders>
|
||||
);
|
||||
|
||||
const content = screen.getByTestId(contentTestId);
|
||||
|
||||
expect(content).toHaveStyle('overflow-x: auto');
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -19,6 +19,11 @@ import { AttackDiscoveryMarkdownFormatter } from '../../../attack_discovery_mark
|
|||
import * as i18n from './translations';
|
||||
import { ViewInAiAssistant } from '../../view_in_ai_assistant';
|
||||
|
||||
const scrollable: React.CSSProperties = {
|
||||
overflowX: 'auto',
|
||||
scrollbarWidth: 'thin',
|
||||
};
|
||||
|
||||
interface Props {
|
||||
attackDiscovery: AttackDiscovery;
|
||||
replacements?: Replacements;
|
||||
|
@ -66,10 +71,12 @@ const AttackDiscoveryTabComponent: React.FC<Props> = ({
|
|||
<h2>{i18n.SUMMARY}</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
<div style={scrollable} data-test-subj="summaryContent">
|
||||
<AttackDiscoveryMarkdownFormatter
|
||||
disableActions={showAnonymized}
|
||||
markdown={showAnonymized ? summaryMarkdown : summaryMarkdownWithReplacements}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<EuiSpacer />
|
||||
|
||||
|
@ -77,10 +84,13 @@ const AttackDiscoveryTabComponent: React.FC<Props> = ({
|
|||
<h2>{i18n.DETAILS}</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
|
||||
<div style={scrollable} data-test-subj="detailsContent">
|
||||
<AttackDiscoveryMarkdownFormatter
|
||||
disableActions={showAnonymized}
|
||||
markdown={showAnonymized ? detailsMarkdown : detailsMarkdownWithReplacements}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<EuiSpacer />
|
||||
|
||||
|
|
|
@ -164,6 +164,7 @@ const AlertSelectionQueryComponent: React.FC<Props> = ({
|
|||
showDatePicker={false}
|
||||
showFilterBar={true}
|
||||
showQueryInput={true}
|
||||
showSavedQueryControls={false}
|
||||
showSubmitButton={false}
|
||||
isLoading={isLoadingIndexPattern}
|
||||
onFiltersUpdated={onFiltersUpdated}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue