[Security Solution] Changed landing page navigation

src/core/public/chrome/ui/header/collapsible_nav.tsx

@@ -89,7 +89,7 @@ const overviewIDsToHide = ['kibanaOverview', 'enterpriseSearch'];
 const overviewIDs = [
   ...overviewIDsToHide,
   'observability-overview',
-  'securitySolutionUI:overview',
+  'securitySolutionUI:get_started',
   'management',
 ];
 

x-pack/plugins/security_solution/public/app/deep_links/index.ts

@@ -97,7 +97,7 @@ export const securitySolutionsDeepLinks: SecuritySolutionDeepLink[] = [
     id: SecurityPageName.landing,
     title: GETTING_STARTED,
     path: LANDING_PATH,
-    navLinkStatus: AppNavLinkStatus.visible,
+    navLinkStatus: AppNavLinkStatus.hidden,
     features: [FEATURE.general],
     keywords: [
       i18n.translate('xpack.securitySolution.search.getStarted', {

x-pack/plugins/security_solution/public/app/home/home_navigations.ts

@@ -34,20 +34,20 @@ import {
 } from '../../../common/constants';
 
 export const navTabs: SecurityNav = {
-  [SecurityPageName.overview]: {
-    id: SecurityPageName.overview,
-    name: i18n.OVERVIEW,
-    href: APP_OVERVIEW_PATH,
-    disabled: false,
-    urlKey: 'overview',
-  },
   [SecurityPageName.landing]: {
     id: SecurityPageName.landing,
     name: i18n.GETTING_STARTED,
     href: APP_LANDING_PATH,
     disabled: false,
     urlKey: 'get_started',
   },
+  [SecurityPageName.overview]: {
+    id: SecurityPageName.overview,
+    name: i18n.OVERVIEW,
+    href: APP_OVERVIEW_PATH,
+    disabled: false,
+    urlKey: 'overview',
+  },
   [SecurityPageName.detectionAndResponse]: {
     id: SecurityPageName.detectionAndResponse,
     name: i18n.DETECTION_RESPONSE,

x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx

@@ -79,7 +79,9 @@ export const SecuritySolutionTemplateWrapper: React.FC<SecuritySolutionPageWrapp
 
     const userHasSecuritySolutionVisible = useKibana().services.application.capabilities.siem.show;
     const showEmptyState = useShowPagesWithEmptyView();
-    const emptyStateProps = showEmptyState ? NO_DATA_PAGE_TEMPLATE_PROPS : {};
+    const emptyStateProps = showEmptyState
+      ? { ...NO_DATA_PAGE_TEMPLATE_PROPS, template: 'centeredContent' }
+      : {};
 
     /*
      * StyledKibanaPageTemplate is a styled EuiPageTemplate. Security solution currently passes the header
@@ -101,21 +103,17 @@ export const SecuritySolutionTemplateWrapper: React.FC<SecuritySolutionPageWrapp
         template="default"
         {...emptyStateProps}
       >
-        {showEmptyState ? (
-          children
-        ) : (
-          <>
-            <GlobalKQLHeader />
-            <EuiPanel
-              className="securityPageWrapper"
-              data-test-subj="pageContainer"
-              hasShadow={false}
-              paddingSize="l"
-            >
-              {children}
-            </EuiPanel>
-          </>
-        )}
+        <>
+          <GlobalKQLHeader />
+          <EuiPanel
+            className="securityPageWrapper"
+            data-test-subj="pageContainer"
+            hasShadow={false}
+            paddingSize="l"
+          >
+            {children}
+          </EuiPanel>
+        </>
       </StyledKibanaPageTemplate>
     );
   });

x-pack/plugins/security_solution/public/overview/components/landing_cards/index.tsx → x-pack/plugins/security_solution/public/common/components/landing_cards/index.tsx

@@ -22,7 +22,7 @@ import endpointPng from '../../images/endpoint.png';
 import siemPng from '../../images/siem.png';
 import videoSvg from '../../images/video.svg';
 import { ADD_DATA_PATH } from '../../../../common/constants';
-import { useKibana } from '../../../common/lib/kibana';
+import { useKibana } from '../../lib/kibana';
 
 const imgUrls = {
   siem: siemPng,

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

@@ -0,0 +1,18 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { LandingPageComponent } from './index';
+
+describe('LandingPageComponent component', () => {
+  it('renders page properly', () => {
+    const EmptyComponent = shallow(<LandingPageComponent />);
+    expect(EmptyComponent).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,20 @@
+/*
+ * 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, { memo } from 'react';
+import { LandingCards } from '../landing_cards';
+import { SecuritySolutionPageWrapper } from '../page_wrapper';
+
+export const LandingPageComponent = memo(() => {
+  return (
+    <SecuritySolutionPageWrapper>
+      <LandingCards />
+    </SecuritySolutionPageWrapper>
+  );
+});
+
+LandingPageComponent.displayName = 'LandingPageComponent';

x-pack/plugins/security_solution/public/common/components/link_to/__mocks__/index.ts

@@ -8,7 +8,7 @@
 import { SecurityPageName } from '../../../../app/types';
 
 export { getDetectionEngineUrl } from '../redirect_to_detection_engine';
-export { getAppOverviewUrl } from '../redirect_to_overview';
+export { getAppLandingUrl } from '../redirect_to_landing';
 export { getHostDetailsUrl, getHostsUrl } from '../redirect_to_hosts';
 export { getNetworkUrl, getNetworkDetailsUrl } from '../redirect_to_network';
 export { getTimelineTabsUrl, getTimelineUrl } from '../redirect_to_timelines';

x-pack/plugins/security_solution/public/common/components/link_to/index.ts

@@ -14,7 +14,6 @@ import { SecurityNavKey } from '../navigation/types';
 import { SecurityPageName } from '../../../app/types';
 
 export { getDetectionEngineUrl, getRuleDetailsUrl } from './redirect_to_detection_engine';
-export { getAppOverviewUrl } from './redirect_to_overview';
 export { getHostDetailsUrl, getTabsOnHostDetailsUrl, getHostsUrl } from './redirect_to_hosts';
 export { getNetworkUrl, getNetworkDetailsUrl } from './redirect_to_network';
 export { getTimelineTabsUrl, getTimelineUrl } from './redirect_to_timelines';

x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_overview.tsx → x-pack/plugins/security_solution/public/common/components/link_to/redirect_to_landing.tsx

@@ -6,9 +6,5 @@
  */
 
 import { appendSearch } from './helpers';
-import { LANDING_PATH } from '../../../../common/constants';
 
-export const getAppOverviewUrl = (overviewPath: string, search?: string) =>
-  `${overviewPath}${appendSearch(search)}`;
-
-export const getAppLandingUrl = (search?: string) => `${LANDING_PATH}${appendSearch(search)}`;
+export const getAppLandingUrl = (path: string, search?: string) => `${path}${appendSearch(search)}`;

x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts

@@ -158,7 +158,7 @@ describe('Navigation Breadcrumbs', () => {
       );
       expect(breadcrumbs).toEqual([
         {
-          href: 'securitySolutionUI/overview',
+          href: 'securitySolutionUI/get_started',
           text: 'Security',
         },
         {
@@ -178,7 +178,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Network',
           href: "securitySolutionUI/network?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -196,7 +196,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Timelines',
           href: "securitySolutionUI/timelines?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -210,7 +210,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Hosts',
           href: "securitySolutionUI/hosts?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -229,7 +229,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Network',
           href: "securitySolutionUI/network?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -248,7 +248,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Network',
           href: "securitySolutionUI/network?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -267,7 +267,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Alerts',
           href: '',
@@ -281,7 +281,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Exceptions',
           href: '',
@@ -295,7 +295,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Rules',
           href: "securitySolutionUI/rules?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -309,7 +309,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Rules',
           href: "securitySolutionUI/rules?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -335,7 +335,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Rules',
           href: "securitySolutionUI/rules?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -361,7 +361,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Rules',
           href: "securitySolutionUI/rules?sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2019-05-16T23:10:43.696Z',fromStr:now-24h,kind:relative,to:'2019-05-17T23:10:43.697Z',toStr:now)))",
@@ -406,7 +406,7 @@ describe('Navigation Breadcrumbs', () => {
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
-        { text: 'Security', href: 'securitySolutionUI/overview' },
+        { text: 'Security', href: 'securitySolutionUI/get_started' },
         {
           text: 'Endpoints',
           href: '',
@@ -428,7 +428,7 @@ describe('Navigation Breadcrumbs', () => {
       expect(setBreadcrumbsMock).toBeCalledWith([
         expect.objectContaining({
           text: 'Security',
-          href: 'securitySolutionUI/overview',
+          href: 'securitySolutionUI/get_started',
           onClick: expect.any(Function),
         }),
         expect.objectContaining({

x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts

@@ -26,7 +26,7 @@ import {
   AdministrationRouteSpyState,
   UsersRouteSpyState,
 } from '../../../utils/route/types';
-import { getAppOverviewUrl } from '../../link_to';
+import { getAppLandingUrl } from '../../link_to/redirect_to_landing';
 import { timelineActions } from '../../../../../public/timelines/store/timeline';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { TabNavigationProps } from '../tab_navigation/types';
@@ -91,10 +91,11 @@ export const getBreadcrumbsForRoute = (
   getUrlForApp: GetUrlForApp
 ): ChromeBreadcrumb[] | null => {
   const spyState: RouteSpyState = omit('navTabs', object);
-  const overviewPath = getUrlForApp(APP_UI_ID, { deepLinkId: SecurityPageName.overview });
+  const landingPath = getUrlForApp(APP_UI_ID, { deepLinkId: SecurityPageName.landing });
+
   const siemRootBreadcrumb: ChromeBreadcrumb = {
     text: APP_NAME,
-    href: getAppOverviewUrl(overviewPath),
+    href: getAppLandingUrl(landingPath),
   };
   if (isHostsRoutes(spyState) && object.navTabs) {
     const tempNav: SearchNavTab = { urlKey: 'host', isDetailPage: false };

x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/index.test.tsx

@@ -115,16 +115,6 @@ describe('useSecuritySolutionNavigation', () => {
           Object {
             "id": "main",
             "items": Array [
-              Object {
-                "data-href": "securitySolutionUI/overview?query=(language:kuery,query:'host.name:%22security-solution-es%22')&sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)))",
-                "data-test-subj": "navigation-overview",
-                "disabled": false,
-                "href": "securitySolutionUI/overview?query=(language:kuery,query:'host.name:%22security-solution-es%22')&sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)))",
-                "id": "overview",
-                "isSelected": false,
-                "name": "Overview",
-                "onClick": [Function],
-              },
               Object {
                 "data-href": "securitySolutionUI/get_started?query=(language:kuery,query:'host.name:%22security-solution-es%22')&sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)))",
                 "data-test-subj": "navigation-get_started",
@@ -135,6 +125,16 @@ describe('useSecuritySolutionNavigation', () => {
                 "name": "Getting started",
                 "onClick": [Function],
               },
+              Object {
+                "data-href": "securitySolutionUI/overview?query=(language:kuery,query:'host.name:%22security-solution-es%22')&sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)))",
+                "data-test-subj": "navigation-overview",
+                "disabled": false,
+                "href": "securitySolutionUI/overview?query=(language:kuery,query:'host.name:%22security-solution-es%22')&sourcerer=()&timerange=(global:(linkTo:!(timeline),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)),timeline:(linkTo:!(global),timerange:(from:'2020-07-07T08:20:18.966Z',fromStr:now-24h,kind:relative,to:'2020-07-08T08:20:18.966Z',toStr:now)))",
+                "id": "overview",
+                "isSelected": false,
+                "name": "Overview",
+                "onClick": [Function],
+              },
             ],
             "name": "",
           },

x-pack/plugins/security_solution/public/common/components/navigation/use_security_solution_navigation/use_navigation_items.tsx

@@ -77,8 +77,8 @@ function usePrimaryNavigationItemsToDisplay(navTabs: Record<string, NavTab>) {
               id: 'main',
               name: '',
               items: [
-                navTabs[SecurityPageName.overview],
                 navTabs[SecurityPageName.landing],
+                navTabs[SecurityPageName.overview],
                 // Temporary check for detectionAndResponse while page is feature flagged
                 ...(navTabs[SecurityPageName.detectionAndResponse] != null
                   ? [navTabs[SecurityPageName.detectionAndResponse]]