[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.

![scrollable details](https://github.com/user-attachments/assets/bb895de2-cade-4f89-8dcd-643349eca115)

#### 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**

![details before](https://github.com/user-attachments/assets/e6698b38-2899-4ded-84f1-ad0d00418245)

**After**

![details after](https://github.com/user-attachments/assets/35e387aa-659a-4b6e-b5a9-d2b0972c98b0)

- 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**

![filter menu before](https://github.com/user-attachments/assets/8e930247-3fec-4ff2-b4dc-0d49f7248b8f)

**After**

![filter menu after](https://github.com/user-attachments/assets/b874ff2c-8000-4f0f-a542-0366acbdcce2)
This commit is contained in:
Andrew Macri 2025-03-10 11:34:35 -04:00 committed by GitHub
parent cf06906ab1
commit ecdea5abaa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 8 deletions

View file

@ -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');
}
);
});
});

View file

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

View file

@ -164,6 +164,7 @@ const AlertSelectionQueryComponent: React.FC<Props> = ({
showDatePicker={false}
showFilterBar={true}
showQueryInput={true}
showSavedQueryControls={false}
showSubmitButton={false}
isLoading={isLoadingIndexPattern}
onFiltersUpdated={onFiltersUpdated}