From 227439b09f364e4b04f1ebd4404b38073fbc4fff Mon Sep 17 00:00:00 2001
From: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Date: Mon, 16 Jan 2023 18:21:52 +0100
Subject: [PATCH] [FEATURE] Adjust styling for Finding details flyout #121

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 cypress/integration/3_alerts.spec.js          |   8 --
 .../components/FindingDetailsFlyout.tsx       | 103 +++++++++---------
 2 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/cypress/integration/3_alerts.spec.js b/cypress/integration/3_alerts.spec.js
index 332328c82..bf6ca4dae 100644
--- a/cypress/integration/3_alerts.spec.js
+++ b/cypress/integration/3_alerts.spec.js
@@ -213,14 +213,6 @@ 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
-        cy.get('[data-test-subj="finding-details-flyout-rule-accordion-button"]').contains(
-          'USB Device Plugged'
-        );
-        cy.get('[data-test-subj="finding-details-flyout-rule-accordion-button"]').contains(
-          'Severity: Low'
-        );
-
         // Confirm the rule name
         cy.get('[data-test-subj="finding-details-flyout-USB Device Plugged-details"]').contains(
           'USB Device Plugged'
diff --git a/public/pages/Findings/components/FindingDetailsFlyout.tsx b/public/pages/Findings/components/FindingDetailsFlyout.tsx
index 413a393fe..afb63763a 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,68 +112,70 @@ export default class FindingDetailsFlyout extends Component<
         <div key={key}>
           <EuiAccordion
             id={`${key}`}
+            className="euiAccordionForm"
+            buttonClassName="euiAccordionForm__button"
             buttonContent={
               <div data-test-subj={'finding-details-flyout-rule-accordion-button'}>
-                <EuiText size={'s'}>{fullRule.title}</EuiText>
-                <EuiText size={'s'} color={'subdued'}>
-                  Severity: {severity}
-                </EuiText>
+                <EuiTitle size={'s'}>
+                  <h3>Rule details</h3>
+                </EuiTitle>
               </div>
             }
             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>
+            <EuiPanel color="subdued">
+              <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>
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={'Rule severity'}
+                    data-test-subj={'finding-details-flyout-rule-severity'}
+                  >
+                    <EuiText>{severity || DEFAULT_EMPTY_DATA}</EuiText>
+                  </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={'Log type'}
+                    data-test-subj={'finding-details-flyout-rule-category'}
+                  >
+                    <EuiText>
+                      {capitalizeFirstLetter(fullRule.category) || DEFAULT_EMPTY_DATA}
+                    </EuiText>
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </EuiFlexGroup>
 
-            <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={'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={'Tags'} data-test-subj={'finding-details-flyout-rule-tags'}>
-              <EuiText>{this.renderTags() || 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={'l'} />
+              <EuiSpacer size={'l'} />
+            </EuiPanel>
           </EuiAccordion>
           {rules.length > 1 && <EuiHorizontalRule />}
         </div>
@@ -353,10 +356,6 @@ export default class FindingDetailsFlyout extends Component<
 
           <EuiSpacer size={'m'} />
 
-          <EuiTitle size={'s'}>
-            <h3>Rule details</h3>
-          </EuiTitle>
-          <EuiSpacer size={'m'} />
           {this.renderRuleDetails(queries)}
           <EuiSpacer size="l" />
           {this.renderFindingDocuments()}