[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/common/constants.ts

@@ -13,6 +13,7 @@ export const MANAGEMENT_ROUTING_ROOT_PATH = '';
 export const MANAGEMENT_ROUTING_ENDPOINTS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${AdministrationSubTab.endpoints})`;
 export const MANAGEMENT_ROUTING_POLICIES_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${AdministrationSubTab.policies})`;
 export const MANAGEMENT_ROUTING_POLICY_DETAILS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${AdministrationSubTab.policies})/:policyId`;
+export const MANAGEMENT_ROUTING_TRUSTED_APPS_PATH = `${MANAGEMENT_ROUTING_ROOT_PATH}/:tabName(${AdministrationSubTab.trustedApps})`;
 
 // --[ STORE ]---------------------------------------------------------------------------
 /** The SIEM global store namespace where the management state will be mounted */

x-pack/plugins/security_solution/public/management/common/translations.ts

@@ -13,3 +13,7 @@ export const ENDPOINTS_TAB = i18n.translate('xpack.securitySolution.endpointsTab
 export const POLICIES_TAB = i18n.translate('xpack.securitySolution.policiesTab', {
   defaultMessage: 'Policies',
 });
+
+export const TRUSTED_APPS_TAB = i18n.translate('xpack.securitySolution.trustedAppsTab', {
+  defaultMessage: 'Trusted applications',
+});