From 67e02f2f209d3de4a02e8945b8fa3de82bd892a1 Mon Sep 17 00:00:00 2001
From: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
Date: Wed, 1 Feb 2023 00:54:27 +0100
Subject: [PATCH] Detector details page wrappers fix (#387)

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

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

* [BUG] The detector details shouldn't have a wrapper around the whole page #384

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

---------

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 .../containers/Detector/DetectorDetails.tsx   |  5 ++--
 .../components/RulesTable/RulesTable.tsx      | 26 +++++++++----------
 public/pages/Rules/containers/Rules/Rules.tsx |  6 +++--
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/public/pages/Detectors/containers/Detector/DetectorDetails.tsx b/public/pages/Detectors/containers/Detector/DetectorDetails.tsx
index b10d22d56..21cc9580b 100644
--- a/public/pages/Detectors/containers/Detector/DetectorDetails.tsx
+++ b/public/pages/Detectors/containers/Detector/DetectorDetails.tsx
@@ -9,7 +9,6 @@ import {
   EuiContextMenuPanel,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPanel,
   EuiPopover,
   EuiSpacer,
   EuiTab,
@@ -328,7 +327,7 @@ export class DetectorDetails extends React.Component<DetectorDetailsProps, Detec
     const { selectedTabContent } = this.state;
 
     return (
-      <EuiPanel>
+      <>
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiFlexGroup alignItems="center">
@@ -360,7 +359,7 @@ export class DetectorDetails extends React.Component<DetectorDetailsProps, Detec
         <EuiTabs>{this.renderTabs()}</EuiTabs>
         <EuiSpacer size="xl" />
         {selectedTabContent}
-      </EuiPanel>
+      </>
     );
   }
 }
diff --git a/public/pages/Rules/components/RulesTable/RulesTable.tsx b/public/pages/Rules/components/RulesTable/RulesTable.tsx
index 66dd3687e..d4abb4bd2 100644
--- a/public/pages/Rules/components/RulesTable/RulesTable.tsx
+++ b/public/pages/Rules/components/RulesTable/RulesTable.tsx
@@ -9,7 +9,7 @@ import {
   getRulesTableSearchConfig,
   RuleTableItem,
 } from '../../utils/helpers';
-import { CriteriaWithPagination, EuiInMemoryTable, EuiPanel } from '@elastic/eui';
+import { CriteriaWithPagination, EuiInMemoryTable } from '@elastic/eui';
 
 export interface RulesTableProps {
   ruleItems: RuleTableItem[];
@@ -21,18 +21,16 @@ export const RulesTable: React.FC<RulesTableProps> = ({ ruleItems, loading, show
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
 
   return (
-    <EuiPanel>
-      <EuiInMemoryTable
-        loading={loading}
-        items={ruleItems}
-        columns={getRulesTableColumns(showRuleDetails)}
-        search={getRulesTableSearchConfig()}
-        pagination={{ ...pagination, pageSizeOptions: [10, 25, 50] }}
-        onTableChange={(nextValues: CriteriaWithPagination<any>) =>
-          setPagination({ pageIndex: nextValues.page.index, pageSize: nextValues.page.size })
-        }
-        sorting={true}
-      />
-    </EuiPanel>
+    <EuiInMemoryTable
+      loading={loading}
+      items={ruleItems}
+      columns={getRulesTableColumns(showRuleDetails)}
+      search={getRulesTableSearchConfig()}
+      pagination={{ ...pagination, pageSizeOptions: [10, 25, 50] }}
+      onTableChange={(nextValues: CriteriaWithPagination<any>) =>
+        setPagination({ pageIndex: nextValues.page.index, pageSize: nextValues.page.size })
+      }
+      sorting={true}
+    />
   );
 };
diff --git a/public/pages/Rules/containers/Rules/Rules.tsx b/public/pages/Rules/containers/Rules/Rules.tsx
index 43e6b9603..e17eee4a9 100644
--- a/public/pages/Rules/containers/Rules/Rules.tsx
+++ b/public/pages/Rules/containers/Rules/Rules.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { ServicesContext } from '../../../../services';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -119,7 +119,9 @@ export const Rules: React.FC<RulesProps> = (props) => {
           <EuiSpacer size={'m'} />
         </EuiFlexItem>
         <EuiFlexItem>
-          <RulesTable loading={loading} ruleItems={ruleItems} showRuleDetails={setFlyoutData} />
+          <EuiPanel>
+            <RulesTable loading={loading} ruleItems={ruleItems} showRuleDetails={setFlyoutData} />
+          </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>