From 9ff2b2cd78cd5ca2609b41c723cde14d740e387f Mon Sep 17 00:00:00 2001
From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>
Date: Thu, 6 Feb 2020 19:21:40 -0500
Subject: [PATCH] fix detetections tabs

---
 .../public/components/link_to/link_to.tsx     |  2 --
 .../detection_engine/detection_engine.tsx     | 35 ++++++-------------
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx b/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
index 3eda945c9224e..dc8c696301611 100644
--- a/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
@@ -62,13 +62,11 @@ export const LinkToPage = React.memo<LinkToPageProps>(({ match }) => (
       component={RedirectToDetectionEnginePage}
       exact
       path={`${match.url}/:pageName(${SiemPageName.detections})`}
-      strict
     />
     <Route
       component={RedirectToDetectionEnginePage}
       exact
       path={`${match.url}/:pageName(${SiemPageName.detections})/:tabName(${DetectionEngineTab.alerts}|${DetectionEngineTab.signals})`}
-      strict
     />
     <Route
       component={RedirectToRulesPage}
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx
index ff6722840fd6b..89252d3ee222d 100644
--- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/detection_engine.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiSpacer, EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiButton, EuiSpacer } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
@@ -24,6 +24,7 @@ import {
 } from '../../components/link_to/redirect_to_detection_engine';
 import { SiemSearchBar } from '../../components/search_bar';
 import { WrapperPage } from '../../components/wrapper_page';
+import { SiemNavigation } from '../../components/navigation';
 import { State } from '../../store';
 import { inputsSelectors } from '../../store/inputs';
 import { setAbsoluteRangeDatePicker as dispatchSetAbsoluteRangeDatePicker } from '../../store/inputs/actions';
@@ -60,18 +61,22 @@ export interface DispatchProps {
 
 type DetectionEnginePageComponentProps = ReduxProps & DispatchProps;
 
-const detectionsTabs = [
-  {
+const detectionsTabs = {
+  [DetectionEngineTab.signals]: {
     id: DetectionEngineTab.signals,
     name: i18n.SIGNAL,
+    href: getDetectionEngineTabUrl(DetectionEngineTab.signals),
     disabled: false,
+    urlKey: 'detections',
   },
-  {
+  [DetectionEngineTab.alerts]: {
     id: DetectionEngineTab.alerts,
     name: i18n.ALERT,
+    href: getDetectionEngineTabUrl(DetectionEngineTab.alerts),
     disabled: false,
+    urlKey: 'detections',
   },
-];
+};
 
 const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps> = ({
   filters,
@@ -98,24 +103,6 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
     [setAbsoluteRangeDatePicker]
   );
 
-  const tabs = useMemo(
-    () => (
-      <EuiTabs>
-        {detectionsTabs.map(tab => (
-          <EuiTab
-            isSelected={tab.id === tabName}
-            disabled={tab.disabled}
-            key={tab.id}
-            href={getDetectionEngineTabUrl(tab.id)}
-          >
-            {tab.name}
-          </EuiTab>
-        ))}
-      </EuiTabs>
-    ),
-    [detectionsTabs, tabName]
-  );
-
   const indexToAdd = useMemo(() => (signalIndexName == null ? [] : [signalIndexName]), [
     signalIndexName,
   ]);
@@ -169,7 +156,7 @@ const DetectionEnginePageComponent: React.FC<DetectionEnginePageComponentProps>
                 <GlobalTime>
                   {({ to, from, deleteQuery, setQuery }) => (
                     <>
-                      {tabs}
+                      <SiemNavigation navTabs={detectionsTabs} />
                       <EuiSpacer />
                       {tabName === DetectionEngineTab.signals && (
                         <>