[ENDPOINT] Reintroduced tabs to endpoint management and migrated pages to use common security components (#74886) (#75352)

* Reintroduced tabs to endpoint management and migrated pages to use common security components.

* Empty trusted apps tab.

* Changed casing in the translations.

* Switched to using route path generation functions.

* Added propagation of data-test-subj attribute to Wrapper component.

* Fixed CommonProps import.

* Moved out shared component for administration list page.

* Removed unused file.

* Removed unused translation keys.

* Removed redundant snapshot.

* Added some minimal tests.

* Attempt to fix functional tests.

* Attempt to fix functional tests again.

* Reverted function declarations back to const.

* Wrapped component in memo.

Author: efreeti

x-pack/plugins/security_solution/public/common/components/endpoint/__snapshots__/page_view.test.tsx.snap

@@ -7,14 +7,15 @@
 import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { CommonProps } from '@elastic/eui';
 
 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}`};
+  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,20 @@ 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,
+  ...otherProps
 }) => {
   const { globalFullScreen, setGlobalFullScreen } = useFullScreen();
   useEffect(() => {
@@ -59,6 +66,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,
@@ -73,7 +81,7 @@ const WrapperPageComponent: React.FC<WrapperPageProps> = ({
   }
 
   return (
-    <Wrapper className={classes} style={customStyle || style}>
+    <Wrapper className={classes} style={customStyle || style} {...otherProps}>
       {children}
       <AppGlobalStyle />
     </Wrapper>

x-pack/plugins/security_solution/public/common/components/endpoint/page_view.test.tsx

@@ -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/common/components/endpoint/page_view.tsx

@@ -13,6 +13,7 @@ import {
   MANAGEMENT_ROUTING_ENDPOINTS_PATH,
   MANAGEMENT_ROUTING_POLICIES_PATH,
   MANAGEMENT_ROUTING_POLICY_DETAILS_PATH,
+  MANAGEMENT_ROUTING_TRUSTED_APPS_PATH,
 } from './constants';
 import { AdministrationSubTab } from '../types';
 import { appendSearch } from '../../common/components/link_to/helpers';
@@ -72,13 +73,21 @@ export const getEndpointDetailsPath = (
   })}${appendSearch(`${urlQueryParams ? `${urlQueryParams}${urlSearch}` : urlSearch}`)}`;
 };
 
-export const getPoliciesPath = (search?: string) =>
-  `${generatePath(MANAGEMENT_ROUTING_POLICIES_PATH, {
+export const getPoliciesPath = (search?: string) => {
+  return `${generatePath(MANAGEMENT_ROUTING_POLICIES_PATH, {
     tabName: AdministrationSubTab.policies,
   })}${appendSearch(search)}`;
+};
 
-export const getPolicyDetailPath = (policyId: string, search?: string) =>
-  `${generatePath(MANAGEMENT_ROUTING_POLICY_DETAILS_PATH, {
+export const getPolicyDetailPath = (policyId: string, search?: string) => {
+  return `${generatePath(MANAGEMENT_ROUTING_POLICY_DETAILS_PATH, {
     tabName: AdministrationSubTab.policies,
     policyId,
   })}${appendSearch(search)}`;
+};
+
+export const getTrustedAppsListPath = (search?: string) => {
+  return `${generatePath(MANAGEMENT_ROUTING_TRUSTED_APPS_PATH, {
+    tabName: AdministrationSubTab.trustedApps,
+  })}${appendSearch(search)}`;
+};

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

@@ -13,3 +13,11 @@ 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',
+});
+
+export const BETA_BADGE_LABEL = i18n.translate('xpack.securitySolution.administration.list.beta', {
+  defaultMessage: 'Beta',
+});