From ba53b41fd4236b47206c26427ac6690421297cba Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 22 Feb 2024 05:27:19 -0500
Subject: [PATCH] [8.13] fix: [Rules &gt; Rule detail][AXE-CORE]: Interactive
 controls must not be nested (#177278) (#177556)

# Backport

This will backport the following commits from `main` to `8.13`:
- [fix: [Rules &gt; Rule detail][AXE-CORE]: Interactive controls must
not be nested (#177278)](https://github.com/elastic/kibana/pull/177278)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-02-22T09:02:30Z","message":"fix:
[Rules > Rule detail][AXE-CORE]: Interactive controls must not be nested
(#177278)\n\nCloses:
https://github.com/elastic/security-team/issues/8617\r\n\r\n#
Description \r\n\r\nThe [axe browser plugin](https://deque.com/axe) is
reporting a nested\r\nbutton (interactive control)in the Rule detail
view for toggling the\r\nElastic AI assistant. This PR address that
issue by removing extra\r\n`EuiButton` wrapping\r\n\r\n# Screens
\r\n\r\n\r\n![image](https://github.com/elastic/kibana/assets/20072247/4fa51c27-eb82-46d3-a071-5d29e944aa5e)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"03a737266fa731dd490ed77abe865903d65ef7bc","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection Rule
Management","Feature:Rule Details","v8.13.0","v8.14.0"],"title":"fix:
[Rules > Rule detail][AXE-CORE]: Interactive controls must not be
nested","number":177278,"url":"https://github.com/elastic/kibana/pull/177278","mergeCommit":{"message":"fix:
[Rules > Rule detail][AXE-CORE]: Interactive controls must not be nested
(#177278)\n\nCloses:
https://github.com/elastic/security-team/issues/8617\r\n\r\n#
Description \r\n\r\nThe [axe browser plugin](https://deque.com/axe) is
reporting a nested\r\nbutton (interactive control)in the Rule detail
view for toggling the\r\nElastic AI assistant. This PR address that
issue by removing extra\r\n`EuiButton` wrapping\r\n\r\n# Screens
\r\n\r\n\r\n![image](https://github.com/elastic/kibana/assets/20072247/4fa51c27-eb82-46d3-a071-5d29e944aa5e)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"03a737266fa731dd490ed77abe865903d65ef7bc"}},"sourceBranch":"main","suggestedTargetBranches":["8.13"],"targetPullRequestStates":[{"branch":"8.13","label":"v8.13.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/177278","number":177278,"mergeCommit":{"message":"fix:
[Rules > Rule detail][AXE-CORE]: Interactive controls must not be nested
(#177278)\n\nCloses:
https://github.com/elastic/security-team/issues/8617\r\n\r\n#
Description \r\n\r\nThe [axe browser plugin](https://deque.com/axe) is
reporting a nested\r\nbutton (interactive control)in the Rule detail
view for toggling the\r\nElastic AI assistant. This PR address that
issue by removing extra\r\n`EuiButton` wrapping\r\n\r\n# Screens
\r\n\r\n\r\n![image](https://github.com/elastic/kibana/assets/20072247/4fa51c27-eb82-46d3-a071-5d29e944aa5e)\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"03a737266fa731dd490ed77abe865903d65ef7bc"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
---
 .../rule_status_failed_callout.tsx            | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_execution_status/rule_status_failed_callout.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_execution_status/rule_status_failed_callout.tsx
index 0d1777e26c553..ba7f57aba5648 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_execution_status/rule_status_failed_callout.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_execution_status/rule_status_failed_callout.tsx
@@ -7,7 +7,7 @@
 
 import React, { useCallback } from 'react';
 
-import { EuiButton, EuiCallOut, EuiCodeBlock } from '@elastic/eui';
+import { EuiCallOut, EuiCodeBlock } from '@elastic/eui';
 
 import { NewChat } from '@kbn/elastic-assistant';
 import { FormattedDate } from '../../../../common/components/formatted_date';
@@ -76,19 +76,17 @@ const RuleStatusFailedCallOutComponent: React.FC<RuleStatusFailedCallOutProps> =
           {message}
         </EuiCodeBlock>
         {hasAssistantPrivilege && (
-          <EuiButton color={color} size="s">
-            <NewChat
-              category="detection-rules"
-              color={color}
-              conversationId={i18nAssistant.DETECTION_RULES_CONVERSATION_ID}
-              description={i18n.ASK_ASSISTANT_DESCRIPTION}
-              getPromptContext={getPromptContext}
-              suggestedUserPrompt={i18n.ASK_ASSISTANT_USER_PROMPT}
-              tooltip={i18n.ASK_ASSISTANT_TOOLTIP}
-            >
-              {i18n.ASK_ASSISTANT_ERROR_BUTTON}
-            </NewChat>
-          </EuiButton>
+          <NewChat
+            category="detection-rules"
+            color={color}
+            conversationId={i18nAssistant.DETECTION_RULES_CONVERSATION_ID}
+            description={i18n.ASK_ASSISTANT_DESCRIPTION}
+            getPromptContext={getPromptContext}
+            suggestedUserPrompt={i18n.ASK_ASSISTANT_USER_PROMPT}
+            tooltip={i18n.ASK_ASSISTANT_TOOLTIP}
+          >
+            {i18n.ASK_ASSISTANT_ERROR_BUTTON}
+          </NewChat>
         )}
       </EuiCallOut>
     </div>