Create Manage landing page

x-pack/plugins/security_solution/common/constants.ts

@@ -121,10 +121,12 @@ export enum SecurityPageName {
   usersExternalAlerts = 'users-external_alerts',
   threatHuntingLanding = 'threat-hunting',
   dashboardsLanding = 'dashboards',
+  manageLanding = 'manage',
 }
 
 export const THREAT_HUNTING_PATH = '/threat_hunting' as const;
 export const DASHBOARDS_PATH = '/dashboards' as const;
+export const MANAGE_PATH = '/manage' as const;
 export const TIMELINES_PATH = '/timelines' as const;
 export const CASES_PATH = '/cases' as const;
 export const OVERVIEW_PATH = '/overview' as const;

x-pack/plugins/security_solution/public/landing_pages/components/landing_links_icons.test.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { SecurityPageName } from '../../app/types';
+import { TestProviders } from '../../common/mock';
+import { LandingLinksIcons, NavItem } from './landing_links_icons';
+
+const DEFAULT_NAV_ITEM: NavItem = {
+  id: SecurityPageName.overview,
+  label: 'TEST LABEL',
+  description: 'TEST DESCRIPTION',
+  icon: 'myTestIcon',
+};
+
+const mockNavigateTo = jest.fn();
+jest.mock('../../common/lib/kibana', () => {
+  const originalModule = jest.requireActual('../../common/lib/kibana');
+  return {
+    ...originalModule,
+    useNavigation: () => ({
+      navigateTo: mockNavigateTo,
+    }),
+  };
+});
+
+jest.mock('../../common/components/link_to', () => {
+  const originalModule = jest.requireActual('../../common/components/link_to');
+  return {
+    ...originalModule,
+    useFormatUrl: (id: string) => ({
+      formatUrl: jest.fn().mockImplementation((path: string) => `/${id}`),
+      search: '',
+    }),
+  };
+});
+
+describe('LandingLinksIcons', () => {
+  it('renders', () => {
+    const label = 'test label';
+
+    const { queryByText } = render(
+      <TestProviders>
+        <LandingLinksIcons items={[{ ...DEFAULT_NAV_ITEM, label }]} />
+      </TestProviders>
+    );
+
+    expect(queryByText(label)).toBeInTheDocument();
+  });
+
+  it('renders navigation link', () => {
+    const id = SecurityPageName.administration;
+    const label = 'myTestLable';
+
+    const { getByText } = render(
+      <TestProviders>
+        <LandingLinksIcons items={[{ ...DEFAULT_NAV_ITEM, id, label }]} />
+      </TestProviders>
+    );
+
+    fireEvent.click(getByText(label));
+
+    expect(mockNavigateTo).toHaveBeenCalledWith({ url: '/administration' });
+  });
+});

x-pack/plugins/security_solution/public/landing_pages/components/landing_links_icons.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import {
+  EuiFlexGrid,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTitle,
+  IconType,
+} from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+import { SecurityPageName } from '../../app/types';
+import {
+  SecuritySolutionLinkAnchor,
+  withSecuritySolutionLink,
+} from '../../common/components/links';
+
+interface LandingLinksImagesProps {
+  items: NavItem[];
+}
+
+export interface NavItem {
+  id: SecurityPageName;
+  label: string;
+  icon: IconType;
+  description: string;
+  path?: string;
+}
+
+const Link = styled.a`
+  color: inherit;
+`;
+
+const SecuritySolutionLink = withSecuritySolutionLink(Link);
+
+const Description = styled(EuiFlexItem)`
+  max-width: 22em;
+`;
+
+const PrimatyEuiTitle = styled(EuiTitle)`
+  color: ${(props) => props.theme.eui.euiColorPrimary};
+
+  margin-top: ${({ theme }) => theme.eui.paddingSizes.m};
+  margin-bottom: ${({ theme }) => theme.eui.paddingSizes.xs};
+`;
+
+export const LandingLinksIcons: React.FC<LandingLinksImagesProps> = ({ items }) => (
+  <EuiFlexGrid columns={3} gutterSize="xl">
+    {items.map(({ label, description, path, id, icon }) => (
+      <EuiFlexItem key={id} data-test-subj="LandingItem">
+        <EuiFlexGroup
+          direction="column"
+          alignItems="flexStart"
+          gutterSize="none"
+          responsive={false}
+        >
+          <EuiFlexItem grow={false}>
+            <SecuritySolutionLink tabIndex={-1} deepLinkId={id} path={path}>
+              <EuiIcon aria-hidden="true" size="xl" type={icon} role="presentation" />
+            </SecuritySolutionLink>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <SecuritySolutionLinkAnchor deepLinkId={id} path={path}>
+              <PrimatyEuiTitle size="xxs">
+                <h2>{label}</h2>
+              </PrimatyEuiTitle>
+            </SecuritySolutionLinkAnchor>
+          </EuiFlexItem>
+          <Description>
+            <EuiText size="s" color="text">
+              {description}
+            </EuiText>
+          </Description>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    ))}
+  </EuiFlexGrid>
+);

x-pack/plugins/security_solution/public/landing_pages/components/landing_links_images.test.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { SecurityPageName } from '../../app/types';
 import { TestProviders } from '../../common/mock';
 import { LandingLinksImages, NavItem } from './landing_links_images';
-import { SCREENSHOT_IMAGE_ALT } from './translations';
 
 const DEFAULT_NAV_ITEM: NavItem = {
   id: SecurityPageName.overview,
@@ -32,7 +31,7 @@ jest.mock('../../common/lib/kibana/kibana_react', () => {
 });
 
 describe('LandingLinksImages', () => {
-  test('renders', () => {
+  it('renders', () => {
     const label = 'test label';
 
     const { queryByText } = render(
@@ -44,16 +43,16 @@ describe('LandingLinksImages', () => {
     expect(queryByText(label)).toBeInTheDocument();
   });
 
-  test('renders image', () => {
+  it('renders image', () => {
     const image = 'test_image.jpeg';
     const label = 'TEST_LABEL';
 
-    const { getByAltText } = render(
+    const { getByTestId } = render(
       <TestProviders>
         <LandingLinksImages items={[{ ...DEFAULT_NAV_ITEM, image, label }]} />
       </TestProviders>
     );
 
-    expect(getByAltText(SCREENSHOT_IMAGE_ALT(label))).toHaveAttribute('src', image);
+    expect(getByTestId('LandingLinksImage')).toHaveAttribute('src', image);
   });
 });

x-pack/plugins/security_solution/public/landing_pages/components/landing_links_images.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { SecurityPageName } from '../../app/types';
 import { withSecuritySolutionLink } from '../../common/components/links';
-import * as i18n from './translations';
 
 interface LandingLinksImagesProps {
   items: NavItem[];
@@ -49,13 +48,19 @@ const Content = styled(EuiFlexItem)`
 export const LandingLinksImages: React.FC<LandingLinksImagesProps> = ({ items }) => (
   <EuiFlexGroup direction="column">
     {items.map(({ label, description, path, image, id }) => (
-      <EuiFlexItem key={id}>
-        <SecuritySolutionLink deepLinkId={id} path={path}>
+      <EuiFlexItem key={id} data-test-subj="LandingItem">
+        <SecuritySolutionLink deepLinkId={id} path={path} tabIndex={-1}>
           {/* Empty onClick is to force hover style on `EuiPanel` */}
           <EuiPanel hasBorder hasShadow={false} paddingSize="m" onClick={() => {}}>
             <EuiFlexGroup>
               <StyledFlexItem grow={false}>
-                <EuiImage size="l" alt={i18n.SCREENSHOT_IMAGE_ALT(label)} src={image} />
+                <EuiImage
+                  data-test-subj="LandingLinksImage"
+                  size="l"
+                  role="presentation"
+                  alt=""
+                  src={image}
+                />
               </StyledFlexItem>
               <Content>
                 <PrimatyEuiTitle size="s">

x-pack/plugins/security_solution/public/landing_pages/icons/blocklist.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { SVGProps } from 'react';
+export const IconBlocklist: React.FC<SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 6.81635V12.0713C4 19.9353 8.697 26.8694 16 29.8403C23.303 26.8694 28 19.9353 28 12.0713V6.81635L16 2.20135L4 6.81635ZM16 31.9874L15.641 31.8493C7.354 28.6623 2 20.8983 2 12.0713V5.44335L16 0.0583496L30 5.44335V12.0713C30 20.8983 24.646 28.6623 16.359 31.8493L16 31.9874Z"
+      fill="#535766"
+    />
+    <path fillRule="evenodd" clipRule="evenodd" d="M11 23H13V18H11V23Z" fill="#00BFB3" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 14C11.448 14 11 13.552 11 13C11 12.448 11.448 12 12 12C12.552 12 13 12.448 13 13C13 13.552 12.552 14 12 14ZM13 10.185V7H11V10.185C9.839 10.599 9 11.698 9 13C9 14.654 10.346 16 12 16C13.654 16 15 14.654 15 13C15 11.698 14.161 10.599 13 10.185Z"
+      fill="#00BFB3"
+    />
+    <path fillRule="evenodd" clipRule="evenodd" d="M19 12H21V7H19V12Z" fill="#00BFB3" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20 18C19.448 18 19 17.552 19 17C19 16.448 19.448 16 20 16C20.552 16 21 16.448 21 17C21 17.552 20.552 18 20 18ZM23 17C23 15.346 21.654 14 20 14C18.346 14 17 15.346 17 17C17 18.302 17.839 19.401 19 19.815V23H21V19.815C22.161 19.401 23 18.302 23 17Z"
+      fill="#00BFB3"
+    />
+  </svg>
+);

x-pack/plugins/security_solution/public/landing_pages/icons/endpoint_policies.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { SVGProps } from 'react';
+export const IconEndpointPolicies: React.FC<SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 28.0001H14V19.5081L14.6 19.2461C17.88 17.8121 20 14.5751 20 11.0001C20 7.96306 18.471 5.17106 16 3.52106V11.0001H6V3.52106C3.529 5.17106 2 7.96306 2 11.0001C2 14.5751 4.12 17.8121 7.4 19.2461L8 19.5081V28.0001H6V20.7951C2.334 18.9241 0 15.1481 0 11.0001C0 6.63006 2.591 2.67406 6.6 0.922059L8 0.310059V9.00006H14V0.310059L15.4 0.922059C19.409 2.67406 22 6.63006 22 11.0001C22 15.1481 19.666 18.9241 16 20.7951V28.0001Z"
+      fill="#535766"
+    />
+  </svg>
+);

x-pack/plugins/security_solution/public/landing_pages/icons/endpoints.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { SVGProps } from 'react';
+export const IconEndpoints: React.FC<SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.74499 2.85648L15.1476 16.0026L14.8713 16.4933L7.7449 29.1484C5.89634 32.4299 1 31.078 1 27.3123V4.69299C1 0.927492 5.89616 -0.424721 7.74499 2.85648ZM3 27.3097C3 29.0366 5.17293 29.6366 6.0023 28.1643L12.8524 16.0001L6.00242 3.83547C5.17299 2.36345 3 2.96358 3 4.69043V27.3097Z"
+      fill="#535766"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.0122 31L17.6866 17H30.4824L29.5893 18.5093L23.903 28.1177C22.7586 29.9128 20.7657 31 18.6236 31H10.0122ZM22.1992 27.0709L26.975 19H18.8711L13.3893 29H18.6236C20.0841 29 21.4404 28.2602 22.1992 27.0709Z"
+      fill="#535766"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.1371 14L10.0125 1H18.6236C20.7657 1 22.7587 2.08715 23.9031 3.88232L30.3242 14H27.9554L22.2155 4.9557C21.4404 3.73981 20.0842 3 18.6236 3H13.3892L19.4177 14H17.1371Z"
+      fill="#00BFB3"
+    />
+  </svg>
+);

x-pack/plugins/security_solution/public/landing_pages/icons/event_filters.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { SVGProps } from 'react';
+export const IconEventFilters: React.FC<SVGProps<SVGSVGElement>> = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}
+  >
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M30 23H29C28.449 23 28 22.552 28 22V14C28 13.448 28.449 13 29 13H30V23ZM20 20V22C20 22.552 19.551 23 19 23H13C12.449 23 12 22.552 12 22V20H6V16H12V14C12 13.448 12.449 13 13 13H19C19.551 13 20 13.448 20 14V16H26V20H20ZM3 23H2V13H3C3.551 13 4 13.448 4 14V22C4 22.552 3.551 23 3 23ZM29 11C27.346 11 26 12.346 26 14H22C22 12.346 20.654 11 19 11H13C11.346 11 10 12.346 10 14H6C6 12.346 4.654 11 3 11H0V25H3C4.654 25 6 23.654 6 22H10C10 23.654 11.346 25 13 25H19C20.654 25 22 23.654 22 22H26C26 23.654 27.346 25 29 25H32V11H29Z"
+        fill="#535766"
+      />
+      <path fillRule="evenodd" clipRule="evenodd" d="M22 5H10V7H15V9H17V7H22V5Z" fill="#00BFB3" />
+    </svg>
+  </svg>
+);