[ENDPOINT] Reintroduced tabs to endpoint management and migrated pages to use common security components

x-pack/plugins/security_solution/public/common/components/wrapper_page/index.tsx

@@ -8,13 +8,14 @@ import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
+import { CommonProps } from '@elastic/eui/src/components/common';
 import { useFullScreen } from '../../containers/use_full_screen';
 import { gutterTimeline } from '../../lib/helpers';
 import { AppGlobalStyle } from '../page/index';
 
-const Wrapper = styled.div`
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l}`};
+const Wrapper = styled.div<{ noTimeline?: boolean }>`
+  padding: ${(props) => `${props.theme.eui.paddingSizes.l}`};
+
   &.siemWrapperPage--restrictWidthDefault,
   &.siemWrapperPage--restrictWidthCustom {
     box-sizing: content-box;
@@ -29,6 +30,10 @@ const Wrapper = styled.div`
     height: 100%;
   }
 
+  &.siemWrapperPage--withTimeline {
+    padding-right: ${gutterTimeline};
+  }
+
   &.siemWrapperPage--noPadding {
     padding: 0;
   }
@@ -38,18 +43,19 @@ Wrapper.displayName = 'Wrapper';
 
 interface WrapperPageProps {
   children: React.ReactNode;
-  className?: string;
   restrictWidth?: boolean | number | string;
   style?: Record<string, string>;
   noPadding?: boolean;
+  noTimeline?: boolean;
 }
 
-const WrapperPageComponent: React.FC<WrapperPageProps> = ({
+const WrapperPageComponent: React.FC<WrapperPageProps & CommonProps> = ({
   children,
   className,
   restrictWidth,
   style,
   noPadding,
+  noTimeline,
 }) => {
   const { globalFullScreen, setGlobalFullScreen } = useFullScreen();
   useEffect(() => {
@@ -59,6 +65,7 @@ const WrapperPageComponent: React.FC<WrapperPageProps> = ({
   const classes = classNames(className, {
     siemWrapperPage: true,
     'siemWrapperPage--noPadding': noPadding,
+    'siemWrapperPage--withTimeline': !noTimeline,
     'siemWrapperPage--fullHeight': globalFullScreen,
     'siemWrapperPage--restrictWidthDefault':
       restrictWidth && typeof restrictWidth === 'boolean' && restrictWidth === true,

x-pack/plugins/security_solution/public/management/components/management_tabs.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { AdministrationSubTab } from '../types';
+import { SecurityPageName } from '../../app/types';
+import { NavTab } from '../../common/components/navigation/types';
+
+export const managementTabs: Record<string, NavTab> = {
+  [AdministrationSubTab.endpoints]: {
+    name: i18n.translate('xpack.securitySolution.managementTabs.hosts', {
+      defaultMessage: 'Hosts',
+    }),
+    id: AdministrationSubTab.endpoints,
+    href: '/hosts',
+    urlKey: 'administration',
+    pageId: SecurityPageName.administration,
+    disabled: false,
+  },
+};