From ca9dcf0346180e4085f518709b66ef8c3faa7ab3 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 24 Jan 2023 13:48:18 -0800
Subject: [PATCH] Adjust styling for Finding details flyout (#369) (#382)

* [FEATURE] Detector must have at least one alert set #288

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [FEATURE] Adjust styling for Finding details flyout #121

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [FEATURE] Expand the chart's vertical domain so that top positioning elements are not clipped. #334

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [FEATURE] Expand the chart's vertical domain so that top positioning elements are not clipped. #334

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Adjust styling for Finding details flyout #369

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* Adjust styling for Finding details flyout #369

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
(cherry picked from commit ad62548ec57a5960624ae3c1605b685cfe243329)

Co-authored-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 cypress/integration/3_alerts.spec.js          |  4 +-
 .../components/FindingDetailsFlyout.tsx       | 93 +++++++++----------
 2 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/cypress/integration/3_alerts.spec.js b/cypress/integration/3_alerts.spec.js
index 332328c82..0dfb6e0cd 100644
--- a/cypress/integration/3_alerts.spec.js
+++ b/cypress/integration/3_alerts.spec.js
@@ -213,10 +213,12 @@ describe('Alerts', () => {
 
       // Check the rule details accordion for the expected values
       cy.get('[data-test-subj="finding-details-flyout-rule-accordion-0"]').within(() => {
-        // Confirm the accordion button contains the expected text
+        // Confirm the accordion button contains the expected name
         cy.get('[data-test-subj="finding-details-flyout-rule-accordion-button"]').contains(
           'USB Device Plugged'
         );
+
+        // Confirm the accordion button contains the expected severity
         cy.get('[data-test-subj="finding-details-flyout-rule-accordion-button"]').contains(
           'Severity: Low'
         );
diff --git a/public/pages/Findings/components/FindingDetailsFlyout.tsx b/public/pages/Findings/components/FindingDetailsFlyout.tsx
index 413a393fe..c33fd88d2 100644
--- a/public/pages/Findings/components/FindingDetailsFlyout.tsx
+++ b/public/pages/Findings/components/FindingDetailsFlyout.tsx
@@ -19,6 +19,7 @@ import {
   EuiFormRow,
   EuiHorizontalRule,
   EuiLink,
+  EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -111,6 +112,7 @@ export default class FindingDetailsFlyout extends Component<
         <div key={key}>
           <EuiAccordion
             id={`${key}`}
+            buttonClassName="euiAccordionForm__button"
             buttonContent={
               <div data-test-subj={'finding-details-flyout-rule-accordion-button'}>
                 <EuiText size={'s'}>{fullRule.title}</EuiText>
@@ -122,59 +124,57 @@ export default class FindingDetailsFlyout extends Component<
             initialIsOpen={rules.length === 1}
             data-test-subj={`finding-details-flyout-rule-accordion-${key}`}
           >
-            <EuiSpacer size={'m'} />
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                {/*//TODO: Refactor EuiLink to filter rules table to the specific rule.*/}
-                <EuiFormRow label={'Rule name'}>
-                  <EuiLink
-                    onClick={() => this.showRuleDetails(fullRule, rule.id)}
-                    data-test-subj={`finding-details-flyout-${fullRule.title}-details`}
-                  >
-                    {fullRule.title || DEFAULT_EMPTY_DATA}
-                  </EuiLink>
-                </EuiFormRow>
-              </EuiFlexItem>
-
-              <EuiFlexItem>
-                <EuiFormRow
-                  label={'Rule severity'}
-                  data-test-subj={'finding-details-flyout-rule-severity'}
-                >
-                  <EuiText>{severity || DEFAULT_EMPTY_DATA}</EuiText>
-                </EuiFormRow>
-              </EuiFlexItem>
+            <EuiPanel color="subdued">
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFormRow label={'Rule name'}>
+                    <EuiLink
+                      onClick={() => this.showRuleDetails(fullRule, rule.id)}
+                      data-test-subj={`finding-details-flyout-${fullRule.title}-details`}
+                    >
+                      {fullRule.title || DEFAULT_EMPTY_DATA}
+                    </EuiLink>
+                  </EuiFormRow>
+                </EuiFlexItem>
 
-              <EuiFlexItem>
-                <EuiFormRow
-                  label={'Log type'}
-                  data-test-subj={'finding-details-flyout-rule-category'}
-                >
-                  <EuiText>
-                    {capitalizeFirstLetter(fullRule.category) || DEFAULT_EMPTY_DATA}
-                  </EuiText>
-                </EuiFormRow>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={'Rule severity'}
+                    data-test-subj={'finding-details-flyout-rule-severity'}
+                  >
+                    <EuiText>{severity || DEFAULT_EMPTY_DATA}</EuiText>
+                  </EuiFormRow>
+                </EuiFlexItem>
 
-            <EuiSpacer size={'m'} />
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={'Log type'}
+                    data-test-subj={'finding-details-flyout-rule-category'}
+                  >
+                    <EuiText>
+                      {capitalizeFirstLetter(fullRule.category) || DEFAULT_EMPTY_DATA}
+                    </EuiText>
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </EuiFlexGroup>
 
-            <EuiFormRow
-              label={'Description'}
-              data-test-subj={'finding-details-flyout-rule-description'}
-            >
-              <EuiText>{fullRule.description || DEFAULT_EMPTY_DATA}</EuiText>
-            </EuiFormRow>
+              <EuiSpacer size={'m'} />
 
-            <EuiSpacer size={'m'} />
+              <EuiFormRow
+                label={'Description'}
+                data-test-subj={'finding-details-flyout-rule-description'}
+              >
+                <EuiText>{fullRule.description || DEFAULT_EMPTY_DATA}</EuiText>
+              </EuiFormRow>
 
-            <EuiFormRow label={'Tags'} data-test-subj={'finding-details-flyout-rule-tags'}>
-              <EuiText>{this.renderTags() || DEFAULT_EMPTY_DATA}</EuiText>
-            </EuiFormRow>
+              <EuiSpacer size={'m'} />
 
-            <EuiSpacer size={'l'} />
+              <EuiFormRow label={'Tags'} data-test-subj={'finding-details-flyout-rule-tags'}>
+                <EuiText>{this.renderTags() || DEFAULT_EMPTY_DATA}</EuiText>
+              </EuiFormRow>
+            </EuiPanel>
           </EuiAccordion>
-          {rules.length > 1 && <EuiHorizontalRule />}
+          {rules.length > 1 && <EuiHorizontalRule margin={'xs'} />}
         </div>
       );
     });
@@ -352,7 +352,6 @@ export default class FindingDetailsFlyout extends Component<
           </EuiFlexGroup>
 
           <EuiSpacer size={'m'} />
-
           <EuiTitle size={'s'}>
             <h3>Rule details</h3>
           </EuiTitle>