Skip to content

Commit 42e1e14

Browse files
kibanamachineandrew-goldstein
kibanamachine
and
andrew-goldstein
authored
[9.0] [Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges (#213666) (#213775)
# Backport This will backport the following commits from `main` to `9.0`: - [[Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges (#213666)](#213666) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Andrew Macri","email":"andrew.macri@elastic.co"},"sourceCommit":{"committedDate":"2025-03-10T15:34:35Z","message":"[Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges (#213666)\n\n### [Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges\n\nThis 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>.\n\nIt also hides the `Load query` and `Save query` menu items from the filter popup menu in the settings flyout.\n\n![scrollable details](https://github.com/user-attachments/assets/bb895de2-cade-4f89-8dcd-643349eca115)\n\n#### Details\n\n- 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:\n\n**Before**\n\n![details before](https://github.com/user-attachments/assets/e6698b38-2899-4ded-84f1-ad0d00418245)\n\n**After**\n\n![details after](https://github.com/user-attachments/assets/35e387aa-659a-4b6e-b5a9-d2b0972c98b0)\n\n- 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:\n\n**Before**\n\n![filter menu before](https://github.com/user-attachments/assets/8e930247-3fec-4ff2-b4dc-0d49f7248b8f)\n\n**After**\n\n![filter menu after](https://github.com/user-attachments/assets/b874ff2c-8000-4f0f-a542-0366acbdcce2)","sha":"ecdea5abaa2a2c318056e8474c0d513e9c6f535c","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team: SecuritySolution","Team:Security Generative AI","backport:version","v8.18.0","v9.1.0","v8.19.0","v8.18.1"],"title":"[Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges","number":213666,"url":"https://github.com/elastic/kibana/pull/213666","mergeCommit":{"message":"[Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges (#213666)\n\n### [Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges\n\nThis 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>.\n\nIt also hides the `Load query` and `Save query` menu items from the filter popup menu in the settings flyout.\n\n![scrollable details](https://github.com/user-attachments/assets/bb895de2-cade-4f89-8dcd-643349eca115)\n\n#### Details\n\n- 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:\n\n**Before**\n\n![details before](https://github.com/user-attachments/assets/e6698b38-2899-4ded-84f1-ad0d00418245)\n\n**After**\n\n![details after](https://github.com/user-attachments/assets/35e387aa-659a-4b6e-b5a9-d2b0972c98b0)\n\n- 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:\n\n**Before**\n\n![filter menu before](https://github.com/user-attachments/assets/8e930247-3fec-4ff2-b4dc-0d49f7248b8f)\n\n**After**\n\n![filter menu after](https://github.com/user-attachments/assets/b874ff2c-8000-4f0f-a542-0366acbdcce2)","sha":"ecdea5abaa2a2c318056e8474c0d513e9c6f535c"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/213666","number":213666,"mergeCommit":{"message":"[Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges (#213666)\n\n### [Security Solution] [Attack discovery] Fixes overflow styling for markdown with XL badges\n\nThis 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>.\n\nIt also hides the `Load query` and `Save query` menu items from the filter popup menu in the settings flyout.\n\n![scrollable details](https://github.com/user-attachments/assets/bb895de2-cade-4f89-8dcd-643349eca115)\n\n#### Details\n\n- 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:\n\n**Before**\n\n![details before](https://github.com/user-attachments/assets/e6698b38-2899-4ded-84f1-ad0d00418245)\n\n**After**\n\n![details after](https://github.com/user-attachments/assets/35e387aa-659a-4b6e-b5a9-d2b0972c98b0)\n\n- 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:\n\n**Before**\n\n![filter menu before](https://github.com/user-attachments/assets/8e930247-3fec-4ff2-b4dc-0d49f7248b8f)\n\n**After**\n\n![filter menu after](https://github.com/user-attachments/assets/b874ff2c-8000-4f0f-a542-0366acbdcce2)","sha":"ecdea5abaa2a2c318056e8474c0d513e9c6f535c"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> --------- Co-authored-by: Andrew Macri <andrew.macri@elastic.co>
1 parent 755e23a commit 42e1e14

2 files changed

Lines changed: 38 additions & 8 deletions

File tree

  • x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab

‎x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/index.test.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,4 +173,24 @@ The user Administrator opened a malicious Microsoft Word document (C:\\Program F
173173
expect(detailsMarkdown.textContent).toEqual(expected);
174174
});
175175
});
176+
177+
describe('horizontal overflow for content', () => {
178+
it.each([['summaryContent'], ['detailsContent']])(
179+
'enables horizontal scrolling for the %s content',
180+
(contentTestId) => {
181+
render(
182+
<TestProviders>
183+
<AttackDiscoveryTab
184+
attackDiscovery={mockAttackDiscovery}
185+
replacements={mockReplacements}
186+
/>
187+
</TestProviders>
188+
);
189+
190+
const content = screen.getByTestId(contentTestId);
191+
192+
expect(content).toHaveStyle('overflow-x: auto');
193+
}
194+
);
195+
});
176196
});

‎x-pack/solutions/security/plugins/security_solution/public/attack_discovery/pages/results/attack_discovery_panel/tabs/attack_discovery_tab/index.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ import { AttackDiscoveryMarkdownFormatter } from '../../../attack_discovery_mark
1919
import * as i18n from './translations';
2020
import { ViewInAiAssistant } from '../../view_in_ai_assistant';
2121

22+
const scrollable: React.CSSProperties = {
23+
overflowX: 'auto',
24+
scrollbarWidth: 'thin',
25+
};
26+
2227
interface Props {
2328
attackDiscovery: AttackDiscovery;
2429
replacements?: Replacements;
@@ -66,21 +71,26 @@ const AttackDiscoveryTabComponent: React.FC<Props> = ({
6671
<h2>{i18n.SUMMARY}</h2>
6772
</EuiTitle>
6873
<EuiSpacer size="s" />
69-
<AttackDiscoveryMarkdownFormatter
70-
disableActions={showAnonymized}
71-
markdown={showAnonymized ? summaryMarkdown : summaryMarkdownWithReplacements}
72-
/>
74+
<div style={scrollable} data-test-subj="summaryContent">
75+
<AttackDiscoveryMarkdownFormatter
76+
disableActions={showAnonymized}
77+
markdown={showAnonymized ? summaryMarkdown : summaryMarkdownWithReplacements}
78+
/>
79+
</div>
7380

7481
<EuiSpacer />
7582

7683
<EuiTitle data-test-subj="detailsTitle" size="xs">
7784
<h2>{i18n.DETAILS}</h2>
7885
</EuiTitle>
7986
<EuiSpacer size="s" />
80-
<AttackDiscoveryMarkdownFormatter
81-
disableActions={showAnonymized}
82-
markdown={showAnonymized ? detailsMarkdown : detailsMarkdownWithReplacements}
83-
/>
87+
88+
<div style={scrollable} data-test-subj="detailsContent">
89+
<AttackDiscoveryMarkdownFormatter
90+
disableActions={showAnonymized}
91+
markdown={showAnonymized ? detailsMarkdown : detailsMarkdownWithReplacements}
92+
/>
93+
</div>
8494

8595
<EuiSpacer />
8696

0 commit comments

Comments
 (0)